121 lines
2.4 KiB
Vue
121 lines
2.4 KiB
Vue
<template>
|
|
<div class="shareBox" v-if="showShare" @click="close">
|
|
<div class="box1">
|
|
<view class="share">
|
|
<view class="share-btn">
|
|
<button class="share-btn-item" v-for="(item, index) in iconList" :key="index"
|
|
@click="shareBtn(index)" :open-type="index === 5 ? 'share' : ''">
|
|
<view class="icon" :class="item.icon" :style="{backgroundImage: 'url(' + sp2 + ')'}"></view>
|
|
<text>{{item.text}}</text>
|
|
</button>
|
|
</view>
|
|
<view class="share-cancel" @click="close">取消</view>
|
|
</view>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, reactive, toRefs, watch } from 'vue'
|
|
import { post } from '@/api/request.js'
|
|
import { sp2 } from '@/components/img.js'
|
|
|
|
export default {
|
|
props: {
|
|
showShare: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
setup(props, context) {
|
|
const data = reactive({
|
|
sp2: sp2,
|
|
iconList: [
|
|
{ icon: 'wechat', text: '分享到微信' },
|
|
{ icon: 'friends', text: '分享到朋友圈' },
|
|
{ icon: 'link', text: '复制链接' }
|
|
]
|
|
})
|
|
|
|
const shareBtn = (index) => {
|
|
close()
|
|
if (index === 0) {
|
|
context.emit('getSaleShare')
|
|
} else if (index === 1) {
|
|
context.emit('creatShare')
|
|
} else {
|
|
context.emit('getLink')
|
|
}
|
|
}
|
|
|
|
const close = () => {
|
|
context.emit('close')
|
|
}
|
|
|
|
return {
|
|
...toRefs(data),
|
|
shareBtn,
|
|
close
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.shareBox{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1001;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
.box1 {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background-color: #fff;
|
|
}
|
|
.share {
|
|
&-btn {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 30rpx 0;
|
|
border-bottom: 1rpx solid #d5d5d5;
|
|
&-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
.icon{
|
|
width: 42px;
|
|
height: 42px;
|
|
background-repeat: no-repeat;
|
|
background-size: 452px 408px;
|
|
background-position: -15px -15.67px;
|
|
&.wechat{
|
|
background-position: -15px -15.67px;
|
|
}
|
|
&.friends{
|
|
background-position: -68.33px -15.67px;
|
|
}
|
|
&.link{
|
|
background-position: -121.33px -15.67px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-cancel {
|
|
height: 110rpx;
|
|
text-align: center;
|
|
line-height: 110rpx;
|
|
font-size: 30rpx;
|
|
color: #656565;
|
|
}
|
|
}
|
|
}
|
|
</style>
|