Merge branch 'dev' into sit

Jacob

4 天以前 f564a64d3c99b4d300e54e038446227a440bba48

 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>
..
..
@@ -88,9 +89,8 @@
88
89
 					</view>
89
90
 				</view>
90
91
 			</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" v-if="info && info.isLottery && info.lotteryBanner">
93
+				<image class="lottery_bannerImg" :src="info.lotteryBanner" mode="widthFix">
94
94
 				</image>
95
95
 			</view>
96
96
 			<view class="tag-img-container" v-if="info.zoneType == 7">
..
..
@@ -607,7 +607,7 @@
607
607
 			showMenu: false,
608
608
 			selectedMenuArr: [],
609
609
 			expireTime: [],
610
-			expireTimeUnit: [],
610
+			countdownToken: 0,
611
611
 			isPageShow: false,
612
612
 			loginBackFn: null,
613
613
 			errText: '',
..
..
@@ -1327,6 +1327,9 @@
1327
1327
 			})
1328
1328
 		},
1329
1329
 		validAlert(data) {
1330
+			// 每次重新计算前作废旧的倒计时链，避免多条定时器同时刷新导致数字跳动
1331
+			this.countdownToken++
1332
+			const token = this.countdownToken
1330
1333
 			const {
1331
1334
 				startTime,
1332
1335
 				expireTime
..
..
@@ -1345,17 +1348,17 @@
1345
1348
 					let minutes = startTimetamp.getMinutes()
1346
1349
 					minutes = minutes < 10 ? '0' + minutes : minutes;
1347
1350
 
1348
-					this.countdownTimer(startTime.split('-').join('/'), 'start')
1351
+					this.countdownTimer(startTime.split('-').join('/'), 'start', token)
1349
1352
 					this.startOrEnd = "后开启"
1350
1353
 					return
1351
-				}
1352
-			}
1353
-			if (expireTime) {
1354
-				const expireTimetamp = new Date(expireTime.split('-').join('/')).getTime();
1355
-				if (expireTimetamp < nowTimestamp) {
1354
+					}
1355
+					}
1356
+					if (expireTime) {
1357
+					const expireTimetamp = new Date(expireTime.split('-').join('/')).getTime();
1358
+					if (expireTimetamp < nowTimestamp) {
1356
1359
 					return
1357
-				}
1358
-				this.countdownTimer(expireTime.split('-').join('/'), 'end')
1360
+					}
1361
+					this.countdownTimer(expireTime.split('-').join('/'), 'end', token)
1359
1362
 				this.startOrEnd = "后结束"
1360
1363
 			}
1361
1364
 		},
..
..
@@ -1494,7 +1497,7 @@
1494
1497
 						that.homeTop = that.getHomeTop(0.4)
1495
1498
 					}
1496
1499
 					that.expireTime = [];
1497
-					that.expireTimeUnit = [];
1500
+					that.countdownToken++;
1498
1501
 					that.where.page = 1;
1499
1502
 					that.getGoodList()
1500
1503
 					that.validAlert(res.data)
..
..
@@ -1520,8 +1523,9 @@
1520
1523
 				}
1521
1524
 			});
1522
1525
 		},
