blame | 历史 | 补丁 | 提交 | 提交对比
Jacob
1 天以前 24b8f2afa92ce7bbe490185ecbab869c460b798b 
 pages/zone/index.vue
....@@ -20,13 +20,32 @@
2020 		<view v-else>
2121 			<view class="expireTime" v-if="expireTime && expireTime.length">
2222 				<text>专区将在</text>
23
-				<text v-for="(val, index) in expireTime" :key="index">
24
-					<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 }}
2526 				</text>
2627 				<text>{{ startOrEnd }}</text>
2728 			</view>
2829 			<view class="head_img">
2930 				<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>
3049 			</view>
3150 			<view class="tag-wrap-container" :style="'top:' + (marTop) + 'px;'" v-if="info.zoneType == 7">
3251 				<view class="tag-wrap">
....@@ -70,9 +89,9 @@
7089 					</view>
7190 				</view>
7291 			</view>
73
-			<view @click="goLottery" class="lottery_banner" v-if="info && info.isLottery">
74
-				<image class="lottery_bannerImg"
75
-					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 }">
7695 				</image>
7796 			</view>
7897 			<view class="tag-img-container" v-if="info.zoneType == 7">
....@@ -589,7 +608,7 @@
589608 			showMenu: false,
590609 			selectedMenuArr: [],
591610 			expireTime: [],
592
-			expireTimeUnit: [],
611
+			countdownToken: 0,
593612 			isPageShow: false,
594613 			loginBackFn: null,
595614 			errText: '',
....@@ -599,6 +618,8 @@
599618 			isYueyangZone: false,
600619 			isOpen: false, // 默认收起，false收起/true展开
601620 			currentIndex: -1, // 默认选中第一个【全部】
621
+			videoControls: true, // 专区活动视频是否显示海报+播放按钮
622
+			zoneVideoContext: '', // 活动视频播放上下文
602623 			partitionList: [],
603624 			partitionProject: {},
604625 			tagList: [],
....@@ -622,6 +643,7 @@
622643 			stockEmpty: true,
623644 			urlOption: {},
624645 			homeTop: '200',
646
+			lotteryBannerHeight: '', //抽奖banner预计算高度（rpx），空字符串表示未取到，按原逻辑自适应
625647 			hasNewPop: false,
626648 			leftCoupon: {},
627649 			rightCoupon: {},
....@@ -838,6 +860,17 @@
838860 		}
839861 	},
840862 	methods: {
863
+		/**
864
+		 * 专区活动视频：点击海报播放按钮后播放
865
+		 */
866
+		bindZoneVideoPlay() {
867
+			if (!this.zoneVideoContext) {
868
+				this.zoneVideoContext = uni.createVideoContext('zoneVideo', this);
869
+			}
870
+			this.$set(this, 'videoControls', false);
871
+			this.zoneVideoContext.play();
872
+		},
873
+		zoneVideoPause() { },
841874 		handleCouponRule() {
842875 			this.$refs.personalAndShareCouponRuleRef.show(this.info.ruleContentText)
843876 		},
....@@ -1296,6 +1329,9 @@
12961329 			})
12971330 		},
12981331 		validAlert(data) {
1332
+			// 每次重新计算前作废旧的倒计时链，避免多条定时器同时刷新导致数字跳动
1333
+			this.countdownToken++
1334
+			const token = this.countdownToken
12991335 			const {
13001336 				startTime,
13011337 				expireTime
....@@ -1314,17 +1350,17 @@
13141350 					let minutes = startTimetamp.getMinutes()
13151351 					minutes = minutes < 10 ? '0' + minutes : minutes;
13161352 
1317
-					this.countdownTimer(startTime.split('-').join('/'), 'start')
1353
+					this.countdownTimer(startTime.split('-').join('/'), 'start', token)
13181354 					this.startOrEnd = "后开启"
13191355 					return
1320
-				}
1321
-			}
1322
-			if (expireTime) {
1323
-				const expireTimetamp = new Date(expireTime.split('-').join('/')).getTime();
1324
-				if (expireTimetamp < nowTimestamp) {
1356
+					}
1357
+					}
1358
+					if (expireTime) {
1359
+					const expireTimetamp = new Date(expireTime.split('-').join('/')).getTime();
1360
+					if (expireTimetamp < nowTimestamp) {
13251361 					return
1326
-				}
1327
-				this.countdownTimer(expireTime.split('-').join('/'), 'end')
1362
+					}
1363
+					this.countdownTimer(expireTime.split('-').join('/'), 'end', token)
13281364 				this.startOrEnd = "后结束"
13291365 			}
13301366 		},
....@@ -1446,6 +1482,21 @@
14461482 				this.$refs.popNewuserRef.show()
14471483 			}
14481484 		},
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
+		},
14491500 		getZoneDetail: function () {
14501501 			let that = this;
14511502 			let belong = this.$store.getters.belong;
....@@ -1453,6 +1504,7 @@
14531504 			console.log('专区详情入参：：', params)
14541505 			getZoneDetail(that.id, params).then(res => {
14551506 				that.info = res.data;
1507
+				that.setLotteryBannerSize(res.data);
14561508 				that.updateZoneShareMenu();
14571509 				if (res.data.zoneType == 6) {
14581510 					that.setYueyangZone()
....@@ -1462,7 +1514,7 @@
14621514 						that.homeTop = that.getHomeTop(0.4)
14631515 					}
14641516 					that.expireTime = [];
1465
-					that.expireTimeUnit = [];
1517
+					that.countdownToken++;
14661518 					that.where.page = 1;
14671519 					that.getGoodList()
14681520 					that.validAlert(res.data)
....@@ -1488,8 +1540,9 @@
14881540 				}
14891541 			});
14901542 		},
1491
-		countdownTimer(expireTime, type) {
1543
+		countdownTimer(expireTime, type, token) {
14921544 			if (!expireTime) return
1545
+			if (token !== undefined && token !== this.countdownToken) return
14931546 			let that = this;
14941547 			// 结束时间的时间戳（需传入一个有效的日期对象或时间戳）
14951548 			const endTimestamp = new Date(expireTime).getTime();
....@@ -1501,56 +1554,56 @@
15011554 			if (type == 'end') {
15021555 				if (diff <= 0) {
15031556 					this.expireTime = []
1504
-					this.expireTimeUnit = []
15051557 					return
15061558 				} else { }
15071559 			} else if (type == 'start') {
15081560 				if (diff <= 0) {
15091561 					this.expireTime = []
1510
-					this.expireTimeUnit = []
15111562 					const expireTime2 = that.info.expireTime
15121563 					if (expireTime2) {
15131564 						const expireTimetamp = new Date(expireTime2.split('-').join('/')).getTime();
15141565 						if (expireTimetamp < nowTimestamp) {
15151566 							return
15161567 						}
1517
-						this.countdownTimer(expireTime2.split('-').join('/'), 'end')
1568
+						this.countdownTimer(expireTime2.split('-').join('/'), 'end', token)
15181569 						this.startOrEnd = "后结束"
15191570 					}
15201571 					return
15211572 				}
15221573 			}
1574
+			const pad = num => (num < 10 ? '0' + num : String(num))
15231575 			const res = []
1524
-			const unit = []
15251576 			const days = Math.floor(diff / (1000 * 60 * 60 * 24))
15261577 			diff %= (1000 * 60 * 60 * 24)
1527
-			if (days > 0) {
1528
-				res.push(days);
1529
-				unit.push('日')
1530
-			}
15311578 			// 转换为小时、分钟、秒
15321579 			const hours = Math.floor(diff / (1000 * 60 * 60));
15331580 			diff %= (1000 * 60 * 60); // 剩余毫秒数
1534
-			if (hours > 0) {
1535
-				res.push(hours < 10 ? '0' + hours : hours);
1536
-				unit.push('时')
1537
-			}
15381581 			const minutes = Math.floor(diff / (1000 * 60));
1539
-			if (minutes > 0) {
1540
-				res.push(minutes < 10 ? '0' + minutes : minutes);
1541
-				unit.push('分')
1542
-			}
15431582 			diff %= (1000 * 60); // 剩余毫秒数
15441583 			const seconds = Math.floor(diff / 1000);
1545
-			if (seconds > 0) {
1546
-				res.push(seconds < 10 ? '0' + seconds : seconds);
1547
-				unit.push('秒')
1584
+			// 天数为 0 时不展示，时/分/秒始终展示（补 0），保证倒计时长度稳定
1585
+			if (days > 0) {
1586
+				res.push({
1587
+					digits: pad(days).split(''),
1588
+					unit: '日'
1589
+				})
15481590 			}
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
+			})
15491603 			this.expireTime = res
1550
-			this.expireTimeUnit = unit
15511604 			if (this.isPageShow) {
15521605 				setTimeout(() => {
1553
-					that.countdownTimer(expireTime, type)
1606
+					that.countdownTimer(expireTime, type, token)
15541607 				}, 1000)
15551608 			}
15561609 		},
....@@ -1637,13 +1690,11 @@
16371690 .lottery_banner {
16381691 	margin: 15rpx auto;
16391692 	width: 690rpx;
1640
-	height: 120rpx;
16411693 	text-align: center;
16421694 }
16431695 
16441696 .lottery_bannerImg {
16451697 	width: 690rpx;
1646
-	height: 120rpx;
16471698 }
16481699 
16491700 .tag-wrap-container {
....@@ -1869,6 +1920,48 @@
18691920 	}
18701921 }
18711922 
1923
+.rich-content {
1924
+	padding: 24rpx 30rpx;
1925
+	background-color: #fff;
1926
+}
1927
+
1928
+.video-wrap {
1929
+	position: relative;
1930
+	width: 100%;
1931
+	height: 750rpx;
1932
+	background-color: #000;
1933
+}
1934
+
1935
+.video-wrap .video-poster {
1936
+	position: absolute;
1937
+	top: 0;
1938
+	left: 0;
1939
+	width: 100%;
1940
+	height: 750rpx;
1941
+	z-index: 9;
1942
+}
1943
+
1944
+.video-wrap .video-poster .image {
1945
+	width: 100%;
1946
+	height: 100%;
1947
+}
1948
+
1949
+.video-wrap .video-stop {
1950
+	position: absolute;
1951
+	top: 50%;
1952
+	left: 50%;
1953
+	width: 136rpx;
1954
+	height: 136rpx;
1955
+	margin-top: -68rpx;
1956
+	margin-left: -68rpx;
1957
+	z-index: 9;
1958
+}
1959
+
1960
+.video-wrap .video-stop .image {
1961
+	width: 100%;
1962
+	height: 100%;
1963
+}
1964
+
18721965 .toolbarList {
18731966 	width: 750rpx;
18741967 	position: -webkit-sticky;
....@@ -2085,11 +2178,22 @@
20852178 	padding: 15rpx;
20862179 	padding-left: 30rpx;
20872180 	color: #979797;
2181
+	font-size: 26rpx;
20882182 
20892183 	.num {
2184
+		display: inline-block;
20902185 		color: #000000;
20912186 		background: #FFE20E;
2092
-		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;
20932197 	}
20942198 }
20952199 </style>