charge_miniapp/pages/Invite-staff/Invite-staff.vue

<template>
	<ax-body blank="0" title="">
		<view class="invite-staff-bg">
			<image :src="bg_img" mode="widthFix"></image>
		</view>
		<view class="invite-staff-box">
			<view class="attend-card-box" @longpress="longpressTap">
				<view class="userinfo-box">
					<image class="user-avatar" :src="avatar_img" mode=""></image>
					<view class="user-nikename">{{userinfo.nickName?userinfo.nickName:'匿名'}}</view>
				</view>
				<view class="card-img-box">
					<image :src="card_img" mode="widthFix"></image>
				</view>
				<view class="card-qrcode-box">
					<!-- <image class="card-qrcode" src="@/static/img/1111.png"></image> -->
				</view>
				<view class="tips-text">长按识别二维码</view>
			</view>
			<view class="bottom-tips-text">
				<image src="@/static/img/tips-icon.svg" mode=""></image>
				<text>长按上方海报发送给好友</text>
			</view>
		</view>
		<r-canvas ref="rCanvas"></r-canvas>
	</ax-body>
</template>
<script>
	import rCanvas from "@/components/r-canvas/r-canvas.vue"
	export default {
		components: {
			rCanvas
		},
		data() {
			return {
				bg_img: 'https://hyxhsh.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/yzBqSYi5PEsId74406272837cf072c83825d28c270d3.png/1.png',
				card_img: '/static/img/enterprise_playbil.jpg',
				// avatar_img:'https://hyxhsh.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/IBN033tZBgCeb082e48d7fc55ab5c8e84b890c41f169.png/1.png',
				isImageLoaded: false,
				userinfo:{}
			}
		},
		onLoad() {
			this.userinfo=this.$app.storage.get('USER_INFO')
		},
		onReady() {},
		methods: {
			longpressTap() {
				this.get_downloadImg()
			},
			async get_downloadImg() {
				this.$nextTick(async () => {
					await this.$refs.rCanvas.init({
						canvas_id: "rCanvas"
					})
					await this.$refs.rCanvas.setCanvasWidth(319)
					await this.$refs.rCanvas.setCanvasHeight(414)
					// 背景卡片
					await this.$refs.rCanvas.drawImage({
						url: this.card_img,
						x: -10,
						y: 30,
						w: 338,
						h: 395
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})
					// 头像
					await this.$refs.rCanvas.drawImage({
						url:this.avatar_img,
						x:134,
						y:0,
						w: 50,
						h: 50
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})
					// 二维码
					// await this.$refs.rCanvas.drawImage({
					// 	url:'/static/img/1111.png',
					// 	x:134,
					// 	y:0,
					// 	w: 50,
					// 	h: 50
					// }).catch(err_msg => {
					// 	uni.showToast({
					// 		title: err_msg,
					// 		icon: "none"
					// 	})
					// })
					//文字
					await this.$refs.rCanvas.drawText({
						text:this.userinfo.nickName?userinfo.nickName:'匿名用户',
						max_width: 0,
						x:132,
						y:70,
						font_color: "#181818",
						font_size: 14
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})
					await this.$refs.rCanvas.drawText({
						text: "长按识别二维码",
						max_width: 0,
						x:108,
						y:386,
						font_color: "#181818",
						font_size: 14
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})
					// 生成海报
					await this.$refs.rCanvas.draw((res) => {
						//res.tempFilePath：生成成功，返回base64图片
						uni.showShareImageMenu({
							path: res.tempFilePath,
							success: (res) => console.log('分享成功', res),
							fail: (err) => console.error('分享失败', err),
						});
						// this.$refs.rCanvas.saveImage(res.tempFilePath)
					})
				})
			}
		}
	}
</script>

<style scoped>
	@import url("Invite-staff.css");
</style>