Merge branch 'dev' into sit

Jacob

1 天以前 24b8f2afa92ce7bbe490185ecbab869c460b798b

 pages/zone/index.vue
..
..
@@ -29,6 +29,24 @@
29
29
 			<view class="head_img">
30
30
 				<image :src="info.image"></image>
31
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>
49
+			</view>
32
50
 			<view class="tag-wrap-container" :style="'top:' + (marTop) + 'px;'" v-if="info.zoneType == 7">
33
51
 				<view class="tag-wrap">
34
52
 					<!-- 标签列表 -->
..
..
@@ -72,7 +90,8 @@
72
90
 				</view>
73
91
 			</view>
74
92
 			<view @click="goLottery" class="lottery_banner" v-if="info && info.isLottery && info.lotteryBanner">
75
-				<image class="lottery_bannerImg" :src="info.lotteryBanner" mode="widthFix">
93
+				<image class="lottery_bannerImg" :src="info.lotteryBanner" mode="widthFix"
94
+					:style="{ height: lotteryBannerHeight }">
76
95
 				</image>
77
96
 			</view>
78
97
 			<view class="tag-img-container" v-if="info.zoneType == 7">
..
..
@@ -599,6 +618,8 @@
599
618
 			isYueyangZone: false,
600
619
 			isOpen: false, // 默认收起，false收起/true展开
601
620
 			currentIndex: -1, // 默认选中第一个【全部】
621
+			videoControls: true, // 专区活动视频是否显示海报+播放按钮
622
+			zoneVideoContext: '', // 活动视频播放上下文
602
623
 			partitionList: [],
603
624
 			partitionProject: {},
604
625
 			tagList: [],
..
..
@@ -622,6 +643,7 @@
622
643
 			stockEmpty: true,
623
644
 			urlOption: {},
624
645
 			homeTop: '200',
646
+			lotteryBannerHeight: '', //抽奖banner预计算高度（rpx），空字符串表示未取到，按原逻辑自适应
625
647
 			hasNewPop: false,
626
648
 			leftCoupon: {},
627
649
 			rightCoupon: {},
..
..
@@ -838,6 +860,17 @@
838
860
 		}
839
861
 	},
840
862
 	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() { },
841
874
 		handleCouponRule() {
842
875
 			this.$refs.personalAndShareCouponRuleRef.show(this.info.ruleContentText)
843
876
 		},
..
..
@@ -1449,6 +1482,21 @@
1449
1482
 				this.$refs.popNewuserRef.show()
1450
1483
 			}
1451
1484
 		},
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
+		},
1452
1500
 		getZoneDetail: function () {
1453
1501
 			let that = this;
1454
1502
 			let belong = this.$store.getters.belong;
..
..
@@ -1456,6 +1504,7 @@
1456
1504
 			console.log('专区详情入参：：', params)
1457
1505
 			getZoneDetail(that.id, params).then(res => {
1458
1506
 				that.info = res.data;
1507
+				that.setLotteryBannerSize(res.data);
1459
1508
 				that.updateZoneShareMenu();
1460
1509
 				if (res.data.zoneType == 6) {
1461
1510
 					that.setYueyangZone()
..
..
@@ -1871,6 +1920,48 @@
1871
1920
 	}
1872
1921
 }
1873
1922
 
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
+
1874
1965
 .toolbarList {
1875
1966
 	width: 750rpx;
1876
1967
 	position: -webkit-sticky;