<template>
	<view class="container">
		<canvas canvas-id='myCanvas' class="myCanvas"
			:style="'height:'+windowHeight+'px'+';'+'width:'+windowWidth+'px'">
		</canvas>
		<image class="container_img" :src="imagePath" mode="aspectFit"></image>
	</view>
</template>

<script>
	// #ifdef H5
	import getWXSign from "@/static/js/config.js";
	// #endif 
	export default {
		data() {
			return {
				pixelRatio: 0,
				windowWidth: 0,
				windowHeight: 0,
				paycode_img: "",
				showBgImagePath2: '../../static/images/wx_bg.png',
				showBgImagePath1: '../../static/images/pay_wx.png',
				URL: getApp().globalData.URL,
				imagePath: "",
				tempFilePath: ""
			}
		},
		onLoad(e) {
			this.paycode_img = decodeURI(e.paycode_img);
			uni.getSystemInfo({
				success: (res) => {
					console.log(res)
					this.pixelRatio = res.pixelRatio;
					this.windowWidth = res.windowWidth;
					this.windowHeight = res.windowHeight;
				}
			})
		},
		
		onReady(e) {
			uni.downloadFile({
				url: this.paycode_img, //仅为示例，并非真实的资源
				success: (res) => {
					if (res.statusCode === 200) {
						this.tempFilePath = res.tempFilePath;
						this.drawCanvas();
					}
				}
			});
		},

		onReachBottom(e) {

		},

		methods: {
			drawCanvas() {
				console.log("eeeeee")
				var that = this;
				let ctx = wx.createCanvasContext('myCanvas');
				// 画布宽高
				let ctxW = this.windowWidth;
				let ctxH = this.windowHeight;
				ctx.drawImage(this.showBgImagePath2, 0, 0, ctxW, ctxH);
				ctx.fillStyle = '#ffffff';
				ctx.fillRect(ctxW / 2 - 200 / 2, ctxH / 2 - 120, 200, 240);
				ctx.drawImage(this.tempFilePath, ctxW / 2 - 180 / 2, ctxH / 2 - 110, 180, 180);
				ctx.font = 'bold 20px Arial';
				ctx.textAlign = 'center';
				ctx.fillStyle = '#000000';
				var texTwidth = ctx.measureText('长按识别付款').width;
				ctx.fillText("长按识别付款", ctxW / 2, ctxH / 2 + 100);
				ctx.stroke();
				// ctx.draw();
				
				ctx.draw(false, () => {
					uni.canvasToTempFilePath({
						canvasId: 'myCanvas',
						success: (res) => {
							console.log(res, "myCanvas");
							that.imagePath = res.tempFilePath;
							// this.$wx.previewImage({
							// 	urls:['https://www.zchys.net/uploads/images/20220223/32dc33e3a4245788f1d6b9440d15a061.jpg'], 
							// 	success: (res) => {
							// 		// 设置成功
							// 		console.log("设置成功", res)
							// 	}
							// })
							this.request({
								url: "funeng/addpicturce",
								data: {
									image: res.tempFilePath,
								},
							}).then(res => {
								console.log(res, "图片")
								var img = res.data;
								this.$wx.previewImage({
									urls: [URL + img],
									success: (res) => {
										// 设置成功
										console.log("设置成功", res)
									}
								})
							})
						}
					})

				})
			}
		},

	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
	}

	.container_img {
		width: 100%;
		height: 100%;
	}

	.myCanvas {
		position: fixed;
		bottom: 999px;
	}
</style>
