Jacob
9 天以前 74bd629e27bb16b8e07ceecc8960083d2d0748c7
pages/zone/index.vue
....@@ -14,6 +14,9 @@
1414 <view :style="{ height: marTop + 'px' }"></view>
1515 <yueyangZone ref=yueyangZoneRef v-if="isYueyangZone" :zoneInfo="info" :careBeanRate="careBeanRate"
1616 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>
1720 <view v-else>
1821 <view class="expireTime" v-if="expireTime && expireTime.length">
1922 <text>专区将在</text>
....@@ -24,6 +27,24 @@
2427 </view>
2528 <view class="head_img">
2629 <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>
2748 </view>
2849 <view class="tag-wrap-container" :style="'top:' + (marTop) + 'px;'" v-if="info.zoneType == 7">
2950 <view class="tag-wrap">
....@@ -67,9 +88,8 @@
6788 </view>
6889 </view>
6990 </view>
70
- <view @click="goLottery" class="lottery_banner" v-if="info && info.isLottery">
71
- <image class="lottery_bannerImg"
72
- src="https://ossacmall.bluedeer.com.cn/app/static/images/zone_lotteryBanner.gif" mode="widthFix">
91
+ <view @click="goLottery" class="lottery_banner" v-if="info && info.isLottery && info.lotteryBanner">
92
+ <image class="lottery_bannerImg" :src="info.lotteryBanner" mode="widthFix">
7393 </image>
7494 </view>
7595 <view class="tag-img-container" v-if="info.zoneType == 7">
....@@ -596,6 +616,8 @@
596616 isYueyangZone: false,
597617 isOpen: false, // 默认收起,false收起/true展开
598618 currentIndex: -1, // 默认选中第一个【全部】
619
+ videoControls: true, // 专区活动视频是否显示海报+播放按钮
620
+ zoneVideoContext: '', // 活动视频播放上下文
599621 partitionList: [],
600622 partitionProject: {},
601623 tagList: [],
....@@ -835,6 +857,17 @@
835857 }
836858 },
837859 methods: {
860
+ /**
861
+ * 专区活动视频:点击海报播放按钮后播放
862
+ */
863
+ bindZoneVideoPlay() {
864
+ if (!this.zoneVideoContext) {
865
+ this.zoneVideoContext = uni.createVideoContext('zoneVideo', this);
866
+ }
867
+ this.$set(this, 'videoControls', false);
868
+ this.zoneVideoContext.play();
869
+ },
870
+ zoneVideoPause() { },
838871 handleCouponRule() {
839872 this.$refs.personalAndShareCouponRuleRef.show(this.info.ruleContentText)
840873 },
....@@ -1195,6 +1228,11 @@
11951228 // that.myCareBean = res2.data.totalCareBeans;
11961229 });
11971230 },
1231
+ goDetail() {
1232
+ uni.navigateTo({
1233
+ url: '/pages/consumption/index?zoneId=' + this.info.id
1234
+ })
1235
+ },
11981236 goLottery() {
11991237 let that = this;
12001238 var data = {
....@@ -1445,6 +1483,7 @@
14451483 console.log('专区详情入参::', params)
14461484 getZoneDetail(that.id, params).then(res => {
14471485 that.info = res.data;
1486
+ //that.info.zoneType=8;
14481487 that.updateZoneShareMenu();
14491488 if (res.data.zoneType == 6) {
14501489 that.setYueyangZone()
....@@ -1629,13 +1668,11 @@
16291668 .lottery_banner {
16301669 margin: 15rpx auto;
16311670 width: 690rpx;
1632
- height: 120rpx;
16331671 text-align: center;
16341672 }
16351673
16361674 .lottery_bannerImg {
16371675 width: 690rpx;
1638
- height: 120rpx;
16391676 }
16401677
16411678 .tag-wrap-container {
....@@ -1836,6 +1873,21 @@
18361873 transform: translate(0, -50%);
18371874 }
18381875
1876
+.detail-btn {
1877
+ border: 2rpx solid #fff;
1878
+ border-top-left-radius: 20rpx;
1879
+ border-bottom-left-radius: 20rpx;
1880
+ padding: 10rpx;
1881
+ background-color: #daf2b2;
1882
+ color: #1e984f;
1883
+ width: 50rpx;
1884
+ position: fixed;
1885
+ top: 200rpx;
1886
+ right: 0rpx;
1887
+ line-height: 1rem;
1888
+ z-index: 99;
1889
+}
1890
+
18391891 .head_img {
18401892 width: 750rpx;
18411893 height: 422rpx;
....@@ -1846,6 +1898,48 @@
18461898 }
18471899 }
18481900
1901
+.rich-content {
1902
+ padding: 24rpx 30rpx;
1903
+ background-color: #fff;
1904
+}
1905
+
1906
+.video-wrap {
1907
+ position: relative;
1908
+ width: 100%;
1909
+ height: 750rpx;
1910
+ background-color: #000;
1911
+}
1912
+
1913
+.video-wrap .video-poster {
1914
+ position: absolute;
1915
+ top: 0;
1916
+ left: 0;
1917
+ width: 100%;
1918
+ height: 750rpx;
1919
+ z-index: 9;
1920
+}
1921
+
1922
+.video-wrap .video-poster .image {
1923
+ width: 100%;
1924
+ height: 100%;
1925
+}
1926
+
1927
+.video-wrap .video-stop {
1928
+ position: absolute;
1929
+ top: 50%;
1930
+ left: 50%;
1931
+ width: 136rpx;
1932
+ height: 136rpx;
1933
+ margin-top: -68rpx;
1934
+ margin-left: -68rpx;
1935
+ z-index: 9;
1936
+}
1937
+
1938
+.video-wrap .video-stop .image {
1939
+ width: 100%;
1940
+ height: 100%;
1941
+}
1942
+
18491943 .toolbarList {
18501944 width: 750rpx;
18511945 position: -webkit-sticky;