Jacob
2026-10-13 683ba718efa29097c12f1e588839145417ae487f
pages/zone/index.vue
....@@ -28,6 +28,24 @@
2828 <view class="head_img">
2929 <image :src="info.image"></image>
3030 </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>
48
+ </view>
3149 <view class="tag-wrap-container" :style="'top:' + (marTop) + 'px;'" v-if="info.zoneType == 7">
3250 <view class="tag-wrap">
3351 <!-- 标签列表 -->
....@@ -599,6 +617,8 @@
599617 isYueyangZone: false,
600618 isOpen: false, // 默认收起,false收起/true展开
601619 currentIndex: -1, // 默认选中第一个【全部】
620
+ videoControls: true, // 专区活动视频是否显示海报+播放按钮
621
+ zoneVideoContext: '', // 活动视频播放上下文
602622 partitionList: [],
603623 partitionProject: {},
604624 tagList: [],
....@@ -838,6 +858,17 @@
838858 }
839859 },
840860 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() { },
841872 handleCouponRule() {
842873 this.$refs.personalAndShareCouponRuleRef.show(this.info.ruleContentText)
843874 },
....@@ -1453,6 +1484,7 @@
14531484 console.log('专区详情入参::', params)
14541485 getZoneDetail(that.id, params).then(res => {
14551486 that.info = res.data;
1487
+ //that.info.zoneType=8;
14561488 that.updateZoneShareMenu();
14571489 if (res.data.zoneType == 6) {
14581490 that.setYueyangZone()
....@@ -1869,6 +1901,48 @@
18691901 }
18701902 }
18711903
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
+
18721946 .toolbarList {
18731947 width: 750rpx;
18741948 position: -webkit-sticky;