<template>
	<view class="page" :style="themeColor">
		<view class="flex benben-position-layout flex flex-wrap align-center paymentCode_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub paymentCode_fd0_0'>
				<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  paymentCode_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back"
						data-url="1">&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center flex-sub'>
					<text class='paymentCode_fd0_0_c1_c0'>商家收款码</text>
				</view>
				<view class='flex flex-wrap align-center paymentCode_fd0_0_c2'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<!---flex布局flex布局开始-->
		<view class="flex benben-flex-layout flex-wrap align-center paymentCode_flex_1">
			<view class='flex flex-direction flex-wrap align-stretch flex-sub paymentCode_fd1_0'>
				<view class='flex flex-wrap align-center'>
					<image class='paymentCode_fd1_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"25.png"'></image>
					<text class='paymentCode_fd1_0_c0_c1'>商家收款码</text>
				</view>
				<view class='flex flex-wrap align-center paymentCode_fd1_0_c1'>
					<image class='paymentCode_fd1_0_c1_c0' mode="aspectFill" :src='payment_code'></image>
				</view>
				
			</view>
			<view class="margin-top text-center text-lg save" v-if="canvasImg" @click="savaImg">保存收款码</view>
		</view>
		<!-- <image class="canvas-img" :src="canvasImg" mode="widthFix"></image> -->
		<!---flex布局flex布局结束-->

	<canvas
	  style="width: 504px; height: 700px; background-color: #fff;  position: fixed; top: -10000px; left: -10000px;"
	  canvas-id="canvas" id="canvas"></canvas>
	</view>
