blame | 历史 | 补丁 | 提交 | 提交对比
Jacob
1 天以前 106fc09e267f67bb35a279ed1bf71068a61e73c4 
 pages/zone/index.vue
....@@ -20,8 +20,9 @@
2020 		<view v-else>
2121 			<view class="expireTime" v-if="expireTime && expireTime.length">
2222 				<text>专区将在</text>
23
-				<text v-for="(val, index) in expireTime" :key="index">
24
-					<text class="num">{{ val }}</text>{{ expireTimeUnit[index] }}
23
+				<text v-for="(item, index) in expireTime" :key="index">
24
+					<text class="num"><text v-for="(char, ci) in item.digits" :key="ci"
25
+							class="digit">{{ char }}</text></text>{{ item.unit }}
2526 				</text>
2627 				<text>{{ startOrEnd }}</text>
2728 			</view>
....@@ -88,9 +89,10 @@
8889 					</view>
8990 				</view>
9091 			</view>
91
-			<view @click="goLottery" class="lottery_banner" v-if="info && info.isLottery">
92
-				<image class="lottery_bannerImg"
93
-					src="https://ossacmall.bluedeer.com.cn/app/static/images/zone_lotteryBanner.gif" mode="widthFix">
92
+			<view @click="goLottery" class="lottery_banner"
93
+				v-if="info && info.isLottery && info.lotteryBanner && lotteryBannerReady">
94
+				<image class="lottery_bannerImg" :src="info.lotteryBanner" mode="widthFix"
95
+					:style="{ height: lotteryBannerHeight }">
9496 				</image>
9597 			</view>
9698 			<view class="tag-img-container" v-if="info.zoneType == 7">
....@@ -607,7 +609,7 @@
607609 			showMenu: false,
608610 			selectedMenuArr: [],
609611 			expireTime: [],
610
-			expireTimeUnit: [],
612
+			countdownToken: 0,
611613 			isPageShow: false,
612614 			loginBackFn: null,
613615 			errText: '',
....@@ -642,6 +644,8 @@
642644 			stockEmpty: true,
643645 			urlOption: {},
644646 			homeTop: '200',
647
+			lotteryBannerHeight: '', //抽奖banner预计算高度（rpx），空字符串表示未取到，按原逻辑自适应
648
+			lotteryBannerReady: false, //是否已拿到banner尺寸（或已确认拿不到），未就绪前不渲染，避免首帧撑高
645649 			hasNewPop: false,
646650 			leftCoupon: {},
647651 			rightCoupon: {},
....@@ -1327,6 +1331,9 @@
13271331 			})
13281332 		},
13291333 		validAlert(data) {
1334
+			// 每次重新计算前作废旧的倒计时链，避免多条定时器同时刷新导致数字跳动
1335
+			this.countdownToken++
1336
+			const token = this.countdownToken
13301337 			const {
13311338 				startTime,
13321339 				expireTime
....@@ -1345,17 +1352,17 @@
13451352 					let minutes = startTimetamp.getMinutes()
13461353 					minutes = minutes < 10 ? '0' + minutes : minutes;
13471354 
1348
-					this.countdownTimer(startTime.split('-').join('/'), 'start')
1355
+					this.countdownTimer(startTime.split('-').join('/'), 'start', token)
13491356 					this.startOrEnd = "后开启"
13501357 					return
1351
-				}
1352
-			}
1353
-			if (expireTime) {
1354
-				const expireTimetamp = new Date(expireTime.split('-').join('/')).getTime();
1355
-				if (expireTimetamp < nowTimestamp) {
1358
+					}
1359
+					}
1360
+					if (expireTime) {
1361
+					const expireTimetamp = new Date(expireTime.split('-').join('/')).getTime();
1362
+					if (expireTimetamp < nowTimestamp) {
13561363 					return
1357
-				}
1358
-				this.countdownTimer(expireTime.split('-').join('/'), 'end')
1364
+					}
1365
+					this.countdownTimer(expireTime.split('-').join('/'), 'end', token)
13591366 				this.startOrEnd = "后结束"
13601367 			}
13611368 		},
....@@ -1477,6 +1484,29 @@
14771484 				this.$refs.popNewuserRef.show()
14781485 			}
14791486 		},
1487
+		// 预取抽奖banner真实宽高，计算出高度后再渲染，避免加载前被组件默认高度(225px)撑大
1488
+		setLotteryBannerSize(info) {
1489
+			let that = this
1490
+			that.lotteryBannerHeight = ''
1491
+			that.lotteryBannerReady = false
1492
+			if (!info || !info.isLottery || !info.lotteryBanner) {
1493
+				that.lotteryBannerReady = true
1494
+				return
1495
+			}
1496
+			uni.getImageInfo({
1497
+				src: info.lotteryBanner,
1498
+				success: (img) => {
1499
+					if (img.width > 0 && img.height > 0) {
1500
+						that.lotteryBannerHeight = (690 * img.height / img.width).toFixed(2) + 'rpx'
1501
+					}
1502
+					that.lotteryBannerReady = true
1503
+				},
1504
+				fail: (err) => {
1505
+					console.warn('抽奖banner尺寸预取失败，回退为自适应', err)
1506
+					that.lotteryBannerReady = true
1507
+				}
1508
+			})
1509
+		},
14801510 		getZoneDetail: function () {
14811511 			let that = this;
14821512 			let belong = this.$store.getters.belong;
....@@ -1484,7 +1514,7 @@
14841514 			console.log('专区详情入参：：', params)
14851515 			getZoneDetail(that.id, params).then(res => {
14861516 				that.info = res.data;
1487
-				//that.info.zoneType=8;
1517
+				that.setLotteryBannerSize(res.data);
14881518 				that.updateZoneShareMenu();
14891519 				if (res.data.zoneType == 6) {
14901520 					that.setYueyangZone()
....@@ -1494,7 +1524,7 @@
14941524 						that.homeTop = that.getHomeTop(0.4)
14951525 					}
14961526 					that.expireTime = [];
1497
-					that.expireTimeUnit = [];
1527
+					that.countdownToken++;
14981528 					that.where.page = 1;
14991529 					that.getGoodList()
15001530 					that.validAlert(res.data)
....@@ -1520,8 +1550,9 @@
15201550 				}
15211551 			});
15221552 		},
1523
-		countdownTimer(expireTime, type) {
1553
+		countdownTimer(expireTime, type, token) {
15241554 			if (!expireTime) return
1555
+			if (token !== undefined && token !== this.countdownToken) return
15251556 			let that = this;
15261557 			// 结束时间的时间戳（需传入一个有效的日期对象或时间戳）
15271558 			const endTimestamp = new Date(expireTime).getTime();
....@@ -1533,56 +1564,56 @@
15331564 			if (type == 'end') {
15341565 				if (diff <= 0) {
15351566 					this.expireTime = []
1536
-					this.expireTimeUnit = []
15371567 					return
15381568 				} else { }
15391569 			} else if (type == 'start') {
15401570 				if (diff <= 0) {
15411571 					this.expireTime = []
1542
-					this.expireTimeUnit = []
15431572 					const expireTime2 = that.info.expireTime
15441573 					if (expireTime2) {
15451574 						const expireTimetamp = new Date(expireTime2.split('-').join('/')).getTime();
15461575 						if (expireTimetamp < nowTimestamp) {
15471576 							return
15481577 						}
1549
-						this.countdownTimer(expireTime2.split('-').join('/'), 'end')
1578
+						this.countdownTimer(expireTime2.split('-').join('/'), 'end', token)
15501579 						this.startOrEnd = "后结束"
15511580 					}
15521581 					return
15531582 				}
15541583 			}
1584
+			const pad = num => (num < 10 ? '0' + num : String(num))
15551585 			const res = []
1556
-			const unit = []
15571586 			const days = Math.floor(diff / (1000 * 60 * 60 * 24))
15581587 			diff %= (1000 * 60 * 60 * 24)
1559
-			if (days > 0) {
1560
-				res.push(days);
1561
-				unit.push('日')
1562
-			}
15631588 			// 转换为小时、分钟、秒
15641589 			const hours = Math.floor(diff / (1000 * 60 * 60));
15651590 			diff %= (1000 * 60 * 60); // 剩余毫秒数
1566
-			if (hours > 0) {
1567
-				res.push(hours < 10 ? '0' + hours : hours);
1568
-				unit.push('时')
1569
-			}
15701591 			const minutes = Math.floor(diff / (1000 * 60));
1571
-			if (minutes > 0) {
1572
-				res.push(minutes < 10 ? '0' + minutes : minutes);
1573
-				unit.push('分')
1574
-			}
15751592 			diff %= (1000 * 60); // 剩余毫秒数
15761593 			const seconds = Math.floor(diff / 1000);
1577
-			if (seconds > 0) {
1578
-				res.push(seconds < 10 ? '0' + seconds : seconds);
1579
-				unit.push('秒')
1594
+			// 天数为 0 时不展示，时/分/秒始终展示（补 0），保证倒计时长度稳定
1595
+			if (days > 0) {
1596
+				res.push({
1597
+					digits: pad(days).split(''),
1598
+					unit: '日'
1599
+				})
15801600 			}
1601
+			res.push({
1602
+				digits: pad(hours).split(''),
1603
+				unit: '时'
1604
+			})
1605
+			res.push({
1606
+				digits: pad(minutes).split(''),
1607
+				unit: '分'
1608
+			})
1609
+			res.push({
1610
+				digits: pad(seconds).split(''),
1611
+				unit: '秒'
1612
+			})
15811613 			this.expireTime = res
1582
-			this.expireTimeUnit = unit
15831614 			if (this.isPageShow) {
15841615 				setTimeout(() => {
1585
-					that.countdownTimer(expireTime, type)
1616
+					that.countdownTimer(expireTime, type, token)
15861617 				}, 1000)
15871618 			}
15881619 		},
....@@ -1669,13 +1700,11 @@
16691700 .lottery_banner {
16701701 	margin: 15rpx auto;
16711702 	width: 690rpx;
1672
-	height: 120rpx;
16731703 	text-align: center;
16741704 }
16751705 
16761706 .lottery_bannerImg {
16771707 	width: 690rpx;
1678
-	height: 120rpx;
16791708 }
16801709 
16811710 .tag-wrap-container {
....@@ -2159,11 +2188,22 @@
21592188 	padding: 15rpx;
21602189 	padding-left: 30rpx;
21612190 	color: #979797;
2191
+	font-size: 26rpx;
21622192 
21632193 	.num {
2194
+		display: inline-block;
21642195 		color: #000000;
21652196 		background: #FFE20E;
2166
-		padding: 0 10rpx;
2197
+		padding: 0 6rpx;
2198
+		margin: 0 4rpx;
2199
+		vertical-align: middle;
2200
+	}
2201
+
2202
+	/* 每个数字固定宽度，避免倒计时跳动时宽度忽长忽短 */
2203
+	.digit {
2204
+		display: inline-block;
2205
+		width: 19rpx;
2206
+		text-align: center;
21672207 	}
21682208 }
21692209 </style>