<template>
<view class="contain">
	<view class="welcome">
		<p>您好！</p>
		<p>欢迎来到<text>{{$config.title}}</text></p>
	</view>
	<view class="cu-form-group" style="margin-top: 100rpx;">
		<input placeholder="输入手机号" type="number" v-model="form.mobile" />
	</view>
	<view class="cu-form-group">
		<input placeholder="验证码" type="number" v-model="form.msgcode" />
		<button class='cu-btn bg-green shadow' @click="sendcode" :disabled="msgcode.disableButton">{{msgcode.buttonText}}</button>
	</view>
	<view class="btn-box"><view class="cu-btn bg-green lg shadow" @click="onSubmit">确认登录</view></view>

	<view class="social-log">
		<view class="item" @click="oauth"><st-icon-wechat style="width: 50rpx; height: 50rpx;" fill="#005332" /> <text>微信授权</text></view>
	</view>
</view>
</template>

<script>
export default {
	data(){
		return {
			form: {mobile: ''},
			msgcode: {buttonText: '发送验证码', disableButton: false, countdown: 60},
			userInfo: {}
		}
	},
	onLoad(e){
		if(e.code){
			this.wxLogin(e.code)
		}
	},
	methods:{
		oauth(){
			let query = this.$u.queryParams({invite_uid: this.$tool.data.get('invite_uid'), url: encodeURIComponent(window.location.origin+'/#/pages/ucenter/login/index')})
			window.location.href = this.$api.member.wechat.auth + query
		},
		async wxLogin(code){
			this.$loading.show()
			let res = await this.$api.member.wechat.login.post({code: code, type: 'wechat'})
			if(res.code == 1){
				this.userInfo = res.data
				this.$store.commit('setUserLogin', res.data)
				let beforeLogin = this.$tool.data.get('beforLoginUrl')
				let url = '/pages/ucenter/index/index'
				if(beforeLogin){
					url = (beforeLogin.route != '' && beforeLogin.route != 'pages/ucenter/setting/index') ? beforeLogin.route+this.$u.queryParams(beforeLogin.options) : '/pages/ucenter/index/index'
				}
				this.$loading.hide()
				this.$u.route(url)
			}else{
				this.oauth()
			}
		},
		sendcode(){
			if(this.$u.test.mobile(this.form.mobile)){
				this.msgcode.buttonText = '正在发送……'
				this.$api.system.sms.post({mobile: this.form.mobile}).then(res => {
					if(res.code == 1){
						this.msgcode.disableButton = true;
						this.startCountdown();
					}else{
						this.$u.toast(res.msg)
					}
				})
			}else{
				this.$u.toast('请输入正确的手机号!')
			}
		},
		async onSubmit(){},
		startCountdown() {
			const timer = setInterval(() => {
				this.msgcode.countdown--;
				this.msgcode.buttonText = this.msgcode.countdown + "秒后再发送";
				if (this.msgcode.countdown === 0) {
					// 倒计时结束，启用发送验证码的按钮
					this.msgcode.buttonText = "重发";
					this.msgcode.disableButton = false;
					clearInterval(timer);
					this.msgcode.countdown = 60;
				}
			}, 1000);
		}
	}
}
</script>

<style scoped>
page {background-color: #fff; padding: 40rpx; box-sizing: border-box; width: 100%;}
.head {width: 100%; height: 60rpx; line-height: 60rpx; font-size: xx-large;color: #010101;}
.welcome {width: 100%;font-size: xx-large; color: #000122;padding-top: 150rpx;letter-spacing: 3rpx;}
.welcome p {line-height: 80rpx;}
.welcome font {color: #005332;font-weight: 500;}
.cu-form-group {border-bottom: 1px solid #ccc; min-height: 120rpx; display: flex; justify-content: space-between; align-items: center;}
.cu-form-group+.cu-form-group {border-top: 0;}
.cu-form-group input {font-size: medium;}
.btn-box{padding: 20px 0;}
.btn-box .cu-btn {width: 100%;}
.social-log{display: flex; justify-content: center; gap: 20rpx; padding: 40rpx 0;}
.social-log .item{display: flex; justify-content: center; align-items: center; gap: 10rpx; font-size: 26rpx; color: #005332;}
</style>
