pages/zone/index.vue
..
..
@@ -20,8 +20,9 @@
20
20
 		<view v-else>
21
21
 			<view class="expireTime" v-if="expireTime && expireTime.length">
22
22
 				<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 }}
25
26
 				</text>
26
27
 				<text>{{ startOrEnd }}</text>
27
28
 			</view>
..
..
@@ -70,9 +71,8 @@
70
71
 					</view>
71
72
 				</view>
72
73
 			</view>
73
-			<view @click="goLottery" class="lottery_banner" v-if="info && info.isLottery">
74
-				<image class="lottery_bannerImg"
75
-					src="https://ossacmall.bluedeer.com.cn/app/static/images/zone_lotteryBanner.gif" mode="widthFix">
74
+			<view @click="goLottery" class="lottery_banner" v-if="info && info.isLottery && info.lotteryBanner">
75
+				<image class="lottery_bannerImg" :src="info.lotteryBanner" mode="widthFix">
76
76
 				</image>
77
77
 			</view>
78
78
 			<view class="tag-img-container" v-if="info.zoneType == 7">
..
..
@@ -589,7 +589,7 @@
589
589
 			showMenu: false,
590
590
 			selectedMenuArr: [],
591
591
 			expireTime: [],
592
-			expireTimeUnit: [],
592
+			countdownToken: 0,
593
593
 			isPageShow: false,
594
594
 			loginBackFn: null,
595
595
 			errText: '',
..
..
@@ -1296,6 +1296,9 @@
1296
1296
 			})
1297
1297
 		},
1298
1298
 		validAlert(data) {
1299
+			// 每次重新计算前作废旧的倒计时链，避免多条定时器同时刷新导致数字跳动
1300
+			this.countdownToken++
1301
+			const token = this.countdownToken
1299
1302
 			const {
1300
1303
 				startTime,
1301
1304
 				expireTime
..
..
@@ -1314,17 +1317,17 @@
1314
1317
 					let minutes = startTimetamp.getMinutes()
1315
1318
 					minutes = minutes < 10 ? '0' + minutes : minutes;
1316
1319
 
1317
-					this.countdownTimer(startTime.split('-').join('/'), 'start')
1320
+					this.countdownTimer(startTime.split('-').join('/'), 'start', token)
1318
1321
 					this.startOrEnd = "后开启"
1319
1322
 					return
1320
-				}
1321
-			}
1322
-			if (expireTime) {
1323
-				const expireTimetamp = new Date(expireTime.split('-').join('/')).getTime();
1324
-				if (expireTimetamp < nowTimestamp) {
1323
+					}
1324
+					}
1325
+					if (expireTime) {
1326
+					const expireTimetamp = new Date(expireTime.split('-').join('/')).getTime();
1327
+					if (expireTimetamp < nowTimestamp) {
1325
1328
 					return
1326
-				}
1327
-				this.countdownTimer(expireTime.split('-').join('/'), 'end')
1329
+					}
1330
+					this.countdownTimer(expireTime.split('-').join('/'), 'end', token)
1328
1331
 				this.startOrEnd = "后结束"
1329
1332
 			}
1330
1333
 		},
..
..
@@ -1462,7 +1465,7 @@
1462
1465
 						that.homeTop = that.getHomeTop(0.4)
1463
1466
 					}
1464
1467
 					that.expireTime = [];
1465
-					that.expireTimeUnit = [];
1468
+					that.countdownToken++;
1466
1469
 					that.where.page = 1;
1467
1470
 					that.getGoodList()
1468
1471
 					that.validAlert(res.data)
..
..
@@ -1488,8 +1491,9 @@
1488
1491
 				}
1489
1492
 			});
1490
1493
 		},
