blame | 历史 | 补丁 | 提交 | 提交对比
Jacob
1 天以前 f7034f535b85264e0c5b18e82fc295dab2052304 
 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>
....@@ -70,9 +71,10 @@
7071 					</view>
7172 				</view>
7273 			</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"
75
+				v-if="info && info.isLottery && info.lotteryBanner && lotteryBannerReady">
76
+				<image class="lottery_bannerImg" :src="info.lotteryBanner" mode="widthFix"
77
+					:style="{ height: lotteryBannerHeight }">
7678 				</image>
7779 			</view>
7880 			<view class="tag-img-container" v-if="info.zoneType == 7">
....@@ -589,7 +591,7 @@
589591 			showMenu: false,
590592 			selectedMenuArr: [],
591593 			expireTime: [],
592
-			expireTimeUnit: [],
594
+			countdownToken: 0,
593595 			isPageShow: false,
594596 			loginBackFn: null,
595597 			errText: '',
....@@ -622,6 +624,8 @@
622624 			stockEmpty: true,
623625 			urlOption: {},
624626 			homeTop: '200',
627
+			lotteryBannerHeight: '', //抽奖banner预计算高度（rpx），空字符串表示未取到，按原逻辑自适应
628
+			lotteryBannerReady: false, //是否已拿到banner尺寸（或已确认拿不到），未就绪前不渲染，避免首帧撑高
625629 			hasNewPop: false,
626630 			leftCoupon: {},
627631 			rightCoupon: {},
....@@ -1296,6 +1300,9 @@
12961300 			})
12971301 		},
12981302 		validAlert(data) {
1303
+			// 每次重新计算前作废旧的倒计时链，避免多条定时器同时刷新导致数字跳动
1304
+			this.countdownToken++
1305
+			const token = this.countdownToken
12991306 			const {
13001307 				startTime,
13011308 				expireTime
....@@ -1314,17 +1321,17 @@
13141321 					let minutes = startTimetamp.getMinutes()
13151322 					minutes = minutes < 10 ? '0' + minutes : minutes;
13161323 
1317
-					this.countdownTimer(startTime.split('-').join('/'), 'start')
1324
+					this.countdownTimer(startTime.split('-').join('/'), 'start', token)
13181325 					this.startOrEnd = "后开启"
13191326 					return
1320
-				}
1321
-			}
1322
-			if (expireTime) {
1323
-				const expireTimetamp = new Date(expireTime.split('-').join('/')).getTime();
1324
-				if (expireTimetamp < nowTimestamp) {
1327
+					}
1328
+					}
1329
+					if (expireTime) {
1330
+					const expireTimetamp = new Date(expireTime.split('-').join('/')).getTime();
1331
+					if (expireTimetamp < nowTimestamp) {
13251332 					return
1326
-				}
1327
-				this.countdownTimer(expireTime.split('-').join('/'), 'end')
1333
+					}
1334
+					this.countdownTimer(expireTime.split('-').join('/'), 'end', token)
13281335 				this.startOrEnd = "后结束"
13291336 			}
13301337 		},
....@@ -1446,6 +1453,29 @@
14461453 				this.$refs.popNewuserRef.show()
14471454 			}
14481455 		},
1456
+		// 预取抽奖banner真实宽高，计算出高度后再渲染，避免加载前被组件默认高度(225px)撑大
1457
+		setLotteryBannerSize(info) {
1458
+			let that = this
1459
+			that.lotteryBannerHeight = ''
1460
+			that.lotteryBannerReady = false
1461
+			if (!info || !info.isLottery || !info.lotteryBanner) {
1462
+				that.lotteryBannerReady = true
1463
+				return
1464
+			}
1465
+			uni.getImageInfo({
1466
+				src: info.lotteryBanner,
1467
+				success: (img) => {
1468
+					if (img.width > 0 && img.height > 0) {
1469
+						that.lotteryBannerHeight = (690 * img.height / img.width).toFixed(2) + 'rpx'
1470
+					}
1471
+					that.lotteryBannerReady = true
1472
+				},
1473
+				fail: (err) => {
1474
+					console.warn('抽奖banner尺寸预取失败，回退为自适应', err)
1475
+					that.lotteryBannerReady = true
1476
+				}
1477
+			})
1478
+		},
14491479 		getZoneDetail: function () {
14501480 			let that = this;
14511481 			let belong = this.$store.getters.belong;
....@@ -1453,6 +1483,8 @@
14531483 			console.log('专区详情入参：：', params)
14541484 			getZoneDetail(that.id, params).then(res => {
14551485 				that.info = res.data;
1486
+				//that.info.zoneType=8;
1487
+				that.setLotteryBannerSize(res.data);
14561488 				that.updateZoneShareMenu();
14571489 				if (res.data.zoneType == 6) {
14581490 					that.setYueyangZone()
....@@ -1462,7 +1494,7 @@
14621494 						that.homeTop = that.getHomeTop(0.4)
14631495 					}
14641496 					that.expireTime = [];
1465
-					that.expireTimeUnit = [];
1497
+					that.countdownToken++;
14661498 					that.where.page = 1;
14671499 					that.getGoodList()
14681500 					that.validAlert(res.data)
....@@ -1488,8 +1520,9 @@
14881520 				}
14891521 			});
14901522 		},
1491
-		countdownTimer(expireTime, type) {
1523
+		countdownTimer(expireTime, type, token) {
14921524 			if (!expireTime) return
1525
+			if (token !== undefined && token !== this.countdownToken) return
14931526 			let that = this;
14941527 			// 结束时间的时间戳（需传入一个有效的日期对象或时间戳）
14951528 			const endTimestamp = new Date(expireTime).getTime();
....@@ -1501,56 +1534,56 @@
15011534 			if (type == 'end') {
15021535 				if (diff <= 0) {
15031536 					this.expireTime = []
1504
-					this.expireTimeUnit = []
15051537 					return
15061538 				} else { }
15071539 			} else if (type == 'start') {
15081540 				if (diff <= 0) {
15091541 					this.expireTime = []
1510
-					this.expireTimeUnit = []
15111542 					const expireTime2 = that.info.expireTime
15121543 					if (expireTime2) {
15131544 						const expireTimetamp = new Date(expireTime2.split('-').join('/')).getTime();
15141545 						if (expireTimetamp < nowTimestamp) {
15151546 							return
15161547 						}
1517
-						this.countdownTimer(expireTime2.split('-').join('/'), 'end')
1548
+						this.countdownTimer(expireTime2.split('-').join('/'), 'end', token)
15181549 						this.startOrEnd = "后结束"
15191550 					}
15201551 					return
15211552 				}
15221553 			}
1554
+			const pad = num => (num < 10 ? '0' + num : String(num))
15231555 			const res = []
1524
-			const unit = []
15251556 			const days = Math.floor(diff / (1000 * 60 * 60 * 24))
15261557 			diff %= (1000 * 60 * 60 * 24)
1527
-			if (days > 0) {
1528
-				res.push(days);
1529
-				unit.push('日')
1530
-			}
15311558 			// 转换为小时、分钟、秒
15321559 			const hours = Math.floor(diff / (1000 * 60 * 60));
15331560 			diff %= (1000 * 60 * 60); // 剩余毫秒数
1534
-			if (hours > 0) {
1535
-				res.push(hours < 10 ? '0' + hours : hours);
1536
-				unit.push('时')
1537
-			}
15381561 			const minutes = Math.floor(diff / (1000 * 60));
1539
-			if (minutes > 0) {
1540
-				res.push(minutes < 10 ? '0' + minutes : minutes);
1541
-				unit.push('分')
1542
-			}
15431562 			diff %= (1000 * 60); // 剩余毫秒数
15441563 			const seconds = Math.floor(diff / 1000);
1545
-			if (seconds > 0) {
1546
-				res.push(seconds < 10 ? '0' + seconds : seconds);
1547
-				unit.push('秒')
1564
+			// 天数为 0 时不展示，时/分/秒始终展示（补 0），保证倒计时长度稳定
1565
+			if (days > 0) {
1566
+				res.push({
1567
+					digits: pad(days).split(''),
1568
+					unit: '日'
1569
+				})
15481570 			}
1571
+			res.push({
1572
+				digits: pad(hours).split(''),
1573
+				unit: '时'
1574
+			})
1575
+			res.push({
1576
+				digits: pad(minutes).split(''),
1577
+				unit: '分'
1578
+			})
1579
+			res.push({
1580
+				digits: pad(seconds).split(''),
1581
+				unit: '秒'
1582
+			})
15491583 			this.expireTime = res
1550
-			this.expireTimeUnit = unit
15511584 			if (this.isPageShow) {
15521585 				setTimeout(() => {
1553
-					that.countdownTimer(expireTime, type)
1586
+					that.countdownTimer(expireTime, type, token)
15541587 				}, 1000)
15551588 			}
15561589 		},
....@@ -1637,13 +1670,11 @@
16371670 .lottery_banner {
16381671 	margin: 15rpx auto;
16391672 	width: 690rpx;
1640
-	height: 120rpx;
16411673 	text-align: center;
16421674 }
16431675 
16441676 .lottery_bannerImg {
16451677 	width: 690rpx;
1646
-	height: 120rpx;
16471678 }
16481679 
16491680 .tag-wrap-container {
....@@ -2085,11 +2116,22 @@
20852116 	padding: 15rpx;
20862117 	padding-left: 30rpx;
20872118 	color: #979797;
2119
+	font-size: 26rpx;
20882120 
20892121 	.num {
2122
+		display: inline-block;
20902123 		color: #000000;
20912124 		background: #FFE20E;
2092
-		padding: 0 10rpx;
2125
+		padding: 0 6rpx;
2126
+		margin: 0 4rpx;
2127
+		vertical-align: middle;
2128
+	}
2129
+
2130
+	/* 每个数字固定宽度，避免倒计时跳动时宽度忽长忽短 */
2131
+	.digit {
2132
+		display: inline-block;
2133
+		width: 19rpx;
2134
+		text-align: center;
20932135 	}
20942136 }
20952137 </style>