blame | 历史 | 补丁 | 提交 | 提交对比
Jacob
4 天以前 212ed891eba94c59d663c7bbbb156acdbc3a0f12 
 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>
....@@ -588,7 +589,7 @@
588589 			showMenu: false,
589590 			selectedMenuArr: [],
590591 			expireTime: [],
591
-			expireTimeUnit: [],
592
+			countdownToken: 0,
592593 			isPageShow: false,
593594 			loginBackFn: null,
594595 			errText: '',
....@@ -1295,6 +1296,9 @@
12951296 			})
12961297 		},
12971298 		validAlert(data) {
1299
+			// 每次重新计算前作废旧的倒计时链，避免多条定时器同时刷新导致数字跳动
1300
+			this.countdownToken++
1301
+			const token = this.countdownToken
12981302 			const {
12991303 				startTime,
13001304 				expireTime
....@@ -1313,17 +1317,17 @@
13131317 					let minutes = startTimetamp.getMinutes()
13141318 					minutes = minutes < 10 ? '0' + minutes : minutes;
13151319 
1316
-					this.countdownTimer(startTime.split('-').join('/'), 'start')
1320
+					this.countdownTimer(startTime.split('-').join('/'), 'start', token)
13171321 					this.startOrEnd = "后开启"
13181322 					return
1319
-				}
1320
-			}
1321
-			if (expireTime) {
1322
-				const expireTimetamp = new Date(expireTime.split('-').join('/')).getTime();
1323
-				if (expireTimetamp < nowTimestamp) {
1323
+					}
1324
+					}
1325
+					if (expireTime) {
1326
+					const expireTimetamp = new Date(expireTime.split('-').join('/')).getTime();
1327
+					if (expireTimetamp < nowTimestamp) {
13241328 					return
1325
-				}
1326
-				this.countdownTimer(expireTime.split('-').join('/'), 'end')
1329
+					}
1330
+					this.countdownTimer(expireTime.split('-').join('/'), 'end', token)
13271331 				this.startOrEnd = "后结束"
13281332 			}
13291333 		},
....@@ -1461,7 +1465,7 @@
14611465 						that.homeTop = that.getHomeTop(0.4)
14621466 					}
14631467 					that.expireTime = [];
1464
-					that.expireTimeUnit = [];
1468
+					that.countdownToken++;
14651469 					that.where.page = 1;
14661470 					that.getGoodList()
14671471 					that.validAlert(res.data)
....@@ -1487,8 +1491,9 @@
14871491 				}
14881492 			});
14891493 		},
1490
-		countdownTimer(expireTime, type) {
1494
+		countdownTimer(expireTime, type, token) {
14911495 			if (!expireTime) return
1496
+			if (token !== undefined && token !== this.countdownToken) return
14921497 			let that = this;
14931498 			// 结束时间的时间戳（需传入一个有效的日期对象或时间戳）
14941499 			const endTimestamp = new Date(expireTime).getTime();
....@@ -1500,56 +1505,56 @@
15001505 			if (type == 'end') {
15011506 				if (diff <= 0) {
15021507 					this.expireTime = []
1503
-					this.expireTimeUnit = []
15041508 					return
15051509 				} else { }
15061510 			} else if (type == 'start') {
15071511 				if (diff <= 0) {
15081512 					this.expireTime = []
1509
-					this.expireTimeUnit = []
15101513 					const expireTime2 = that.info.expireTime
15111514 					if (expireTime2) {
15121515 						const expireTimetamp = new Date(expireTime2.split('-').join('/')).getTime();
15131516 						if (expireTimetamp < nowTimestamp) {
15141517 							return
15151518 						}
1516
-						this.countdownTimer(expireTime2.split('-').join('/'), 'end')
1519
+						this.countdownTimer(expireTime2.split('-').join('/'), 'end', token)
15171520 						this.startOrEnd = "后结束"
15181521 					}
15191522 					return
15201523 				}
15211524 			}
1525
+			const pad = num => (num < 10 ? '0' + num : String(num))
15221526 			const res = []
1523
-			const unit = []
15241527 			const days = Math.floor(diff / (1000 * 60 * 60 * 24))
15251528 			diff %= (1000 * 60 * 60 * 24)
1526
-			if (days > 0) {
1527
-				res.push(days);
1528
-				unit.push('日')
1529
-			}
15301529 			// 转换为小时、分钟、秒
15311530 			const hours = Math.floor(diff / (1000 * 60 * 60));
15321531 			diff %= (1000 * 60 * 60); // 剩余毫秒数
1533
-			if (hours > 0) {
1534
-				res.push(hours < 10 ? '0' + hours : hours);
1535
-				unit.push('时')
1536
-			}
15371532 			const minutes = Math.floor(diff / (1000 * 60));
1538
-			if (minutes > 0) {
1539
-				res.push(minutes < 10 ? '0' + minutes : minutes);
1540
-				unit.push('分')
1541
-			}
15421533 			diff %= (1000 * 60); // 剩余毫秒数
15431534 			const seconds = Math.floor(diff / 1000);
1544
-			if (seconds > 0) {
1545
-				res.push(seconds < 10 ? '0' + seconds : seconds);
1546
-				unit.push('秒')
1535
+			// 天数为 0 时不展示，时/分/秒始终展示（补 0），保证倒计时长度稳定
1536
+			if (days > 0) {
1537
+				res.push({
1538
+					digits: pad(days).split(''),
1539
+					unit: '日'
1540
+				})
15471541 			}
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
+			})
15481554 			this.expireTime = res
1549
-			this.expireTimeUnit = unit
15501555 			if (this.isPageShow) {
15511556 				setTimeout(() => {
1552
-					that.countdownTimer(expireTime, type)
1557
+					that.countdownTimer(expireTime, type, token)
15531558 				}, 1000)
15541559 			}
15551560 		},
....@@ -2082,11 +2087,22 @@
20822087 	padding: 15rpx;
20832088 	padding-left: 30rpx;
20842089 	color: #979797;
2090
+	font-size: 26rpx;
20852091 
20862092 	.num {
2093
+		display: inline-block;
20872094 		color: #000000;
20882095 		background: #FFE20E;
2089
-		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;
20902106 	}
20912107 }
20922108 </style>