<template>
	<view class="container">
		<view class="qrcode-box x-c" v-if="imgurl">
			<!-- <view class="qrcode-title">{{info.name}}</view> -->
			<image class="qrcode" :src="imgurl" mode="aspectFill" show-menu-by-longpress="true"></image>
			<!-- #ifdef MP-WEIXIN -->
			<view class="qrcode-tip">长按识别二维码，添加健康管家</view>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="qrcode-tip">保存二维码，微信扫描添加健康管家</view>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<button class="downbtn x-c" @click="downImg">保存</button>
			<!-- #endif -->
		</view>
		<u-empty mode="data" v-else="imgurl" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无数据"></u-empty>
	</view>
</template>

<script>
	import { getAppContactWay } from "@/api/user.js"
	export default {
		data() {
			return {
				userId: '',
				imgurl: ''
			}
		},
		onLoad() {
			const user= JSON.parse(uni.getStorageSync('userInfo')) ;
			this.userId= user.userId;
			this.getQRCode()
		},
		methods: {
			getQRCode(this.userId) {
				getAppContactWay().then(res=>{
					if(res.code==200){
						this.imgurl = res.data || ''
					} else {
						uni.showToast({
							title: res.msg,
							icon: ''
						})
					}
				})
			},
			downImg() {
				uni.showLoading({
					title: "图片保存中..."
				})
				uni.downloadFile({
					url: this.imgurl,
					fail: function(res) {
					  uni.showModal({
						title: '提示',
						content: '保存失败',
					  })
					  uni.hideLoading();
					},
					success: function(res) {
						var tempFilePath = res.tempFilePath;
						uni.saveImageToPhotosAlbum({
							filePath: tempFilePath,
							success:()=> {
							  uni.showToast({
								title: "保存成功",
								duration: 2000
							  })
							},
							fail:()=>{
							  console.log("图片失败");
							  uni.showToast({
									title: "图片失败",
									duration: 2000,
									icon: "error"
							  })
							  uni.hideLoading();
							},
							complete: function() {
							  uni.hideLoading();
							}
						})
					},
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 40rpx 0;
		padding-top: 10vh;
	}
	.qrcode-box {
		width: 660rpx;
		padding: 32rpx;
		margin: 0 auto;
		box-sizing: border-box;
		overflow: hidden;
		flex-direction: column !important; 
		border-radius: 16rpx;
		background-color: #fff;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #222;
		.qrcode {
			width: 450rpx;
			height: 450rpx;
		}
		.qrcode-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #222;
			margin-bottom: 32rpx;
		}
		.qrcode-tip {
			margin: 32rpx;
			color: #999;
			text-align: center;
		}
	}
	.downbtn {
		width: 160rpx;
		min-height: 68rpx;
		border: 1px solid #FF5C03  !important;
		color: #FF5C03 !important;
		background-color: #fff !important;
		border-radius: 168rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		&::after {
			border: none;
		}
	}
</style>