1491
-		countdownTimer(expireTime, type) {
1494
+		countdownTimer(expireTime, type, token) {
1492
1495
 			if (!expireTime) return
1496
+			if (token !== undefined && token !== this.countdownToken) return
1493
1497
 			let that = this;
1494
1498
 			// 结束时间的时间戳（需传入一个有效的日期对象或时间戳）
1495
1499
 			const endTimestamp = new Date(expireTime).getTime();
..
..
@@ -1501,56 +1505,56 @@
1501
1505
 			if (type == 'end') {
1502
1506
 				if (diff <= 0) {
1503
1507
 					this.expireTime = []
1504
-					this.expireTimeUnit = []
1505
1508
 					return
1506
1509
 				} else { }
1507
1510
 			} else if (type == 'start') {
1508
1511
 				if (diff <= 0) {
1509
1512
 					this.expireTime = []
1510
-					this.expireTimeUnit = []
1511
1513
 					const expireTime2 = that.info.expireTime
1512
1514
 					if (expireTime2) {
1513
1515
 						const expireTimetamp = new Date(expireTime2.split('-').join('/')).getTime();
1514
1516
 						if (expireTimetamp < nowTimestamp) {
1515
1517
 							return
1516
1518
 						}
1517
-						this.countdownTimer(expireTime2.split('-').join('/'), 'end')
1519
+						this.countdownTimer(expireTime2.split('-').join('/'), 'end', token)
1518
1520
 						this.startOrEnd = "后结束"
1519
1521
 					}
1520
1522
 					return
1521
1523
 				}
1522
1524
 			}
1525
+			const pad = num => (num < 10 ? '0' + num : String(num))
1523
1526
 			const res = []
1524
-			const unit = []
1525
1527
 			const days = Math.floor(diff / (1000 * 60 * 60 * 24))
1526
1528
 			diff %= (1000 * 60 * 60 * 24)
1527
-			if (days > 0) {
1528
-				res.push(days);
1529
-				unit.push('日')
1530
-			}
1531
1529
 			// 转换为小时、分钟、秒
1532
1530
 			const hours = Math.floor(diff / (1000 * 60 * 60));
1533
1531
 			diff %= (1000 * 60 * 60); // 剩余毫秒数
1534
-			if (hours > 0) {
1535
-				res.push(hours < 10 ? '0' + hours : hours);
1536
-				unit.push('时')
1537
-			}
1538
1532
 			const minutes = Math.floor(diff / (1000 * 60));
1539
-			if (minutes > 0) {
1540
-				res.push(minutes < 10 ? '0' + minutes : minutes);
1541
-				unit.push('分')
1542
-			}
1543
1533
 			diff %= (1000 * 60); // 剩余毫秒数
1544
1534
 			const seconds = Math.floor(diff / 1000);
1545
-			if (seconds > 0) {
1546
-				res.push(seconds < 10 ? '0' + seconds : seconds);
1547
-				unit.push('秒')
1535
+			// 天数为 0 时不展示，时/分/秒始终展示（补 0），保证倒计时长度稳定
1536
+			if (days > 0) {
1537
+				res.push({
1538
+					digits: pad(days).split(''),
1539
+					unit: '日'
1540
+				})
1548
1541
 			}
1542
+			res.push({
1543
+				digits: pad(hours).split(''),
1544
+				unit: '时'
1545
+			})
1546
+			res.push({
1547
+				digits: pad(minutes).split(''),
1548
+				unit: '分'
1549
+			})
1550
+			res.push({
1551
+				digits: pad(seconds).split(''),
1552
+				unit: '秒'
1553
+			})
1549
1554
 			this.expireTime = res
1550
-			this.expireTimeUnit = unit
1551
1555
 			if (this.isPageShow) {
1552
1556
 				setTimeout(() => {
1553
-					that.countdownTimer(expireTime, type)
1557
+					that.countdownTimer(expireTime, type, token)
1554
1558
 				}, 1000)
1555
1559
 			}
1556
1560
 		},
..
..
@@ -1637,13 +1641,11 @@
1637
1641
 .lottery_banner {
1638
1642
 	margin: 15rpx auto;
1639
1643
 	width: 690rpx;
1640
-	height: 120rpx;
1641
1644
 	text-align: center;
1642
1645
 }
1643
1646
 
1644
1647
 .lottery_bannerImg {
1645
1648
 	width: 690rpx;
1646
-	height: 120rpx;
1647
1649
 }
1648
1650
 
1649
1651
 .tag-wrap-container {
..
..
@@ -2085,11 +2087,22 @@
2085
2087
 	padding: 15rpx;
2086
2088
 	padding-left: 30rpx;
2087
2089
 	color: #979797;
2090
+	font-size: 26rpx;
2088
2091
 
2089
2092
 	.num {
2093
+		display: inline-block;
2090
2094
 		color: #000000;
2091
2095
 		background: #FFE20E;
2092
-		padding: 0 10rpx;
2096
+		padding: 0 6rpx;
2097
+		margin: 0 4rpx;
2098
+		vertical-align: middle;
2099
+	}
2100
+
2101
+	/* 每个数字固定宽度，避免倒计时跳动时宽度忽长忽短 */
2102
+	.digit {
2103
+		display: inline-block;
2104
+		width: 19rpx;
2105
+		text-align: center;
2093
2106
 	}
2094
2107
 }
2095
2108
 </style>