133 lines
3.0 KiB
Vue
133 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<!-- 销售分享模板 -->
|
||
|
|
<view>
|
||
|
|
<up-overlay :show="showShareSwiper" @click="closeSwiper" z-index="1001">
|
||
|
|
<view class="share">
|
||
|
|
<swiper class="share-swiper" :indicator-dots="true" :circular="true" indicator-active-color="#fff"
|
||
|
|
indicator-color="rgba(255, 255, 255, 0.4)" previous-margin='100rpx' next-margin='100rpx'
|
||
|
|
:current="choose" @change="changeChoose">
|
||
|
|
<swiper-item v-for="(item, index) in saleShareImg" :key="index">
|
||
|
|
<button class="share-swiper-item" :open-type="index === choose ? 'share' : ''">
|
||
|
|
<view class="shop" v-if="goodsInfo.shop">
|
||
|
|
<image class="img" :src="goodsInfo.shop.logo"></image>
|
||
|
|
<text>{{goodsInfo.shop.name}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="title">{{goodsInfo.description}}</view>
|
||
|
|
<image class="image" :src="item.image" mode="widthFix"></image>
|
||
|
|
<view class="text">
|
||
|
|
<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2022/07/01/0jXVQFuf0rVJA0c8qLSAyCDsDtiHzOgodoIR0Fo3.png"
|
||
|
|
mode="widthFix" class="img"></image>
|
||
|
|
小程序
|
||
|
|
</view>
|
||
|
|
</button>
|
||
|
|
</swiper-item>
|
||
|
|
</swiper>
|
||
|
|
</view>
|
||
|
|
</up-overlay>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { ref, reactive, toRefs, watch } from 'vue'
|
||
|
|
import { post } from '../../api/request.js'
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
showShareSwiper: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
saleShareImg: Array,
|
||
|
|
goodsInfo: Object
|
||
|
|
},
|
||
|
|
setup(props, context) {
|
||
|
|
const data = reactive({
|
||
|
|
choose: 0
|
||
|
|
})
|
||
|
|
const changeChoose = (e) => {
|
||
|
|
data.choose = e.detail.current
|
||
|
|
let img = props.saleShareImg[data.choose].image
|
||
|
|
context.emit('changeShareImg', img)
|
||
|
|
}
|
||
|
|
const shareBtn = () => {}
|
||
|
|
|
||
|
|
const close = () => {
|
||
|
|
context.emit('close')
|
||
|
|
}
|
||
|
|
const closeSwiper = () => {
|
||
|
|
context.emit('closeSwiper')
|
||
|
|
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
...toRefs(data),
|
||
|
|
changeChoose,
|
||
|
|
closeSwiper
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.share {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
.share-swiper {
|
||
|
|
position: absolute;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
top: 45%;
|
||
|
|
left: 50%;
|
||
|
|
width: 100%;
|
||
|
|
height: 50%;
|
||
|
|
.share-swiper-item {
|
||
|
|
width: 80%;
|
||
|
|
margin: auto;
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
padding: 30rpx 30rpx 0;
|
||
|
|
text-align: start;
|
||
|
|
line-height: 30rpx;
|
||
|
|
.shop {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #b3b3b3;
|
||
|
|
.img {
|
||
|
|
width: 50rpx;
|
||
|
|
height: 50rpx;
|
||
|
|
background-color: #b3b3b3;
|
||
|
|
border-radius: 50%;
|
||
|
|
margin-right: 20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
margin: 20rpx 0;
|
||
|
|
font-size: 30rpx;
|
||
|
|
display: -webkit-box;
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
-webkit-line-clamp: 2;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.image {
|
||
|
|
width: 100%;
|
||
|
|
margin-bottom: 15rpx;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text {
|
||
|
|
border-top: 2rpx solid #e1e1e1;
|
||
|
|
padding-top: 10rpx;
|
||
|
|
font-size: 26rpx;
|
||
|
|
color: #b3b3b3;
|
||
|
|
padding-bottom: 25rpx;
|
||
|
|
.img {
|
||
|
|
width: 20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|