<!-- 绑定手机号 -->
<template>
	<view class="bind-page">
		<view :style="{'height':statusBarHeight}"></view>
		<image src="https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/login/arrows.png" mode="" class="nav-bar-img" @click="goBack"></image>
		<view class="login-txt">{{typeTxt[type]}}</view>
		<view class="main">
			<input type="text" placeholder="请输入手机号" class="main-input" v-model="phone">
			<view class="code-txt">
				<input type="text" placeholder="请输入验证码" class="code-input" v-model="code">
				<view class="code-txt" @click="getCode">{{ countTime === 0 ? '获取验证码' : countTime + 's' }}</view>
			</view>
		</view>
		<view class="submit" :class="{'active':phone && code}" @click="submit">确认</view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/login/bind"></page-popup>
	</view>
</template>

<script>
	import { smsSend,smsCheck } from '@/API/login.js'
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
	export default {
		data() {
			return {
				statusBarHeight,
				type:"",//是注册还是忘记密码  注册：register 忘记密码：forget
				phone:"",//手机号
				code:"",//验证码
				countTime: 0, // 倒计时
				typeTxt:{
					register:"注册",
					forget:"找回密码"
				}
			}
		},
		onLoad(opation) {
			console.log(opation)
			this.type = opation.type;
		},
		methods: {
			goBack(){
				uni.navigateBack()
			},
			// 获取验证码
			getCode(){
				if (this.countTime > 0) {
					return;
				}
				if (!(/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(this.phone))) {
					this.$api.msg('请输入正确的手机号');
					return;
				}
				uni.showLoading({
					title:"获取中"
				})
				smsSend({phone:this.phone}).then(res => {
					if(res.code === 200){
						this.$api.msg('获取成功');
						this.countTime = 60;
						var id = setInterval(() => {
							this.countTime--;
							if (this.countTime === 0) {
								clearInterval(id);
							}
						}, 1000);
					}else{
						this.$api.msg(res.message);
					}
					console.log(res)
				}).catch(err => {
					this.$api.msg(err)
				}).finally(() => {
					uni.hideLoading()
				})
			},
			// 确认
			submit(){
				if (!(/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(this.phone))) {
					this.$api.msg('请输入正确的手机号');
					return;
				}
				if(!this.code){
					this.$api.msg('请输入验证码');
					return;
				}
				smsCheck({phone:this.phone,code:this.code}).then(res => {
					console.log(res)
					if(res.code === 200){
						if(res.data){
							uni.navigateTo({
								url:`/pages/login/password?type=${this.type}&phone=${this.phone}&code=${this.code}`
							})
						}else{
							this.$api.msg('验证码错误');
						}
					}else{
						this.$api.msg(res.message);
					}
				}).catch(err => {
					this.$api.msg(err)
				}).finally(() => {
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style lang="scss">
	.bind-page{
		.nav-bar-img{
			margin-top: 56rpx;
			width: 24rpx;
			height: 40rpx;
			margin-left: 32rpx;
		}
		.login-txt{
			margin-top: 40rpx;
			width: 100%;
			text-align: center;
			font-size: 48rpx;
			color: #333333;
			font-weight: bold;
		}
		.main{
			margin-top: 60rpx;
			padding: 0 40rpx;
			.main-input{
				width: 100%;
				height: 90rpx;
				border: 2rpx solid #2FDBCB;
				border-radius: 46rpx;
				font-size: 28rpx;
				color: #666666;
				padding-left: 40rpx;
			}
			.code-txt{
				margin-top: 40rpx;
				position: relative;
				.code-input{
					width: 100%;
					height: 90rpx;
					border: 2rpx solid #2FDBCB;
					border-radius: 46rpx;
					font-size: 28rpx;
					color: #666666;
					padding-left: 40rpx;
					padding-right: 120rpx;
				}
				.code-txt{
					position: absolute;
					right: 30rpx;
					top: -10rpx;
					color: #3DC9C0;
					font-size: 24rpx;
					
				}
			}
		}
		.submit{
			margin: 60rpx auto;
			width: 380rpx;
			height: 92rpx;
			background: #BAF2F1;
			border-radius: 46rpx;
			font-size: 36rpx;
			font-weight: 800;
			color: #677D83;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.active{
			background-color: #3DC9C0;
			color: #333;
		}
	}
</style>
