rice-front/pages_order/mine/promotion.vue

<template>
	<view class="promotion">
		
		
		<navbar title="推荐有礼" 
		:bgColor="bgColor"
		color="#fff"
		leftClick @leftClick="$utils.navigateBack" />
		
		<view class="tui_image"
		v-if="!show">
			<image :src="configList.tui_image" mode="widthFix"
			style="width: 100%;"></image>
			
			<view class="uni-color-btn"
			@click="clickTab">
				推荐二维码海报生成
			</view>
		</view>
		
		
		<view
		v-if="show">
		
			<image
			class="image" 
			:src="imagePath" mode="aspectFill"></image>			
		
			
			<!-- <view class="uni-color-btn"
			@click="preservationImg(imagePath)">保存二维码</view> -->
		</view>
		<canvas id="myCanvas" type="2d" canvas-id="firstCanvas1"></canvas>
		<!-- <view class="promotion-card"
		v-if="show">
			
			<image :src="userInfo.headImage" mode="aspectFill"
			class="headImage"></image>

			<image style="width: 100%;" :src="imagePath" mode="widthFix"></image>			

			<view class="invitation-code">加油站: {{ title }}</view>
			<canvas id="myCanvas" type="2d" canvas-id="firstCanvas1"></canvas>
			
			<view class="uni-color-btn"
			@click="preservationImg(imagePath)">保存二维码</view>
		</view> -->
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name: 'Promotion',
		computed: {
			...mapState(['userInfo']),
		},
		data() {
			return {
				url: '',
				title: '123123',
				baseUrl: 'https://image.hhlm1688.com/',
				canvas: {},
				imagePath: '',
				show : false,
				bgColor : '#fe6c17',
				load : false,
			}
		},
		onShow() {
			this.getQrCode()
			this.$store.commit('getUserInfo')
		},
		methods: {
			getQrCode() {
				// this.show = true
				this.load = true
				this.$api('getInviteCode', res => {
					if (res.code == 200) {
						this.url = res.result.url
						this.title = res.result.name
						this.draw()
					}
				})
			},
			clickTab(){
				this.bgColor = '#de0917'
				this.show = true
				if(this.load){
					uni.showLoading({
						title: "拼命绘画中..."
					})
				}
			},
			draw() {

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

				wx.createSelectorQuery()
					.select('#myCanvas') // 绘制的canvas的id
					.fields({
						node: true,
						size: true
					})
					.exec((res) => {
						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
						console.log("bug", dpr)
						canvas.width = width * dpr
						canvas.height = height * dpr

						this.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 = this.configList.qr_image
						
						bgImage.onload = () => {
							
							canvas.width = bgImage.width
							canvas.height = bgImage.height
							
							ctx.drawImage(bgImage,
								0, 0, bgImage.width, bgImage.height)
						}

						//用户图片
						// const image = canvas.createImage()
						// image.onload = () => {
						// 	ctx.drawImage(image, 30, 18, 40, 40)
						// }
						// image.src = '/public/img/wechar_1.png'
						// image.src = this.userInfo.headImage
						ctx.fillStyle = 'black'
						ctx.font = '22px PingFangSC-regular';

						// 绘制用户姓名
						// let nickName = this.userInfo.nickName || '绘制用户姓名'
						// ctx.fillText(nickName, canvas.width / Ratio - nickName.length * 11, 40);

						// ctx.font = '18px PingFangSC-regular';
						
						// 绘制欢迎语
						let s = this.title || ''
						// ctx.fillText(s, canvas.width / Ratio - s.length * 11, 50);

						//二维码图片
						const coderImage = canvas.createImage()
						coderImage.src = this.baseUrl + this.url
						coderImage.onload = () => {
							ctx.drawImage(coderImage,
								canvas.width / 2 - 175, canvas.height / 2 - 100, 350, 350)
						}


						// 绘制完成后存储路径

						setTimeout(() => {
							wx.canvasToTempFilePath({
								x: 0,
								y: 0,
								width: this.canvas.width,
								height: this.canvas.height,
								canvas,
								success: (res) => {
									var tempFilePath = res.tempFilePath;
									this.imagePath = tempFilePath
									uni.hideLoading()
									this.load = false
								}
							});
						}, 600);

					})

			},
			back() {
				uni.navigateBack(-1)
			},
			preservationImg(img) {
				let that = this
				uni.authorize({
					/* scope.writePhotosAlbum 类型是保存到相册 */
					scope: 'scope.writePhotosAlbum',
					success() {
						/* 已授权进入 */
						/* 保存图片到相册方法方法 */
						that.imgApi(img);
					},
					complete(res) {
						/* 判断如果没有授权就打开设置选项让用户重新授权 */
						uni.getSetting({
							success(res) {
								if (!res.authSetting['scope.writePhotosAlbum']) {
									/* 打开设置的方法 */
									that.openInstall();
								}
							}
						});
					}
				});
			},
			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>
	.promotion {
		width: 100%;
		height: 100vh;
		background-color: #de0917;
		.tui_image{
			position: relative;
			.uni-color-btn{
				position: absolute;
				bottom: 150rpx;
				height: 40rpx;
				background-color: #fff;
				box-shadow: 0 0 10rpx 10rpx #ffffff66;
				color: #de0917;
				font-weight: 900;
				width: 80%;
				font-family: STFangsong;
				font-size: 34rpx;
			}
		}
		
		.image{
			width: 100%;
			height: calc(100vh - 200rpx);
		}
		
		
		// background-color: $uni-color;
		.promotion-card {
			width: 90%;
			margin: 140rpx auto 0rpx auto;
			box-shadow: 0rpx 0rpx 15rpx rgba(0, 0, 0, .2);
			border-radius: 40rpx;
			padding: 40rpx 30rpx;
			box-sizing: border-box;
			background-color: #fff;
			position: relative;
			padding-top: 100rpx;
			.headImage{
				position: absolute;
				height: 180rpx;
				width: 180rpx;
				border-radius: 50%;
				top: -80rpx;
				left: 50%;
				transform: translate(-50%);
				border: 10rpx solid #fff;
				box-shadow: 0 0 10rpx 10rpx #00000013;
			}
		}
	}

	#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;
	}
</style>