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=item.mer_id">
					<view class="list-li-top">
						<view class="">
							<text>{{item.mer_name}}</text>
							<text v-if="index==0&&item.distance"
								style="background-color: #38BE41;color: white;font-size: 18rpx;margin-left: 24rpx;padding: 0 5rpx;">距离最近</text>
							<text v-if="item.distance" class="distance">步行{{item.distance}}</text>
						</view>
					</view>
					<view class="">
						{{item.mer_address||''}}
					</view>
					<view style="color: #999;">
						<text v-if="item.service_phone"
							@click.stop="onCall(item.service_phone)">{{item.mer_real_name||''}}
							{{ item.service_phone||'' }}</text>
					</view>
					<view class="check">
						<image style="width: 36rpx;height: 36rpx" v-if="addressType==item.mer_id"
							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>
		<!-- <modal title="是否要拨打电话" :content="`即将拨打电话${phone}`" cancleText="取消" confirmText="拨打" :show="callShow" @close="callShow = false"
      @change="onCall" /> -->
	</up-popup>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import modal from "@/components/modal.vue";

	const addressType = ref(-1)
	// const callShow = ref(false)
	// const phone = ref('');
	// const mer_real_name = (e) => {
	//   callShow.value = true;
	//   phone.value = e;
	// }
	const onCall = (e) => {
		uni.makePhoneCall({
			phoneNumber: e,
			success() {
				callShow.value = false
			}
		})
	}

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

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

	const submitAddress = () => {
		let e = props.list.find(item => item.mer_id == addressType.value);
		if (addressType.value <= 0 || !e) return uni.$u.toast('请选择提货点');
		emit('change', e);
	}

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

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

	const setCheck = (e) => {
		addressType.value = e;
	}
	defineExpose({
		setCheck
	})
</script>

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

		.head-title {
			font-weight: bold;
			text-align: center;
			margin-bottom: 20rpx;
			padding: 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>