Jacob
1 天以前 24b8f2afa92ce7bbe490185ecbab869c460b798b
pages/zone/index.vue
....@@ -29,6 +29,24 @@
2929 <view class="head_img">
3030 <image :src="info.image"></image>
3131 </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>
3250 <view class="tag-wrap-container" :style="'top:' + (marTop) + 'px;'" v-if="info.zoneType == 7">
3351 <view class="tag-wrap">
3452 <!-- 标签列表 -->
....@@ -600,6 +618,8 @@
600618 isYueyangZone: false,
601619 isOpen: false, // 默认收起,false收起/true展开
602620 currentIndex: -1, // 默认选中第一个【全部】
621
+ videoControls: true, // 专区活动视频是否显示海报+播放按钮
622
+ zoneVideoContext: '', // 活动视频播放上下文
603623 partitionList: [],
604624 partitionProject: {},
605625 tagList: [],
....@@ -840,6 +860,17 @@
840860 }
841861 },
842862 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() { },
843874 handleCouponRule() {
844875 this.$refs.personalAndShareCouponRuleRef.show(this.info.ruleContentText)
845876 },
....@@ -1473,11 +1504,7 @@
14731504 console.log('专区详情入参::', params)
14741505 getZoneDetail(that.id, params).then(res => {
14751506 that.info = res.data;
1476
-<<<<<<< Updated upstream
1477
-=======
1478
- //that.info.zoneType=8;
14791507 that.setLotteryBannerSize(res.data);
1480
->>>>>>> Stashed changes
14811508 that.updateZoneShareMenu();
14821509 if (res.data.zoneType == 6) {
14831510 that.setYueyangZone()
....@@ -1893,6 +1920,48 @@
18931920 }
18941921 }
18951922
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
+
18961965 .toolbarList {
18971966 width: 750rpx;
18981967 position: -webkit-sticky;