Revert "专区抽奖banner改成后台配置"

Jacob

9 天以前 fbc764bdbca94ced960b53e7e46fa064583752f1

 pages/zone/index.vue
..
..
@@ -14,6 +14,9 @@
14
14
 		<view :style="{ height: marTop + 'px' }"></view>
15
15
 		<yueyangZone ref=yueyangZoneRef v-if="isYueyangZone" :zoneInfo="info" :careBeanRate="careBeanRate"
16
16
 			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>
17
20
 		<view v-else>
18
21
 			<view class="expireTime" v-if="expireTime && expireTime.length">
19
22
 				<text>专区将在</text>
..
..
@@ -24,6 +27,24 @@
24
27
 			</view>
25
28
 			<view class="head_img">
26
29
 				<image :src="info.image"></image>
30
+			</view>
31
+			<view v-if="info.zoneType == 8 && info.info" class="rich-content">
32
+				<rich-text :nodes="info.info"></rich-text>
33
+			</view>
34
+			<view v-if="info.zoneType == 8 && info.uploadVideo" class="video-wrap">
35
+				<view v-show="!videoControls" style="width:100%;height:750rpx">
36
+					<video id="zoneVideo" :src='info.uploadVideo' objectFit="contain" controls
37
+						style="width:100%;height:100%" show-center-play-btn="true" show-mute-btn="true" muted="true"
38
+						show-fullscreen-btn="true" auto-pause-if-navigate :custom-cache="false"
39
+						:enable-progress-gesture="true" show-progress="false"
40
+						:poster="info.uploadVideoImg || info.image" @pause="zoneVideoPause"></video>
41
+				</view>
42
+				<view class="video-poster" v-show="videoControls">
43
+					<image class="image" :src="info.uploadVideoImg || info.image"></image>
44
+				</view>
45
+				<view class="video-stop" v-show="videoControls" @tap="bindZoneVideoPlay">
46
+					<image class="image" src="https://ossacmall.bluedeer.com.cn/app/static/images/stop.png"></image>
47
+				</view>
27
48
 			</view>
28
49
 			<view class="tag-wrap-container" :style="'top:' + (marTop) + 'px;'" v-if="info.zoneType == 7">
29
50
 				<view class="tag-wrap">
..
..
@@ -596,6 +617,8 @@
596
617
 			isYueyangZone: false,
597
618
 			isOpen: false, // 默认收起，false收起/true展开
598
619
 			currentIndex: -1, // 默认选中第一个【全部】
620
+			videoControls: true, // 专区活动视频是否显示海报+播放按钮
621
+			zoneVideoContext: '', // 活动视频播放上下文
599
622
 			partitionList: [],
600
623
 			partitionProject: {},
601
624
 			tagList: [],
..
..
@@ -835,6 +858,17 @@
835
858
 		}
836
859
 	},
837
860
 	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() { },
838
872
 		handleCouponRule() {
839
873
 			this.$refs.personalAndShareCouponRuleRef.show(this.info.ruleContentText)
840
874
 		},
..
..
@@ -1195,6 +1229,11 @@
1195
1229
 				// that.myCareBean = res2.data.totalCareBeans;
1196
1230
 			});
1197
1231
 		},
1232
+		goDetail() {
1233
+			uni.navigateTo({
1234
+				url: '/pages/consumption/index?zoneId=' + this.info.id
1235
+			})
1236
+		},
1198
1237
 		goLottery() {
1199
1238
 			let that = this;
1200
1239
 			var data = {
..
..
@@ -1445,6 +1484,7 @@
1445
1484
 			console.log('专区详情入参：：', params)
1446
1485
 			getZoneDetail(that.id, params).then(res => {
1447
1486
 				that.info = res.data;
1487
+				//that.info.zoneType=8;
1448
1488
 				that.updateZoneShareMenu();
1449
1489
 				if (res.data.zoneType == 6) {
1450
1490
 					that.setYueyangZone()
..
..
@@ -1836,6 +1876,21 @@
1836
1876
 	transform: translate(0, -50%);
1837
1877
 }
1838
1878
 
1879
+.detail-btn {
1880
+	border: 2rpx solid #fff;
1881
+	border-top-left-radius: 20rpx;
1882
+	border-bottom-left-radius: 20rpx;
1883
+	padding: 10rpx;
1884
+	background-color: #daf2b2;
1885
+	color: #1e984f;
1886
+	width: 50rpx;
1887
+	position: fixed;
1888
+	top: 200rpx;
1889
+	right: 0rpx;
1890
+	line-height: 1rem;
1891
+	z-index: 99;
1892
+}
1893
+
1839
1894
 .head_img {
1840
1895
 	width: 750rpx;
1841
1896
 	height: 422rpx;
..
..
@@ -1846,6 +1901,48 @@
1846
1901
 	}
1847
1902
 }
1848
1903
 
1904
+.rich-content {
1905
+	padding: 24rpx 30rpx;
1906
+	background-color: #fff;
1907
+}
1908
+
1909
+.video-wrap {
1910
+	position: relative;
1911
+	width: 100%;
1912
+	height: 750rpx;
1913
+	background-color: #000;
1914
+}
1915
+
1916
+.video-wrap .video-poster {
1917
+	position: absolute;
1918
+	top: 0;
1919
+	left: 0;
1920
+	width: 100%;
1921
+	height: 750rpx;
1922
+	z-index: 9;
1923
+}
1924
+
1925
+.video-wrap .video-poster .image {
1926
+	width: 100%;
1927
+	height: 100%;
1928
+}
1929
+
1930
+.video-wrap .video-stop {
1931
+	position: absolute;
1932
+	top: 50%;
1933
+	left: 50%;
1934
+	width: 136rpx;
1935
+	height: 136rpx;
1936
+	margin-top: -68rpx;
1937
+	margin-left: -68rpx;
1938
+	z-index: 9;
1939
+}
1940
+
1941
+.video-wrap .video-stop .image {
1942
+	width: 100%;
1943
+	height: 100%;
1944
+}
1945
+
1849
1946
 .toolbarList {
1850
1947
 	width: 750rpx;
1851
1948
 	position: -webkit-sticky;