frontend-app/pages/other_package/components/share-popup.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>