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 btnList" :key="index">
					<button v-if="index === 0" open-type="share" hover-class="none" class="share-box share-btn-clean"
						@click="onBtn(index)">
						<image :src="`https://static.tbmall.xin/static/new/share_${index}.png`" class="share-img">
						</image>
						<text class="text-24 text-gray">{{ item }}</text>
					</button>
					<view v-else class="share-box" @click="onBtn(index)">
						<image :src="`https://static.tbmall.xin/static/new/share_${index}.png`" class="share-img">
						</image>
						<text class="text-24 text-gray">{{ item }}</text>
					</view>
				</block>
				<!-- #endif -->

				<!-- #ifdef APP-PLUS || H5 -->
				<view class="share-box" @click="onShare(index)" v-for="(item, index) in appBtnList" :key="index">
					<image :src="`https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/new/share_${index}.png`"
						class="share-img"></image>
					<text class="text-24 text-gray">{{ item }}</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">
						<text class="text-24 text-gray text-overflow1">{{ text }}</text>
					</view>
					<view class="image-view-bottom-right">
						<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: ''
		}

	},

	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>