Ci2Order.vue/App/pages/book/share/index.vue

<template>
	<view>
		<z-navbar title="二维码分享" back></z-navbar>
		<canvas :style="{width:canvasWidth+'px',height:canvasHeight+'px'}" canvas-id="firstCanvas"></canvas>

		<view class="area2" @click="saveToPhone">
			<image class="share_img2" mode="widthFix" src="../../../static/share_btn.png"></image>
			<view class="share_area_content2" >
				<view class="share_content2_text">
					保存到手机
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				image: '',
				canvasWidth: 0,
				canvasHeight: 0,

				img1: '',
				img2: '',
				img3: '',
				img4: '',
				img5: '',
				
				saveimg:''

			};
		},
		mounted() {
			uni.showLoading({
				title:'加载中',
				mask:true
			})
			uni.getStorage({
				key: 'shareInfo',
				success: (res) => {
					console.log(res.data)
					this.info = res.data;
					this.$axios.post('qrcode/orderDetialQRCode', {
						url: 'http://117.ci2.cn:8080/bookinfo?id=' + res.data.id
					}).then(info => {
						console.log(info)
						this.image = info.data.url;
						this.makeImage();
						var rpx = uni.getSystemInfoSync().windowWidth / 750;
						this.canvasWidth = uni.getSystemInfoSync().windowWidth;
						this.canvasHeight = uni.getSystemInfoSync().windowHeight - 84 * rpx - uni.getSystemInfoSync().statusBarHeight;
					}).catch(err => {
						console.log(err)
					})
				}
			})
		},
		methods: {
			makeImage() {
				uni.getImageInfo({
					src: '../../../static/bg.png',
					success: (res) => {
						console.log(res.path)
						this.img1 = res.path;
						uni.getImageInfo({
							src: '../../../static/share_card.png',
							success: (res) => {
								console.log(res.path)
								this.img2 = res.path;
								uni.getImageInfo({
									src: '../../../static/shijian.png',
									success: (res) => {
										console.log(res.path)
										this.img3 = res.path;
										uni.getImageInfo({
											src: '../../../static/rili.png',
											success: (res) => {
												console.log(res.path)
												this.img4 = res.path;
												// uni.downloadFile({
												// 	url:this.image
												// })
												uni.getImageInfo({
													src: this.image,
													success: (res) => {
														console.log(res.path)
														this.img5 = res.path;

														this.drawImage();
													}
												})
												// this.drawImage();
											}
										})
									}

								})
							}
						})
					}
				})


			},

			drawImage() {
				var rpx = uni.getSystemInfoSync().windowWidth / 750;
				var context = uni.createCanvasContext('firstCanvas')
				context.drawImage(this.img1, 0, 0, this.canvasWidth, this.canvasHeight);
				console.log(this.img5)
				context.drawImage(this.img2, 30 * rpx, 87 * rpx, 689 * rpx, 744 * rpx);
				context.drawImage(this.img5, 188 * rpx, 178 * rpx, 374 * rpx, 374 * rpx);
				context.setStrokeStyle("#C2C2C2");
				context.setLineDash([5]);
				context.beginPath();
				context.moveTo(97 * rpx, 603 * rpx);
				context.lineTo(645 * rpx, 603 * rpx);
				context.stroke();
				context.drawImage(this.img4, 137 * rpx, 659 * rpx, 32 * rpx, 32 * rpx);
				context.drawImage(this.img3, 137 * rpx, 720 * rpx, 32 * rpx, 32 * rpx);
				context.fillStyle = "#666";
				context.font = "13px Arial";
				context.fillText(this.info.customName + '   ' + this.info.houseName, 187 * rpx, 685 * rpx);
				context.fillText(this.info.orderDate + '   ' + this.info.activityBeginTime + '-' + this.info.activityEndTime, 187 *
					rpx, 748 * rpx);
				context.draw();
				setTimeout(()=>{
					uni.canvasToTempFilePath({
					       x: 0,
					       y: 0,
					       width: this.canvasWidth,
					       height: this.canvasHeight,
					       canvasId: 'firstCanvas',
					       success:(res)=> {
					         console.log(res.tempFilePath)
					       this.saveimg=res.tempFilePath;
					       }
					     })
						 uni.hideLoading();
				},500)
					
				
				 
			},
			saveToPhone() {
				uni.saveImageToPhotosAlbum({
					filePath: this.saveimg,
					success: function() {
						console.log('save success');
						uni.showToast({
						    title: '图片已存到手机',
						    duration: 2000
						});
					}
				});
			}
		},
		beforeDestroy() {
			// uni.removeStorage({
			// 	key: 'shareInfo'
			// })
		}
	}
</script>

<style scoped lang="scss">
	.area2 {
		text-align: center;
		position: absolute;
		top: 964rpx;
		z-index: 999;
		left: 55rpx;
		.share_img2 {
			width: 662rpx;
			height: 195rpx;
		}

		.share_area_content2 {
			position: absolute;
			top: 0;
			left: 0;
			text-align: center;
			width: 640rpx;
			.share_content2_text {
				font-size: 40rpx;
				padding-top: 40rpx;
				height:100rpx;
				left:0;
				width: 100%;
				text-align: center;
				color: #FF8400;
				font-weight: bold;
			}
		}
	}
</style>