365 lines
8.3 KiB
Vue
365 lines
8.3 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="qr-view" v-if="qrvalue">
|
||
<tki-qrcode ref="qrcode" :val="qrvalue" :size="252" />
|
||
</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 tkiQrcode from './tki-qrcode/tki-qrcode.vue'
|
||
import { SHARE_URL } from '@/utils/config.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
btnList: ['微信', '朋友圈'],
|
||
appBtnList: ['微信', '朋友圈', '复制链接', '保存图片', 'QQ'],
|
||
qrvalue: ''
|
||
|
||
}
|
||
},
|
||
|
||
components: { tkiQrcode },
|
||
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
|
||
}
|
||
},
|
||
mounted() {
|
||
// #ifdef APP-PLUS || H5
|
||
if (!this.isInvitePage) {
|
||
this.qrvalue = `${SHARE_URL}/#/pages/other_package/productInfo/productInfo?id=${this.id}`
|
||
this.$nextTick(() => {
|
||
if (this.qrvalue) {
|
||
this.creatQrcode();
|
||
}
|
||
})
|
||
}
|
||
|
||
// #endif
|
||
|
||
},
|
||
|
||
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: {
|
||
|
||
creatQrcode() {
|
||
this.$refs.qrcode._makeCode();
|
||
},
|
||
onBtn(index) {
|
||
if (index == 2) {
|
||
let tmp = `【信任桥】消费共享数字化权益 ${this.qrvalue} ${this.text}`;
|
||
// #ifdef APP-PLUS
|
||
console.log("--11---", tmp)
|
||
uni.setClipboardData({
|
||
data: tmp,
|
||
success: function (res) {
|
||
uni.getClipboardData({
|
||
success: function (res) {
|
||
Func.myToast('复制成功')
|
||
}
|
||
})
|
||
}
|
||
})
|
||
// #endif
|
||
// #ifdef H5
|
||
this.$copyText(tmp).then(res => {
|
||
console.log('resresresres', res)
|
||
Func.myToast('复制成功')
|
||
})
|
||
// #endif
|
||
}
|
||
console.log('微信分享', index);
|
||
this.$emit('wxShare', index)
|
||
},
|
||
onShare(index) {
|
||
if (index == 2) {
|
||
let tmp = `【信任桥】消费共享数字化权益 ${this.qrvalue} ${this.text}`;
|
||
// #ifdef APP-PLUS
|
||
uni.setClipboardData({
|
||
data: tmp,
|
||
success: function (res) {
|
||
uni.getClipboardData({
|
||
success: function (res) {
|
||
Func.myToast('复制成功')
|
||
}
|
||
})
|
||
}
|
||
})
|
||
// #endif
|
||
// #ifdef H5
|
||
this.$copyText(tmp).then(res => {
|
||
console.log('resresresres', res)
|
||
Func.myToast('复制成功')
|
||
})
|
||
// #endif
|
||
}
|
||
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>
|