| .. | .. |
|---|
| 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> |
|---|
| 27 | | - </view> |
|---|
| 28 | | - <view v-if="info.zoneType == 8 && info.info" class="rich-content"> |
|---|
| 29 | | - <rich-text :nodes="info.info"></rich-text> |
|---|
| 30 | | - </view> |
|---|
| 31 | | - <view v-if="info.zoneType == 8 && info.uploadVideo" class="video-wrap"> |
|---|
| 32 | | - <view v-show="!videoControls" style="width:100%;height:750rpx"> |
|---|
| 33 | | - <video id="zoneVideo" :src='info.uploadVideo' objectFit="contain" controls |
|---|
| 34 | | - style="width:100%;height:100%" show-center-play-btn="true" show-mute-btn="true" muted="true" |
|---|
| 35 | | - show-fullscreen-btn="true" auto-pause-if-navigate :custom-cache="false" |
|---|
| 36 | | - :enable-progress-gesture="true" show-progress="false" |
|---|
| 37 | | - :poster="info.uploadVideoImg || info.image" @pause="zoneVideoPause"></video> |
|---|
| 38 | | - </view> |
|---|
| 39 | | - <view class="video-poster" v-show="videoControls"> |
|---|
| 40 | | - <image class="image" :src="info.uploadVideoImg || info.image"></image> |
|---|
| 41 | | - </view> |
|---|
| 42 | | - <view class="video-stop" v-show="videoControls" @tap="bindZoneVideoPlay"> |
|---|
| 43 | | - <image class="image" src="https://ossacmall.bluedeer.com.cn/app/static/images/stop.png"></image> |
|---|
| 44 | | - </view> |
|---|
| 45 | 30 | </view> |
|---|
| 46 | 31 | <view class="tag-wrap-container" :style="'top:' + (marTop) + 'px;'" v-if="info.zoneType == 7"> |
|---|
| 47 | 32 | <view class="tag-wrap"> |
|---|
| .. | .. |
|---|
| 85 | 70 | </view> |
|---|
| 86 | 71 | </view> |
|---|
| 87 | 72 | </view> |
|---|
| 88 | | - <view @click="goLottery" class="lottery_banner" v-if="info && info.isLottery"> |
|---|
| 89 | | - <image class="lottery_bannerImg" |
|---|
| 90 | | - src="https://ossacmall.bluedeer.com.cn/app/static/images/zone_lotteryBanner.gif" mode="widthFix"> |
|---|
| 73 | + <view @click="goLottery" class="lottery_banner" v-if="info && info.isLottery && info.lotteryBanner"> |
|---|
| 74 | + <image class="lottery_bannerImg" :src="info.lotteryBanner" mode="widthFix"> |
|---|
| 91 | 75 | </image> |
|---|
| 92 | 76 | </view> |
|---|
| 93 | 77 | <view class="tag-img-container" v-if="info.zoneType == 7"> |
|---|
| .. | .. |
|---|
| 614 | 598 | isYueyangZone: false, |
|---|
| 615 | 599 | isOpen: false, // 默认收起,false收起/true展开 |
|---|
| 616 | 600 | currentIndex: -1, // 默认选中第一个【全部】 |
|---|
| 617 | | - videoControls: true, // 专区活动视频是否显示海报+播放按钮 |
|---|
| 618 | | - zoneVideoContext: '', // 活动视频播放上下文 |
|---|
| 619 | 601 | partitionList: [], |
|---|
| 620 | 602 | partitionProject: {}, |
|---|
| 621 | 603 | tagList: [], |
|---|
| .. | .. |
|---|
| 855 | 837 | } |
|---|
| 856 | 838 | }, |
|---|
| 857 | 839 | methods: { |
|---|
| 858 | | - /** |
|---|
| 859 | | - * 专区活动视频:点击海报播放按钮后播放 |
|---|
| 860 | | - */ |
|---|
| 861 | | - bindZoneVideoPlay() { |
|---|
| 862 | | - if (!this.zoneVideoContext) { |
|---|
| 863 | | - this.zoneVideoContext = uni.createVideoContext('zoneVideo', this); |
|---|
| 864 | | - } |
|---|
| 865 | | - this.$set(this, 'videoControls', false); |
|---|
| 866 | | - this.zoneVideoContext.play(); |
|---|
| 867 | | - }, |
|---|
| 868 | | - zoneVideoPause() { }, |
|---|
| 869 | 840 | handleCouponRule() { |
|---|
| 870 | 841 | this.$refs.personalAndShareCouponRuleRef.show(this.info.ruleContentText) |
|---|
| 871 | 842 | }, |
|---|
| .. | .. |
|---|
| 1226 | 1197 | // that.myCareBean = res2.data.totalCareBeans; |
|---|
| 1227 | 1198 | }); |
|---|
| 1228 | 1199 | }, |
|---|
| 1200 | + goDetail() { |
|---|
| 1201 | + uni.navigateTo({ |
|---|
| 1202 | + url: '/pages/consumption/index?zoneId=' + this.info.id |
|---|
| 1203 | + }) |
|---|
| 1204 | + }, |
|---|
| 1229 | 1205 | goLottery() { |
|---|
| 1230 | 1206 | let that = this; |
|---|
| 1231 | 1207 | var data = { |
|---|
| .. | .. |
|---|
| 1476 | 1452 | console.log('专区详情入参::', params) |
|---|
| 1477 | 1453 | getZoneDetail(that.id, params).then(res => { |
|---|
| 1478 | 1454 | that.info = res.data; |
|---|
| 1479 | | - //that.info.zoneType=8; |
|---|
| 1480 | 1455 | that.updateZoneShareMenu(); |
|---|
| 1481 | 1456 | if (res.data.zoneType == 6) { |
|---|
| 1482 | 1457 | that.setYueyangZone() |
|---|
| .. | .. |
|---|
| 1661 | 1636 | .lottery_banner { |
|---|
| 1662 | 1637 | margin: 15rpx auto; |
|---|
| 1663 | 1638 | width: 690rpx; |
|---|
| 1664 | | - height: 120rpx; |
|---|
| 1665 | 1639 | text-align: center; |
|---|
| 1666 | 1640 | } |
|---|
| 1667 | 1641 | |
|---|
| 1668 | 1642 | .lottery_bannerImg { |
|---|
| 1669 | 1643 | width: 690rpx; |
|---|
| 1670 | | - height: 120rpx; |
|---|
| 1671 | 1644 | } |
|---|
| 1672 | 1645 | |
|---|
| 1673 | 1646 | .tag-wrap-container { |
|---|
| .. | .. |
|---|
| 1868 | 1841 | transform: translate(0, -50%); |
|---|
| 1869 | 1842 | } |
|---|
| 1870 | 1843 | |
|---|
| 1844 | +.detail-btn { |
|---|
| 1845 | + border: 2rpx solid #fff; |
|---|
| 1846 | + border-top-left-radius: 20rpx; |
|---|
| 1847 | + border-bottom-left-radius: 20rpx; |
|---|
| 1848 | + padding: 10rpx; |
|---|
| 1849 | + background-color: #daf2b2; |
|---|
| 1850 | + color: #1e984f; |
|---|
| 1851 | + width: 50rpx; |
|---|
| 1852 | + position: fixed; |
|---|
| 1853 | + top: 200rpx; |
|---|
| 1854 | + right: 0rpx; |
|---|
| 1855 | + line-height: 1rem; |
|---|
| 1856 | + z-index: 99; |
|---|
| 1857 | +} |
|---|
| 1858 | + |
|---|
| 1871 | 1859 | .head_img { |
|---|
| 1872 | 1860 | width: 750rpx; |
|---|
| 1873 | 1861 | height: 422rpx; |
|---|
| .. | .. |
|---|
| 1876 | 1864 | width: 750rpx; |
|---|
| 1877 | 1865 | height: 422rpx; |
|---|
| 1878 | 1866 | } |
|---|
| 1879 | | -} |
|---|
| 1880 | | - |
|---|
| 1881 | | -.rich-content { |
|---|
| 1882 | | - padding: 24rpx 30rpx; |
|---|
| 1883 | | - background-color: #fff; |
|---|
| 1884 | | -} |
|---|
| 1885 | | - |
|---|
| 1886 | | -.video-wrap { |
|---|
| 1887 | | - position: relative; |
|---|
| 1888 | | - width: 100%; |
|---|
| 1889 | | - height: 750rpx; |
|---|
| 1890 | | - background-color: #000; |
|---|
| 1891 | | -} |
|---|
| 1892 | | - |
|---|
| 1893 | | -.video-wrap .video-poster { |
|---|
| 1894 | | - position: absolute; |
|---|
| 1895 | | - top: 0; |
|---|
| 1896 | | - left: 0; |
|---|
| 1897 | | - width: 100%; |
|---|
| 1898 | | - height: 750rpx; |
|---|
| 1899 | | - z-index: 9; |
|---|
| 1900 | | -} |
|---|
| 1901 | | - |
|---|
| 1902 | | -.video-wrap .video-poster .image { |
|---|
| 1903 | | - width: 100%; |
|---|
| 1904 | | - height: 100%; |
|---|
| 1905 | | -} |
|---|
| 1906 | | - |
|---|
| 1907 | | -.video-wrap .video-stop { |
|---|
| 1908 | | - position: absolute; |
|---|
| 1909 | | - top: 50%; |
|---|
| 1910 | | - left: 50%; |
|---|
| 1911 | | - width: 136rpx; |
|---|
| 1912 | | - height: 136rpx; |
|---|
| 1913 | | - margin-top: -68rpx; |
|---|
| 1914 | | - margin-left: -68rpx; |
|---|
| 1915 | | - z-index: 9; |
|---|
| 1916 | | -} |
|---|
| 1917 | | - |
|---|
| 1918 | | -.video-wrap .video-stop .image { |
|---|
| 1919 | | - width: 100%; |
|---|
| 1920 | | - height: 100%; |
|---|
| 1921 | 1867 | } |
|---|
| 1922 | 1868 | |
|---|
| 1923 | 1869 | .toolbarList { |
|---|