<template>
	<view class="u-flex u-flex-xy-center" style="width: 750rpx;height: 1334rpx;position: relative;">
		<view v-if="userinfo.vip > 0" style="background-color: #F6FAFF;padding: 30rpx; border-radius: 10rpx;">
			<view class="u-flex u-flex-xy-center">
				<u--image :src="userinfo.appcode" width="440rpx" height="440rpx"></u--image>
			</view>
			<view style="height: 10rpx;"></view>
			<view style="font-size: 30rpx;color: #999999;text-align: center;">长按保存或者转发</view>
		</view>
		<view v-else>
			无分享权限.
		</view>
		<!-- <canvas style="width: 100%;height: 100%;" canvas-id="canvas" id="canvas"></canvas>
		<view style="position: absolute;left: 280rpx;">
			<u-button @click="save" type="primary">保存海报</u-button>
		</view> -->
	</view>
</template>

<script>
	let self;
	export default {
		data() {
			return {
				screenWidth: '',
				screenHeight: '',
				userinfo: {
					appcode: '',
					vip: ''
				}
			}
		},
		onLoad() {
			self = this;
			uni.getSystemInfo({
				success: (res) => {
					self.screenWidth = res.windowWidth; // 屏幕宽度，单位为px
					self.screenHeight = res.windowHeight; // 屏幕高度，单位为px
				},
			});
			self.userinfo = self.$store.state.auth.user;
		},
		onReady() {
			//self.draw();
		},
		methods: {
			getImageInfo(src) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src,
						success: res => {
							resolve(res)
						},
						fail: err => {
							reject(err)
						}
					})
				})
			},
			async draw() {
				const ctx = uni.createCanvasContext('canvas');

				// 绘制图片1
				const image1 = await this.getImageInfo('https://xingdong-app.oss-cn-beijing.aliyuncs.com/share.jpg')
				ctx.drawImage(image1.path, 0, 0, self.screenWidth, image1.height / 2);

				// 绘制图片2
				const image2 = await this.getImageInfo(
					self.$store.state.auth.user.qrcode
				);

				let x = image1.width / 2 - 225;
				let y = image1.height / 2 - 450;
				ctx.drawImage(image2.path, 225, 450, 110, 110);

				ctx.font = '11px Regular'; // 字体大小
				ctx.fillStyle = '#0f0f0f'; // 字体填充颜色

				let reg = /(\d{3})\d{4}(\d{4})/; //正则表达式
				let phone = self.$store.state.auth.user.mobile;
				phone = phone.replace(reg, "$1****$2")

				ctx.fillText(phone, 245, 568);

				setTimeout(function() { // uni-app必须加上延迟，不然显示不出来， 亲测 
					ctx.stroke();
					ctx.draw() //必须加上  uniapp 没这儿玩意儿 显示不出来不比原生  不加可以显示
				}, 300);

			},
			save() {
				uni.canvasToTempFilePath({
					canvasId: 'canvas',
					success: res => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(res) {

							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">

</style>