jd_logistics/jd_logistics-app/pages/index/components/PersonalExpressDialog.vue

<template>
	<!-- 使用 u-popup 组件 -->
	<u-popup :show="visible" mode="bottom" :round="30" :closeable="false" :closeOnClickOverlay="true"
		@close="handleClose">
		<view class="popup-content">
			<!-- 标题 -->
			<view class="popup-header">
				<text class="popup-title">个人寄件</text>
			</view>

			<!-- 物流选项 -->
			<view class="express-options">
				<!-- 顺丰选项 -->
				<view class="express-option sf-option" :class="{ 'selected': selectedExpress === '顺丰' }"
					@click="selectExpress('顺丰')">
					<image class="option-icon" src="/static/img/icon-logo-sf.png"
						mode="aspectFit" />
					<text class="option-text">顺丰物流</text>
					
				</view>

				<!-- 京东选项 -->
				<view class="express-option jd-option" :class="{ 'selected': selectedExpress === '京东' }"
					@click="selectExpress('京东')">
					<image class="option-icon" src="/static/img/icon-logo-jd.png"
						mode="aspectFit" />
					<text class="option-text">京东物流</text>
				</view>
			</view>

			<!-- 取消按钮 -->
			<view class="popup-footer">
				<button class="cancel-btn" @click="handleClose">取消</button>
			</view>
		</view>
	</u-popup>
</template>

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

	const props = defineProps({
		visible: {
			type: Boolean,
			default: false
		}
	})

	const emit = defineEmits(['update:visible', 'select'])

	const selectedExpress = ref('')

	const selectExpress = (company) => {
		selectedExpress.value = company

		// 延时关闭并传递选择结果
		setTimeout(() => {
			emit('select', company)
			emit('update:visible', false)
			selectedExpress.value = ''
		}, 300)
	}

	const handleClose = () => {
		selectedExpress.value = ''
		emit('update:visible', false)
	}
</script>

<style lang="scss" scoped>
	.popup-content {
		padding: 32rpx 16rpx 0rpx 16rpx;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}

	.popup-header {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 46rpx;
	}

	.popup-title {
		height: 52rpx;
		line-height: 52rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}


	.express-options {
		height: 204rpx;
		display: flex;
		justify-content: space-around;
	}

	.express-option {
		width: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		&.selected {
			width: 200rpx;
			height: 204rpx;
			background: #E9F0FF;
			border-radius: 32rpx;
			border: 2rpx solid #C1D5FF;
		}
		
		
		.option-icon {
			width: 88rpx;
			height: 88rpx;
			margin-bottom: 8rpx;
		}
		
		.option-text {
			font-size: 28rpx;
			font-weight: 500;
			color: #333;
		}
	}


	.popup-footer {
		margin-top: 44rpx;
		
		
		.cancel-btn {
			width: 100%;
			height: 88rpx;
			background: #E9F0FF;
			border-radius: 44rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #2361FF;
			line-height: 88rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		
		}
	}


	@keyframes popIn {
		0% {
			transform: scale(0);
		}

		70% {
			transform: scale(1.2);
		}

		100% {
			transform: scale(1);
		}
	}
</style>