Merge branch 'dev' into sit

Jacob

1 天以前 433c5ab2fd2a6fd48fb931b5070b742503a99a6b

 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
 					<!-- 标签列表 -->
..
..
@@ -71,8 +89,10 @@
71
89
 					</view>
72
90
 				</view>
73
91
 			</view>
74
-			<view @click="goLottery" class="lottery_banner" v-if="info && info.isLottery && info.lotteryBanner">
75
-				<image class="lottery_bannerImg" :src="info.lotteryBanner" mode="widthFix">
92
+			<view @click="goLottery" class="lottery_banner"
93
+				v-if="info && info.isLottery && info.lotteryBanner && lotteryBannerReady">
94
+				<image class="lottery_bannerImg" :src="info.lotteryBanner" mode="widthFix"
95
+					:style="{ height: lotteryBannerHeight }">
76
96
 				</image>
77
97
 			</view>
78
98
 			<view class="tag-img-container" v-if="info.zoneType == 7">
..
..
@@ -599,6 +619,8 @@
599
619
 			isYueyangZone: false,
600
620
 			isOpen: false, // 默认收起，false收起/true展开
601
621
 			currentIndex: -1, // 默认选中第一个【全部】
622
+			videoControls: true, // 专区活动视频是否显示海报+播放按钮
623
+			zoneVideoContext: '', // 活动视频播放上下文
602
624
 			partitionList: [],
603
625
 			partitionProject: {},
604
626
 			tagList: [],
..
..
@@ -622,6 +644,8 @@
622
644
 			stockEmpty: true,
623
645
 			urlOption: {},
624
646
 			homeTop: '200',
647
+			lotteryBannerHeight: '', //抽奖banner预计算高度（rpx），空字符串表示未取到，按原逻辑自适应
648
+			lotteryBannerReady: false, //是否已拿到banner尺寸（或已确认拿不到），未就绪前不渲染，避免首帧撑高
625
649
 			hasNewPop: false,
626
650
 			leftCoupon: {},
627
651
 			rightCoupon: {},
..
..
@@ -838,6 +862,17 @@
838
862
 		}
839
863
 	},
840
864
 	methods: {
865
+		/**
866
+		 * 专区活动视频：点击海报播放按钮后播放
867
+		 */
868
+		bindZoneVideoPlay() {
869
+			if (!this.zoneVideoContext) {
870
+				this.zoneVideoContext = uni.createVideoContext('zoneVideo', this);
871
+			}
872
+			this.$set(this, 'videoControls', false);
873
+			this.zoneVideoContext.play();
874
+		},
875
+		zoneVideoPause() { },
841
876
 		handleCouponRule() {
842
877
 			this.$refs.personalAndShareCouponRuleRef.show(this.info.ruleContentText)
843
878
 		},
..
..
@@ -1449,6 +1484,29 @@
1449
1484
 				this.$refs.popNewuserRef.show()
1450
1485
 			}
1451
1486
 		},
1487
+		// 预取抽奖banner真实宽高，计算出高度后再渲染，避免加载前被组件默认高度(225px)撑大
1488
+		setLotteryBannerSize(info) {
1489
+			let that = this
1490
+			that.lotteryBannerHeight = ''
1491
+			that.lotteryBannerReady = false
1492
+			if (!info || !info.isLottery || !info.lotteryBanner) {
1493
+				that.lotteryBannerReady = true
1494
+				return
1495
+			}
1496
+			uni.getImageInfo({
1497
+				src: info.lotteryBanner,
1498
+				success: (img) => {
1499
+					if (img.width > 0 && img.height > 0) {
1500
+						that.lotteryBannerHeight = (690 * img.height / img.width).toFixed(2) + 'rpx'
1501
+					}
1502
+					that.lotteryBannerReady = true
1503
+				},
1504
+				fail: (err) => {
1505
+					console.warn('抽奖banner尺寸预取失败，回退为自适应', err)
1506
+					that.lotteryBannerReady = true
1507
+				}
1508
+			})
1509
+		},
1452
1510
 		getZoneDetail: function () {
1453
1511
 			let that = this;
1454
1512
 			let belong = this.$store.getters.belong;
..
..
@@ -1456,6 +1514,7 @@
1456
1514
 			console.log('专区详情入参：：', params)
1457
1515
 			getZoneDetail(that.id, params).then(res => {
1458
1516
 				that.info = res.data;
1517
+				that.setLotteryBannerSize(res.data);
1459
1518
 				that.updateZoneShareMenu();
1460
1519
 				if (res.data.zoneType == 6) {
1461
1520
 					that.setYueyangZone()
..
..
@@ -1871,6 +1930,48 @@
1871
1930
 	}
1872
1931
 }
1873
1932
 
1933
+.rich-content {
1934
+	padding: 24rpx 30rpx;
1935
+	background-color: #fff;
1936
+}
1937
+
1938
+.video-wrap {
1939
+	position: relative;
1940
+	width: 100%;
1941
+	height: 750rpx;
1942
+	background-color: #000;
1943
+}
1944
+
1945
+.video-wrap .video-poster {
1946
+	position: absolute;
1947
+	top: 0;
1948
+	left: 0;
1949
+	width: 100%;
1950
+	height: 750rpx;
1951
+	z-index: 9;
1952
+}
1953
+
1954
+.video-wrap .video-poster .image {
1955
+	width: 100%;
1956
+	height: 100%;
1957
+}
1958
+
1959
+.video-wrap .video-stop {
1960
+	position: absolute;
1961
+	top: 50%;
1962
+	left: 50%;
1963
+	width: 136rpx;
1964
+	height: 136rpx;
1965
+	margin-top: -68rpx;
1966
+	margin-left: -68rpx;
1967
+	z-index: 9;
1968
+}
1969
+
1970
+.video-wrap .video-stop .image {
1971
+	width: 100%;
1972
+	height: 100%;
1973
+}
1974
+
1874
1975
 .toolbarList {
1875
1976
 	width: 750rpx;
1876
1977
 	position: -webkit-sticky;