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 {
          this.wxCodeImage = (await this.$fetch('getInviteCode'))?.url

          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>