296 lines
6.7 KiB
Vue
296 lines
6.7 KiB
Vue
<template>
|
|
<up-popup :show="show" :round="24" :closeOnClickOverlay="false">
|
|
<view class="share-popup-view">
|
|
<view class="share-head">
|
|
<text class="text-28 text-gray">分享信任桥</text>
|
|
</view>
|
|
<view class="share-btn-view">
|
|
<!-- #ifndef APP-PLUS || H5 -->
|
|
<block v-for="(item, index) in filteredBtnList" :key="index">
|
|
<button v-if="item.originalIndex === 0" open-type="share" hover-class="none" class="share-box share-btn-clean"
|
|
@click="onBtn(item.originalIndex)">
|
|
<image :src="`https://static.tbmall.xin/static/new/share_${item.originalIndex}.png`" class="share-img">
|
|
</image>
|
|
<text class="text-24 text-gray">{{ item.name }}</text>
|
|
</button>
|
|
<view v-else class="share-box" @click="onBtn(item.originalIndex)">
|
|
<image :src="`https://static.tbmall.xin/static/new/share_${item.originalIndex}.png`" class="share-img">
|
|
</image>
|
|
<text class="text-24 text-gray">{{ item.name }}</text>
|
|
</view>
|
|
</block>
|
|
<!-- #endif -->
|
|
|
|
<!-- #ifdef APP-PLUS || H5 -->
|
|
<view class="share-box" @click="onShare(item.originalIndex)" v-for="(item, index) in filteredAppBtnList" :key="index">
|
|
<image :src="`https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/new/share_${item.originalIndex}.png`"
|
|
class="share-img"></image>
|
|
<text class="text-24 text-gray">{{ item.name }}</text>
|
|
</view>
|
|
<!-- #endif -->
|
|
|
|
</view>
|
|
<view class="share-line" style="margin-top:40rpx;"></view>
|
|
|
|
<view class="share-line" style="min-height:16rpx;height:16rpx">
|
|
</view>
|
|
<view class="share-bottom" @click="onClose">
|
|
<text class="text-32 text-fu1">取消</text>
|
|
</view>
|
|
|
|
|
|
|
|
<view class="share-top-image-view">
|
|
<image :src="tu" class="tu-img"></image>
|
|
<view class="image-view-bottom">
|
|
<view class="image-view-bottom-left" :style="{ borderRight: price ? '2rpx solid #EBEBEB' : 'none', flex: price ? 'none' : '1' }">
|
|
<text class="text-24 text-gray text-overflow1">{{ text }}</text>
|
|
</view>
|
|
<view class="image-view-bottom-right" v-if="price">
|
|
<text class="text-24 text-zi">￥{{ price }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</up-popup>
|
|
</template>
|
|
|
|
<script>
|
|
import Func from '/utils/func'
|
|
import { SHARE_URL } from '@/utils/config.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
btnList: ['微信', '朋友圈'],
|
|
appBtnList: ['微信', '朋友圈', '复制链接', '保存图片', 'QQ'],
|
|
|
|
}
|
|
},
|
|
props: {
|
|
show: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
id: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
tu: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
price: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
text: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
hideCopyAndQQ: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
isInvitePage() {
|
|
if (this.hideCopyAndQQ) return true;
|
|
try {
|
|
const pages = getCurrentPages();
|
|
const current = pages[pages.length - 1];
|
|
const route = current?.route || current?.$page?.fullPath || '';
|
|
return route.includes('invite_friends');
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
},
|
|
filteredBtnList() {
|
|
const items = this.btnList.map((name, originalIndex) => ({ name, originalIndex }));
|
|
if (this.isInvitePage) {
|
|
return items.filter(item => item.name !== '微信');
|
|
}
|
|
return items;
|
|
},
|
|
filteredAppBtnList() {
|
|
const items = this.appBtnList.map((name, originalIndex) => ({ name, originalIndex }));
|
|
if (this.isInvitePage) {
|
|
return items.filter(item => item.name !== '复制链接' && item.name !== 'QQ');
|
|
}
|
|
return items;
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
|
|
onBtn(index) {
|
|
console.log('微信分享', index);
|
|
this.$emit('wxShare', index)
|
|
},
|
|
onShare(index) {
|
|
|
|
this.$emit('share', index)
|
|
},
|
|
|
|
onClose() {
|
|
this.$emit('close');
|
|
},
|
|
onOk() {
|
|
Func.debounce(this.dOk())
|
|
},
|
|
dOk() {
|
|
this.$emit('ok');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.share-top-image-view {
|
|
width: 400rpx;
|
|
min-height: 496rpx;
|
|
height: 496rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 32rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 24rpx;
|
|
position: absolute;
|
|
background-color: #fff;
|
|
top: -638rpx;
|
|
|
|
.image-view-bottom {
|
|
width: 100%;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 20rpx;
|
|
|
|
.image-view-bottom-left {
|
|
height: 72rpx;
|
|
min-height: 72rpx;
|
|
border-right: 2rpx solid #EBEBEB;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-right: 10rpx;
|
|
|
|
}
|
|
|
|
.image-view-bottom-right {
|
|
// min-width:130rpx;
|
|
margin-left: 10rpx;
|
|
height: 72rpx;
|
|
min-height: 72rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
.tu-img {
|
|
width: 100%;
|
|
height: 344rpx;
|
|
}
|
|
}
|
|
|
|
.share-popup-view {
|
|
width: 100%;
|
|
height: 400rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
border-radius: 24rpx 24rpx 0 0;
|
|
position: relative;
|
|
|
|
.share-head {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.share-bottom {
|
|
width: 100%;
|
|
height: 92rpx;
|
|
min-height: 92rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.share-line {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 2rpx;
|
|
min-height: 2rpx;
|
|
background-color: #e7e7e7;
|
|
}
|
|
|
|
.qr-view {
|
|
width: 100%;
|
|
height: 332rpx;
|
|
min-height: 332rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.share-btn-view {
|
|
width: 100%;
|
|
height: 124rpx;
|
|
min-height: 124rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
// padding: 0 36rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 36rpx;
|
|
|
|
.share-box {
|
|
flex: 1;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.share-img {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
}
|
|
}
|
|
|
|
.share-btn-clean {
|
|
background: none !important;
|
|
background-color: transparent !important;
|
|
border: 0 !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
line-height: normal !important;
|
|
font-size: inherit !important;
|
|
color: inherit !important;
|
|
outline: none !important;
|
|
border-radius: 0 !important;
|
|
box-sizing: border-box !important;
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
justify-content: space-between !important;
|
|
align-items: center !important;
|
|
|
|
&::after {
|
|
border: none !important;
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|