</template>
<script>
	export default {
		components: {},


		data() {
			return {
				payment_code:"",
				canvasImg: '',
				store_name: ''
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			this.authInfoCheck()
		},
		
		methods: {
			savaImg() {
			  let that = this;
			  uni.saveImageToPhotosAlbum({
			    filePath: this.canvasImg,
			    success: res => {
			      console.log(res);
			      this.$message.info('已保存到相册')
			    },
			    fail: err => {
			      console.log(err);
			    }
			  });
			  // uni.getImageInfo({
			  //   src: url,
			  //   success: function(image) {
			  //     console.log('图片信息：', JSON.stringify(image));
			  //     uni.saveImageToPhotosAlbum({
			  //       filePath: image.path,
			  //       success: function() {
			  //         console.log('save success');
			  //         that.$message.info(that.i18n['已保存到相册'])
			  //       }
			  //     });
			  //   }
			  // });
			},
			async getPictureInformation(url) {
			  // let downLoadImgInfo = await uni.downloadFile({
			  //   url: url
			  // });
			  // console.log(downLoadImgInfo[1].tempFilePath);
			  let imgInfo = await uni.getImageInfo({
			    src: url
			  })
			  console.log(imgInfo[1]);
			  return imgInfo[1]
			},
			async createPoster() {
			  const that = this;
			  let logo = '/static/logo.png'
				let payImg = '/static/images/25.png'
				let bg = '/static/images/24.png'
			  var context = uni.createCanvasContext('canvas', this)
			  let imageResult11 = await this.getPictureInformation('https://lvtai-files.oss-cn-beijing.aliyuncs.com/mini/invite_bg.png')
			  context.drawImage(imageResult11.path, 0, 0, 504, 700); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
				
				// context.setFillStyle('#FF9300')
				// context.fillRect(0, 0, 328, 328)
			  // let imageResult111 = await this.getPictureInformation('https://lvtai-files.oss-cn-beijing.aliyuncs.com/mini/153.png')
			  // context.drawImage(imageResult111.path, 32, 32, 440, 500); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
				context.drawImage(bg, 32, 32, 440, 500);
			  // 绘制圆角矩形
			  // context.save();
			  // context.beginPath();
			  // context.arc(252, 90, 48, 0, 2 * Math.PI); // 圆心坐标(100, 100)，半径为100
			  // context.closePath();
			  // context.clip();
			  // let imageResult = await this.getPictureInformation(this.userInfo.avatar)
			  // console.log(imageResult.path);
			  // context.drawImage(imageResult.path, 204, 42, 96, 96); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
			  // context.restore(); // 恢复之前保存的绘图上下文状态
				context.drawImage(payImg, 88, 64, 36, 36); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
			  context.setFillStyle('#FF9300') //文字颜色：默认黑色
			  context.textAlign = 'left'
			  context.textBaseline = "middle";
			  context.font = 'normal 28px 微软雅黑'; // 字体样式
			  // context.fillText('邀请人' + ':' + this.userInfo.nickname, 252, 405)
			  context.fillText('商家付款码', 130, 84)
				context.setFillStyle('#ffffff')
				context.fillRect(88, 130, 328, 328)
			  context.setFillStyle('#333') //文字颜色：默认黑色
			  context.textAlign = 'center'
			  context.textBaseline = "middle";
			  context.font = 'normal 28px 微软雅黑'; // 字体样式
			  context.fillText('邀请码' + ':', 252, 344)
			  let imageResult1 = await this.getPictureInformation(this.payment_code)
			  context.drawImage(imageResult1.path, 112, 154, 280, 280); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
			
			  // #ifndef MP-WEIXIN
			  // context.drawImage(this.userInfo.invite_url, 92, 330, 320, 320); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
			  // #endif
			
			  context.setFillStyle('#fff') //文字颜色：默认黑色
			  context.textAlign = 'center'
			  context.textBaseline = "middle";
			  context.font = 'normal 28px 微软雅黑'; // 字体样式
			  context.fillText(this.store_name, 252, 583)
			
			  context.setFillStyle('#fff') //文字颜色：默认黑色
			  context.textAlign = 'center'
			  context.textBaseline = "middle";
			  context.font = 'normal 24px 微软雅黑'; // 字体样式
			  context.fillText('萬家商超', 252, 640)
			  context.draw()
			  setTimeout(() => {
			    uni.canvasToTempFilePath({
			      canvasId: 'canvas',
			      success: res => {
			        console.log(res.tempFilePath);
			        that.canvasImg = res.tempFilePath
			      },
			      fail: err => {
			        console.log(err);
			      }
			    });
			  }, 300);
			},
			//获取商家信息
			authInfoCheck() {
				this.$api.post(global.apiUrls.postGetShopInfo, ).then(res => {
					console.log(res);
					res = res.data;
					if (res.code == 1) {
						this.payment_code = res.data.payment_code
						this.store_name = res.data.store_name
						this.createPoster()
					}
				});
			},
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: rgba(255, 147, 0, 1);
		background-size: 100% auto !important;
	}
	.save {
		width: 280rpx;
		height: 72rpx;
		line-height: 72rpx;
		background-color: #fff;
		border-radius: 36rpx;
		color: rgba(255, 147, 0, 1);
		margin: 32rpx auto;
	}
	.paymentCode_flex_0 {
		background: rgba(255, 147, 0, 1);
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.paymentCode_fd0_0_c2 {
		width: 32rpx;
		height: 32rpx;
	}
	.canvas-img {
	  margin: 100rpx auto;
	  display: block;
	  width: 504rpx;
	  height: 818rpx;
	}
	.paymentCode_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 88rpx;
	}

	.paymentCode_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 88rpx;
	}

	.paymentCode_fd0_0 {
		margin: 0rpx 32rpx 0rpx 32rpx;
	}

	.paymentCode_flex_1 {
		padding: 153rpx 28rpx 0rpx 28rpx;
	}

	.paymentCode_fd1_0_c1_c0 {
		width: 406rpx;
		height: 406rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.paymentCode_fd1_0_c1 {
		background: rgba(255, 255, 255, 1);
		margin: 40rpx 0rpx 0rpx 0rpx;
		padding: 60rpx 68rpx 65rpx 74rpx;
		background-size: 100% auto !important;
	}

	.paymentCode_fd1_0_c0_c1 {
		color: #FF9300;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 32rpx;
	}

	.paymentCode_fd1_0_c0_c0 {
		width: 36rpx;
		height: 32rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx 8rpx 0rpx 0rpx;
	}

	.paymentCode_fd1_0 {
		background: url(/static/images/24.png) no-repeat, rgba(255, 147, 0, 1);
		background-size: 100% auto !important;
		padding: 46rpx 70rpx 92rpx 70rpx;
	}
</style>
