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">
					<view class="swiper-item">
						<image class="swiper-img" :src="item.imageUrl" mode="aspectFill" />
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="btn-container">
			<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="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="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'

	const showDialog = ref(false)

	// 轮播图数据
	const swiperList = ref([])
	
	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
		})

		// 模拟跳转到下单页面
		setTimeout(() => {
			uni.showLoading({
				title: '正在跳转...'
			})

			setTimeout(() => {
				uni.hideLoading()
				// 实际跳转代码
				// uni.navigateTo({ 
				//   url: `/pages/order/create?company=${company}` 
				// })
			}, 800)
		}, 500)
	}

	const handleExpress = (company) => {
	  uni.navigateTo({ 
		    url: `/pages/order/create_order?product=${company}` 
		  })
		
		// 实际跳转代码
		// setTimeout(() => {
		//   uni.navigateTo({ 
		//     url: `/pages/order/create?company=${company}` 
		//   })
		// }, 1500)
	}
</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;
	}
	
	.btn-container{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			position: relative;
			top: -40rpx;
			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>