1

pages/index/index.vue

@@ -150,56 +150,34 @@
 								</view>
 								<view class="seckill-entry-btn">抢</view>
 							</view>
-							<view class="group-flat-row">
+							<swiper v-if="homeCenterAds.length > 4" class="group-flat-row group-flat-row--swiper"
-								<view class="flat-card" v-if="item.position == 'home_center_left_top' "
+								circular :autoplay="true" :interval="2600" :duration="500" :display-multiple-items="4"
-									v-for="(item,index) in mallAds" :key="index" @tap="goAdPage(item)">
+								:indicator-dots="false">
-									<view class="flat-card-img">
+								<swiper-item class="flat-card-swiper-item" v-for="(item,index) in homeCenterAds" :key="index">
-										<img :src="item.adDisplayImage" alt="">
+									<view class="flat-card" @tap="goAdPage(item)">
-										<view class="flat-card-tag">🔥 <text class="flat-card-origin-price">￥{{item.productList[0].originalPrice}}</text></view>
+										<view class="flat-card-img">
-									</view>
+											<img :src="item.adDisplayImage" alt="">
-									<view class="flat-card-name">{{item.title}}</view>
+											<view class="flat-card-tag">🔥 <text class="flat-card-origin-price">￥{{item.productList && item.productList[0] ? item.productList[0].originalPrice : ''}}</text></view>
-									<view class="flat-card-price">￥{{item.productList[0].groupPrice}}</view>
+										</view>
-									<view class="flat-card-foot">
+										<view class="flat-card-name">{{item.title}}</view>
-										<text>{{item.productList[0].groupMembers}}人团</text>
+										<view class="flat-card-price">￥{{item.productList && item.productList[0] ? item.productList[0].groupPrice : ''}}</view>
-										<view class="flat-card-btn">去拼</view>
+										<view class="flat-card-foot">
-									</view>
+											<text>{{item.productList && item.productList[0] ? item.productList[0].groupMembers : ''}}人团</text>
-								</view>
+											<view class="flat-card-btn">去拼</view>
-								<view class="flat-card" v-if="item.position == 'home_center_left_bottom' "
+										</view>
-									v-for="(item,index) in mallAds" :key="index" @tap="goAdPage(item)">
-									<view class="flat-card-img">
-										<img :src="item.adDisplayImage" alt="">
-										<view class="flat-card-tag">🔥 <text class="flat-card-origin-price">￥{{item.productList[0].originalPrice}}</text></view>
-									</view>
-									<view class="flat-card-name">{{item.title}}</view>
-									<view class="flat-card-price">￥{{item.productList[0].groupPrice}}</view>
-									<view class="flat-card-foot">
-										<text>{{item.productList[0].groupMembers}}人团</text>
-										<view class="flat-card-btn">去拼</view>
-									</view>
-								</view>
-								<view class="flat-card" v-if="item.position == 'home_center_right_top' "
-									v-for="(item,index) in mallAds" :key="index" @tap="goAdPage(item)">
-									<view class="flat-card-img">
-										<img :src="item.adDisplayImage" alt="">
-										<view class="flat-card-tag">🔥 <text class="flat-card-origin-price">￥{{item.productList[0].originalPrice}}</text></view>
-									</view>
-									<view class="flat-card-name">{{item.title}}</view>
-									<view class="flat-card-price">￥{{item.productList[0].groupPrice}}</view>
-									<view class="flat-card-foot">
-										<text>{{item.productList[0].groupMembers}}人团</text>
-										<view class="flat-card-btn">去拼</view>
 									</view>
-								</view>
+								</swiper-item>
-								<view class="flat-card" v-if="item.position == 'home_center_right_bottom' "
+							</swiper>
-									v-for="(item,index) in mallAds" :key="index" @tap="goAdPage(item)">
+							<view v-else class="group-flat-row">
+								<view class="flat-card" v-for="(item,index) in homeCenterAds" :key="index" @tap="goAdPage(item)">
 									<view class="flat-card-img">
 										<img :src="item.adDisplayImage" alt="">
-										<view class="flat-card-tag">🔥 <text class="flat-card-origin-price">￥{{item.productList[0].originalPrice}}</text></view>
+										<view class="flat-card-tag">🔥 <text class="flat-card-origin-price">￥{{item.productList && item.productList[0] ? item.productList[0].originalPrice : ''}}</text></view>
 									</view>
 									<view class="flat-card-name">{{item.title}}</view>
