teambuy-front/pages_order/location/pickupPoint.vue

<template>
    <view class="page">
        <!-- 导航栏 -->
        <navbar title="取餐点" leftClick @leftClick="$utils.navigateBack" color="#fff" />

        <view class="container">
            <view class="header">
                <view class="title">附近取餐点</view>
            </view>

            <!-- 取餐点列表 -->
            <view class="pickup-list">
                <view class="pickup-item" v-for="(item, index) in pickupPoints" :key="index">
                    <view class="left">
                        <image :src="item.image" class="shop-image" mode="aspectFill"></image>
                    </view>
                    <view class="center">
                        <view class="shop-name">{{item.name}}</view>
                        <view class="shop-address">
                            <uv-icon name="map-fill" color="#019245" size="34rpx"></uv-icon>
                            <text class="address-text">{{item.address}}</text>
                        </view>
                        <view class="shop-phone">
                            <uv-icon name="phone-fill" color="#019245" size="34rpx"></uv-icon>
                            <text class="phone-text">{{item.phone}}</text>
                        </view>
                    </view>
                    <view class="right">
                        <button class="select-btn" hover-class="select-btn-active" @tap="selectPoint(item)">选择</button>
                    </view>
                </view>
            </view>

            <!-- 无数据提示 -->
            <uv-empty v-if="pickupPoints.length === 0" text="暂无取餐点" mode="list"></uv-empty>
        </view>
    </view>
</template>

<script>
	import navbar from '@/components/base/navbar.vue'
	
	export default {
		components: {
			navbar
		},
		data() {
			return {
				pickupPoints: [
					{
						id: '1',
						name: '轻奢时代芙蓉兴盛',
						address: '长沙市雨花区时代阳光大道轻奢时代芙蓉兴盛',
						phone: '15070023168',
						image: '/static/image/古茗店面.webp'
					},
					{
						id: '2',
						name: '芙蓉兴盛小文轩便利店',
						address: '长沙市芙蓉区牛津街7栋102',
						phone: '15070023168',
                        image: '/static/image/古茗店面.webp'
					}
				]
			}
		},
		methods: {
			// 选择取餐点
			selectPoint(point) {
				// 将选择的取餐点信息存储到 store 或 storage 中
				uni.setStorageSync('selectedPickupPoint', JSON.stringify(point));
				
				// 通知上一页面已选择取餐点，并返回
				// const pages = getCurrentPages();
				// const prevPage = pages[pages.length - 2];
				// if (prevPage) {
				// 	// 如果需要可以设置上一页的数据
				// 	prevPage.$vm.pickupPoint = point;
				// }
				
                uni.$emit('updatePickupPoint', point);
                

				uni.showToast({
					title: '已选择取餐点',
					icon: 'success',
					duration: 400
				});
				
				setTimeout(() => {
					// uni.navigateBack();  
                    this.$utils.navigateBack()
				}, 800);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.container {
		padding: 0 20rpx;
	}
	
	.header {
		margin-top: 20rpx;
		background-color: #f2f2f2;
		border-radius: 8rpx;
		
		.title {
			font-size: 32rpx;
			// font-weight: bold;
			padding: 20rpx;
		}
	}
	
	.pickup-list {
		margin-top: 20rpx;
		
		.pickup-item {
			display: flex;
			background-color: #fff;
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 8rpx;
			
			.left {
				width: 160rpx;
				height: 160rpx;
				margin-right: 20rpx;
				
				.shop-image {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
			}
			
			.center {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				// gap: 8rpx;
				.shop-name {
					font-size: 32rpx;
					// font-weight: bold;
					margin-bottom: 10rpx;
				}
				
				.shop-address, .shop-phone {
					font-size: 24rpx;
					color: #999;
					display: flex;
					align-items: start;
					margin-bottom: 6rpx;
                    gap: 8rpx;
                    width: 90%;
				}
			}
			
			.right {
				width: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.select-btn {
					width: 90rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					background-color: $uni-color;
					color: #fff;
					font-size: 24rpx;
					border-radius: 12rpx;
                    padding: 0;
				}
                .select-btn-active {
                    background-color: #106035;
                }
			}
		}
	}
</style>