guosen-ldt-client/pagesB/pages/agent/draw-poster.vue

<template>
	<view class="content">
		<view style="display: flex;justify-content: center;align-items: center;margin: 10rpx;">
			<image @error="draw" :show-menu-by-longpress="true" :src="posterUrl" style="margin: 10rpx;width: 100%;height: 1200rpx;" />
		</view>

		<view v-if="posterUrl" @click="$mpi.savePhoto(posterUrl)" class="center" style="margin-top: 50rpx;">
			<view class="cu-btn  flex  text-lg btn-bg-color radius" style="padding: 46rpx 0;width: 90%;">
				保存图片
			</view>
		</view>

		<r-canvas ref="rCanvas"></r-canvas>
		<view class="qrimg" v-if="$isNotEmpty(val)">
			<tki-qrcode :size="300" ref="qrcode" :val="val" :show="false" :showLoading="false" @result="qrR" />
		</view>
	</view>
</template>

<script>
	import rCanvas from "@/pagesB/comps/r-canvas/r-canvas.vue"
	import tkiQrcode from "@/pagesB/comps/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			tkiQrcode,
			rCanvas
		},
		data() {
			return {
				//背景图
				bgImg: 'https://guosen-bucket-ldt.obs.cn-south-1.myhuaweicloud.com:443/aa85f1da8bd84ad2944fe88dd4ef7045-hyRO9DPsxdFr399bc3fe4c0fb52273af5c8f694e1356.png',
				//二维码内容
				val: 'https://ldt.guosen-fumao.cn/wapp/qrcode?promotionCode=',
				//二维码地址
				qrUrl: '',
				//海报地址
				posterUrl: ''
			}
		},
		onLoad() {
			// if (this.$cache.get('posterUrl')) {
			// 	this.posterUrl = this.$cache.get('posterUrl')
			// 	return
			// }
			this.draw()
		},
		methods: {
			draw(){
				this.val=this.val + this.vuex_userId
				this.$nextTick(function() {
					this.$refs.qrcode._makeCode()
				})
			},
			qrR(res) {
				this.$dialog.showLoading('海报生成中')
				this.qrUrl = res
				this.drawPoster()
			},
			async drawPoster() {
				//获取用户信息
				let userInfo = (await this.$api.loginUser.detail({
					id: this.vuex_userId
				})).data

				let avatar = await this.$mpi.downloadFile(userInfo.avatar)

				this.$nextTick(async () => {
					const w = 354
					const h = 600
					// 初始化
					await this.$refs.rCanvas.init({
						canvas_id: "rCanvas",
						canvas_width: w,
						canvas_height: h,
						background_color: "#fff",
						hidden: true
					})
					// 画图
					await this.$refs.rCanvas.drawImage({
						url: this.bgImg,
						x: 0,
						y: 0,
						w,
						h: (h - 140),
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})

					//画二维码
					await this.$refs.rCanvas.drawImage({
						url: this.qrUrl,
						x: (w - 115),
						y: (h - 120),
						w: 100,
						h: 100
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})

					//画头像
					await this.$refs.rCanvas.drawImage({
						url: avatar,
						x: 26,
						y: (h - 120),
						w: 36,
						h: 36,
						border_radius: 20
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})

					// 画文字
					await this.$refs.rCanvas.drawText({
						text: userInfo.nickName,
						x: 70,
						y: (h - 96),
						font_color: "#000",
						font_size: 16,
						font_weight: 800,
						font_family: 'PingFang-SC-Heavy'
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})

					await this.$refs.rCanvas.drawText({
						text: "我是联兑通合伙人",
						max_width: 0,
						x: 30,
						y: (h - 52),
						font_color: "#333333",
						font_size: 14,
						font_weight: 300
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})

					await this.$refs.rCanvas.drawText({
						text: "欢迎加入联兑通",
						max_width: 0,
						x: 30,
						y: (h - 32),
						font_color: "#333333",
						font_size: 14,
						font_weight: 300
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})

					// 生成海报
					await this.$refs.rCanvas.draw((res) => {
						this.posterUrl = res.tempFilePath
						this.$cache.put('posterUrl', this.posterUrl)
						uni.hideLoading()
					})
				})
			}
		}
	}
</script>

<style>

</style>