<!-- 找回密码 -->
<template>
	<view class="resetpassword">
		<view class="goback" @tap="navBack"
			><image src="../../static/images/backicon.png" class="backicon"></image
		></view>
		<view class="title">找回密码</view>
		<view class="input-item cellphone">
			<input type="text" v-model="phone" placeholder="请输入手机号" />
		</view>
		<view class="input-item imgcode">
			<input type="text" v-model="codeImgInp" class="inputcode" placeholder="请输入图形验证码" />
			<image class="gifimg" :src="codeImage" @tap="getimgcode"></image>
		</view>
		<view class="input-item sellcode">
			<input type="text" v-model="codeInp" class="inputcode" placeholder="请输入短信验证码" />
			 <button @click="getCode" :disabled="disabled" class="getcode">
                {{countdown}} <text v-show="timestatus">秒重获</text>
            </button>
		</view>
		<view class="btn-warp">
			<view class="btn" @tap="next">确认</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'resetpassword',
	components: {},
	data() {
		//这里存放数据
		return {
			codeImage: '',
			phone:'',
			codeImgInp:'',
			codeInp:'',
			countdown:'获取验证码',
			disabled:false,
			timestatus:false,
			clear:'',
			uuid:''
		};
	},
	//监控data中的数据变化
	watch: {},
	onLoad() {
		this.getimgcode();
	},
	//方法集合
	methods: {
		// 返回上一页
		navBack() {
			// this.$mRouter.back();
			this.$mRouter.push({route: '/pages/public/login'})
		},
		// 获取图形验证码
		async getimgcode() {
			// 获取验证码
			await this.$http.get('/WxApplet/findPwd/captchaImage', {}).then(async res => {
				console.log(res);
				if(res.code === 200){
					this.codeImage = 'data:image/gif;base64,' + res.data.img;
					this.uuid = res.data.uuid
				}else{
					this.$mHelper.toast(res.msg);
				}
				
			});
		},
		// 获取短信验证码
		async getsellcode() {
			if(this.phone){
				if(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone)){
					await this.$http.get('/WxApplet/findPwd/msgCode', {'phone':this.phone}).then(async res => {
						if(res.code === 200){
							this.$mHelper.toast('发送成功！');
						}else{
							this.$mHelper.toast(resata.msg);
						}						
					});
				}else{
					this.$mHelper.toast('请输入正确的手机号');
				}
			}else{
				this.$mHelper.toast('请输入手机号');
			}
			
		},

		// 验证规则图片验证码和短信验证码成功后可以点击确认进入下一步

		// 确认进入下一步
		async next() {
			if(this.phone){
				if(this.codeImgInp){
					if(this.codeInp){
						await this.$http.post('/WxApplet/findPwd/finPwdCheck', {
							phone:this.phone,
							captchaImage:this.codeImgInp,
							msgCode:this.codeInp,
							uuid:this.uuid
						}).then(async res => {
							console.log(res);	
							if(res.code == 200){
								uni.setStorageSync('uuid',res.data)
								this.$mRouter.push({ route: '/pages/public/confirmpassword' });
							}else{
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
							}							
						});
					}else{
						uni.showToast({
							title: '请输入手机验证码',
							icon: 'none'
						});
					}
				}else{
					uni.showToast({
						title: '请输入图形验证码',
						icon: 'none'
					});
				}
			}else{
				uni.showToast({
					title: '请输入手机号码',
					icon: 'none'
				});
			}
						
		},
		 // 获取验证码
		getCode(){
			var that = this;
			if(that.phone==''){
				uni.showToast({
					title: '请输入手机号码',
					icon: 'none'
				});
			}else if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))){
				uni.showToast({
					title: '手机号码错误',
					icon: 'none'
				});
			}else{
				that.disabled = true;//禁用点击
				that.$http.get('/WxApplet/findPwd/msgCode', {'phone':this.phone}).then(res => {
					// console.log(res)
					if(res.code === 200){
						that.countdown = 60;
						that.timestatus = true;
						that.clear = setInterval(function(){
							if(!that.countdown){                    
								that.disabled = false;
								that.timestatus = false;
								that.countdown = '获取验证码';
								clearInterval(that.clear);
							}else{
								--that.countdown;
							}
						},1000);
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
					
					console.log(that.countdown)
				})				
			}                
		},
		// 倒计时
		countDown(){
			var that = this;
			if(!that.countdown){                    
				that.disabled = false;
				that.timestatus = false;
				that.countdown = '获取验证码';
				clearInterval(that.clear);
			}else{
				--that.countdown;
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.resetpassword {
	padding: 0 50upx;
	.goback {
		padding-top: 60upx;
		.backicon {
			width: 24upx;
			height: 43upx;
		}
	}
	.title {
		font-size: 48upx;
		color: $titleColor;
		background: url('../../static/images/passworddown.png') no-repeat left 82%;
		background-size: 192upx 14upx;
		margin-top: 25upx;
	}
	.input-item {
		height: 95upx;
		border-bottom: 1px solid #e7e7e7;
		margin-top: 50upx;
		position: relative;
		input {
			width: 100%;
			height: 100%;
			font-size: 32upx;
		}
		.inputcode {
			width: 65%;
		}
		.gifimg {
			position: absolute;
			right: 0;
			top: -17upx;
			width: 200upx;
			height: 80upx;
		}
		.getcode {
			position: absolute;
			right: 0;
			top: 0;
			width: 180upx;
			height: 85upx;
			color: #999999;
			text-align: center;
			line-height: 85upx;
			outline: none;
			border: none;
			font-size: 24upx;
			background: transparent;
		}
	}
	.cellphone {
		margin-top: 100upx;
	}
	.btn-warp {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 170upx;
		.btn {
			width: 586upx;
			height: 98upx;
			border-radius: 35upx;
			background-color: $barColor;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36upx;
			font-weight: 700;
			color: $titleColor;
			letter-spacing: 5upx;
		}
	}
}
</style>
