eduepos_ui_store/components/qrcode-poster/qrcode-poster.vue

<template>
	<view class="content" @touchmove.stop.prevent="moveHandle" v-if="isShow" @click.stop="isShow=false">
		<canvas @click.stop="" :style="{ width: canvasW + 'px', height: canvasH + 'px' }" :width="canvasWW + 'px'" :height="canvasHH + 'px'" canvas-id="my-canvas"></canvas>
		<view class="save-btn-wrap savepadding">
			<view class="save-btn" @click.stop="saveImage">保存图片</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			backImagUrl: {
				type: String,
				default: ''
			},	headerImgUrl:{
				type: String,
				default: ''
			},
			memberName:{
				type: String,
				default: '会员'
			},
			qdImageUrl:{
				type: String,
				default: ''
			},
			codeType:{
				type: Number,
				default: 0
			},
			goodsIamgeUrl:{
				type: String,
				default: ''
			},
			goodsName:{
				type: String,
				default: '精品'
			},
			goodsPrice:{
				type:Number,
				default: 0.00
			},
			goodsYPrice:{
				type: Number,
				default: 0.00
			}
		},
		data(){
			return {
				canvasW: 0,
				canvasH: 0,
				canvasWW: 0,
				canvasHH: 0,
				ctx: null,
				isShow: false,
				qrcode: ''
			}
		},
		methods:{
			//显示
			showCanvas(){
				this.isShow = true
				this.__init()
			},
			//初始化画布
			async __init(){
				uni.showLoading({
				    title: '加载中...',
					mask: true
				})
				this.ctx = uni.createCanvasContext('my-canvas',this)
				this.canvasW = uni.upx2px(580);
				this.canvasH = uni.upx2px(1020);
				this.canvasWW = this.canvasW * 2;
				this.canvasHH = this.canvasH * 2;
				//设置画布背景透明
				this.ctx.setFillStyle('rgba(255, 255, 255, 1)')
				//设置画布大小
				this.ctx.fillRect(0,0,this.canvasW,this.canvasH)
				// 绘制背景图片
				let backImag = await this.getImageInfo(this.backImagUrl);
				this.ctx.drawImage(backImag.path,0,0, this.canvasW, this.canvasH);
				
				// 绘制会员名
				// this.ctx.setFontSize(15); //设置标题字体大小
				// this.ctx.setFillStyle('#333'); //设置标题文本颜色
				// this.ctx.fillText(this.memberName,uni.upx2px(140), uni.upx2px(160))
				// 绘制商品图片
				// let goodsIamge = await this.getImageInfo(this.goodsIamgeUrl);
				// this.roundedRectangle(this.ctx, uni.upx2px(17), uni.upx2px(55), uni.upx2px(549), uni.upx2px(549),10,goodsIamge.path);
				//绘制价格
				// this.ctx.setFontSize(12);
				// this.ctx.setFillStyle('#ff631d');
				// this.ctx.fillText('￥', uni.upx2px(395), uni.upx2px(740));
				// this.ctx.setFontSize(18);
				// this.ctx.setFillStyle('#ff631d');
				// this.ctx.fillText((this.goodsPrice).toFixed(2), uni.upx2px(420), uni.upx2px(740));
				// 绘制商品名称
				// let hW = uni.upx2px(500);
				// this.ctx.setFontSize(12);
				// this.ctx.setFillStyle('#757575');
				// let sWidth = this.ctx.measureText(this.goodsName).width
				// if (this.goodsName.length < 14) {
				// 	this.ctx.fillText(this.goodsName, uni.upx2px(40), uni.upx2px(730));
				// } else{
				// 	this.ctx.fillText(this.goodsName.slice(0, 14), uni.upx2px(40), uni.upx2px(730));
				// 	this.ctx.fillText(this.goodsName.slice(14,26) + '..', uni.upx2px(40), uni.upx2px(765));
				// }
				// 绘制头像
				//let headerImg = await this.getImageInfo(this.headerImgUrl);
				//this.drawCircular(this.ctx, headerImg.path, uni.upx2px(60), uni.upx2px(800), uni.upx2px(75), uni.upx2px(75));
				
				// 绘制小程序码 // 不发胖
				if (this.codeType == 1) {
					let qdImage = await this.getImageInfo(this.qdImageUrl);
					this.ctx.drawImage(qdImage.path, uni.upx2px(225), uni.upx2px(785), uni.upx2px(140), uni.upx2px(140));
				} 
				if (this.codeType == 2 || this.codeType == 6){
					// 绘制小程序码 // 按时吃饭
					let qdImage = await this.getImageInfo(this.qdImageUrl);
					this.ctx.drawImage(qdImage.path, uni.upx2px(120), uni.upx2px(575), uni.upx2px(335), uni.upx2px(335));
				}
				if (this.codeType == 3) {
					// 绘制小程序码 // 科技质感
					let qdImage = await this.getImageInfo(this.qdImageUrl);
					this.ctx.drawImage(qdImage.path, uni.upx2px(140), uni.upx2px(370), uni.upx2px(300), uni.upx2px(300));
				}
				if (this.codeType == 4) {
					// 绘制小程序码 // 叮咚黄
					let qdImage = await this.getImageInfo(this.qdImageUrl);
					this.ctx.drawImage(qdImage.path, uni.upx2px(135), uni.upx2px(370), uni.upx2px(305), uni.upx2px(305));
				}
				if (this.codeType == 5) {
					// 绘制小程序码 // 美味点心
					let qdImage = await this.getImageInfo(this.qdImageUrl);
					this.ctx.drawImage(qdImage.path, uni.upx2px(160), uni.upx2px(475), uni.upx2px(265), uni.upx2px(265));
				}
				
				
				
				setTimeout(()=>{
					this.ctx.draw(true,()=>{
						uni.hideLoading()
					})
				},500)
			},
			//画圆形头像
			drawCircular(ctx, url, x, y, width, height) {
				ctx.save();
				ctx.beginPath();
				ctx.arc(width / 2 + x, height / 2 + y, width / 2, 0, Math.PI * 2, false);
				ctx.clip();
				ctx.drawImage(url, x, y, width, height);
				ctx.restore();
				ctx.closePath();
			},
			 roundedRectangle(ctx, x, y, width, height, r,url){
				 ctx.save();
				  ctx.beginPath();
				  ctx.moveTo(x + r, y);
				  ctx.lineTo(x + width - r, y);
				  ctx.arc(x + width - r, y + r, r, Math.PI*1.5, Math.PI*2);
				  ctx.lineTo(x + width, y + height - r);
				  ctx.arc(x + width - r, y + height - r, r, 0, Math.PI*0.5);
				  ctx.lineTo(x + r, y + height);
				  ctx.arc(x + r, y + height - r, r, Math.PI*0.5, Math.PI);
				  ctx.lineTo(x, y + r);
				  ctx.arc(x + r, y + r, r, Math.PI, Math.PI*1.5);
					ctx.clip();;
				  ctx.drawImage(url, x, y, width, height);
				  ctx.restore();
				  ctx.closePath();
			},
			//获取图片
			getImageInfo(imgSrc){
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: imgSrc,
						success: (image) => {
							resolve(image);
						},
						fail: (err) => {
							reject(err);
							setTimeout(()=>{
								uni.hideLoading()
							},500)
						}
					});
				});
			},
			moveHandle(){},
			//保存图片到相册
			saveImage(){
				var that = this
				uni.canvasToTempFilePath({
					canvasId: 'my-canvas',
					quality: 1,
					complete: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(res) {
								uni.showToast({
									title: '已保存到相册',
									icon: 'success',
									duration: 2000
								})
								setTimeout(()=>{
									that.isShow = false
								},2000)
							}
						})
					}
				},this);
			}
		}
	}
</script>

<style scoped lang="scss">
.content{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 90upx;
	background: rgba(0,0,0,.4);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 99;
	
	.save-btn-wrap{
		position: fixed;
		left: 0;
		bottom: 0;
		height: 100upx;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	
	.save-btn{
		// color: #fff;
		// // background-image: linear-gradient(#fce799, #e7c389);
		// background-image: linear-gradient(#f2190c, #f2370c);
		// padding: 15rpx 40rpx;
		// border-radius: 50rpx;
		width: 80%;
		height: 80rpx;
		border-radius: 40rpx;
		position: fixed;
		left: 10%;
		bottom: calc(20rpx + env(safe-area-inset-bottom));
		bottom: calc(20rpx + constant(safe-area-inset-bottom));
		background-color: $light-color;
		color: #fff;
		font-size: 36rpx;
		@include flexCenter;
		padding: 15rpx 40rpx;
	}
}
/* ios底部安全距离-padding */
	.savepadding {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
	}

	/* ios底部安全距离-bottom */
	.savebottom {
		bottom: constant(safe-area-inset-bottom);
		bottom: env(safe-area-inset-bottom);
	}
</style>