| xqd
@@ -1,197 +1,187 @@
|
|
|
<template>
|
|
|
- <view class="app-goods-banner" v-if="picList.length > 0">
|
|
|
- <!-- #ifdef H5 -->
|
|
|
- <bd-h5-back></bd-h5-back>
|
|
|
- <!-- #endif -->
|
|
|
- <!-- #ifdef MP-WEIXIN -->
|
|
|
- <view class='account-box' v-if='mallConfig.mall.setting.is_official_account == 1'>
|
|
|
- <official-account></official-account>
|
|
|
- </view>
|
|
|
- <!-- #endif -->
|
|
|
-
|
|
|
+ <view class="app-goods-banner" v-if="picList.length > 0">
|
|
|
+ <!-- #ifdef H5 -->
|
|
|
+ <bd-h5-back></bd-h5-back>
|
|
|
+ <!-- #endif -->
|
|
|
+ <!-- #ifdef MP-WEIXIN -->
|
|
|
+ <view class='account-box' v-if='mallConfig.mall.setting.is_official_account == 1'>
|
|
|
+ <official-account></official-account>
|
|
|
+ </view>
|
|
|
+ <!-- #endif -->
|
|
|
+
|
|
|
<view class="swiper_zhishi" v-if="picList.length>0">
|
|
|
<view :class="swiperKey===i?'view_active':''" v-for="(item1,i) in picList" :key="i"></view>
|
|
|
</view>
|
|
|
- <swiper
|
|
|
- class="swiper"
|
|
|
- v-bind:autoplay="autoplay"
|
|
|
- v-bind:indicator-dots="false"
|
|
|
- circular
|
|
|
- @change='bannerChange'
|
|
|
- indicator-color="rgba(254,255,254,.4)"
|
|
|
- indicator-active-color="#FFFFFF"
|
|
|
- >
|
|
|
- <!-- #ifndef MP-BAIDU || H5 -->
|
|
|
- <swiper-item v-if="videoUrl && getVideo == 1 && sign !== 'lottery' && sign !== 'bargain' && sign !== 'community' && sign !== 'wholesale'">
|
|
|
- <view class="swiper-img" @click="routeJumpT" v-bind:style="{backgroundImage: 'url(' + rangeKey!='false'?picList[0][rangeKey]:picList[0] + ')'}">
|
|
|
- <image class="video-play" src="https://shop.9026.com/web/statics/img/mall/static/video-play.png"></image>
|
|
|
- </view>
|
|
|
- </swiper-item>
|
|
|
- <!-- #endif-->
|
|
|
+ <swiper class="swiper" v-bind:autoplay="autoplay" v-bind:indicator-dots="false" circular @change='bannerChange' :current="current"
|
|
|
+ indicator-color="rgba(254,255,254,.4)" indicator-active-color="#FFFFFF">
|
|
|
+ <!-- #ifndef MP-BAIDU || H5 -->
|
|
|
+ <!-- <swiper-item
|
|
|
+ v-if="videoUrl && getVideo == 1 && sign !== 'lottery' && sign !== 'bargain' && sign !== 'community' && sign !== 'wholesale'">
|
|
|
+ <view class="swiper-img" @click="routeJumpT"
|
|
|
+ v-bind:style="{backgroundImage: 'url(' + rangeKey!='false'?picList[0][rangeKey]:picList[0] + ')'}">
|
|
|
+ <image class="video-play" src="https://shop.9026.com/web/statics/img/mall/static/video-play.png">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ </swiper-item> -->
|
|
|
+ <!-- #endif-->
|
|
|
|
|
|
- <swiper-item v-for="(item, index) in picList" v-bind:key="index">
|
|
|
- <view class="swiper-img" v-bind:style="{backgroundImage: `url(${rangeKey!='false'?item[rangeKey]:item})`}"
|
|
|
- @click="clickImage(index)">
|
|
|
+ <swiper-item v-for="(item, index) in picList" v-bind:key="index">
|
|
|
+ <view class="swiper-img"
|
|
|
+ v-bind:style="{backgroundImage: `url(${rangeKey!='false'?item[rangeKey]:item})`}"
|
|
|
+ @click="clickImage(index)">
|
|
|
|
|
|
- <!-- #ifndef MP-BAIDU || H5 -->
|
|
|
- <app-video
|
|
|
- v-if="index === 0 && videoUrl && getVideo == 0"
|
|
|
- height="750rpx"
|
|
|
- v-bind:pic-url="rangeKey!='false'?item[rangeKey]:item"
|
|
|
- v-bind:url="videoUrl"
|
|
|
- v-on:video-start="videoStart"
|
|
|
- v-on:tap.native.stop="preventD"
|
|
|
- ></app-video>
|
|
|
- <app-video
|
|
|
- v-if="index === 0 && videoUrl && getVideo == 1 && (sign === 'lottery' || sign === 'bargain' || sign === 'community' || sign === 'wholesale')"
|
|
|
- height="750rpx"
|
|
|
- v-bind:pic-url="rangeKey!='false'?item[rangeKey]:item"
|
|
|
- v-bind:url="videoUrl"
|
|
|
- v-on:video-start="videoStart"
|
|
|
- v-on:tap.native.stop="preventD"
|
|
|
- ></app-video>
|
|
|
- <!-- #endif -->
|
|
|
+ <!-- #ifndef MP-BAIDU || H5 -->
|
|
|
+ <app-video v-if="index === 0 && videoUrl && getVideo == 0" height="750rpx"
|
|
|
+ v-bind:pic-url="rangeKey!='false'?item[rangeKey]:item" v-bind:url="videoUrl"
|
|
|
+ v-on:video-start="videoStart" v-on:tap.native.stop="preventD"></app-video>
|
|
|
+ <app-video
|
|
|
+ v-if="index === 0 && videoUrl && getVideo == 1 && (sign === 'lottery' || sign === 'bargain' || sign === 'community' || sign === 'wholesale')"
|
|
|
+ height="750rpx" v-bind:pic-url="rangeKey!='false'?item[rangeKey]:item" v-bind:url="videoUrl"
|
|
|
+ v-on:video-start="videoStart" v-on:tap.native.stop="preventD"></app-video>
|
|
|
+ <!-- #endif -->
|
|
|
|
|
|
- <!-- #ifdef MP-BAIDU || H5 -->
|
|
|
- <app-video
|
|
|
- v-if="index === 0 && videoUrl"
|
|
|
- height="750rpx"
|
|
|
- v-bind:pic-url="rangeKey!='false'?item[rangeKey]:item"
|
|
|
- v-bind:url="videoUrl"
|
|
|
- v-on:video-start="videoStart"
|
|
|
- v-on:tap.native.stop="preventD"
|
|
|
- ></app-video>
|
|
|
- <!-- #endif -->
|
|
|
+ <!-- #ifdef MP-BAIDU || H5 -->
|
|
|
+ <app-video v-if="index === 0 && videoUrl" height="750rpx"
|
|
|
+ v-bind:pic-url="rangeKey!='false'?item[rangeKey]:item" v-bind:url="videoUrl"
|
|
|
+ v-on:video-start="videoStart" v-on:tap.native.stop="preventD"></app-video>
|
|
|
+ <!-- #endif -->
|
|
|
|
|
|
- </view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
|
|
|
- <view>
|
|
|
- <app-jump-button url="/pages/cart/cart" v-if="isCart">
|
|
|
- <view class="cart" :class="isScanQrCode ? 'bd-cart-0' : 'bd-cart-1'" >
|
|
|
- <image load-lazy src="https://shop.9026.com/web/statics/image/mall/static/icon/nav-icon-cart.png"></image>
|
|
|
- </view>
|
|
|
- </app-jump-button>
|
|
|
- </view>
|
|
|
- <view class="share-commission dir-left-nowrap cross-center" v-if="share > 0">
|
|
|
- <image load-lazy src="https://shop.9026.com/web/statics/img/mall/share/share_commission.png"></image>
|
|
|
- <view class="text">
|
|
|
- <view>分销最高可赚</view>
|
|
|
- <view>¥{{share}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view>
|
|
|
+ <app-jump-button url="/pages/cart/cart" v-if="isCart">
|
|
|
+ <view class="cart" :class="isScanQrCode ? 'bd-cart-0' : 'bd-cart-1'">
|
|
|
+ <image load-lazy src="https://shop.9026.com/web/statics/image/mall/static/icon/nav-icon-cart.png">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ </app-jump-button>
|
|
|
+ </view>
|
|
|
+ <view class="share-commission dir-left-nowrap cross-center" v-if="share > 0">
|
|
|
+ <image load-lazy src="https://shop.9026.com/web/statics/img/mall/share/share_commission.png"></image>
|
|
|
+ <view class="text">
|
|
|
+ <view>分销最高可赚</view>
|
|
|
+ <view>¥{{share}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import appVideo from "../../page-component/app-video/app-video.vue";
|
|
|
+ // #ifdef H5
|
|
|
+ import bdH5Back from "@/components/page-component/goods/bd-h5-back.vue";
|
|
|
+ // #endif
|
|
|
+ import {
|
|
|
+ mapState,
|
|
|
+ mapGetters
|
|
|
+ } from 'vuex';
|
|
|
|
|
|
- import appVideo from "../../page-component/app-video/app-video.vue";
|
|
|
- // #ifdef H5
|
|
|
- import bdH5Back from "@/components/page-component/goods/bd-h5-back.vue";
|
|
|
- // #endif
|
|
|
- import { mapState, mapGetters } from 'vuex';
|
|
|
-
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- 'app-video': appVideo,
|
|
|
- // #ifdef H5
|
|
|
- bdH5Back
|
|
|
- // #endif
|
|
|
- },
|
|
|
- props: {
|
|
|
- picList: {
|
|
|
- type: Array,
|
|
|
- default() {
|
|
|
- return []
|
|
|
- }
|
|
|
- },
|
|
|
- rangeKey:{ //传空字符串竟然为true,所以传false字符串替代''
|
|
|
- type:String,
|
|
|
- default:'pic_url'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ 'app-video': appVideo,
|
|
|
+ // #ifdef H5
|
|
|
+ bdH5Back
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ current:{
|
|
|
+ type:Number,
|
|
|
+ default:0
|
|
|
+ },
|
|
|
+ picList: {
|
|
|
+ type: Array,
|
|
|
+ default () {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rangeKey: { //传空字符串竟然为true,所以传false字符串替代''
|
|
|
+ type: String,
|
|
|
+ default: 'pic_url'
|
|
|
+ },
|
|
|
+ share: {
|
|
|
+ type: Number
|
|
|
},
|
|
|
- share: {
|
|
|
- type: Number
|
|
|
- },
|
|
|
- isCart: {
|
|
|
- type: Boolean,
|
|
|
- default() {
|
|
|
- return true;
|
|
|
- }
|
|
|
- },
|
|
|
- videoUrl: {
|
|
|
- type: String
|
|
|
- },
|
|
|
- goods_id: {
|
|
|
- type: [Number, String]
|
|
|
- },
|
|
|
- sign: {
|
|
|
- type: String
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- swiperKey:0,
|
|
|
- // #ifdef MP
|
|
|
- autoplay: true,
|
|
|
- // #endif
|
|
|
- // #ifdef H5
|
|
|
- autoplay: false,
|
|
|
- // #endif
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- bannerChange(e) {
|
|
|
+ isCart: {
|
|
|
+ type: Boolean,
|
|
|
+ default () {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ videoUrl: {
|
|
|
+ type: String
|
|
|
+ },
|
|
|
+ goods_id: {
|
|
|
+ type: [Number, String]
|
|
|
+ },
|
|
|
+ sign: {
|
|
|
+ type: String
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ swiperKey: 0,
|
|
|
+ // #ifdef MP
|
|
|
+ autoplay: true,
|
|
|
+ // #endif
|
|
|
+ // #ifdef H5
|
|
|
+ autoplay: false,
|
|
|
+ // #endif
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ bannerChange(e) {
|
|
|
this.swiperKey = e.detail.current
|
|
|
- this.$event.trigger(this.$const.EVENT_VIDEO_END);
|
|
|
- },
|
|
|
- videoStart(videoStatus) {
|
|
|
- // #ifdef MP
|
|
|
- videoStatus ? this.autoplay = false : this.autoplay = true;
|
|
|
- // #endif
|
|
|
- },
|
|
|
- preventD() {},
|
|
|
- clickImage(index) {
|
|
|
- let urls = [];
|
|
|
- this.picList.forEach(item => {
|
|
|
- urls.push(this.rangeKey!='false'?item[this.rangeKey]:item);
|
|
|
- });
|
|
|
- uni.previewImage({
|
|
|
- current: index,
|
|
|
- urls: urls
|
|
|
- });
|
|
|
- },
|
|
|
- // #ifndef MP-BAIDU || H5
|
|
|
- routeJumpT() {
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/goods/video?goods_id=${this.goods_id}&sign=${this.sign}`
|
|
|
- })
|
|
|
- }
|
|
|
- // #endif
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState({
|
|
|
- // #ifdef MP-WEIXIN
|
|
|
- mallConfig: state => state.mallConfig,
|
|
|
- // #endif
|
|
|
- isScanQrCode: state => state.page.isScanQrCode
|
|
|
- }),
|
|
|
- // #ifndef MP-BAIDU
|
|
|
- ...mapGetters('mallConfig',{
|
|
|
- getVideo: 'getVideo'
|
|
|
- }),
|
|
|
- // #endif
|
|
|
- },
|
|
|
+ this.$event.trigger(this.$const.EVENT_VIDEO_END);
|
|
|
+ },
|
|
|
+ videoStart(videoStatus) {
|
|
|
+ // #ifdef MP
|
|
|
+ videoStatus ? this.autoplay = false : this.autoplay = true;
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
+ preventD() {},
|
|
|
+ clickImage(index) {
|
|
|
+ let urls = [];
|
|
|
+ this.picList.forEach(item => {
|
|
|
+ urls.push(this.rangeKey != 'false' ? item[this.rangeKey] : item);
|
|
|
+ });
|
|
|
+ uni.previewImage({
|
|
|
+ current: index,
|
|
|
+ urls: urls
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // #ifndef MP-BAIDU || H5
|
|
|
+ routeJumpT() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/goods/video?goods_id=${this.goods_id}&sign=${this.sign}`
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState({
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ mallConfig: state => state.mallConfig,
|
|
|
+ // #endif
|
|
|
+ isScanQrCode: state => state.page.isScanQrCode
|
|
|
+ }),
|
|
|
+ // #ifndef MP-BAIDU
|
|
|
+ ...mapGetters('mallConfig', {
|
|
|
+ getVideo: 'getVideo'
|
|
|
+ }),
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
- .app-goods-banner {
|
|
|
- position: relative;
|
|
|
- width: 750upx;
|
|
|
-
|
|
|
-
|
|
|
+ .app-goods-banner {
|
|
|
+ position: relative;
|
|
|
+ width: 750upx;
|
|
|
+
|
|
|
+
|
|
|
.swiper_zhishi {
|
|
|
display: flex;
|
|
|
align-items: center;
|
| xqd
@@ -202,82 +192,88 @@
|
|
|
transform: translateX(-50%);
|
|
|
bottom: 39rpx;
|
|
|
overflow: hidden;
|
|
|
- z-index: 100;
|
|
|
+ z-index: 100;
|
|
|
+
|
|
|
view {
|
|
|
width: 81rpx;
|
|
|
height: 4rpx;
|
|
|
background: #c8c8c8;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.view_active {
|
|
|
background: #f4f4f4;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cart {
|
|
|
+ position: fixed;
|
|
|
+ right: #{24rpx};
|
|
|
+ background: rgba(255, 255, 255, 0.5);
|
|
|
+ font-size: 0;
|
|
|
+ padding: #{20rpx};
|
|
|
+ border-radius: #{999rpx};
|
|
|
+ box-shadow: 0 #{1rpx} #{3rpx} rgba(0, 0, 0, 0.2);
|
|
|
+ z-index: 100;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: #{42rpx};
|
|
|
+ height: #{42rpx};
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bd-cart-0 {
|
|
|
+ top: #{250rpx};
|
|
|
+ }
|
|
|
+
|
|
|
+ .bd-cart-1 {
|
|
|
+ top: #{180rpx};
|
|
|
+ }
|
|
|
+
|
|
|
+ .share-commission {
|
|
|
+ height: #{80rpx};
|
|
|
+ padding-right: #{10rpx};
|
|
|
+ min-width: #{220rpx};
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: #{80rpx};
|
|
|
+ border-top-left-radius: #{40rpx};
|
|
|
+ border-bottom-left-radius: #{40rpx};
|
|
|
+ background-color: rgba(0, 0, 0, 0.4);
|
|
|
+ z-index: 100;
|
|
|
|
|
|
- .cart {
|
|
|
- position: fixed;
|
|
|
- right: #{24rpx};
|
|
|
- background: rgba(255, 255, 255, 0.5);
|
|
|
- font-size: 0;
|
|
|
- padding: #{20rpx};
|
|
|
- border-radius: #{999rpx};
|
|
|
- box-shadow: 0 #{1rpx} #{3rpx} rgba(0, 0, 0, 0.2);
|
|
|
- z-index: 100;
|
|
|
- image {
|
|
|
- width: #{42rpx};
|
|
|
- height: #{42rpx};
|
|
|
- }
|
|
|
- }
|
|
|
- .bd-cart-0 {
|
|
|
- top: #{250rpx};
|
|
|
- }
|
|
|
- .bd-cart-1 {
|
|
|
- top: #{180rpx};
|
|
|
- }
|
|
|
- .share-commission {
|
|
|
- height: #{80rpx};
|
|
|
- padding-right: #{10rpx};
|
|
|
- min-width: #{220rpx};
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- bottom: #{80rpx};
|
|
|
- border-top-left-radius: #{40rpx};
|
|
|
- border-bottom-left-radius: #{40rpx};
|
|
|
- background-color: rgba(0, 0, 0, 0.4);
|
|
|
- z-index: 100;
|
|
|
+ image {
|
|
|
+ width: #{44rpx};
|
|
|
+ height: #{44rpx};
|
|
|
+ margin-right: #{14rpx};
|
|
|
+ margin-left: #{20rpx};
|
|
|
+ }
|
|
|
|
|
|
- image {
|
|
|
- width: #{44rpx};
|
|
|
- height: #{44rpx};
|
|
|
- margin-right: #{14rpx};
|
|
|
- margin-left: #{20rpx};
|
|
|
- }
|
|
|
+ .text {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: $uni-font-size-weak-two;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .text {
|
|
|
- color: #ffffff;
|
|
|
- font-size: $uni-font-size-weak-two;
|
|
|
- }
|
|
|
- }
|
|
|
+ .swiper {
|
|
|
+ height: #{750rpx};
|
|
|
|
|
|
- .swiper {
|
|
|
- height: #{750rpx};
|
|
|
+ .swiper-img {
|
|
|
+ width: 100%;
|
|
|
+ height: #{750rpx};
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .swiper-img {
|
|
|
- width: 100%;
|
|
|
- height: #{750rpx};
|
|
|
- background-size: cover;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- }
|
|
|
- .video-play {
|
|
|
- width: #{128upx};
|
|
|
- height: #{128upx};
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- }
|
|
|
-</style>
|
|
|
+ .video-play {
|
|
|
+ width: #{128upx};
|
|
|
+ height: #{128upx};
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+</style>
|