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">

			<image class="image" :src="imagePath" mode="aspectFill"></image>			
			
			<!-- todo: check -->
			<canvas id="myCanvas" type="2d" canvas-id="firstCanvas1"></canvas>
			
			<view v-if="imagePath" class="tools">
				<button plain class="flex btn" @click="preservationImg(imagePath)">
					保存到本地
				</button>
			</view>

		</view>
		
	</view>
</template>

<script>
	import { mapState } from 'vuex'
import index from '../../uni_modules/uv-ui-tools'
	export default {
		name: 'Promotion',
		computed: {
			...mapState(['userInfo', 'promotionUrl']),
		},
		data() {
			return {
				url: '',
				title: '',
				baseUrl: 'https://image.hhlm1688.com/',
				canvas: {},
				imagePath: 'https://image.hhlm1688.com/2025-03-06/32fbb8e2-160b-4cbf-9a49-a72de231de20.png',
				// imagePath: 'https://image.hhlm1688.com/2025-02-27/2fe7e417-54ad-4911-b9ba-84ac7d48e66d.png',
				// imagePath: 'https://image.hhlm1688.com/2025-02-26/6539d2fa-558d-47db-9681-ecffec5b6c5d.png',
				index : 0,
			}
		},
		onShow() {
			let that = this;
			// that.draw()
			// if(!that.promotionUrl){
				// that.getQrCode()
			// 	uni.showLoading({
			// 		title: "拼命绘画中..."
			// 	})
			// }
			// that.$store.commit('getUserInfo')
		},
		methods: {
			getQrCode() {
				// uni.showLoading({
				// 	title: "拼命绘画中..."
				// })
				let that = this;
				that.$api('getInviteCode', res => {
					if (res.code == 200) {
						that.url = res.result.url
						that.title = res.result.name
						
						// that.imagePath = that.$config.aliOss.url + res.result.url
						
						// that.$store.commit('setPromotionUrl', that.imagePath)
						
						that.draw()
						uni.hideLoading()
					}
				})
			},
			draw() {

				uni.showLoading({
					title: "拼命绘画中..."
				})
				let that = this;

				wx.createSelectorQuery()
					.select('#myCanvas') // 绘制的canvas的id
					.fields({
						node: true,
						size: true
					})
					.exec((res) => {
						console.log("----------1")
						const canvas = res[0].node
						// 渲染上下文
						const ctx = canvas.getContext('2d')
						// Canvas 画布的实际绘制宽高
						const width = res[0].width
						const height = res[0].height
						
						console.log(width, height);
						// 初始化画布大小
						const dpr = wx.getWindowInfo().pixelRatio
						
						//根据dpr调整
						// dpr  2 4
						//      3 6
						let Ratio = dpr * 2
						
						canvas.width = width * dpr
						canvas.height = height * dpr
						
						that.canvas = canvas
						ctx.scale(dpr, dpr)
						ctx.clearRect(0, 0, width, height)
						
						// ctx.fillStyle = '#fff'
						// ctx.fillRect(0, 0, canvas.width, canvas.height)
						
						
						//图片
						const bgImage = canvas.createImage()
						bgImage.src = that.configList.qr_code
						
						//二维码图片
						const coderImage = canvas.createImage()
						coderImage.src = '../static/logo.png'
						// coderImage.src = that.baseUrl + that.url
						
						let size = 0;
						console.log("----------2")
						bgImage.onload = () => {
							canvas.width = bgImage.width
							canvas.height = bgImage.height
							ctx.drawImage(bgImage,
							0, 0, bgImage.width, bgImage.height)
							
							size = Math.floor(canvas.width / 3)
							
							ctx.drawImage(coderImage,
							canvas.width / 2 - (size / 2), canvas.height * 0.46, size, size)
							
							that.canvasToTempFilePath()
						}
						console.log("----------3")
						coderImage.onload = () => {
							ctx.drawImage(coderImage,
							canvas.width / 2 - (size / 2), canvas.height * 0.46, size, size)
							that.canvasToTempFilePath()
						}

					})

			},
			canvasToTempFilePath(){
				let that = this;
				that.index++
				if(that.index < 2){
					return
				}
				// 绘制完成后存储路径
				setTimeout(() => {
					wx.canvasToTempFilePath({
						x: 0,
						y: 0,
						width: that.canvas.width,
						height: that.canvas.height,
						canvas : that.canvas,
						success: (res) => {
							var tempFilePath = res.tempFilePath;
							that.imagePath = tempFilePath
							
							that.$store.commit('setPromotionUrl', res.tempFilePath)
							
							uni.hideLoading()
							that.load = false
						}
					});
				}, 200);
			},
			back() {
				uni.navigateBack(-1)
			},
			async preservationImg(img) {
				await this.$authorize('scope.writePhotosAlbum')
				this.imgApi(img);
			},
			imgApi(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;
	}

	#myCanvas {
		position: fixed;
		left: 100%;
		/* visibility: hidden */
		/* visibility: hidden; */
		/* margin-top: 100rpx; */
		width: 750rpx;
		height: calc(100vh - 120rpx);
		/* line-height: 20px; */
		background-color: rgba(255, 255, 255, 1);
		text-align: center;
	}

	.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>