areaSelect.vue

<template>
    <view ew class="product-list">
        <div v-for="item in list" :key="item.id" @click="selectedShop(item)" class="shop_item">
            <div class="header">
                <h3>{{ item.name }}</h3>
                <span>距离 {{ item.distance }}</span>
            </div>
            <div class="dec">
                <div class="address">{{ item.address }}</div>
                <a class="xaidan">去下单</a>
            </div>
            <div class="time">
                <u-icon name="clock" color="#2979ff" size="16"></u-icon>
                <div>营业时间：{{ item.startTime }} - {{ item.endTime }}</div>
            </div>
        </div>
    </view>
</template>

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

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

<style lang="scss" scoped>
.shop_item {
    width: 90%;
    height: 264rpx;
    background: #FFFFFF;
    border-radius: 10rpx;
    border: 2rpx solid #006ECF;
    padding: 32rpx;
    box-sizing: border-box;
    margin: 30rpx auto;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        h3 {
            font-size: 28rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #000000;
        }

        span {
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
        }
    }

    .dec {
        display: flex;
        justify-content: space-between;
        margin-top: 22rpx;

        .address {
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFa
        }

        .xaidan {
            font-size: 24rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            width: 150rpx;
			min-width: 150rpx;
            text-align: center;
            height: 40rpx;
            line-height: 40rpx;
            background: #006ECF;
            border-radius: 6px;
            display: block;
            margin-left: 20rpx;
        }
    }

    .time {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 20rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        margin-top: 30rpx;
    }
}
</style>