<template>
	<view class="container">

		<view class="input_box">
			<text class="input_title">{{$t('pages.user.auth.login.mobile')}}</text>
			<view class="input_content">
				<u--input
					:placeholder="$t('pages.user.auth.login.input_mobile')"
					prefixIcon="phone"
					prefixIconStyle="font-size: 24rpx;color: #909399"
					type="number"
					v-model="form.mobile"
					@change="mobileChange"
				></u--input>
			</view>
		</view>
		
		
		
		<view class="input_box">
			<text class="input_title">{{$t('pages.user.auth.login.password')}}</text>
			<view class="input_content">
				<u--input
					:placeholder="$t('pages.user.auth.login.input_password')"
					prefixIcon="lock"
					prefixIconStyle="font-size: 24rpx;color: #909399"
					border="surround"
					password
					clearable
					v-model="form.password"
					@change="pwdChange"
				></u--input>
			</view>
		</view>
		
		<view class="input_box">
			<text class="input_title">{{$t('pages.user.auth.login.email')}}</text>
			<view class="input_content">
				<u--input
					:placeholder="$t('pages.user.auth.login.input_email')"
					prefixIcon="email"
					prefixIconStyle="font-size: 24rpx;color: #909399"
					v-model="form.email"
					@change="emailChange"
				></u--input>
			</view>
		</view>
		
		<view class="button_box">
			<view class="submit">
						<u-button type="primary" :plain="true" :hairline="true" :text="$t('locale.regist')" size="normal" @click="regist"></u-button>
			</view>
		</view>
		<view class="footer">
			<!-- <text class="footer-text">找回密码</text> -->
			<text class="footer-text" @click="login">{{$t('locale.login')}}</text>
			<!-- <text class="footer-text">投诉建议</text> -->
		</view>
	</view>
</template>
<script>
	export default {
		components: {
			
		},
		data() {
			return {
				form:{
					mobile:'',
					password:'',
					email:'',
				},
				
			};
		},
		onShow() {
			var _this =this;
		
		},
		methods:{
			//跳转到登录
			login(){
						uni.$u.route({
								type:'redirectTo',
								url: 'pages/user/auth/login',
								params: {}
							});
			},
			//手机号
			mobileChange(e)
			{
				var _this = this;
				_this.form['mobile'] = e;
				
			},
			//密码
			pwdChange(e)
			{
				var _this = this;
				_this.form['password'] = e;
			},
			//email
			emailChange(e)
			{
				var _this = this;
				_this.form['email'] = e;
			},
			regist()
			{
				var _this =this;
				var form = _this.form;
				if(!_this.$com.check(form.mobile,'mobile'))
				{
					uni.$u.toast(_this.$t('pages.user.auth.login.mobile_must'));
					return false;
				}
				if(form.password.length < 6)
				{
					uni.$u.toast(_this.$t('pages.user.auth.login.password_must'));
					return false;
				}
				if(!_this.$com.check(form.email,'email'))
				{
					uni.$u.toast(_this.$t('pages.user.auth.login.email_must'));
					return false;
				}
				
				var post = form;
				_this.$api.post('user/reg',post,function(rs){
					console.log(rs);
					uni.showModal({
						title: _this.$t('locale.tips'),
						content: _this.$t('pages.user.auth.regist.regist_success'),
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								_this.login();
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				},function(err){
					console.log(err);
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	/*输入框*/
	.input_box{
		width: 90%;
		margin: 40rpx auto 40rpx auto;
		height: auto;
	}
	.input_title{
		font-size: 30rpx;
		color: #ABABAB;
		height: 50rpx;
		line-height: 50rpx;
		margin: 10rpx auto;
		display: block;
		
	}

	.button_box {
		width: 90%;
		margin: 40rpx auto 20rpx auto;

	}

	.submit {
		width: 100%;
		background-color: #4CAF50;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
	}

	.submit-text {
		color: white;
		padding: 30rpx;
	}

	.submit:active {
		background-color: green;
		opacity: 0.5;
	}

	.footer {
		flex-direction: row;
		justify-content: center;
		text-align: center;
		align-items: center;
		margin-top: 100rpx;
	}

	.footer-text {
		font-size: 28rpx;
		color: #296db5;
		padding: 30rpx;
	}
</style>