-									<view class="flat-card-price">￥{{item.productList[0].groupPrice}}</view>
+									<view class="flat-card-price">￥{{item.productList && item.productList[0] ? item.productList[0].groupPrice : ''}}</view>
 									<view class="flat-card-foot">
-										<text>{{item.productList[0].groupMembers}}人团</text>
+										<text>{{item.productList && item.productList[0] ? item.productList[0].groupMembers : ''}}人团</text>
 										<view class="flat-card-btn">去拼</view>
 									</view>
 								</view>
@@ -495,6 +473,14 @@
 				</scroll-view>
 			</view>
 		</uni-popup>
+		<uni-popup ref="homePopupAdPopup" class="home-popup-layer home-ad-popup-layer" type="center" :is-mask-click="true" background-color="transparent">
+			<view class="home-ad-popup-card">
+				<view class="home-ad-popup-glow home-ad-popup-glow-a"></view>
+				<view class="home-ad-popup-glow home-ad-popup-glow-b"></view>
+				<view class="home-ad-popup-close" @tap.stop="closeHomePopupAd">x</view>
+				<image class="home-ad-popup-image" :src="homePopupAd.adDisplayImage || homePopupAd.adImage" mode="aspectFit" @tap.stop="noop"></image>
+			</view>
+		</uni-popup>
 		<uni-popup ref="productPopup" class="home-popup-layer" background-color="transparent">
 			<view class="product-popup-content">
 				<view class="product-popup-header">
@@ -549,6 +535,7 @@
 	import { resolveHomeShareTarget, normalizeShareTargetPath } from '@/utils/sharePath.js'
 
 	const HOME_AD_IMAGE_CACHE_KEY = 'home_ad_image_cache_v1'
+	const HOME_POPUP_AD_SHOWN_KEY_PREFIX = 'home_popup_ad_shown_v1'
 	const HOME_AD_IMAGE_CACHE_TTL = 30 * 24 * 60 * 60 * 1000
 	const HOME_AD_IMAGE_CACHE_LIMIT = 40
 	const homeAdImageDownloading = {}
@@ -678,6 +665,7 @@
 				indicatorDots: false,
 				autoplay: true,
 				mallAds: [],
+				homePopupAd: {},
 				deliveryItem: [],
 				rejectOrderSubmittingMap: {},
 				interval: 4000,
@@ -723,7 +711,7 @@
 					pageSize:10,
 					getAreaId: '',
 					putAreaId: '',
-					paths: ['home_top', 'home_center_left_top', 'home_center_left_bottom', 'home_center_right_top',
+					paths: ['home_top', 'home_center', 'home_center_left_top', 'home_center_left_bottom', 'home_center_right_top',
 						'home_center_right_bottom'
 					],
 					order: '',
@@ -794,6 +782,16 @@
 					return title.indexOf(keyword) > -1
 				})
 			},
+			homeCenterAds() {
+				return (this.mallAds || [])
+					.filter(item => item && item.position != 'home_top' && item.position != 'home_popup')
+					.slice()
+					.sort((a, b) => {
+						const aSort = a.sortOrder === undefined || a.sortOrder === null ? Number.MAX_SAFE_INTEGER : Number(a.sortOrder)
+						const bSort = b.sortOrder === undefined || b.sortOrder === null ? Number.MAX_SAFE_INTEGER : Number(b.sortOrder)
+						return aSort - bSort
+					})
+			},
 			planetHasReminder() {
 				return !!(this.homeReminders && this.homeReminders.planet)
 			},
@@ -1493,6 +1491,45 @@
 				}
 				return normalized
 			},
