blame | 历史 | 补丁 | 提交 | 提交对比
Jacob
1 天以前 76005787a10f1cf2e26f1b0c1672836b7d633ed2 
 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,10 @@
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"
75
+				v-if="info && info.isLottery && info.lotteryBanner && lotteryBannerReady">
76
+				<image class="lottery_bannerImg" :src="info.lotteryBanner" mode="widthFix"
77
+					:style="{ height: lotteryBannerHeight }">
7378 				</image>
7479 			</view>
7580 			<view class="tag-img-container" v-if="info.zoneType == 7">
....@@ -495,7 +500,7 @@
495500 
496501 <script>
497502 import {
498
-	HTTP_REQUEST_URL
503
+	WEB_ACTIVITY_BASE
499504 } from '@/config/app';
500505 import {
501506 	mapGetters
....@@ -586,7 +591,7 @@
586591 			showMenu: false,
587592 			selectedMenuArr: [],
588593 			expireTime: [],
589
-			expireTimeUnit: [],
594
+			countdownToken: 0,
590595 			isPageShow: false,
591596 			loginBackFn: null,
592597 			errText: '',
....@@ -619,6 +624,8 @@
619624 			stockEmpty: true,
620625 			urlOption: {},
621626 			homeTop: '200',
627
+			lotteryBannerHeight: '', //抽奖banner预计算高度（rpx），空字符串表示未取到，按原逻辑自适应
628
+			lotteryBannerReady: false, //是否已拿到banner尺寸（或已确认拿不到），未就绪前不渲染，避免首帧撑高
622629 			hasNewPop: false,
623630 			leftCoupon: {},
624631 			rightCoupon: {},
....@@ -1195,6 +1202,11 @@
11951202 				// that.myCareBean = res2.data.totalCareBeans;
11961203 			});
11971204 		},
1205
+		goDetail() {
1206
+			uni.navigateTo({
1207
+				url: '/pages/consumption/index?zoneId=' + this.info.id
1208
+			})
1209
+		},
11981210 		goLottery() {
11991211 			let that = this;
12001212 			var data = {
....@@ -1206,11 +1218,7 @@
12061218 			this.addTrack('yy_marketPageClick', data);
12071219 
12081220 			function go() {
1209
-				let webUrl = 'https://ossacmall.bluedeer.com.cn/acmall_lottery/index.html'
1210
-				if (HTTP_REQUEST_URL.indexOf('tohours') > 0) {
1211
-					webUrl = webUrl.replace('https://ossacmall.bluedeer.com.cn',
1212
-						'https://sit.tohours.com/crmeb_web')
1213
-				}
1221
+				let webUrl = `${WEB_ACTIVITY_BASE}/acmall_lottery/index.html`
12141222 				webUrl += '?token=' +
12151223 					that.$store.getters.token + '&unionId=' + that.$store.getters.unionId + '&mdayId=' + that.info
12161224 						.mdayId
....@@ -1292,6 +1300,9 @@
12921300 			})
12931301 		},
12941302 		validAlert(data) {
1303
+			// 每次重新计算前作废旧的倒计时链，避免多条定时器同时刷新导致数字跳动
1304
+			this.countdownToken++
1305
+			const token = this.countdownToken
12951306 			const {
12961307 				startTime,
12971308 				expireTime
....@@ -1310,17 +1321,17 @@
13101321 					let minutes = startTimetamp.getMinutes()
13111322 					minutes = minutes < 10 ? '0' + minutes : minutes;
13121323 
1313
-					this.countdownTimer(startTime.split('-').join('/'), 'start')
1324
+					this.countdownTimer(startTime.split('-').join('/'), 'start', token)
13141325 					this.startOrEnd = "后开启"
13151326 					return
1316
-				}
1317
-			}
1318
-			if (expireTime) {
1319
-				const expireTimetamp = new Date(expireTime.split('-').join('/')).getTime();
1320
-				if (expireTimetamp < nowTimestamp) {
1327
+					}
1328
+					}
1329
+					if (expireTime) {
1330
+					const expireTimetamp = new Date(expireTime.split('-').join('/')).getTime();
1331
+					if (expireTimetamp < nowTimestamp) {
13211332 					return
1322
-				}
1323
-				this.countdownTimer(expireTime.split('-').join('/'), 'end')
1333
+					}
1334
+					this.countdownTimer(expireTime.split('-').join('/'), 'end', token)
13241335 				this.startOrEnd = "后结束"
13251336 			}
13261337 		},
....@@ -1442,6 +1453,29 @@
14421453 				this.$refs.popNewuserRef.show()
14431454 			}
14441455 		},
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
+		},
14451479 		getZoneDetail: function () {
14461480 			let that = this;
14471481 			let belong = this.$store.getters.belong;
....@@ -1449,6 +1483,11 @@
14491483 			console.log('专区详情入参：：', params)
14501484 			getZoneDetail(that.id, params).then(res => {
14511485 				that.info = res.data;
1486
+<<<<<<< Updated upstream
1487
+=======
1488
+				//that.info.zoneType=8;
1489
+				that.setLotteryBannerSize(res.data);
1490
+>>>>>>> Stashed changes
14521491 				that.updateZoneShareMenu();
14531492 				if (res.data.zoneType == 6) {
14541493 					that.setYueyangZone()
....@@ -1458,7 +1497,7 @@
14581497 						that.homeTop = that.getHomeTop(0.4)
14591498 					}
14601499 					that.expireTime = [];
1461
-					that.expireTimeUnit = [];
1500
+					that.countdownToken++;
14621501 					that.where.page = 1;
14631502 					that.getGoodList()
14641503 					that.validAlert(res.data)
....@@ -1484,8 +1523,9 @@
14841523 				}
14851524 			});
14861525 		},
1487
-		countdownTimer(expireTime, type) {
1526
+		countdownTimer(expireTime, type, token) {
14881527 			if (!expireTime) return
1528
+			if (token !== undefined && token !== this.countdownToken) return
14891529 			let that = this;
14901530 			// 结束时间的时间戳（需传入一个有效的日期对象或时间戳）
14911531 			const endTimestamp = new Date(expireTime).getTime();
....@@ -1497,56 +1537,56 @@
14971537 			if (type == 'end') {
14981538 				if (diff <= 0) {
14991539 					this.expireTime = []
1500
-					this.expireTimeUnit = []
15011540 					return
15021541 				} else { }
15031542 			} else if (type == 'start') {
15041543 				if (diff <= 0) {
15051544 					this.expireTime = []
1506
-					this.expireTimeUnit = []
15071545 					const expireTime2 = that.info.expireTime
15081546 					if (expireTime2) {
15091547 						const expireTimetamp = new Date(expireTime2.split('-').join('/')).getTime();
15101548 						if (expireTimetamp < nowTimestamp) {
15111549 							return
15121550 						}
1513
-						this.countdownTimer(expireTime2.split('-').join('/'), 'end')
1551
+						this.countdownTimer(expireTime2.split('-').join('/'), 'end', token)
15141552 						this.startOrEnd = "后结束"
15151553 					}
15161554 					return
15171555 				}
15181556 			}
1557
+			const pad = num => (num < 10 ? '0' + num : String(num))
15191558 			const res = []
1520
-			const unit = []
15211559 			const days = Math.floor(diff / (1000 * 60 * 60 * 24))
15221560 			diff %= (1000 * 60 * 60 * 24)
1523
-			if (days > 0) {
1524
-				res.push(days);
1525
-				unit.push('日')
1526
-			}
15271561 			// 转换为小时、分钟、秒
15281562 			const hours = Math.floor(diff / (1000 * 60 * 60));
15291563 			diff %= (1000 * 60 * 60); // 剩余毫秒数
1530
-			if (hours > 0) {
1531
-				res.push(hours < 10 ? '0' + hours : hours);
1532
-				unit.push('时')
1533
-			}
15341564 			const minutes = Math.floor(diff / (1000 * 60));
1535
-			if (minutes > 0) {
1536
-				res.push(minutes < 10 ? '0' + minutes : minutes);
1537
-				unit.push('分')
1538
-			}
15391565 			diff %= (1000 * 60); // 剩余毫秒数
15401566 			const seconds = Math.floor(diff / 1000);
1541
-			if (seconds > 0) {
1542
-				res.push(seconds < 10 ? '0' + seconds : seconds);
1543
-				unit.push('秒')
1567
+			// 天数为 0 时不展示，时/分/秒始终展示（补 0），保证倒计时长度稳定
1568
+			if (days > 0) {
1569
+				res.push({
1570
+					digits: pad(days).split(''),
1571
+					unit: '日'
1572
+				})
15441573 			}
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
+			})
15451586 			this.expireTime = res
1546
-			this.expireTimeUnit = unit
15471587 			if (this.isPageShow) {
15481588 				setTimeout(() => {
1549
-					that.countdownTimer(expireTime, type)
1589
+					that.countdownTimer(expireTime, type, token)
15501590 				}, 1000)
15511591 			}
15521592 		},
....@@ -1633,13 +1673,11 @@
16331673 .lottery_banner {
16341674 	margin: 15rpx auto;
16351675 	width: 690rpx;
1636
-	height: 120rpx;
16371676 	text-align: center;
16381677 }
16391678 
16401679 .lottery_bannerImg {
16411680 	width: 690rpx;
1642
-	height: 120rpx;
16431681 }
16441682 
16451683 .tag-wrap-container {
....@@ -1838,6 +1876,21 @@
18381876 	position: absolute;
18391877 	top: 50%;
18401878 	transform: translate(0, -50%);
1879
+}
1880
+
1881
+.detail-btn {
1882
+	border: 2rpx solid #fff;
1883
+	border-top-left-radius: 20rpx;
1884
+	border-bottom-left-radius: 20rpx;
1885
+	padding: 10rpx;
1886
+	background-color: #daf2b2;
1887
+	color: #1e984f;
1888
+	width: 50rpx;
1889
+	position: fixed;
1890
+	top: 200rpx;
1891
+	right: 0rpx;
1892
+	line-height: 1rem;
1893
+	z-index: 99;
18411894 }
18421895 
18431896 .head_img {
....@@ -2066,11 +2119,22 @@
20662119 	padding: 15rpx;
20672120 	padding-left: 30rpx;
20682121 	color: #979797;
2122
+	font-size: 26rpx;
20692123 
20702124 	.num {
2125
+		display: inline-block;
20712126 		color: #000000;
20722127 		background: #FFE20E;
2073
-		padding: 0 10rpx;
2128
+		padding: 0 6rpx;
2129
+		margin: 0 4rpx;
2130
+		vertical-align: middle;
2131
+	}
2132
+
2133
+	/* 每个数字固定宽度，避免倒计时跳动时宽度忽长忽短 */
2134
+	.digit {
2135
+		display: inline-block;
2136
+		width: 19rpx;
2137
+		text-align: center;
20742138 	}
20752139 }
20762140 </style>