blame | 历史 | 补丁 | 提交 | 提交对比
Jacob
1 天以前 24b8f2afa92ce7bbe490185ecbab869c460b798b 
 pages/zone/index.vue
....@@ -14,11 +14,15 @@
1414 		<view :style="{ height: marTop + 'px' }"></view>
1515 		<yueyangZone ref=yueyangZoneRef v-if="isYueyangZone" :zoneInfo="info" :careBeanRate="careBeanRate"
1616 			style="position: relative;z-index: 2;" @goLottery="goLottery" :relationKey="relationKey"></yueyangZone>
17
+		<view v-if="isYueyangZone" class="detail-btn" @click="goDetail">
18
+			<text>消耗明细</text>
19
+		</view>
1720 		<view v-else>
1821 			<view class="expireTime" v-if="expireTime && expireTime.length">
1922 				<text>专区将在</text>
20
-				<text v-for="(val, index) in expireTime" :key="index">
21
-					<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 }}
2226 				</text>
2327 				<text>{{ startOrEnd }}</text>
2428 			</view>
....@@ -85,9 +89,9 @@
8589 					</view>
8690 				</view>
8791 			</view>
88
-			<view @click="goLottery" class="lottery_banner" v-if="info && info.isLottery">
89
-				<image class="lottery_bannerImg"
90
-					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
+					:style="{ height: lotteryBannerHeight }">
9195 				</image>
9296 			</view>
9397 			<view class="tag-img-container" v-if="info.zoneType == 7">
....@@ -604,7 +608,7 @@
604608 			showMenu: false,
605609 			selectedMenuArr: [],
606610 			expireTime: [],
607
-			expireTimeUnit: [],
611
+			countdownToken: 0,
608612 			isPageShow: false,
609613 			loginBackFn: null,
610614 			errText: '',
....@@ -639,6 +643,7 @@
639643 			stockEmpty: true,
640644 			urlOption: {},
641645 			homeTop: '200',
646
+			lotteryBannerHeight: '', //抽奖banner预计算高度（rpx），空字符串表示未取到，按原逻辑自适应
642647 			hasNewPop: false,
643648 			leftCoupon: {},
644649 			rightCoupon: {},
....@@ -1226,6 +1231,11 @@
12261231 				// that.myCareBean = res2.data.totalCareBeans;
12271232 			});
12281233 		},
1234
+		goDetail() {
1235
+			uni.navigateTo({
1236
+				url: '/pages/consumption/index?zoneId=' + this.info.id
1237
+			})
1238
+		},
12291239 		goLottery() {
12301240 			let that = this;
12311241 			var data = {
....@@ -1319,6 +1329,9 @@
13191329 			})
13201330 		},
13211331 		validAlert(data) {
1332
+			// 每次重新计算前作废旧的倒计时链，避免多条定时器同时刷新导致数字跳动
1333
+			this.countdownToken++
1334
+			const token = this.countdownToken
13221335 			const {
13231336 				startTime,
13241337 				expireTime
....@@ -1337,17 +1350,17 @@
13371350 					let minutes = startTimetamp.getMinutes()
13381351 					minutes = minutes < 10 ? '0' + minutes : minutes;
13391352 
1340
-					this.countdownTimer(startTime.split('-').join('/'), 'start')
1353
+					this.countdownTimer(startTime.split('-').join('/'), 'start', token)
13411354 					this.startOrEnd = "后开启"
13421355 					return
1343
-				}
1344
-			}
1345
-			if (expireTime) {
1346
-				const expireTimetamp = new Date(expireTime.split('-').join('/')).getTime();
1347
-				if (expireTimetamp < nowTimestamp) {
1356
+					}
1357
+					}
1358
+					if (expireTime) {
1359
+					const expireTimetamp = new Date(expireTime.split('-').join('/')).getTime();
1360
+					if (expireTimetamp < nowTimestamp) {
13481361 					return
1349
-				}
1350
-				this.countdownTimer(expireTime.split('-').join('/'), 'end')
1362
+					}
1363
+					this.countdownTimer(expireTime.split('-').join('/'), 'end', token)
13511364 				this.startOrEnd = "后结束"
13521365 			}
13531366 		},
....@@ -1469,6 +1482,21 @@
14691482 				this.$refs.popNewuserRef.show()
14701483 			}
14711484 		},
1485
+		// 预取抽奖banner真实宽高，计算出高度后再渲染，避免加载前被组件默认高度(225px)撑大
1486
+		setLotteryBannerSize(info) {
1487
+			let that = this
1488
+			that.lotteryBannerHeight = ''
1489
+			if (!info || !info.isLottery || !info.lotteryBanner) return
1490
+			uni.getImageInfo({
1491
+				src: info.lotteryBanner,
1492
+				success: (img) => {
1493
+					if (img.width > 0 && img.height > 0) {
1494
+						that.lotteryBannerHeight = (690 * img.height / img.width).toFixed(2) + 'rpx'
1495
+					}
1496
+				},
1497
+				fail: () => { }
1498
+			})
1499
+		},
14721500 		getZoneDetail: function () {
14731501 			let that = this;
14741502 			let belong = this.$store.getters.belong;
....@@ -1476,7 +1504,7 @@
14761504 			console.log('专区详情入参：：', params)
14771505 			getZoneDetail(that.id, params).then(res => {
14781506 				that.info = res.data;
1479
-				//that.info.zoneType=8;
1507
+				that.setLotteryBannerSize(res.data);
14801508 				that.updateZoneShareMenu();
14811509 				if (res.data.zoneType == 6) {
14821510 					that.setYueyangZone()
....@@ -1486,7 +1514,7 @@
14861514 						that.homeTop = that.getHomeTop(0.4)
14871515 					}
14881516 					that.expireTime = [];
1489
-					that.expireTimeUnit = [];
1517
+					that.countdownToken++;
14901518 					that.where.page = 1;
14911519 					that.getGoodList()
14921520 					that.validAlert(res.data)
....@@ -1512,8 +1540,9 @@
15121540 				}
15131541 			});
15141542 		},
1515
-		countdownTimer(expireTime, type) {
1543
+		countdownTimer(expireTime, type, token) {
15161544 			if (!expireTime) return
1545
+			if (token !== undefined && token !== this.countdownToken) return
15171546 			let that = this;
15181547 			// 结束时间的时间戳（需传入一个有效的日期对象或时间戳）
15191548 			const endTimestamp = new Date(expireTime).getTime();
....@@ -1525,56 +1554,56 @@
15251554 			if (type == 'end') {
15261555 				if (diff <= 0) {
15271556 					this.expireTime = []
1528
-					this.expireTimeUnit = []
15291557 					return
15301558 				} else { }
15311559 			} else if (type == 'start') {
15321560 				if (diff <= 0) {
15331561 					this.expireTime = []
1534
-					this.expireTimeUnit = []
15351562 					const expireTime2 = that.info.expireTime
15361563 					if (expireTime2) {
15371564 						const expireTimetamp = new Date(expireTime2.split('-').join('/')).getTime();
15381565 						if (expireTimetamp < nowTimestamp) {
15391566 							return
15401567 						}
1541
-						this.countdownTimer(expireTime2.split('-').join('/'), 'end')
1568
+						this.countdownTimer(expireTime2.split('-').join('/'), 'end', token)
15421569 						this.startOrEnd = "后结束"
15431570 					}
15441571 					return
15451572 				}
15461573 			}
1574
+			const pad = num => (num < 10 ? '0' + num : String(num))
15471575 			const res = []
1548
-			const unit = []
15491576 			const days = Math.floor(diff / (1000 * 60 * 60 * 24))
15501577 			diff %= (1000 * 60 * 60 * 24)
1551
-			if (days > 0) {
1552
-				res.push(days);
1553
-				unit.push('日')
1554
-			}
15551578 			// 转换为小时、分钟、秒
15561579 			const hours = Math.floor(diff / (1000 * 60 * 60));
15571580 			diff %= (1000 * 60 * 60); // 剩余毫秒数
1558
-			if (hours > 0) {
1559
-				res.push(hours < 10 ? '0' + hours : hours);
1560
-				unit.push('时')
1561
-			}
15621581 			const minutes = Math.floor(diff / (1000 * 60));
1563
-			if (minutes > 0) {
1564
-				res.push(minutes < 10 ? '0' + minutes : minutes);
1565
-				unit.push('分')
1566
-			}
15671582 			diff %= (1000 * 60); // 剩余毫秒数
15681583 			const seconds = Math.floor(diff / 1000);
1569
-			if (seconds > 0) {
1570
-				res.push(seconds < 10 ? '0' + seconds : seconds);
1571
-				unit.push('秒')
1584
+			// 天数为 0 时不展示，时/分/秒始终展示（补 0），保证倒计时长度稳定
1585
+			if (days > 0) {
1586
+				res.push({
1587
+					digits: pad(days).split(''),
1588
+					unit: '日'
1589
+				})
15721590 			}
1591
+			res.push({
1592
+				digits: pad(hours).split(''),
1593
+				unit: '时'
1594
+			})
1595
+			res.push({
1596
+				digits: pad(minutes).split(''),
1597
+				unit: '分'
1598
+			})
1599
+			res.push({
1600
+				digits: pad(seconds).split(''),
1601
+				unit: '秒'
1602
+			})
15731603 			this.expireTime = res
1574
-			this.expireTimeUnit = unit
15751604 			if (this.isPageShow) {
15761605 				setTimeout(() => {
1577
-					that.countdownTimer(expireTime, type)
1606
+					that.countdownTimer(expireTime, type, token)
15781607 				}, 1000)
15791608 			}
15801609 		},
....@@ -1661,13 +1690,11 @@
16611690 .lottery_banner {
16621691 	margin: 15rpx auto;
16631692 	width: 690rpx;
1664
-	height: 120rpx;
16651693 	text-align: center;
16661694 }
16671695 
16681696 .lottery_bannerImg {
16691697 	width: 690rpx;
1670
-	height: 120rpx;
16711698 }
16721699 
16731700 .tag-wrap-container {
....@@ -1866,6 +1893,21 @@
18661893 	position: absolute;
18671894 	top: 50%;
18681895 	transform: translate(0, -50%);
1896
+}
1897
+
1898
+.detail-btn {
1899
+	border: 2rpx solid #fff;
1900
+	border-top-left-radius: 20rpx;
1901
+	border-bottom-left-radius: 20rpx;
1902
+	padding: 10rpx;
1903
+	background-color: #daf2b2;
1904
+	color: #1e984f;
1905
+	width: 50rpx;
1906
+	position: fixed;
1907
+	top: 200rpx;
1908
+	right: 0rpx;
1909
+	line-height: 1rem;
1910
+	z-index: 99;
18691911 }
18701912 
18711913 .head_img {
....@@ -2136,11 +2178,22 @@
21362178 	padding: 15rpx;
21372179 	padding-left: 30rpx;
21382180 	color: #979797;
2181
+	font-size: 26rpx;
21392182 
21402183 	.num {
2184
+		display: inline-block;
21412185 		color: #000000;
21422186 		background: #FFE20E;
2143
-		padding: 0 10rpx;
2187
+		padding: 0 6rpx;
2188
+		margin: 0 4rpx;
2189
+		vertical-align: middle;
2190
+	}
2191
+
2192
+	/* 每个数字固定宽度，避免倒计时跳动时宽度忽长忽短 */
2193
+	.digit {
2194
+		display: inline-block;
2195
+		width: 19rpx;
2196
+		text-align: center;
21442197 	}
21452198 }
21462199 </style>