shop_h5/components/shareImg/shareImg.vue

<template>
	<!-- 分享海报 -->
	<view class="share">
		<view class="box">
			<view class="cont" id="capture">
				<view class="top">
					<image :src="avatar" mode="widthFix"></image>
					<view class="tit">
						<text>{{nickname}}</text>
						<view class="time">{{time}}</view>
					</view>
				</view>
				<image :src="faceImg" class="face_img" mode="aspectFill"></image>
				<view class="title">{{title}}</view>
				<view class="desc">{{desc}}</view>
				<view class="btm">
					<view class="">
						<view class="price">¥2.00~9.00</view>
						<view class="bg">
							<text>长按识别图中小程序</text><br />
							<text>跟团购买>></text>
						</view>
					</view>
					<image :src="showImage" class="code" mode="aspectFill"></image>
				</view>
				<image :src="canvasImage" class="diaimg" mode="aspectFill"></image>
			</view>
			<view class="btn" @click="closeShow"><up-icon name="close" color="#fff" size="30" /></view>
		</view>
	</view>
	
</template>

<script>
	import { ref, reactive, toRefs, onMounted } from 'vue'
	import { getOldDay, showToast } from '../common.js'
	import { post } from '@/Api/request.js'
	import html2canvas from 'html2canvas';
	import '@/static/js/html2canvas.js'
	
	export default {
		props: {
			goods: Object
		},
		setup(props, context) {
			const data = reactive({
				canvasWidth: {},
				ctx: null,
				showImage: '',
				avatar: uni.getStorageSync('avatar'),
				faceImg: props.goods.face_img,
				title: props.goods.title,
				desc: props.goods.description,
				loading: false,
				shareImg: '',
				Color: uni.getStorageSync('theme_color'),
				nickname: uni.getStorageSync('nickname'),
				showPrivacy: false,
				time: getOldDay(),
				canvasImage: ''
			})

			// 关闭
			function closeShow() {
				context.emit('closeShow')
			}
			
			// 获取页面二维码
			const getImg = () => {
				return new Promise((resolve, reject) => {
					uni.request({
						url: '/api/v1/user/code',
						method: 'POST',
						data: {
							page: 'pages/groups/index',
							shop_goods_id: props.goods.id
						},
						header: {
							Authorization: uni.getStorageSync('token') || '',
							appid: uni.getStorageSync('appId')
						},
						responseType: 'arraybuffer',
						success: (res) => {
							if (res.statusCode === 200) {
								let base64 = ''
								const bytes = new Uint8Array(res.data)
								const len = bytes.byteLength
								for (let i = 0; i < len; i++) {
								    base64 += String.fromCharCode(bytes[i])
								}
								base64 = `data:image/png;base64,${btoa(base64)}`
								resolve(base64)
							} else {
								reject('')
							}
						},
					})
				})
			}
			
			onMounted(async() => {
				uni.showLoading({
					title: '海报生成中...',
					mask: true
				})
				data.showImage = await getImg()
			    setTimeout(async() => {
					const canvas = await html2canvas(document.getElementById("capture"), {
						useCORS: true,
						dpi: 300,
						scale: 4
					})
					
					let imgUrl = canvas.toDataURL("image/jpeg", 1);
					console.log(imgUrl)
					data.canvasImage = imgUrl
					uni.hideLoading()
				}, 1000)
			})

			return {
				...toRefs(data),
				closeShow,
				getImg
			}
		}
	}
</script>

<style lang="scss" scoped>
	.share {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba($color: #000000, $alpha: 0.7);
		z-index: 202;
		display: flex;
		flex-direction: column;
		justify-content: center;
		.cont{
			width: 275px;
			height: 510px;
			box-sizing: border-box;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 12px;
			position: relative;
			.top{
				display: flex;
				align-items: center;
				image{
					width: 30px;
					height: 30px;
				}
				.tit{
					margin-left: 10px;
					font-size: 14px;
					.time{
						font-size: 12px;
						color: #999;
						margin-top: 3px;
					}
				}
			}
			.face_img{
				width: 100%;
				height: 250px;
				vertical-align: bottom;
				margin-top: 10px;
			}
			.title{
				font-size: 15px;
				font-weight: 600;
				margin-top: 5px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.desc{
				font-size: 12px;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				white-space: break-spaces;
				margin: 5px 0;
				color: #999999;
				font-weight: 600;
			}
			.btm{
				display: flex;
				justify-content: space-between;
				margin-top: 10px;
				.price{
					color: v-bind('Color');
					font-weight: 600;
					padding-top: 10px;
				}
				.bg{
					background-color: #F7F7F7;
					font-size: 12px;
					padding: 10px;
					color: #999999;
					font-weight: 600;
					margin-top: 5px;
				}
				.code{
					width: 90px;
					height: 90px;
					vertical-align: bottom;
				}
			}
			.diaimg{
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				position: absolute;
				opacity: 0;
			}
		}

		.btn{
			text-align: center;
			margin: 20px auto 0;
		}
	}
</style>