<!--
 * @Author: ch
 * @Date: 2022-03-22 15:36:46
 * @LastEditors: ch
 * @LastEditTime: 2022-03-24 18:05:59
 * @Description: file content
-->
<template>
	<view class="container">
		<view class="header">
			<image class="arrow" src="@/static/search/arrow.png" @click="$Router.back()"/>
		</view>
		<view class="logo">马士兵严选</view>
		<u--form class="login">
			<u-form-item>
				<input placeholder="请输入手机号" v-model="phone" class="login--input" border="bottom" />
			</u-form-item>
			<u-form-item class="login--code">
				<input placeholder="验证码" type="number" maxlength="6" class="login--input" v-model="code"  border="bottom" />
				<u-code ref="uCode" @change="codeChange" changeText="X秒后重新获取"
					@start="sendStatus = true" @end="sendStatus = false" seconds="10"></u-code>
				<text class="login--send-btn" :class="sendStatus && 'login--send-btn__disabled'" 
					@click="getCode">{{tips}}</text>
			</u-form-item>
		</u--form>
		<u-button class="login--btn" @click="login">登录</u-button>
		<label class="login--agreement">
			<radio class="radio" :checked="checked" @click="checked = !checked" color="#FF875B"/>
			同意<text class="link">《用户协议》</text>和<text class="link">《隐私协议》</text>,首次登陆将自动注册
		</label>
	</view>
</template>
<script>
import { IsPhone } from '@/common/utils';
export default {
	data(){
		return { 
			tips : '',
			sendStatus : false,
			checked: false,
			phone : '',
			code : ''
		}
	},
	methods : {
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			if(!this.$refs.uCode.canGetCode){
				return false
			}
			if(!IsPhone(this.phone)){
				uni.$u.toast('请输入正确手机号');
				return false
			}
			// 模拟向后端请求验证码
			uni.showLoading({
				title: '正在获取验证码'
			})
			setTimeout(() => {
				uni.hideLoading();
				// 这里此提示会被this.start()方法中的提示覆盖
				uni.$u.toast('验证码已发送');
				// 通知验证码组件内部开始倒计时
				this.$refs.uCode.start();
			}, 2000);
		},
		login(){
			
		}
	}
}
</script>
<style lang="scss" scoped>
.header{
	height: 88rpx;
	padding-left: 40rpx;
	display: flex;
	align-items: center;
	.arrow{
		width: 14rpx;
		height: 28rpx;
	}
}
.logo{
	font-size: 46rpx;
	text-align: center;
	margin: 25rpx 0 84rpx 0;
}
.login{
	width: 650rpx;
	margin: 0 auto;
	&--input{
		border-bottom: 2rpx solid #eee;
		width: 650rpx;
		height: 100rpx;
		font-size: 32rpx;
	}
	&--code{
		position: relative;
	}
	&--send-btn{
		position: absolute;
		right: 0;
		color: #FF875B;
		&__disabled{
			opacity: .8;
		}
	}
	&--btn{
		width: 650rpx;
		height: 88rpx;
		border-radius: 45rpx;
		font-size: 32rpx;
		margin: 60rpx 50rpx 40rpx;
		color: #fff;
		background: linear-gradient(270deg, #FF875B 0%, #FF512B 100%);
	}
	&--agreement{
		width: 650rpx;
		padding: 0 50rpx;
		color: #999;
		font-size: 24rpx;
		.radio{
			transform: scale(60%);
		}
		.link{
			color: #333;
		}
	}
}



</style>