feat: 优化开屏广告展示逻辑和交互效果

pages/index/index.vue

@@ -74,17 +74,33 @@
 		</view> -->
 		<loginPopup ref="loginRef" @loginSuccess="loginSuccess"></loginPopup>
 		<!-- 开屏广告 -->
-		<uni-popup ref="ADRef" type="center" :is-mask-click="false" maskBackgroundColor="rgba(0,0,0,0.7)">
+		<uni-popup ref="ADRef" type="center" :is-mask-click="false" maskBackgroundColor="rgba(0,0,0,0.7)" @change="handlePopupChange">
-			<view class="flex flex-col align-center justify-center" style="width: 630rpx;height: 61vh;">
+			<view class="ad-container">
-				<swiper class="swiper" style="width: 630rpx;height: 58vh;" circular :autoplay="true"
+				<swiper class="ad-swiper" 
-					:indicator-dots="true">
+					:circular="false"
-					<swiper-item v-for="(item,index) in ADList" :key="index">
+					:autoplay="false"
-						<image :src="item.bannerUrl" style="width: 630rpx;height: 50vh;border-radius: 30rpx;"
+					:duration="300"
-							@click="handleAD(item)">
+					:indicator-dots="true"
-						</image>
+					:indicator-color="'rgba(255,255,255,0.3)'"
+					:indicator-active-color="'#FFFFFF'"
+					@change="handleAdSwiperChange">
+					<swiper-item v-for="(item,index) in ADList" 
+						:key="index"
+						class="ad-swiper-item"
+						:class="{'active': currentAdIndex === index}"
+						@click="handleAD(item)">
+						<view class="ad-image-container">
+							<image :src="item.bannerUrl" 
+								class="ad-image" 
+								mode="aspectFill"
+								:lazy-load="true">
+							</image>
+						</view>
 					</swiper-item>
 				</swiper>
-				<text class="cuIcon-roundclose text-white" style="font-size: 68rpx !important;" @click="closeAd"></text>
+				<view class="ad-close" @click="closeAd">
+					<text class="cuIcon-roundclose"></text>
+				</view>
 			</view>
 		</uni-popup>
 	</view>
@@ -126,6 +142,7 @@
 				loading: false,
 				finished: false,
 				navItems: ['新酒上市', '生成酒单', '酒币换购', '关注厂牌'],
+				currentAdIndex: 0, // 当前广告索引
 			};
 		},
 		created() {
@@ -231,21 +248,28 @@
 						} else if (it.bannerType == 'homeBanner') { // 首页banner
 							this.homeBanner.push(it)
 						} 
-						
 					})
 					
-					let showHomeAD = uni.getStorageSync('showHomeAD')
+					// 检查是否需要显示开屏广告
-					if (!showHomeAD) {
+					this.checkShowAD()
-						
-						this.$refs.ADRef.open()
-						
-					}
-
 				})
 			},
+			// 检查是否需要显示开屏广告
+			checkShowAD() {
+				if (this.ADList.length === 0) return
+				
+				const currentSession = uni.getStorageSync('currentSession')
+				const newSession = Date.now()
+				
+				// 每次打开小程序都显示广告
+				if (!currentSession || currentSession !== newSession) {
+					this.$refs.ADRef.open()
+					// 记录本次会话时间
+					uni.setStorageSync('currentSession', newSession)
+				}
+			},
 			// 关闭广告
 			closeAd() {
-				uni.setStorageSync('showHomeAD', true)
 				this.$refs.ADRef.close()
 			},
 			handleAD(item) {
@@ -256,13 +280,6 @@
 					})
 				}
 			},
-			// 立即认证门店
-			toJoin() {
-				if (!this.bannerJoin) return
-				uni.navigateTo({
-					url: this.bannerJoin.bannerLink,
-				})
-			},
 			// 跳转专辑页
 			toFeaturePage(item) {
 				uni.navigateTo({
@@ -393,6 +410,12 @@
 					url: "/pagesActivity/activityDetail?id=" + item.id
 				})
 			},
+			handlePopupChange(e) {
+				this.currentAdIndex = e.detail.current;
+			},
+			handleAdSwiperChange(e) {
+				this.currentAdIndex = e.detail.current;
+			},
 		}
 	}
 </script>
@@ -692,4 +715,97 @@
 			background-position: 0 50%;
 		}
 	}
+
+	.ad-container {
+		position: relative;
+		width: 750rpx;
+		height: 70vh;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		animation: fadeIn 0.3s ease;
+		padding: 0 40rpx;
+		box-sizing: border-box;
+	}
+
+	.ad-swiper {
+		width: 100%;
+		height: 85%;
+		overflow: visible;
+	}
+
+	.ad-swiper-item {
+		box-sizing: border-box;
+		transition: all 0.3s ease;
+		transform: scale(0.85);
+		opacity: 0.6;
+		
+		&.active {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+
+	.ad-image-container {
+		width: 100%;
+		height: 100%;
+		position: relative;
+		border-radius: 30rpx;
+		overflow: hidden;
+		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
+	}
+
+	.ad-image {
+		width: 100%;
+		height: 100%;
+		border-radius: 30rpx;
+		will-change: transform;
+		backface-visibility: hidden;
+		transform: translateZ(0);
+	}
+
+	.ad-close {
+		margin-top: 40rpx;
+		width: 72rpx;
+		height: 72rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background: rgba(255, 255, 255, 0.15);
+		border-radius: 50%;
+		backdrop-filter: blur(10px);
+		transition: all 0.3s ease;
+		
+		.cuIcon-roundclose {
+			font-size: 44rpx;
+			color: #FFFFFF;
+			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
+		}
+		
+		&:active {
+			transform: scale(0.9);
+			opacity: 0.8;
+			background: rgba(255, 255, 255, 0.25);
+		}
+	}
+
+	/deep/ .uni-swiper-dots {
+		bottom: -20rpx !important;
+		
+		.uni-swiper-dot {
+			width: 12rpx !important;
+			height: 12rpx !important;
+			border-radius: 6rpx !important;
+			margin: 0 6rpx !important;
+			transition: all 0.3s ease !important;
+			background: rgba(255, 255, 255, 0.3) !important;
+			
+			&.uni-swiper-dot-active {
+				width: 28rpx !important;
+				background-color: #FFFFFF !important;
+				box-shadow: 0 2rpx 8rpx rgba(255, 255, 255, 0.3);
+			}
+		}
+	}
 </style>