+			getTodayKey() {
+				const now = new Date()
+				const month = String(now.getMonth() + 1).padStart(2, '0')
+				const day = String(now.getDate()).padStart(2, '0')
+				return now.getFullYear() + '-' + month + '-' + day
+			},
+			getHomePopupAdShownKey() {
+				const userId = uni.getStorageSync('id') || 'guest'
+				return HOME_POPUP_AD_SHOWN_KEY_PREFIX + '_' + userId + '_' + this.getTodayKey()
+			},
+			isHomePopupAdShownToday() {
+				return !!uni.getStorageSync(this.getHomePopupAdShownKey())
+			},
+			markHomePopupAdShownToday() {
+				uni.setStorageSync(this.getHomePopupAdShownKey(), true)
+			},
+			handleHomePopupAd(ad) {
+				if (!ad || !ad.adImage) return
+				const imageUrl = this.normalizeAdImageUrl(ad.adImage)
+				if (!imageUrl || this.isHomePopupAdShownToday()) return
+				this.homePopupAd = {
+					...ad,
+					adImage: imageUrl,
+					adDisplayImage: imageUrl
+				}
+				this.markHomePopupAdShownToday()
+				this.$nextTick(() => {
+					setTimeout(() => {
+						if (this.$refs.homePopupAdPopup && this.$refs.homePopupAdPopup.open) {
+							this.$refs.homePopupAdPopup.open()
+						}
+					}, 180)
+				})
+			},
+			closeHomePopupAd() {
+				if (this.$refs.homePopupAdPopup && this.$refs.homePopupAdPopup.close) {
+					this.$refs.homePopupAdPopup.close()
+				}
+			},
 			getHomeAdImageCache() {
 				const cache = uni.getStorageSync(HOME_AD_IMAGE_CACHE_KEY)
 				return cache && typeof cache === 'object' ? cache : {}
@@ -1724,6 +1761,7 @@
 					that.loadStatus = 'nomore';
 					if (res.code == 200) {
 						that.homeReminders = res.result.homeReminders || {}
+						that.handleHomePopupAd(res.result.homePopupAd)
 						that.mallAds = res.result.mallAds || []
 						that.applyCachedAdImages(that.mallAds)
 						for(let i=0;i<that.mallAds.length;i++){
@@ -2121,6 +2159,78 @@
 		z-index: 1200 !important;
 	}
 
+	.home-ad-popup-layer {
+		z-index: 1300 !important;
+	}
+
+	.home-ad-popup-card {
+		position: relative;
+		box-sizing: border-box;
+		width: 660rpx;
+		max-width: 88vw;
+		padding: 22rpx;
+		border: 1rpx solid rgba(255, 255, 255, 0.82);
+		border-radius: 38rpx;
+		background:
+			linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(238, 255, 248, 0.94)),
+			radial-gradient(circle at 18% 10%, rgba(255, 231, 163, 0.46), rgba(255, 231, 163, 0) 260rpx);
+		box-shadow: 0 30rpx 90rpx rgba(0, 34, 29, 0.24);
+		overflow: visible;
+	}
+
+	.home-ad-popup-glow {
+		position: absolute;
+		border-radius: 999rpx;
+		filter: blur(6rpx);
+		pointer-events: none;
+	}
+
+	.home-ad-popup-glow-a {
+		top: -42rpx;
+		left: 40rpx;
+		width: 150rpx;
+		height: 150rpx;
+		background: rgba(166, 255, 234, 0.46);
+	}
+
+	.home-ad-popup-glow-b {
+		right: 18rpx;
+		bottom: -46rpx;
+		width: 180rpx;
+		height: 180rpx;
+		background: rgba(255, 218, 142, 0.42);
+	}
+
+	.home-ad-popup-close {
+		position: absolute;
+		top: -24rpx;
+		right: -18rpx;
+		z-index: 3;
+		width: 58rpx;
+		height: 58rpx;
+		border: 4rpx solid rgba(255, 255, 255, 0.96);
+		border-radius: 50%;
+		background: rgba(17, 46, 41, 0.88);
+		box-shadow: 0 12rpx 30rpx rgba(0, 0, 0, 0.18);
+		color: #fff;
+		font-size: 34rpx;
+		font-weight: 700;
+		line-height: 50rpx;
+		text-align: center;
+	}
+
+	.home-ad-popup-image {
+		position: relative;
+		z-index: 2;
+		display: block;
+		width: 616rpx;
+		max-width: calc(88vw - 44rpx);
+		height: 760rpx;
+		max-height: 70vh;
+		border-radius: 28rpx;
+		background: rgba(245, 250, 247, 0.9);
+	}
+
 	.swiper {
 		width: 100%;
 		height: 440rpx;
@@ -3292,15 +3402,29 @@
 		position: absolute;
 		left: 8rpx;
 		right: 8rpx;
-		top: 84rpx;
+		top: 76rpx;
-		bottom: 20rpx;
+		bottom: 6rpx;
 		display: flex;
 		z-index: 3;
 	}
 
+	.group-flat-row--swiper {
+		display: block;
+		height: 310rpx;
+		bottom: auto;
+	}
+
+	.flat-card-swiper-item {
+		display: flex;
+		height: 318rpx;
+		margin-top: 10rpx;
+		box-sizing: border-box;
+	}
+
 	.flat-card {
 		flex: 1;
 		min-width: 0;
+		height: 95%;
 		margin: 0 6rpx;
 		padding: 12rpx 12rpx 16rpx;
 		box-sizing: border-box;