blame | 历史 | 补丁 | 提交 | 提交对比
Jacob
1 天以前 6a0a2c52a4ea8049909b8d7a40d0c2d098b5e74c 
 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>
....@@ -67,9 +71,9 @@
6771 					</view>
6872 				</view>
6973 			</view>
70
-			<view @click="goLottery" class="lottery_banner" v-if="info && info.isLottery">
71
-				<image class="lottery_bannerImg"
72
-					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
+					:style="{ height: lotteryBannerHeight }">
7377 				</image>
7478 			</view>
7579 			<view class="tag-img-container" v-if="info.zoneType == 7">
....@@ -586,7 +590,7 @@
586590 			showMenu: false,
587591 			selectedMenuArr: [],
588592 			expireTime: [],
589
-			expireTimeUnit: [],
593
+			countdownToken: 0,
590594 			isPageShow: false,
591595 			loginBackFn: null,
592596 			errText: '',
....@@ -619,6 +623,7 @@
619623 			stockEmpty: true,
620624 			urlOption: {},
621625 			homeTop: '200',
626
+			lotteryBannerHeight: '', //抽奖banner预计算高度（rpx），空字符串表示未取到，按原逻辑自适应
622627 			hasNewPop: false,
623628 			leftCoupon: {},
624629 			rightCoupon: {},
....@@ -1195,6 +1200,11 @@
11951200 				// that.myCareBean = res2.data.totalCareBeans;
11961201 			});
11971202 		},
1203
+		goDetail() {
1204
+			uni.navigateTo({
1205
+				url: '/pages/consumption/index?zoneId=' + this.info.id
1206
+			})
1207
+		},
11981208 		goLottery() {
11991209 			let that = this;
12001210 			var data = {
....@@ -1288,6 +1298,9 @@
12881298 			})
12891299 		},
12901300 		validAlert(data) {
1301
+			// 每次重新计算前作废旧的倒计时链，避免多条定时器同时刷新导致数字跳动
1302
+			this.countdownToken++
1303
+			const token = this.countdownToken
12911304 			const {
12921305 				startTime,
12931306 				expireTime
....@@ -1306,17 +1319,17 @@
13061319 					let minutes = startTimetamp.getMinutes()
13071320 					minutes = minutes < 10 ? '0' + minutes : minutes;
13081321 
1309
-					this.countdownTimer(startTime.split('-').join('/'), 'start')
1322
+					this.countdownTimer(startTime.split('-').join('/'), 'start', token)
13101323 					this.startOrEnd = "后开启"
13111324 					return
1312
-				}
1313
-			}
1314
-			if (expireTime) {
1315
-				const expireTimetamp = new Date(expireTime.split('-').join('/')).getTime();
1316
-				if (expireTimetamp < nowTimestamp) {
1325
+					}
1326
+					}
1327
+					if (expireTime) {
1328
+					const expireTimetamp = new Date(expireTime.split('-').join('/')).getTime();
1329
+					if (expireTimetamp < nowTimestamp) {
13171330 					return
1318
-				}
1319
-				this.countdownTimer(expireTime.split('-').join('/'), 'end')
1331
+					}
1332
+					this.countdownTimer(expireTime.split('-').join('/'), 'end', token)
13201333 				this.startOrEnd = "后结束"
13211334 			}
13221335 		},
....@@ -1438,6 +1451,21 @@
14381451 				this.$refs.popNewuserRef.show()
14391452 			}
14401453 		},
1454
+		// 预取抽奖banner真实宽高，计算出高度后再渲染，避免加载前被组件默认高度(225px)撑大
1455
+		setLotteryBannerSize(info) {
1456
+			let that = this
1457
+			that.lotteryBannerHeight = ''
1458
+			if (!info || !info.isLottery || !info.lotteryBanner) return
1459
+			uni.getImageInfo({
1460
+				src: info.lotteryBanner,
1461
+				success: (img) => {
1462
+					if (img.width > 0 && img.height > 0) {
1463
+						that.lotteryBannerHeight = (690 * img.height / img.width).toFixed(2) + 'rpx'
1464
+					}
1465
+				},
1466
+				fail: () => { }
1467
+			})
1468
+		},
14411469 		getZoneDetail: function () {
14421470 			let that = this;
14431471 			let belong = this.$store.getters.belong;
....@@ -1445,6 +1473,11 @@
14451473 			console.log('专区详情入参：：', params)
14461474 			getZoneDetail(that.id, params).then(res => {
14471475 				that.info = res.data;
1476
+<<<<<<< Updated upstream
1477
+=======
1478
+				//that.info.zoneType=8;
1479
+				that.setLotteryBannerSize(res.data);
1480
+>>>>>>> Stashed changes
14481481 				that.updateZoneShareMenu();
14491482 				if (res.data.zoneType == 6) {
14501483 					that.setYueyangZone()
....@@ -1454,7 +1487,7 @@
14541487 						that.homeTop = that.getHomeTop(0.4)
14551488 					}
14561489 					that.expireTime = [];
1457
-					that.expireTimeUnit = [];
1490
+					that.countdownToken++;
14581491 					that.where.page = 1;
14591492 					that.getGoodList()
14601493 					that.validAlert(res.data)
....@@ -1480,8 +1513,9 @@
14801513 				}
14811514 			});
14821515 		},
1483
-		countdownTimer(expireTime, type) {
1516
+		countdownTimer(expireTime, type, token) {
14841517 			if (!expireTime) return
1518
+			if (token !== undefined && token !== this.countdownToken) return
14851519 			let that = this;
14861520 			// 结束时间的时间戳（需传入一个有效的日期对象或时间戳）
14871521 			const endTimestamp = new Date(expireTime).getTime();
....@@ -1493,56 +1527,56 @@
14931527 			if (type == 'end') {
14941528 				if (diff <= 0) {
14951529 					this.expireTime = []
1496
-					this.expireTimeUnit = []
14971530 					return
14981531 				} else { }
14991532 			} else if (type == 'start') {
15001533 				if (diff <= 0) {
15011534 					this.expireTime = []
1502
-					this.expireTimeUnit = []
15031535 					const expireTime2 = that.info.expireTime
15041536 					if (expireTime2) {
15051537 						const expireTimetamp = new Date(expireTime2.split('-').join('/')).getTime();
15061538 						if (expireTimetamp < nowTimestamp) {
15071539 							return
15081540 						}
1509
-						this.countdownTimer(expireTime2.split('-').join('/'), 'end')
1541
+						this.countdownTimer(expireTime2.split('-').join('/'), 'end', token)
15101542 						this.startOrEnd = "后结束"
15111543 					}
15121544 					return
15131545 				}
15141546 			}
1547
+			const pad = num => (num < 10 ? '0' + num : String(num))
15151548 			const res = []
1516
-			const unit = []
15171549 			const days = Math.floor(diff / (1000 * 60 * 60 * 24))
15181550 			diff %= (1000 * 60 * 60 * 24)
1519
-			if (days > 0) {
1520
-				res.push(days);
1521
-				unit.push('日')
1522
-			}
15231551 			// 转换为小时、分钟、秒
15241552 			const hours = Math.floor(diff / (1000 * 60 * 60));
15251553 			diff %= (1000 * 60 * 60); // 剩余毫秒数
1526
-			if (hours > 0) {
1527
-				res.push(hours < 10 ? '0' + hours : hours);
1528
-				unit.push('时')
1529
-			}
15301554 			const minutes = Math.floor(diff / (1000 * 60));
1531
-			if (minutes > 0) {
1532
-				res.push(minutes < 10 ? '0' + minutes : minutes);
1533
-				unit.push('分')
1534
-			}
15351555 			diff %= (1000 * 60); // 剩余毫秒数
15361556 			const seconds = Math.floor(diff / 1000);
1537
-			if (seconds > 0) {
1538
-				res.push(seconds < 10 ? '0' + seconds : seconds);
1539
-				unit.push('秒')
1557
+			// 天数为 0 时不展示，时/分/秒始终展示（补 0），保证倒计时长度稳定
1558
+			if (days > 0) {
1559
+				res.push({
1560
+					digits: pad(days).split(''),
1561
+					unit: '日'
1562
+				})
15401563 			}
1564
+			res.push({
1565
+				digits: pad(hours).split(''),
1566
+				unit: '时'
1567
+			})
1568
+			res.push({
1569
+				digits: pad(minutes).split(''),
1570
+				unit: '分'
1571
+			})
1572
+			res.push({
1573
+				digits: pad(seconds).split(''),
1574
+				unit: '秒'
1575
+			})
15411576 			this.expireTime = res
1542
-			this.expireTimeUnit = unit
15431577 			if (this.isPageShow) {
15441578 				setTimeout(() => {
1545
-					that.countdownTimer(expireTime, type)
1579
+					that.countdownTimer(expireTime, type, token)
15461580 				}, 1000)
15471581 			}
15481582 		},
....@@ -1629,13 +1663,11 @@
16291663 .lottery_banner {
16301664 	margin: 15rpx auto;
16311665 	width: 690rpx;
1632
-	height: 120rpx;
16331666 	text-align: center;
16341667 }
16351668 
16361669 .lottery_bannerImg {
16371670 	width: 690rpx;
1638
-	height: 120rpx;
16391671 }
16401672 
16411673 .tag-wrap-container {
....@@ -1834,6 +1866,21 @@
18341866 	position: absolute;
18351867 	top: 50%;
18361868 	transform: translate(0, -50%);
1869
+}
1870
+
1871
+.detail-btn {
1872
+	border: 2rpx solid #fff;
1873
+	border-top-left-radius: 20rpx;
1874
+	border-bottom-left-radius: 20rpx;
1875
+	padding: 10rpx;
1876
+	background-color: #daf2b2;
1877
+	color: #1e984f;
1878
+	width: 50rpx;
1879
+	position: fixed;
1880
+	top: 200rpx;
1881
+	right: 0rpx;
1882
+	line-height: 1rem;
1883
+	z-index: 99;
18371884 }
18381885 
18391886 .head_img {
....@@ -2062,11 +2109,22 @@
20622109 	padding: 15rpx;
20632110 	padding-left: 30rpx;
20642111 	color: #979797;
2112
+	font-size: 26rpx;
20652113 
20662114 	.num {
2115
+		display: inline-block;
20672116 		color: #000000;
20682117 		background: #FFE20E;
2069
-		padding: 0 10rpx;
2118
+		padding: 0 6rpx;
2119
+		margin: 0 4rpx;
2120
+		vertical-align: middle;
2121
+	}
2122
+
2123
+	/* 每个数字固定宽度，避免倒计时跳动时宽度忽长忽短 */
2124
+	.digit {
2125
+		display: inline-block;
2126
+		width: 19rpx;
2127
+		text-align: center;
20702128 	}
20712129 }
20722130 </style>