areaSelect.vue

<template>
    <view ew class="product-list">
        <view class="provice_city">
            <view class="text">
                <text>{{areaName.proviceName}}-</text>
                <text v-show="areaName.proviceName!=areaName.cityName">{{areaName.cityName}}-</text>
                <text>{{areaName.disName}}</text>
            </view>
            <view class="icon">
                <image :style="{'height':'100%','width':'100%'}"  :src="'../../../static/imgs/jiantouhei2.png'" />
            </view>
        </view>
        <div v-for="item in list" :key="item.id" @click="selectedShop(item)" class="shop_item" :class="shopId==item.id?'active':''">
            <div class="header">
                <view class="name">{{ item.name }}</view>
                <view class="adressBox">
                    <view class="map"><u-icon name="map" color="#999999" size="12"></u-icon></view>
                    <view class="address">{{ item.address }}</view>
                </view>
                <view class="timeBox">
                    <view class="clock"><u-icon name="clock" color="#999999" size="10"></u-icon></view>
                    <view class="time">{{ item.startTime }} - {{ item.endTime }}</view>
                </view>
            </div>
            <view class="line" />
            <div class="dec">
                <view :style="{'height':'34rpx'}" class="distance1" v-show="item.distance && item.distance!=-1"></view>
                <view class="goshop">去品尝</view>
                <view :style="{'height':'34rpx'}" class="distance" v-show="item.distance && item.distance!=-1">距离{{ item.distance }}</view>
            </div>
        </div>
    </view>
</template>

<script>
import { $EventBus } from '@/utils/EventBus';

export default {
    data() {
        return {
            show: true,
            columns: [],
            list: [],
            areaName:{},
			shopId:0
        }
    },
    onShow() {
		if(uni.getStorageSync('shopData')) {
			this.shopId = uni.getStorageSync('shopData').id;
		}
        this.list = uni.getStorageSync('shops');
        this.areaName = uni.getStorageSync('areaName')
    },
    methods: {
        selectedShop(item) {
            uni.setStorage({ key: 'shopData', data: item });
            uni.switchTab({ url: '/pages/menu/menu' })
            $EventBus.$emit('getMenuList', item);
        }
    },
}
</script>

<style lang="scss" scoped>
.product-list{
    background: #F2F2F2;
    height:100vh ;
    overflow: auto;
}

.provice_city{
    height: 62rpx;
    background: #FFFFFF;
    display: flex;
    justify-content: flex-start;
    padding: 12rpx 32rpx;
    align-items: center;
    .text{
        font-size: 26rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #000000;
        line-height: 36rpx;
    }
    .icon {
        width: 14rpx;
        margin-left: 16rpx;
		margin-top: 2rpx;
        height: 22rpx;
        display: flex;
        align-items: center;
    }
}
.active {
	border: 0.5px solid #003AE9;
}
.shop_item {
    width: 686rpx;
    background: #FFFFFF;
    padding: 40rpx 30rpx 40rpx 32rpx;
    box-sizing: border-box;
    margin: 32rpx 30rpx 32rpx 34rpx;
    display: flex;
    justify-content: 30rpx 30rpx flex-start;
    align-items: center;

    .header {
        margin-right: 32rpx;
        // border-right: 2rpx solid red;
        .name {
            font-size: 28rpx;
            height: 42rpx;
            line-height: 40rpx;
            width: 378rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
        }
        .adressBox {
            width: 378rpx;
            margin-top: 16rpx;
            display: flex;
            justify-content: flex-start;
			.map {
				// width: 24rpx;
				// height: 30rpx;
				// background-color: #000000;
				margin-top: 6rpx;
			}
            .address {
				// background-color: #000000;
                margin-left: 10rpx;
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
				line-height: 36rpx;
            }
        }
        .timeBox {
            margin-top: 16rpx;
            display: flex;
            align-items: center;
            justify-content: flex-start;
			.clock {
				// width: 24rpx;
				// height: 27rpx;
				// background-color: #000000;
				margin-top: -6rpx;
			}
            .time {
				padding-left: 4rpx;
				// background-color: #000000;
                margin-left: 10rpx;
				height: 34rpx;
                font-size: 24rpx;
                font-family: ArialMT;
                color: #999999;
				line-height: 28rpx;
            }
        }
    }
    .line {
        height: 172rpx;
        width: 1px;
        border-right: 1px solid #F4F4F4;
    }
    .dec {
        margin-left: 44rpx;
        display: flex;
        flex-direction: column;
        // height: 146rpx;
        view {
            vertical-align: baseline;
        }
        .goshop {
            width: 167rpx;
            height: 64rpx;
            background: #0050F6;
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            text-align: center;
            line-height: 64rpx;
        }

		.distance1,
        .distance {
			padding-top: 16rpx;
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            text-align: center;
            line-height: 34rpx;
        }
		.distance1 {
			padding-top: 0rpx;
			padding-bottom: 16rpx;
		}
     
    }
}
</style>