Merge branch 'dev' into sit

Jacob

1 天以前 106fc09e267f67bb35a279ed1bf71068a61e73c4

 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,7 +89,8 @@
71
89
 					</view>
72
90
 				</view>
73
91
 			</view>
74
-			<view @click="goLottery" class="lottery_banner" v-if="info && info.isLottery && info.lotteryBanner">
92
+			<view @click="goLottery" class="lottery_banner"
93
+				v-if="info && info.isLottery && info.lotteryBanner && lotteryBannerReady">
75
94
 				<image class="lottery_bannerImg" :src="info.lotteryBanner" mode="widthFix"
76
95
 					:style="{ height: lotteryBannerHeight }">
77
96
 				</image>
..
..
@@ -600,6 +619,8 @@
600
619
 			isYueyangZone: false,
601
620
 			isOpen: false, // 默认收起，false收起/true展开
602
621
 			currentIndex: -1, // 默认选中第一个【全部】
622
+			videoControls: true, // 专区活动视频是否显示海报+播放按钮
623
+			zoneVideoContext: '', // 活动视频播放上下文
603
624
 			partitionList: [],
604
625
 			partitionProject: {},
605
626
 			tagList: [],
..
..
@@ -624,6 +645,7 @@
624
645
 			urlOption: {},
625
646
 			homeTop: '200',
626
647
 			lotteryBannerHeight: '', //抽奖banner预计算高度（rpx），空字符串表示未取到，按原逻辑自适应
648
+			lotteryBannerReady: false, //是否已拿到banner尺寸（或已确认拿不到），未就绪前不渲染，避免首帧撑高
627
649
 			hasNewPop: false,
628
650
 			leftCoupon: {},
629
651
 			rightCoupon: {},
..
..
@@ -840,6 +862,17 @@
840
862
 		}
841
863
 	},
842
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() { },
843
876
 		handleCouponRule() {
844
877
 			this.$refs.personalAndShareCouponRuleRef.show(this.info.ruleContentText)
845
878
 		},
..
..
@@ -1455,15 +1488,23 @@
1455
1488
 		setLotteryBannerSize(info) {
1456
1489
 			let that = this
1457
1490
 			that.lotteryBannerHeight = ''
1458
-			if (!info || !info.isLottery || !info.lotteryBanner) return
1491
+			that.lotteryBannerReady = false
1492
+			if (!info || !info.isLottery || !info.lotteryBanner) {
1493
+				that.lotteryBannerReady = true
1494
+				return
1495
+			}
1459
1496
 			uni.getImageInfo({
1460
1497
 				src: info.lotteryBanner,
1461
1498
 				success: (img) => {
1462
1499
 					if (img.width > 0 && img.height > 0) {
1463
1500
 						that.lotteryBannerHeight = (690 * img.height / img.width).toFixed(2) + 'rpx'
1464
1501
 					}
1502
+					that.lotteryBannerReady = true
1465
1503
 				},
1466
-				fail: () => { }
1504
+				fail: (err) => {
1505
+					console.warn('抽奖banner尺寸预取失败，回退为自适应', err)
1506
+					that.lotteryBannerReady = true
1507
+				}
1467
1508
 			})
1468
1509
 		},
1469
1510
 		getZoneDetail: function () {
..
..
@@ -1473,11 +1514,7 @@
1473
1514
 			console.log('专区详情入参：：', params)
1474
1515
 			getZoneDetail(that.id, params).then(res => {
1475
1516
 				that.info = res.data;
1476
-<<<<<<< Updated upstream
1477
-=======
1478
-				//that.info.zoneType=8;
1479
1517
 				that.setLotteryBannerSize(res.data);
1480
->>>>>>> Stashed changes
1481
1518
 				that.updateZoneShareMenu();
1482
1519
 				if (res.data.zoneType == 6) {
1483
1520
 					that.setYueyangZone()
..
..
@@ -1893,6 +1930,48 @@
1893
1930
 	}
1894
1931
 }
1895
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
+
1896
1975
 .toolbarList {
1897
1976
 	width: 750rpx;
1898
1977
 	position: -webkit-sticky;