purchase-let/components/shopListPopup.vue

<template>
	<up-popup :show="show" closeable round="10" @close="close">
		<view class="address-popup">
			<view class="head-title">提货点</view>
			<view class="list-admin">
				<up-search placeholder="请输入提货点名称" @search="searchKeyword" v-model="keyword"
					@custom="searchKeyword"></up-search>
			</view>
			<scroll-view style="height: 600rpx;padding-bottom: 20rpx;" scroll-y>
				<view class="list-li border" v-for="(item,index) in list" :key="index" @click="addressType=index">
					<view class="list-li-top">
						<view class="">
							<text>{{item.mer_name}}</text>
							<text v-if="index==0"
								style="background-color: #38BE41;color: white;font-size: 18rpx;margin-left: 24rpx;padding: 0 5rpx;">距离最近</text>
							<text class="distance">步行{{item.distance}}</text>
						</view>
					</view>
					<view class="">
						{{item.mer_address||'sdsd'}}
					</view>
					<view class="check">
						<image style="width: 36rpx;height: 36rpx" v-if="addressType==index"
							src="@/static/icon/check.png">
						</image>
						<image style="width: 36rpx;height: 36rpx" v-else src="@/static/icon/n-check.png"></image>
					</view>
				</view>
			</scroll-view>
			<up-button color="#20B128" shape="circle" @click="submitAddress">确认自点</up-button>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		ref
	} from "vue"

	const addressType = ref(-1)

	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		list: {
			type: Array,
			default: () => []
		}
	})

	const emit = defineEmits(['close', 'change', 'search']);
	const close = () => {
		emit('close');
	}

	const submitAddress = () => {
		emit('change', props.list[addressType.value]);
	}

	const keyword = ref('')
	const searchKeyword = () => {
		emit('search', keyword.value);
	}

	const navTo = (url) => {
		uni.navigateTo({
			url: url
		})
	}
</script>

<style scoped lang="scss">
	.address-popup {
		padding: 30rpx;

		.head-title {
			font-weight: bold;
			text-align: center;
			margin-bottom: 20rpx;
		}

		.list-admin {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.admin-btn {
				display: flex;
				color: #20B128;

				.btn {
					margin-left: 20rpx;
					display: flex;
					align-items: center;

					&:active {
						color: rgba(#20B128, 0.8);
						transition: background-color 0.5s;
						animation: disappear 0.5s 0.5s forwards;
					}
				}
			}
		}

		.row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #f6f6f6;
			margin-bottom: 20rpx;

			&:last-child {
				border-bottom: none;
				margin-bottom: 0;
			}

			.content {
				.top {
					display: flex;

					view {
						margin-right: 20rpx;
					}
				}

				.bottom {}
			}

			image {
				width: 40rpx;
				height: 40rpx;
				flex-shrink: 0;
			}
		}
	}

	.border {
		border-bottom: 1px solid #F3F3F3;
	}

	.list-li {
		padding: 30rpx 0;
		font-size: 24rpx;
		position: relative;

		.list-li-top {
			display: flex;
			justify-content: space-between;
			margin-bottom: 10rpx;
			font-size: 30rpx;
		}

		.distance {
			border: 1px solid #40AE36;
			font-size: 18rpx;
			color: #40AE36;
			margin-left: 20rpx;
			padding: 0 5rpx;
		}

		.check {
			position: absolute;
			right: 20rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	@keyframes disappear {
		to {
			opacity: 0;
			/* 渐隐 */
			transform: scale(0);
			/* 缩小 */
		}
	}
</style>