<template>
	 <su-popup
		:show="modal.qrcode"
		type="center"
		backgroundColor="none"
		round="0"
		:showClose="false"
		:isMaskClick="true"
		@close="closeModal"
	  >
		<view class="content">
			<image class="img" :src="tradeConfig.qrcode" show-menu-by-longpress="true"></image>
			<view class="tip">长按二维码 关注公众号</view>
			<view class="desc">用于接收消息提醒</view>
			<view class="close-btn" @click="getQrcode">点击验证</view>
		</view>
	</su-popup>
</template>

<script>
import sheep from '@/sheep';
import $store from '@/sheep/store';
import UserApi from '@/sheep/api/member/user';
export default {  
	components: { 
		
	},  
	data() {
		return {
			show: false,
		};
	},
	computed: {
		modal() {
			return sheep.$store('modal');
		},
		tradeConfig() {
			return sheep.$store('user').tradeConfig;
		},
	},
	methods: {
		open() {
			this.show = true;
		},
		closeModal() {
			$store('modal').$patch((state) => {
				state.qrcode = false;
			});
		},
		getQrcode() {
			UserApi.getQrcode().then((res) => {
				if (res.code === 0) {
					if(res.data){
						sheep.$helper.toast('验证通过');
						this.closeModal();
					}else{
						sheep.$helper.toast('未关注公众号');
					}
				}
			});
		},
	}
};
</script>

<style lang="scss" scoped>
	.show {
		background-color: rgba(0, 0, 0, 0.7);
		position: fixed;
		z-index: 999999;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.hide {
		display: none;
	}
	
	.content {
		padding: 40rpx;
		background-color: #fff;
		border-radius: 10rpx;
		
		.img {
			width: 500rpx;
			height: 500rpx;
		}
		
		.tip {
			display: flex;
			justify-content: center;
			padding-top: 40rpx;
			padding-bottom: 20rpx;
			font-size: 28rpx;
			color: #666666;
		}
		
		.desc{
			display: flex;
			justify-content: center;
			font-size: 28rpx;
			font-weight: bold;
		}
		
		.close-btn {
			display: flex;
			justify-content: center;
			background-color: var(--ui-BG-Main);
			border-radius: 40px;
			margin-top: 40rpx;
			padding: 20rpx;
			font-size: 24rpx;
			color: #fff;
		}
	}
</style>