<!-- 输入密码 -->
<template>
	<view class="password-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="uni.navigateBack()"></image>
		<view class="login-txt">输入密码</view>
		<view class="main">
			<input type="password" placeholder="请输入8~12位字母组合密码" class="main-input" v-model="password">
			<view class="code-txt">
				<input type="password" placeholder="确认密码" class="code-input" v-model="confirmPassword">
			</view>
		</view>
		<view class="agreement" @click="agreementClick">
			<image src="https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/login/select.png" mode="" class="agreement-select" v-if="agreementVisible"></image>
			<image src="https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/login/select-no.png" mode="" class="agreement-select" v-if="!agreementVisible"></image>
			我已同意<text class="agreement-txt">《用户协议》</text>&#X3000;&#X3000;<text class="agreement-txt">《隐私政策》</text>
		</view>
		<view class="submit" :class="{'active':password&&confirmPassword&&agreementVisible}" @click="submit" >注册</view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/login/password"></page-popup>
	</view>
</template>

<script>
	import { register,resetPassword } from '@/API/login.js'
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
	export default{
		data(){
			return{
				statusBarHeight,
				phone:"",
				password:"",
				code:"",
				confirmPassword:"",
				type:"",
				agreementVisible:false,//用户协议
			}
		},
		onLoad(opation) {
			this.phone = opation.phone;
			this.code = opation.code;
			this.type = opation.type
		},
		methods:{
			// 是否同意用户协议
			agreementClick(){
				this.agreementVisible = !this.agreementVisible;
			},
			submit(){
				if(!this.agreementVisible){
					this.$api.msg('请阅读用户协议、隐私政策');
					return;
				}
				if(!this.password || !this.confirmPassword){
					this.$api.msg('请输入密码');
					return;
				}
				if(this.password !== this.confirmPassword){
					this.$api.msg('两次密码不一致');
					return;
				}
				let re =/^(?=.*[a-z])(?=.*\d)[^]{8,12}$/;
				if(!re.test(this.password)){
					this.$api.msg('请输入8~12位字母组合密码');
					return;
				}
				if(this.type === 'forget'){
					resetPassword({phone:this.phone,password:this.password,code:this.code}).then(res => {
						console.log(res)
						if(res.code === 200){
							this.$api.msg('重置密码成功');
							uni.redirectTo({
								url:`/pages/login/login`
							})
						}else{
							this.$api.msg(res.message)
						}
					})
				}else if(this.type === 'register'){
					register({phone:this.phone,password:this.password}).then(res => {
						console.log(res)
						if(res.code === 200){
							this.$api.msg('注册成功');
							uni.redirectTo({
								url:`/pages/login/login`
							})
						}else{
							this.$api.msg(res.message)
						}
					}).catch(err => {
						this.$api.msg(err)
					}).finally(() => {
						uni.hideLoading()
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.password-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;
					
				}
			}
		}
		.agreement{
			padding-left: 40rpx;
			width: 100%;
			display: flex;
			align-items: center;
			margin-top: 32rpx;
			font-size: 28rpx;
			color: #858587;
			.agreement-select{
				width: 24rpx;
				height: 24rpx;
				margin-right: 32rpx;
			}
			.agreement-txt{
				color: #2FDBCB;
			}
		}
		.submit{
			margin: 40rpx 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>