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,
		watch,
		onUnmounted
	} from 'vue'

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

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

	const selectedExpress = ref('')

	// 监听弹框显示状态，控制底部 tabBar
	watch(() => props.visible, (newVal) => {
		if (newVal) {
			// 弹框打开：隐藏 tabBar（忽略失败回调，防止重复调用报错）
			uni.hideTabBar({
				fail: () => {}
			})
		} else {
			// 弹框关闭：显示 tabBar
			uni.showTabBar({
				fail: () => {}
			})
		}
	}, { immediate: true }) // immediate 确保组件初始化时如果 visible 为 true 也能正确隐藏

	// 组件卸载时恢复 tabBar 显示（避免状态残留）
	onUnmounted(() => {
		uni.showTabBar({
			fail: () => {}
		})
	})

	const selectExpress = (company) => {
		selectedExpress.value = company
	
		emit('select', company)
		emit('update:visible', false)
		// 延时关闭并传递选择结果
		setTimeout(() => {
			const url = encodeURIComponent(company == '京东' ? "https://www.jdl.com/" : "https://www.sf-express.com/chn/sc")
			uni.navigateTo({
				url: '/pages/webView/webView?title=个人寄件&url=' + url
			})
			selectedExpress.value = ''
		}, 50)
	}

	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>