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

<template>
	<view class="container">
		<!-- 上半部分：轮播图区域 -->
		<view class="top-section">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
				:circular="true" indicator-active-color="#1B64F0" indicator-color="rgba(255, 255, 255, 0.6)"
				indicator-class="swiper-indicator" active-class="swiper-indicator-active">
				<swiper-item v-for="(item, index) in swiperList" :key="index" @click="handleBannerClick(item)">
					<view class="swiper-item">
						<image class="swiper-img" :src="item.imageUrl" mode="aspectFill" />
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="search-section">
			<view class="search-input-wrapper">
				<image class="search-icon" src="@/static/img/search.png" />
				<input class="search-input" placeholder="请输入要查询的运单号" placeholder-class="placeholder-style"
					@focus="onInputFocus" @blur="onInputBlur" v-model="trackingNumber" />
				<view class="search-btn" @click="handleSearch">
					搜索
				</view>
			</view>

		</view>

		<view class="btn-container">

			<view class="btn-item" @click="handleExpress('1')">
				<image class="button-icon" src="/static/img/index-un-time.png" />
				<view class="button-right">
					<view class="button-title">瑞鲸速达(京东)</view>
					<view class="button-desc">下单当日取件</view>
				</view>
			</view>

			<!-- 		<view class="btn-item" @click="handleExpress('2')">
				<image class="button-icon" src="/static/img/index-time.png" />
				<view class="button-right">
					<view class="button-title">瑞鲸速达(顺丰)</view>
					<view class="button-desc">一小时下单取件</view>
				</view>

			</view> -->

			<view class="btn-item" @click="showExpressDialog">
				<image class="button-icon" src="/static/img/index-personal.png" />
				<view class="button-right">
					<view class="button-title">个人寄件</view>
					<view class="button-desc">支持顺丰和京东</view>
				</view>

			</view>

		</view>

		<!-- 使用 u-popup 弹框组件 -->
		<PersonalExpressDialog :visible="showDialog" @update:visible="showDialog = $event"
			@select="handleExpressSelect" />
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	// 导入 u-popup 弹框组件
	import PersonalExpressDialog from './components/PersonalExpressDialog.vue'
	import {
		bannerList
	} from '../../api/user'
	import {
		checkLoginShowModal,
		quickLogin
	} from "@/utils/util.js";

	const showDialog = ref(false)

	// 轮播图数据
	const swiperList = ref([])
	
	
	const trackingNumber = ref('')
	const isInputFocused = ref(false)

	onShow(() => {
		getBannerList()
	})

	const getBannerList = () => {
		bannerList().then(res => {
			if (res.code == 200) {
				swiperList.value = res.data
			}
		}, {})
	}

	const showExpressDialog = () => {
		console.log('显示个人寄件弹框')
		showDialog.value = true
	}

	const handleExpressSelect = (company) => {
		// uni.showToast({
		// 	title: `已选择${company}物流`,
		// 	icon: 'success',
		// 	duration: 1500
		// })
	}

	const handleExpress = async (company) => {
		if (!await checkLoginShowModal()) return;
		uni.navigateTo({
			url: `/pages/order/create_order?product=${company}`
		})
	}

	const handleBannerClick = (item) => {
		//  if (!item.linkUrl) {
		//    // uni.showToast({ title: '暂无跳转链接', icon: 'none' });
		//    return;
		//  }
		// if (item.linkUrl.startsWith('http://') || item.linkUrl.startsWith('https://')) {
		// uni.navigateTo({
		//   url: `/pages/webView/webView?url=${encodeURIComponent(item.linkUrl)}`
		// })
		//  } else {
		// uni.showToast({ title: '链接格式不支持', icon: 'none' })
		//  }
	};
	
	
	const onInputFocus = () => {
		isInputFocused.value = true
	}
	
	const onInputBlur = () => {
		isInputFocused.value = false
	}
	
	const handleSearch = async () => {
		if (!await checkLoginShowModal()) return;
		if (!trackingNumber.value.trim()) {
			uni.showToast({
				title: '请输入运单号',
				icon: 'none'
			})
			return
		}
		uni.navigateTo({
			url:'/pages/logistics/index?orderNo=' + trackingNumber.value.trim()
		})
		return
	}
	
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #F5F7FA;
	}

	.top-section {
		height: 563rpx;
		position: relative;
	}

	.swiper {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.swiper-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* 自定义指示点样式 - 通过定位调整位置 */
	/* 方法一：调整整个指示器容器的位置 */
	/* 注意：在不同平台可能需要使用不同的选择器 */
	/* 微信小程序 */
	::v-deep .wx-swiper-dots {
		bottom: 80rpx !important;
		/* 调整指示器容器的位置 */
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
	}

	/* H5平台 */
	::v-deep .uni-swiper-dots {
		bottom: 80rpx !important;
		/* 调整指示器容器的位置 */
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
	}

	/* 方法二：直接修改指示点样式，通过调整父容器样式 */
	.swiper-indicator {
		width: 8rpx !important;
		height: 8rpx !important;
		border-radius: 50% !important;
		background: rgba(255, 255, 255, 0.6) !important;
		margin: 0 4rpx !important;
	}

	.swiper-indicator-active {
		width: 32rpx !important;
		height: 8rpx !important;
		background: #1B64F0 !important;
		border-radius: 4rpx !important;
	}

	/* 方法三：如果上述方法都不生效，可以使用绝对定位自定义指示器 */
	.custom-indicator {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 80rpx;
		/* 调整指示器的垂直位置 */
		z-index: 10;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.custom-indicator-dot {
		width: 8rpx;
		height: 8rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.6);
		margin: 0 4rpx;
		transition: all 0.3s ease;
	}

	.custom-indicator-dot.active {
		width: 32rpx;
		height: 8rpx;
		background: #1B64F0;
		border-radius: 4rpx;
	}


	/* 搜索区域 */
	.search-section {
		position: relative;
		top: -40rpx;
		width: 100%;
		padding: 0 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.search-input-wrapper {
			width: 100%;
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 44rpx;
			font-size: 28rpx;
			color: #333;
			border: 4rpx solid #1B64F0;
			padding: 6rpx;
			display: flex;
			justify-content: center;
			justify-items: center;
			align-items: center;

			.search-icon {
				width: 40rpx;
				height: 40rpx;
				margin-left: 18rpx;
			}

			.search-input {
				flex: 1;
				margin-left: 8rpx;
				margin-right: 8rpx;
			}


			.placeholder-style {
				color: #999999;
			}

			.search-btn {
				width: 160rpx;
				height: 76rpx;
				background: #1B64F0;
				border-radius: 38rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 76rpx;
				text-align: center;
				font-style: normal;
			}

		}

	}

	.btn-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0rpx 20rpx;

		.btn-item {
			width: 339rpx;
			height: 172rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(27, 100, 240, 0.08), 0rpx 0rpx 8rpx 0rpx rgba(27, 100, 240, 0.08);
			border-radius: 32rpx;
			border: 2rpx solid #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx 0rpx 20rpx 20rpx;
			margin-bottom: 32rpx;

			.button-icon {
				width: 88rpx;
				height: 88rpx;
			}

			.button-right {
				display: flex;
				flex-direction: column;
				flex: 1;
				margin-left: 16rpx;

				.button-title {
					height: 48rpx;
					line-height: 48rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
					flex-shrink: 0;
				}

				.button-desc {
					height: 44rpx;
					line-height: 44rpx;
					font-size: 24rpx;
					color: #666;
					margin-top: 8rpx;
				}
			}
		}


	}
</style>