shop_h5/components/live/share.vue

<template>
	<view>
		<up-overlay :show="showDialog" :zIndex="999">
			<view class="serviceBox">
				<view class="imgBox flex1">
					<!-- <view class="picBox" id="capture">
						<view class="top">
							<image :src="avatar" mode="widthFix"></image>&nbsp;
							<text>{{nickname}}邀请您观看</text>
						</view>
						<image :src="share_img" mode="aspectFill" class="share_img"></image>
						<view class="mid">
							<image :src="cover_img" mode="widthFix"></image>
							<text>&nbsp;{{live_title}}</text>
						</view>
						<view class="btm">
							<image :src="logo" mode="aspectFill" class="logo"></image>
							<view class="ewm">
								<image :src="code" mode="aspectFill" class="code"></image>
								<view>长按保存图片</view>
							</view>
						</view>
						<image :src="canvasImage" class="diaimg" mode="aspectFill"></image>
					</view>
					<view class="txt flex1">
						<up-icon name="fingerprint" color="#fff" size="20" />
						<text>长按图片保存</text>
					</view> -->
				</view>
				<view class="bbox">
					<view class="close flex1" @click="closeDialog"><up-icon name="close" color="#666" size="20" /></view>
					<view class="btnBox">
						<view class="row" @click="showTips = true">
							<view class="icon flex1"><up-icon name="weixin-fill" color="#28C445" size="26" /></view>
							<view class="tit">微信分享</view>
						</view>
						<view class="row" @click="copyLink">
							<view class="icon flex1"><text class="iconfont icon-link"></text></view>
							<view class="tit">复制链接</view>
						</view>
					</view>
				</view>
				
				<view class="wx_mask_wrapper" v-if="showTips">
					<view class="wx_contentbox" @click="showTips = false">
						<view class="note_box">请点击右上角<text class="icon_more"></text>分享给好友</view>
						<view class="icon_arrow"></view>
					</view>
				</view>
			</view>
		</up-overlay>
		
	</view>
	
</template>

