<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>