massage-front/pages_order/mine/promotion.vue

<template>
	<view class="page">

		<navbar title="邀请好友" leftClick @leftClick="$utils.navigateBack" color="#fff" />


		<view class="flex flex-column content">

			<view style="width: 698rpx; height: 788rpx; border-radius: 16rpx; overflow: hidden;">
				<canvas id="myCanvas" canvas-id="firstCanvas1" type="2d" style="width: 100%; height: 100%;"></canvas>
			</view>

			<view class="tools">
				<button plain class="flex btn" @click="saveImg">
					保存到本地
				</button>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		name: 'Promotion',
		computed: {
			...mapState(['userInfo']),
		},
		data() {
			return {
				wxCodeImage: '',
				baseUrl: 'https://image.hhlm1688.com/',
				canvas: {},
			}
		},
		onReady() {
			this.fetchQrCode()
		},
		methods: {
			async fetchQrCode() {
				try {
					
					// #ifdef MP-WEIXIN
					this.wxCodeImage = (await this.$fetch('getInviteCode'))?.url
					// #endif

					this.draw()
				} catch (err) {

				}
			},
			draw() {

				uni.showLoading({
					title: "拼命绘画中..."
				})

				wx.createSelectorQuery()
					.select('#myCanvas') // 绘制的canvas的id
					.fields({
						node: true,
						size: true
					})
					.exec(async (res) => {
						const canvas = res[0].node
						// 渲染上下文
						const ctx = canvas.getContext('2d')
						// Canvas 画布的实际绘制宽高
						const width = res[0].width
						const height = res[0].height
						// 初始化画布大小
						const dpr = wx.getWindowInfo().pixelRatio

						//根据dpr调整
						// dpr  2 4
						//      3 6
						console.log("--dpr", dpr)
						canvas.width = width * dpr
						canvas.height = height * dpr

						let Ratio = canvas.width / 698

						this.canvas = canvas
						ctx.scale(dpr, dpr)
						ctx.clearRect(0, 0, width, height)

						ctx.fillStyle = '#fff'
						ctx.fillRect(0, 0, canvas.width, canvas.height)

						ctx.fillStyle = '#000000';
						const fontSize = 32 * Ratio / dpr
						ctx.font = `${fontSize}px PingFangSC-regular`;

						const titleX = 285 * Ratio / dpr
						const titleY = 53 * Ratio / dpr
						ctx.fillText('邀请好友', titleX, titleY);

						const codeX = 216 * Ratio / dpr
						const codeY = 645 * Ratio / dpr
						// todo: fetch code
						ctx.fillText(`邀请码：${'YFY1688'}`, codeX, codeY);

						//二维码图片
						const coderImage = canvas.createImage()
						coderImage.src = this.wxCodeImage
						// coderImage.onload = () => {
						// 	const x = 158 * Ratio / dpr
						// 	const y = 188 * Ratio / dpr
						// 	const size = 382 * Ratio / dpr
						// 	ctx.drawImage(coderImage, x, y, size, size)

							uni.hideLoading()
						// }

					})

			},
			saveImg() {
				this.$authorize('scope.writePhotosAlbum').then((res) => {
					this.imgApi()
				})
			},
			imgApi() {
				wx.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: this.canvas.width,
					height: this.canvas.height,
					canvas: this.canvas,
					success: (res) => {
						let tempFilePath = res.tempFilePath;
						this.saveImgToPhone(tempFilePath)
					},
					fail: (err) => {
						console.log('--canvasToTempFilePath--fail', err)
					}
				}, this);

			},
			saveImgToPhone(image) {
				/* 获取图片的信息 */
				uni.getImageInfo({
					src: image,
					success: function(image) {
						/* 保存图片到手机相册 */
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: function() {
								uni.showModal({
									title: '保存成功',
									content: '图片已成功保存到相册',
									showCancel: false
								});
							},
							complete(res) {
								console.log(res);
							}
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: $uni-bg-color;
		min-height: 100vh;

		/deep/ .nav-bar__view {
			background-image: linear-gradient(#84A73F, #D8FF8F);
		}
	}

	.content {
		align-items: flex-start;
		padding: 48rpx 26rpx;
	}

	.image {
		width: 100%;
		height: 778rpx;
	}

	.tools {
		margin-top: 163rpx;
		width: 100%;
		padding: 0 56rpx;
		box-sizing: border-box;

		.btn {
			width: 100%;
			padding: 29rpx 0;
			color: $uni-text-color-inverse;
			font-size: 28rpx;
			line-height: 40rpx;
			border-radius: 49rpx;
			border: none;
			background-image: linear-gradient(to right, #84A73F, #D8FF8F);
		}
	}
</style>