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.spotImage" class="shop-image" mode="aspectFill"></image>
					</view>
					<view class="center">
						<view class="shop-name">{{item.spotName}}</view>
						<view class="shop-address">
							<uv-icon name="map-fill" color="#019245" size="34rpx"></uv-icon>
							<text class="address-text"> {{ item.area }} {{ item.address }}{{item.area }}</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" />
		</view>
	</view>
</template>

<script>
	import navbar from '@/components/base/navbar.vue'
	import position from '@/utils/position.js'

	export default {
		components: {
			navbar
		},
		data() {
			return {
				pickupPoints: [],
				location: {
					latitude: 0,
					longitude: 0
				}
			}
		},
		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);
			}
		},
		finalPickupPoints() {
			// 算出一定范围内的取餐点
			const arr = this.pickupPoints.filter(item => position.calculateDistance(this.location.latitude, this.location.longitude, item.latitude, item.longitude) < 1000)

			console.log('算出一定范围内的取餐点', arr);

			// 根据近距离取餐点 进行排序
			this.pickupPoints = arr.sort((a, b) => position.calculateDistance(this.location.latitude, this.location.longitude, a.latitude, a.longitude) - position.calculateDistance(this.location.latitude, this.location.longitude, b.latitude, b.longitude))
			console.log('根据近距离取餐点 进行排序', this.pickupPoints);
		},
		onLoad() {
			this.$api('queryLeaderList', {}, res => {
				if (res.code == 200) {
					this.pickupPoints = res.result.records
				}
			})
			position.getLocation( res => {
				if (res.latitude && res.longitude) {
					this.location.latitude = res.latitude
					this.location.longitude = res.longitude
					this.finalPickupPoints()
				}
			})
		}
	}
</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>