mirror of
https://github.com/crmeb/CRMEB.git
synced 2026-10-30 06:20:50 +00:00
feat: 详情轮播支持点击查看
This commit is contained in:
From-wh
parent
d4e3744e11
commit
3e693c38f1
150
template/uni-app/components/cusPreviewImg/swiperPrevie.vue
Normal file
150
template/uni-app/components/cusPreviewImg/swiperPrevie.vue
Normal file
@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<view class="previewImg" v-if="showBox" @touchmove.stop.prevent>
|
||||
<view class="mask" @click="close">
|
||||
<swiper @change="changeSwiper" class="mask-swiper" :current="currentIndex" :circular="circular"
|
||||
:duration="duration">
|
||||
<swiper-item v-for="(src, i) in list" :key="i" class="flex flex-column justify-center align-center">
|
||||
<image class="mask-swiper-img" :src="src" mode="widthFix" />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<view class="pagebox" v-if="list.length>0">{{ Number(currentIndex) + 1 }} / {{ list.length }}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'cusPreviewImg',
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
circular: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 500
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentIndex: 0,
|
||||
showBox: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
list(val) {}
|
||||
},
|
||||
methods: {
|
||||
// 左右切换
|
||||
changeSwiper(e) {
|
||||
this.currentIndex = e.target.current;
|
||||
// this.$emit('changeSwitch', e.target.current)
|
||||
},
|
||||
open(current) {
|
||||
if (!this.list.length) return;
|
||||
this.currentIndex = current;
|
||||
this.showBox = true;
|
||||
},
|
||||
close() {
|
||||
this.showBox = false;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin full {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.previewImg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 300;
|
||||
@include full;
|
||||
|
||||
.mask {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #000;
|
||||
opacity: 1;
|
||||
z-index: 8;
|
||||
@include full;
|
||||
|
||||
&-swiper {
|
||||
@include full;
|
||||
|
||||
&-img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagebox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 20rpx;
|
||||
z-index: 300;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.mask_sku {
|
||||
color: #fff;
|
||||
max-width: 80%;
|
||||
z-index: 300;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.sku_name {
|
||||
font-size: 12px;
|
||||
border: 1px solid #fff;
|
||||
padding: 10rpx 30rpx 10rpx;
|
||||
border-radius: 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sku_price {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.font12 {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.share_btn {
|
||||
position: absolute;
|
||||
top: 70rpx;
|
||||
right: 50rpx;
|
||||
font-size: 40rpx;
|
||||
color: #fff;
|
||||
z-index: 300;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@ -6,10 +6,9 @@
|
||||
<swiper-item v-if="videoline">
|
||||
<view class="item">
|
||||
<view v-show="!controls" style="width:100%;height:100% ">
|
||||
<video id="myVideo" :src='videoline' objectFit="contain" controls
|
||||
style="width:100%;height:100%" show-center-play-btn show-mute-btn="true"
|
||||
auto-pause-if-navigate :custom-cache="false" :enable-progress-gesture="false"
|
||||
:poster="imgUrls[0]" @pause="videoPause"></video>
|
||||
<video id="myVideo" :src='videoline' objectFit="contain" controls style="width:100%;height:100%"
|
||||
show-center-play-btn show-mute-btn="true" auto-pause-if-navigate :custom-cache="false"
|
||||
:enable-progress-gesture="false" :poster="imgUrls[0]" @pause="videoPause"></video>
|
||||
</view>
|
||||
<view class="poster" v-show="controls">
|
||||
<image class="image" :src="imgUrls[0]"></image>
|
||||
@ -34,7 +33,7 @@
|
||||
<!-- #endif -->
|
||||
<block v-for="(item,index) in imgUrls" :key='index'>
|
||||
<swiper-item v-if="videoline?index>=1:index>=0">
|
||||
<image :src="item" class="slide-image" />
|
||||
<image :src="item" class="slide-image" @click="openImage(index)" />
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
@ -108,6 +107,10 @@
|
||||
},
|
||||
change: function(e) {
|
||||
this.$set(this, 'currents', e.detail.current + 1);
|
||||
},
|
||||
// 查看图片详情
|
||||
openImage(index) {
|
||||
this.$emit('showSwiperImg', index)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -148,11 +151,12 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.goods-video{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.goods-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.product-bg .item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
<!-- #ifdef APP-PLUS || MP -->
|
||||
<view class="" :style="'width:100%;' + 'height:'+sysHeight"></view>
|
||||
<!-- #endif -->
|
||||
<productConSwiper :imgUrls='imgUrls'></productConSwiper>
|
||||
<productConSwiper :imgUrls='imgUrls' @showSwiperImg="showSwiperImg"></productConSwiper>
|
||||
<view class="bg-color">
|
||||
<view class='nav acea-row row-between-wrapper'>
|
||||
<view class='money'>{{$t(`￥`)}}<text class='num'>{{storeInfo.price || ''}}</text>
|
||||
@ -221,6 +221,7 @@
|
||||
<view class="share-box" v-if="H5ShareBox">
|
||||
<image :src="imgHost + '/statics/images/share-info.png'" @click="H5ShareBox = false"></image>
|
||||
</view>
|
||||
<swiperPrevie ref="cusSwiperImg" :list="storeInfo.images"></swiperPrevie>
|
||||
<!-- #ifdef H5 || APP-PLUS -->
|
||||
<zb-code ref="qrcode" :show="codeShow" :cid="cid" :val="codeVal" :size="size" :unit="unit"
|
||||
:background="background" :foreground="foreground" :pdground="pdground" :icon="codeIcon" :iconSize="iconsize"
|
||||
@ -244,6 +245,7 @@
|
||||
collectDel
|
||||
} from '@/api/store.js';
|
||||
import productConSwiper from '@/components/productConSwiper/index.vue'
|
||||
import swiperPrevie from "@/components/cusPreviewImg/swiperPrevie.vue";
|
||||
import productWindow from '@/components/productWindow/index.vue'
|
||||
import userEvaluation from '@/components/userEvaluation/index.vue'
|
||||
import kefuIcon from '@/components/kefuIcon';
|
||||
@ -289,6 +291,7 @@
|
||||
menuIcon,
|
||||
countDown,
|
||||
cusPreviewImg,
|
||||
swiperPrevie,
|
||||
parser,
|
||||
homeList,
|
||||
// #ifdef MP
|
||||
@ -1129,6 +1132,9 @@
|
||||
this.$set(this, "attrValue", productSelect.suk);
|
||||
}
|
||||
},
|
||||
showSwiperImg(index) {
|
||||
this.$refs.cusSwiperImg.open(index);
|
||||
},
|
||||
},
|
||||
//#ifdef MP
|
||||
onShareAppMessage() {
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user