| .. | .. |
|---|
| 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 | 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"> |
|---|
| .. | .. |
|---|
| 495 | 516 | |
|---|
| 496 | 517 | <script> |
|---|
| 497 | 518 | import { |
|---|
| 498 | | - HTTP_REQUEST_URL |
|---|
| 519 | + WEB_ACTIVITY_BASE |
|---|
| 499 | 520 | } from '@/config/app'; |
|---|
| 500 | 521 | import { |
|---|
| 501 | 522 | mapGetters |
|---|
| .. | .. |
|---|
| 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 | 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 | 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 = { |
|---|
| .. | .. |
|---|
| 1206 | 1245 | this.addTrack('yy_marketPageClick', data); |
|---|
| 1207 | 1246 | |
|---|
| 1208 | 1247 | function go() { |
|---|
| 1209 | | - let webUrl = 'https://ossacmall.bluedeer.com.cn/acmall_lottery/index.html' |
|---|
| 1210 | | - if (HTTP_REQUEST_URL.indexOf('tohours') > 0) { |
|---|
| 1211 | | - webUrl = webUrl.replace('https://ossacmall.bluedeer.com.cn', |
|---|
| 1212 | | - 'https://sit.tohours.com/crmeb_web') |
|---|
| 1213 | | - } |
|---|
| 1248 | + let webUrl = `${WEB_ACTIVITY_BASE}/acmall_lottery/index.html` |
|---|
| 1214 | 1249 | webUrl += '?token=' + |
|---|
| 1215 | 1250 | that.$store.getters.token + '&unionId=' + that.$store.getters.unionId + '&mdayId=' + that.info |
|---|
| 1216 | 1251 | .mdayId |
|---|
| .. | .. |
|---|
| 1449 | 1484 | console.log('专区详情入参::', params) |
|---|
| 1450 | 1485 | getZoneDetail(that.id, params).then(res => { |
|---|
| 1451 | 1486 | that.info = res.data; |
|---|
| 1487 | + //that.info.zoneType=8; |
|---|
| 1452 | 1488 | that.updateZoneShareMenu(); |
|---|
| 1453 | 1489 | if (res.data.zoneType == 6) { |
|---|
| 1454 | 1490 | that.setYueyangZone() |
|---|
| .. | .. |
|---|
| 1840 | 1876 | transform: translate(0, -50%); |
|---|
| 1841 | 1877 | } |
|---|
| 1842 | 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 | + |
|---|
| 1843 | 1894 | .head_img { |
|---|
| 1844 | 1895 | width: 750rpx; |
|---|
| 1845 | 1896 | height: 422rpx; |
|---|
| .. | .. |
|---|
| 1850 | 1901 | } |
|---|
| 1851 | 1902 | } |
|---|
| 1852 | 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 | + |
|---|
| 1853 | 1946 | .toolbarList { |
|---|
| 1854 | 1947 | width: 750rpx; |
|---|
| 1855 | 1948 | position: -webkit-sticky; |
|---|