<template>
	<view class="u-p-30 min-page u-flex u-flex-col u-row-center u-col-center">
		
		<view class="u-relative w-full">
			<view class="u-absolute u-flex u-row-center wx-box" >
				<image  src="@/static/images/wx.png" class="img" mode=""></image>
			</view>
			<up-button type="" class="" :custom-style="customStyl" @click="bindwx">绑定微信</up-button>
			<up-button type="" @click="navback">取消</up-button>
		</view>

	</view>
</template>

<script setup>
	import {
		onShow,onHide,onUnload,onLoad
	} from '@dcloudio/uni-app'
	import {
		$bindWx
	} from '@/api/login/login.js'
	import {
		bindWx
	} from '@/utils/wx.js'
	import color from '@/commons/color.js'
	import {
		reactive
	} from 'vue';

	const customStyl = reactive({
		backgroundColor: color.main,
		color: '#fff'
	})

	function navback() {
		uni.navigateBack()
	}
	function clear(){
		clearTimeout(timer)
	}
	let timer=null
	async function bindwx() {
		const code =await bindWx()
		const res = await $bindWx({
			code
		})
		console.log(res);
		if (res) {
			uni.showToast({
				title: '绑定微信成功',
				icon: 'none'
			})
			clear()
			timer=setTimeout(()=>{
				uni.navigateBack()
			},1500)
		}else{
			uni.showToast({
				title: '绑定微失败',
				icon: 'none'
			})
		}

	}
	onUnload(() => {
		clear()
	})
	
</script>

<style lang="scss" scoped>
	.wx-box{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		display: flex;
		justify-content: center;
		transform: translateY(-100rpx);
		.img{
			width: 200rpx;
			height: 200rpx;
		}
	}

</style>