blame | 历史 | 补丁 | 提交 | 提交对比
Jacob
4 天以前 f564a64d3c99b4d300e54e038446227a440bba48 
 pages/zone/index.vue
....@@ -14,16 +14,38 @@
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>
2529 			<view class="head_img">
2630 				<image :src="info.image"></image>
31
+			</view>
32
+			<view v-if="info.zoneType == 8 && info.info" class="rich-content">
33
+				<rich-text :nodes="info.info"></rich-text>
34
+			</view>
35
+			<view v-if="info.zoneType == 8 && info.uploadVideo" class="video-wrap">
36
+				<view v-show="!videoControls" style="width:100%;height:750rpx">
37
+					<video id="zoneVideo" :src='info.uploadVideo' objectFit="contain" controls
38
+						style="width:100%;height:100%" show-center-play-btn="true" show-mute-btn="true" muted="true"
39
+						show-fullscreen-btn="true" auto-pause-if-navigate :custom-cache="false"
40
+						:enable-progress-gesture="true" show-progress="false"
41
+						:poster="info.uploadVideoImg || info.image" @pause="zoneVideoPause"></video>
42
+				</view>
43
+				<view class="video-poster" v-show="videoControls">
44
+					<image class="image" :src="info.uploadVideoImg || info.image"></image>
45
+				</view>
46
+				<view class="video-stop" v-show="videoControls" @tap="bindZoneVideoPlay">
47
+					<image class="image" src="https://ossacmall.bluedeer.com.cn/app/static/images/stop.png"></image>
48
+				</view>
2749 			</view>
2850 			<view class="tag-wrap-container" :style="'top:' + (marTop) + 'px;'" v-if="info.zoneType == 7">
2951 				<view class="tag-wrap">
....@@ -67,9 +89,8 @@
6789 					</view>
6890 				</view>
6991 			</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">
92
+			<view @click="goLottery" class="lottery_banner" v-if="info && info.isLottery && info.lotteryBanner">
93
+				<image class="lottery_bannerImg" :src="info.lotteryBanner" mode="widthFix">
7394 				</image>
7495 			</view>
7596 			<view class="tag-img-container" v-if="info.zoneType == 7">
....@@ -586,7 +607,7 @@
586607 			showMenu: false,
587608 			selectedMenuArr: [],
588609 			expireTime: [],
589
-			expireTimeUnit: [],
610
+			countdownToken: 0,
590611 			isPageShow: false,
591612 			loginBackFn: null,
592613 			errText: '',
....@@ -596,6 +617,8 @@
596617 			isYueyangZone: false,
597618 			isOpen: false, // 默认收起，false收起/true展开
598619 			currentIndex: -1, // 默认选中第一个【全部】
620
+			videoControls: true, // 专区活动视频是否显示海报+播放按钮
621
+			zoneVideoContext: '', // 活动视频播放上下文
599622 			partitionList: [],
600623 			partitionProject: {},
601624 			tagList: [],
....@@ -835,6 +858,17 @@
835858 		}
836859 	},
837860 	methods: {
861
+		/**
862
+		 * 专区活动视频：点击海报播放按钮后播放
863
+		 */
864
+		bindZoneVideoPlay() {
865
+			if (!this.zoneVideoContext) {
866
+				this.zoneVideoContext = uni.createVideoContext('zoneVideo', this);
867
+			}
868
+			this.$set(this, 'videoControls', false);
869
+			this.zoneVideoContext.play();
870
+		},
871
+		zoneVideoPause() { },
838872 		handleCouponRule() {
839873 			this.$refs.personalAndShareCouponRuleRef.show(this.info.ruleContentText)
840874 		},
....@@ -1195,6 +1229,11 @@
11951229 				// that.myCareBean = res2.data.totalCareBeans;
11961230 			});
11971231 		},
1232
+		goDetail() {
1233
+			uni.navigateTo({
1234
+				url: '/pages/consumption/index?zoneId=' + this.info.id
1235
+			})
1236
+		},
11981237 		goLottery() {
11991238 			let that = this;
12001239 			var data = {
....@@ -1288,6 +1327,9 @@
12881327 			})
12891328 		},
12901329 		validAlert(data) {
1330
+			// 每次重新计算前作废旧的倒计时链，避免多条定时器同时刷新导致数字跳动
1331
+			this.countdownToken++
1332
+			const token = this.countdownToken
12911333 			const {
12921334 				startTime,
12931335 				expireTime
....@@ -1306,17 +1348,17 @@
13061348 					let minutes = startTimetamp.getMinutes()
13071349 					minutes = minutes < 10 ? '0' + minutes : minutes;
13081350 
1309
-					this.countdownTimer(startTime.split('-').join('/'), 'start')
1351
+					this.countdownTimer(startTime.split('-').join('/'), 'start', token)
13101352 					this.startOrEnd = "后开启"
13111353 					return
1312
-				}
1313
-			}
1314
-			if (expireTime) {
1315
-				const expireTimetamp = new Date(expireTime.split('-').join('/')).getTime();
1316
-				if (expireTimetamp < nowTimestamp) {
1354
+					}
1355
+					}
1356
+					if (expireTime) {
1357
+					const expireTimetamp = new Date(expireTime.split('-').join('/')).getTime();
1358
+					if (expireTimetamp < nowTimestamp) {
13171359 					return
1318
-				}
1319
-				this.countdownTimer(expireTime.split('-').join('/'), 'end')
1360
+					}
1361
+					this.countdownTimer(expireTime.split('-').join('/'), 'end', token)
13201362 				this.startOrEnd = "后结束"
13211363 			}
13221364 		},
....@@ -1445,6 +1487,7 @@
14451487 			console.log('专区详情入参：：', params)
14461488 			getZoneDetail(that.id, params).then(res => {
14471489 				that.info = res.data;
1490
+				//that.info.zoneType=8;
14481491 				that.updateZoneShareMenu();
14491492 				if (res.data.zoneType == 6) {
14501493 					that.setYueyangZone()
....@@ -1454,7 +1497,7 @@
14541497 						that.homeTop = that.getHomeTop(0.4)
14551498 					}
14561499 					that.expireTime = [];
1457
-					that.expireTimeUnit = [];
1500
+					that.countdownToken++;
14581501 					that.where.page = 1;
14591502 					that.getGoodList()
14601503 					that.validAlert(res.data)
....@@ -1480,8 +1523,9 @@
14801523 				}
14811524 			});
14821525 		},
1483
-		countdownTimer(expireTime, type) {
1526
+		countdownTimer(expireTime, type, token) {
14841527 			if (!expireTime) return
1528
+			if (token !== undefined && token !== this.countdownToken) return
14851529 			let that = this;
14861530 			// 结束时间的时间戳（需传入一个有效的日期对象或时间戳）
14871531 			const endTimestamp = new Date(expireTime).getTime();
....@@ -1493,56 +1537,56 @@
14931537 			if (type == 'end') {
14941538 				if (diff <= 0) {
14951539 					this.expireTime = []
1496
-					this.expireTimeUnit = []
14971540 					return
14981541 				} else { }
14991542 			} else if (type == 'start') {
15001543 				if (diff <= 0) {
15011544 					this.expireTime = []
1502
-					this.expireTimeUnit = []
15031545 					const expireTime2 = that.info.expireTime
15041546 					if (expireTime2) {
15051547 						const expireTimetamp = new Date(expireTime2.split('-').join('/')).getTime();
15061548 						if (expireTimetamp < nowTimestamp) {
15071549 							return
15081550 						}
1509
-						this.countdownTimer(expireTime2.split('-').join('/'), 'end')
1551
+						this.countdownTimer(expireTime2.split('-').join('/'), 'end', token)
15101552 						this.startOrEnd = "后结束"
15111553 					}
15121554 					return
15131555 				}
15141556 			}
1557
+			const pad = num => (num < 10 ? '0' + num : String(num))
15151558 			const res = []
1516
-			const unit = []
15171559 			const days = Math.floor(diff / (1000 * 60 * 60 * 24))
15181560 			diff %= (1000 * 60 * 60 * 24)
1519
-			if (days > 0) {
1520
-				res.push(days);
1521
-				unit.push('日')
1522
-			}
15231561 			// 转换为小时、分钟、秒
15241562 			const hours = Math.floor(diff / (1000 * 60 * 60));
15251563 			diff %= (1000 * 60 * 60); // 剩余毫秒数
1526
-			if (hours > 0) {
1527
-				res.push(hours < 10 ? '0' + hours : hours);
1528
-				unit.push('时')
1529
-			}
15301564 			const minutes = Math.floor(diff / (1000 * 60));
1531
-			if (minutes > 0) {
1532
-				res.push(minutes < 10 ? '0' + minutes : minutes);
1533
-				unit.push('分')
1534
-			}
15351565 			diff %= (1000 * 60); // 剩余毫秒数
15361566 			const seconds = Math.floor(diff / 1000);
1537
-			if (seconds > 0) {
1538
-				res.push(seconds < 10 ? '0' + seconds : seconds);
1539
-				unit.push('秒')
1567
+			// 天数为 0 时不展示，时/分/秒始终展示（补 0），保证倒计时长度稳定
1568
+			if (days > 0) {
1569
+				res.push({
1570
+					digits: pad(days).split(''),
1571
+					unit: '日'
1572
+				})
15401573 			}
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
+			})
15411586 			this.expireTime = res
1542
-			this.expireTimeUnit = unit
15431587 			if (this.isPageShow) {
15441588 				setTimeout(() => {
1545
-					that.countdownTimer(expireTime, type)
1589
+					that.countdownTimer(expireTime, type, token)
15461590 				}, 1000)
15471591 			}
15481592 		},
....@@ -1629,13 +1673,11 @@
16291673 .lottery_banner {
16301674 	margin: 15rpx auto;
16311675 	width: 690rpx;
1632
-	height: 120rpx;
16331676 	text-align: center;
16341677 }
16351678 
16361679 .lottery_bannerImg {
16371680 	width: 690rpx;
1638
-	height: 120rpx;
16391681 }
16401682 
16411683 .tag-wrap-container {
....@@ -1836,6 +1878,21 @@
18361878 	transform: translate(0, -50%);
18371879 }
18381880 
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;
1894
+}
1895
+
18391896 .head_img {
18401897 	width: 750rpx;
18411898 	height: 422rpx;
....@@ -1844,6 +1901,48 @@
18441901 		width: 750rpx;
18451902 		height: 422rpx;
18461903 	}
1904
+}
1905
+
1906
+.rich-content {
1907
+	padding: 24rpx 30rpx;
1908
+	background-color: #fff;
1909
+}
1910
+
1911
+.video-wrap {
1912
+	position: relative;
1913
+	width: 100%;
1914
+	height: 750rpx;
1915
+	background-color: #000;
1916
+}
1917
+
1918
+.video-wrap .video-poster {
1919
+	position: absolute;
1920
+	top: 0;
1921
+	left: 0;
1922
+	width: 100%;
1923
+	height: 750rpx;
1924
+	z-index: 9;
1925
+}
1926
+
1927
+.video-wrap .video-poster .image {
1928
+	width: 100%;
1929
+	height: 100%;
1930
+}
1931
+
1932
+.video-wrap .video-stop {
1933
+	position: absolute;
1934
+	top: 50%;
1935
+	left: 50%;
1936
+	width: 136rpx;
1937
+	height: 136rpx;
1938
+	margin-top: -68rpx;
1939
+	margin-left: -68rpx;
1940
+	z-index: 9;
1941
+}
1942
+
1943
+.video-wrap .video-stop .image {
1944
+	width: 100%;
1945
+	height: 100%;
18471946 }
18481947 
18491948 .toolbarList {
....@@ -2062,11 +2161,22 @@
20622161 	padding: 15rpx;
20632162 	padding-left: 30rpx;
20642163 	color: #979797;
2164
+	font-size: 26rpx;
20652165 
20662166 	.num {
2167
+		display: inline-block;
20672168 		color: #000000;
20682169 		background: #FFE20E;
2069
-		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;
20702180 	}
20712181 }
20722182 </style>