1523
-		countdownTimer(expireTime, type) {
1526
+		countdownTimer(expireTime, type, token) {
1524
1527
 			if (!expireTime) return
1528
+			if (token !== undefined && token !== this.countdownToken) return
1525
1529
 			let that = this;
1526
1530
 			// 结束时间的时间戳（需传入一个有效的日期对象或时间戳）
1527
1531
 			const endTimestamp = new Date(expireTime).getTime();
..
..
@@ -1533,56 +1537,56 @@
1533
1537
 			if (type == 'end') {
1534
1538
 				if (diff <= 0) {
1535
1539
 					this.expireTime = []
1536
-					this.expireTimeUnit = []
1537
1540
 					return
1538
1541
 				} else { }
1539
1542
 			} else if (type == 'start') {
1540
1543
 				if (diff <= 0) {
1541
1544
 					this.expireTime = []
1542
-					this.expireTimeUnit = []
1543
1545
 					const expireTime2 = that.info.expireTime
1544
1546
 					if (expireTime2) {
1545
1547
 						const expireTimetamp = new Date(expireTime2.split('-').join('/')).getTime();
1546
1548
 						if (expireTimetamp < nowTimestamp) {
1547
1549
 							return
1548
1550
 						}
1549
-						this.countdownTimer(expireTime2.split('-').join('/'), 'end')
1551
+						this.countdownTimer(expireTime2.split('-').join('/'), 'end', token)
1550
1552
 						this.startOrEnd = "后结束"
1551
1553
 					}
1552
1554
 					return
1553
1555
 				}
1554
1556
 			}
1557
+			const pad = num => (num < 10 ? '0' + num : String(num))
1555
1558
 			const res = []
1556
-			const unit = []
1557
1559
 			const days = Math.floor(diff / (1000 * 60 * 60 * 24))
1558
1560
 			diff %= (1000 * 60 * 60 * 24)
1559
-			if (days > 0) {
1560
-				res.push(days);
1561
-				unit.push('日')
1562
-			}
1563
1561
 			// 转换为小时、分钟、秒
1564
1562
 			const hours = Math.floor(diff / (1000 * 60 * 60));
1565
1563
 			diff %= (1000 * 60 * 60); // 剩余毫秒数
1566
-			if (hours > 0) {
1567
-				res.push(hours < 10 ? '0' + hours : hours);
1568
-				unit.push('时')
1569
-			}
1570
1564
 			const minutes = Math.floor(diff / (1000 * 60));
1571
-			if (minutes > 0) {
1572
-				res.push(minutes < 10 ? '0' + minutes : minutes);
1573
-				unit.push('分')
1574
-			}
1575
1565
 			diff %= (1000 * 60); // 剩余毫秒数
1576
1566
 			const seconds = Math.floor(diff / 1000);
1577
-			if (seconds > 0) {
1578
-				res.push(seconds < 10 ? '0' + seconds : seconds);
1579
-				unit.push('秒')
1567
+			// 天数为 0 时不展示，时/分/秒始终展示（补 0），保证倒计时长度稳定
1568
+			if (days > 0) {
1569
+				res.push({
1570
+					digits: pad(days).split(''),
1571
+					unit: '日'
1572
+				})
1580
1573
 			}
1574
+			res.push({
1575
+				digits: pad(hours).split(''),
1576
+				unit: '时'
1577
+			})
1578
+			res.push({
1579
+				digits: pad(minutes).split(''),
1580
+				unit: '分'
1581
+			})
1582
+			res.push({
1583
+				digits: pad(seconds).split(''),
1584
+				unit: '秒'
1585
+			})
1581
1586
 			this.expireTime = res
1582
-			this.expireTimeUnit = unit
1583
1587
 			if (this.isPageShow) {
1584
1588
 				setTimeout(() => {
1585
-					that.countdownTimer(expireTime, type)
1589
+					that.countdownTimer(expireTime, type, token)
1586
1590
 				}, 1000)
1587
1591
 			}
1588
1592
 		},
..
..
@@ -1669,13 +1673,11 @@
1669
1673
 .lottery_banner {
1670
1674
 	margin: 15rpx auto;
1671
1675
 	width: 690rpx;
1672
-	height: 120rpx;
1673
1676
 	text-align: center;
1674
1677
 }
1675
1678
 
1676
1679
 .lottery_bannerImg {
1677
1680
 	width: 690rpx;
1678
-	height: 120rpx;
1679
1681
 }
1680
1682
 
1681
1683
 .tag-wrap-container {
..
..
@@ -2159,11 +2161,22 @@
2159
2161
 	padding: 15rpx;
2160
2162
 	padding-left: 30rpx;
2161
2163
 	color: #979797;
2164
+	font-size: 26rpx;
2162
2165
 
2163
2166
 	.num {
2167
+		display: inline-block;
2164
2168
 		color: #000000;
2165
2169
 		background: #FFE20E;
2166
-		padding: 0 10rpx;
2170
+		padding: 0 6rpx;
2171
+		margin: 0 4rpx;
2172
+		vertical-align: middle;
2173
+	}
2174
+
2175
+	/* 每个数字固定宽度，避免倒计时跳动时宽度忽长忽短 */
2176
+	.digit {
2177
+		display: inline-block;
2178
+		width: 19rpx;
2179
+		text-align: center;
2167
2180
 	}
2168
2181
 }
2169
2182
 </style>