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-zu1">分享信任桥</text>
		  </view>
		  <view class="share-btn-view">
			  <view class="share-box" @click="onBtn(index)" v-for="(item,index) in btnList" :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-zu1">{{item}}</text>
			  </view>
		  </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">
						<text class="text-24 text-zu1 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 tkiQrcode from './tki-qrcode/tki-qrcode.vue'
	import {SHARE_URL} from '@/utils/config.js'
	export default {
		components:{tkiQrcode},
		data() {
		  return {
			  btnList:['微信','朋友圈','复制链接','保存图片','QQ'],
			  qrvalue:''
		  }
		},
		props:{
			show:{
				type:Boolean,
				default:false
			},
			id:{
				type:String,
				default:''
			},
			tu:{
				type:String,
				default:''
			},
			price:{
				type:String,
				default:''
			},
			text:{
				type:String,
				default:''
			}
			
		},
		mounted(){
			this.qrvalue = `${SHARE_URL}/#/pages/other_package/productInfo/productInfo?id=${this.id}`
			this.$nextTick(()=>{
				if(this.qrvalue){
					this.creatQrcode();
				}
			})
			
		},
		methods: {
			creatQrcode() {
				this.$refs.qrcode._makeCode();
			},
			onBtn(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:796rpx;
		min-height:796rpx;
		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;
				}
			}
		}
		
	}
	
	
</style>