blame | 历史 | 补丁 | 提交 | 提交对比
Jacob
4 天以前 f564a64d3c99b4d300e54e038446227a440bba48 
 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,8 @@
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">
9194 				</image>
9295 			</view>
9396 			<view class="tag-img-container" v-if="info.zoneType == 7">
....@@ -513,7 +516,7 @@
513516 
514517 <script>
515518 import {
516
-	HTTP_REQUEST_URL
519
+	WEB_ACTIVITY_BASE
517520 } from '@/config/app';
518521 import {
519522 	mapGetters
....@@ -604,7 +607,7 @@
604607 			showMenu: false,
605608 			selectedMenuArr: [],
606609 			expireTime: [],
607
-			expireTimeUnit: [],
610
+			countdownToken: 0,
608611 			isPageShow: false,
609612 			loginBackFn: null,
610613 			errText: '',
....@@ -1226,6 +1229,11 @@
12261229 				// that.myCareBean = res2.data.totalCareBeans;
12271230 			});
12281231 		},
1232
+		goDetail() {
1233
+			uni.navigateTo({
1234
+				url: '/pages/consumption/index?zoneId=' + this.info.id
1235
+			})
1236
+		},
12291237 		goLottery() {
12301238 			let that = this;
12311239 			var data = {
....@@ -1237,11 +1245,7 @@
12371245 			this.addTrack('yy_marketPageClick', data);
12381246 
12391247 			function go() {
1240
-				let webUrl = 'https://ossacmall.bluedeer.com.cn/acmall_lottery/index.html'
1241
-				if (HTTP_REQUEST_URL.indexOf('tohours') > 0) {
1242
-					webUrl = webUrl.replace('https://ossacmall.bluedeer.com.cn',
1243
-						'https://sit.tohours.com/crmeb_web')
1244
-				}
1248
+				let webUrl = `${WEB_ACTIVITY_BASE}/acmall_lottery/index.html`
12451249 				webUrl += '?token=' +
12461250 					that.$store.getters.token + '&unionId=' + that.$store.getters.unionId + '&mdayId=' + that.info
12471251 						.mdayId
....@@ -1323,6 +1327,9 @@
13231327 			})
13241328 		},
13251329 		validAlert(data) {
1330
+			// 每次重新计算前作废旧的倒计时链，避免多条定时器同时刷新导致数字跳动
1331
+			this.countdownToken++
1332
+			const token = this.countdownToken
13261333 			const {
13271334 				startTime,
13281335 				expireTime
....@@ -1341,17 +1348,17 @@
13411348 					let minutes = startTimetamp.getMinutes()
13421349 					minutes = minutes < 10 ? '0' + minutes : minutes;
13431350 
1344
-					this.countdownTimer(startTime.split('-').join('/'), 'start')
1351
+					this.countdownTimer(startTime.split('-').join('/'), 'start', token)
13451352 					this.startOrEnd = "后开启"
13461353 					return
1347
-				}
1348
-			}
1349
-			if (expireTime) {
1350
-				const expireTimetamp = new Date(expireTime.split('-').join('/')).getTime();
1351
-				if (expireTimetamp < nowTimestamp) {
1354
+					}
1355
+					}
1356
+					if (expireTime) {
1357
+					const expireTimetamp = new Date(expireTime.split('-').join('/')).getTime();
1358
+					if (expireTimetamp < nowTimestamp) {
13521359 					return
1353
-				}
1354
-				this.countdownTimer(expireTime.split('-').join('/'), 'end')
1360
+					}
1361
+					this.countdownTimer(expireTime.split('-').join('/'), 'end', token)
13551362 				this.startOrEnd = "后结束"
13561363 			}
13571364 		},
....@@ -1490,7 +1497,7 @@
14901497 						that.homeTop = that.getHomeTop(0.4)
14911498 					}
14921499 					that.expireTime = [];
1493
-					that.expireTimeUnit = [];
1500
+					that.countdownToken++;
14941501 					that.where.page = 1;
14951502 					that.getGoodList()
14961503 					that.validAlert(res.data)
....@@ -1516,8 +1523,9 @@
15161523 				}
15171524 			});
15181525 		},
1519
-		countdownTimer(expireTime, type) {
1526
+		countdownTimer(expireTime, type, token) {
15201527 			if (!expireTime) return
1528
+			if (token !== undefined && token !== this.countdownToken) return
15211529 			let that = this;
15221530 			// 结束时间的时间戳（需传入一个有效的日期对象或时间戳）
15231531 			const endTimestamp = new Date(expireTime).getTime();
....@@ -1529,56 +1537,56 @@
15291537 			if (type == 'end') {
15301538 				if (diff <= 0) {
15311539 					this.expireTime = []
1532
-					this.expireTimeUnit = []
15331540 					return
15341541 				} else { }
15351542 			} else if (type == 'start') {
15361543 				if (diff <= 0) {
15371544 					this.expireTime = []
1538
-					this.expireTimeUnit = []
15391545 					const expireTime2 = that.info.expireTime
15401546 					if (expireTime2) {
15411547 						const expireTimetamp = new Date(expireTime2.split('-').join('/')).getTime();
15421548 						if (expireTimetamp < nowTimestamp) {
15431549 							return
15441550 						}
1545
-						this.countdownTimer(expireTime2.split('-').join('/'), 'end')
1551
+						this.countdownTimer(expireTime2.split('-').join('/'), 'end', token)
15461552 						this.startOrEnd = "后结束"
15471553 					}
15481554 					return
15491555 				}
15501556 			}
1557
+			const pad = num => (num < 10 ? '0' + num : String(num))
15511558 			const res = []
1552
-			const unit = []
15531559 			const days = Math.floor(diff / (1000 * 60 * 60 * 24))
15541560 			diff %= (1000 * 60 * 60 * 24)
1555
-			if (days > 0) {
1556
-				res.push(days);
1557
-				unit.push('日')
1558
-			}
15591561 			// 转换为小时、分钟、秒
15601562 			const hours = Math.floor(diff / (1000 * 60 * 60));
15611563 			diff %= (1000 * 60 * 60); // 剩余毫秒数
1562
-			if (hours > 0) {
1563
-				res.push(hours < 10 ? '0' + hours : hours);
1564
-				unit.push('时')
1565
-			}
15661564 			const minutes = Math.floor(diff / (1000 * 60));
1567
-			if (minutes > 0) {
1568
-				res.push(minutes < 10 ? '0' + minutes : minutes);
1569
-				unit.push('分')
1570
-			}
15711565 			diff %= (1000 * 60); // 剩余毫秒数
15721566 			const seconds = Math.floor(diff / 1000);
1573
-			if (seconds > 0) {
1574
-				res.push(seconds < 10 ? '0' + seconds : seconds);
1575
-				unit.push('秒')
1567
+			// 天数为 0 时不展示，时/分/秒始终展示（补 0），保证倒计时长度稳定
1568
+			if (days > 0) {
1569
+				res.push({
1570
+					digits: pad(days).split(''),
1571
+					unit: '日'
1572
+				})
15761573 			}
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
+			})
15771586 			this.expireTime = res
1578
-			this.expireTimeUnit = unit
15791587 			if (this.isPageShow) {
15801588 				setTimeout(() => {
1581
-					that.countdownTimer(expireTime, type)
1589
+					that.countdownTimer(expireTime, type, token)
15821590 				}, 1000)
15831591 			}
15841592 		},
....@@ -1665,13 +1673,11 @@
16651673 .lottery_banner {
16661674 	margin: 15rpx auto;
16671675 	width: 690rpx;
1668
-	height: 120rpx;
16691676 	text-align: center;
16701677 }
16711678 
16721679 .lottery_bannerImg {
16731680 	width: 690rpx;
1674
-	height: 120rpx;
16751681 }
16761682 
16771683 .tag-wrap-container {
....@@ -1870,6 +1876,21 @@
18701876 	position: absolute;
18711877 	top: 50%;
18721878 	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;
18731894 }
18741895 
18751896 .head_img {
....@@ -2140,11 +2161,22 @@
21402161 	padding: 15rpx;
21412162 	padding-left: 30rpx;
21422163 	color: #979797;
2164
+	font-size: 26rpx;
21432165 
21442166 	.num {
2167
+		display: inline-block;
21452168 		color: #000000;
21462169 		background: #FFE20E;
2147
-		padding: 0 10rpx;
2170
+		padding: 0 6rpx;
2171
+		margin: 0 4rpx;
2172
+		vertical-align: middle;
2173
+	}
2174
+
2175
+	/* 每个数字固定宽度，避免倒计时跳动时宽度忽长忽短 */
2176
+	.digit {
2177
+		display: inline-block;
2178
+		width: 19rpx;
2179
+		text-align: center;
21482180 	}
21492181 }
21502182 </style>