<script>
	import { ref, reactive, toRefs, watch } from 'vue'
	import { get } from '@/Api/request.js'
	import { showToast } from '@/components/common.js'
	import html2canvas from 'html2canvas';
	import '@/static/js/html2canvas.js'
	
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			userId: {
				type: Number,
				default: 0
			},
			id: {
				type: Number
			},
			info: {
				type: Object,
				default: {}
			}
		},
		setup(props, context) {
			const data = reactive({
				showDialog: false,
				userId: 0,
				liveId: 0,
				showTips: false,
				avatar: '',
				nickname: '',
				share_img: '',
				cover_img: '',
				live_title: '',
				logo: uni.getStorageSync('logo'),
				code: 'https://g.csdnimg.cn/side-toolbar/3.4/images/qr_app.png',
				canvasImage: ''
			})
			
			function copyLink() {
				let shopId = (uni.getStorageSync('shop_id') || 0) * 1
				let href = window.location.origin
				let value = href + '/web#/pages/live/index?live_id=' + data.liveId + '&user_id=' + data.userId + '&shopId=' + shopId
				var input = document.createElement('input')
				input.value = value
				document.body.appendChild(input)
				input.select()
				var copy_result = document.execCommand('copy')
				if (copy_result) {
					showToast('分享链接复制成功', 'success')
				} else {
					showToast('复制失败')
				}
				document.body.removeChild(input)
			}
			
			function closeDialog() {
				data.showDialog = false
				context.emit('close')
			}
			
			function getAvatar(info) {
				let avatar = '', nickname = ''
				for (let index = 0; index < info.streamers.length; index++) {
					let item = info.streamers[index]
					if(item.pivot.live_status == 1) {
						avatar = item.avatar
						nickname = item.nickname
						break
					}
				}
				if(!avatar) {
					avatar = info.streamers[0].avatar
					nickname = info.streamers[0].nickname
				}
				data.avatar = avatar
				data.nickname = nickname
			}
			
			async function getShareCode() {
				let shopId = (uni.getStorageSync('shop_id') || 0) * 1
				let href = window.location.origin
				let url = href + '/web#/pages/live/index?live_id=' + data.liveId + '&user_id=' + data.userId + '&shopId=' + shopId
				
				await get('/api/v1/user/webCode', {url: url}).then((res) => {
					
				})
			}
			
			function drawImg() {
				uni.showLoading({
					title: '图片生成中...',
					mask: true
				})
				setTimeout(async() => {
					const canvas = await html2canvas(document.getElementById("capture"), {
						useCORS: true,
						dpi: 300,
						scale: 4
					})
					
					let imgUrl = canvas.toDataURL("image/jpeg", 1);
					data.canvasImage = imgUrl
					uni.hideLoading()
				}, 1000)
			}
			
			watch(props, async (newProps) => {
				if (newProps.show) {
					console.log(newProps.info)
					data.showDialog = true
					data.liveId = newProps.id
					data.userId = newProps.userId
					getAvatar(newProps.info)
					data.share_img = newProps.info.share_img
					data.cover_img = newProps.info.cover_img
					data.live_title = newProps.info.name
					// await getShareCode()
					// await drawImg()
				}
			})
			
			return {
				...toRefs(data),
				copyLink,
				closeDialog,
				getShareCode,
				getAvatar
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flex1{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.flex2{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.serviceBox{
		height: 100vh;
		width: 100%;
		.imgBox{
			height: calc(100% - 130px);
			box-sizing: border-box;
			padding-top: 20px;
			flex-direction: column;
			.picBox{
				background-color: #fff;
				border-radius: 10px;
				margin: 0 auto;
				width: 280px;
				height: 430px;
				position: relative;
				box-sizing: border-box;
				padding: 12px;
				.top{
					display: flex;
					align-items: center;
					font-size: 16px;
					image{
						width: 30px;
						height: 30px;
						border-radius: 50%;
					}
				}
				.share_img{
					width: 100%;
					height: 160px;
					vertical-align: bottom;
					margin-top: 10px;
					border-radius: 12rpx;
				}
				.mid{
					display: flex;
					align-items: center;
					font-size: 14px;
					color: #666;
					margin-top: 10px;
					image{
						width: 20px;
						height: 20px;
						border-radius: 50%;
					}
				}
				.btm{
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 14px;
					margin-top: 40px;
					color: #777;
					.code{
						width: 100px;
						height: 100px;
					}
					.ewm{
						width: 140px;
						text-align: center;
					}
					.logo{
						width: 60px;
						height: 60px;
					}
				}
				.diaimg{
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					position: absolute;
					opacity: 0;
				}
			}
			.txt{
				font-size: 28rpx;
				color: #fff;
				height: 40px;
			}
		}
		.bbox{
			height: 130px;
			position: relative;
			background-color: #fff;
			box-sizing: border-box;
			padding-top: 40px;
			border-radius: 20px 20px 0 0;
			.close{
				position: absolute;
				right: 15px;
				top: 15px;
				width: 30px;
				height: 15px;
			}
			.btnBox{
				display: flex;
				align-items: center;
				justify-content: space-around;
				.row{
					font-size: 28rpx;
					text-align: center;
					.icon{
						background-color: #e9e9e9;
						width: 40px;
						height: 40px;
						border-radius: 50%;
						display: inline-flex;
						text{
							font-size: 20px;
						}
					}
					.tit{
						margin-top: 10rpx;
					}
				}
			}
		}
		.wx_mask_wrapper{
			position: absolute;
			top: 0;
			left: 0;
			z-index: 999;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,.7);
			.wx_contentbox{
				position: relative;
				width: 100%;
				height: 100%;
				.note_box{
					position: absolute;
					right: 105px;
					top: 70px;
					line-height: 40rpx;
					font-size: 28rpx;
					color: #fff;
					.icon_more{
						display: inline-flex;
						vertical-align: middle;
						width: 20px;
						height: 20px;
						margin: 0 5px;
						background: url(https://ct-upimg.yx090.com/ju8hn6/shop/image/2025/02/19/xufMNFWmg5F5irxll3wLyy8wCQVXEyCk4flQW4zP.png) no-repeat;
						background-size: 100% 100%;
					}
				}
				.icon_arrow{
					position: absolute;
					top: 15px;
					right: 20px;
					width: 70px;
					height: 70px;
					background: url(https://ct-upimg.yx090.com/ju8hn6/shop/image/2025/02/19/NgTzZE30DfkLuaXKHmJSFoqGF9kAxzbq1AA8JPJa.png) no-repeat;
					background-size: 100% 100%;
				}
			}
		}
	}
</style>