zc_saas_h5/pages2/register/forget.vue

<template>
	<view style="height: 100%;">
		<image mode="widthFix" src="/pages2/static/login_bg.jpg" class="full_img"></image>
		<u-navbar title="忘记密码" :border-bottom="false" background="{ background: '#ffffff',opacity:0.4; }" title-color="#ffffff" back-icon-color="#ffffff"></u-navbar>
		<view style="padding: 30rpx;">
			<view class="login_box">
				<u-form :model="form" ref="uForm" >
					<u-form-item prop="tel" ref="tel"><u-input  v-model="form.tel" type="number" maxlength="11" placeholder-style="color:#999999" placeholder="手机号"/></u-form-item>
					<u-form-item prop="code">
						<u-input v-model="form.code" type="number" placeholder-style="color:#999999"  placeholder="验证码"/>
						<u-button slot="right"  size="mini" @click="getCode">{{codeTips}}</u-button>
					</u-form-item>
					<u-form-item prop="pwd"><u-input class="password" placeholder-style="color:#999999" v-model="form.pwd" type="password" placeholder="请输入新密码"/></u-form-item>
					<u-form-item prop="pwdAgain"><u-input class="password" placeholder-style="color:#999999" v-model="form.pwdAgain" type="password" placeholder="再次输入新密码"/></u-form-item>
				</u-form>
			</view>
			
			<button :disabled="isUse" class="loginBtn" :class="{able:canSubmit()}" @click="submit">
				确定
			</button>
			
		</view>
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
export default {
	data() {
		return {
			code: '',
			form:{
				code:'',
				tel:'',
				pwd:'',
				pwdAgain:''
			},
			rules: {
				tel: [
					{ 
						required: true, 
						message: '请输入手机号', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					},
					{
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码格式不正确',
						// 触发器可以同时用blur和change
						trigger: ['change'],
					}
				],
				pwd: [
					{ 
						required: true, 
						message: '请输入密码', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
				pwdAgain: [
					{ 
						required: true, 
						message: '请输入密码', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
				code: [
					{ 
						required: true, 
						message: '请输入验证码', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
			},
			codeTips: '',
			read:'',
			isUse:false
		};
	},
	methods: {
		canSubmit() {
			if(this.form.tel && this.form.code && this.form.pwd && this.form.pwdAgain) {
				return true;
			}
			return false;
		},
		submit(){
			let that = this
			if(!this.form.tel){
				this.$u.toast('请输入手机号码');
				return 
			}
			if(!this.form.code){
				this.$u.toast('请输入验证码');
				return 
			}
			if(!this.form.pwd){
				this.$u.toast('请输入新密码');
				return 
			}
			if(!this.form.pwdAgain){
				this.$u.toast('请输入确定新密码');
				return 
			}
			if(this.form.pwd!=this.form.pwdAgain){
				this.$u.toast('两次密码不一致');
				return 
			}
			that.isUse = true
			let datas = {
				tel:this.form.tel,
				code:this.form.code,
				pwd:this.form.pwd
				}
			that.$api.forgetUser(datas).then(
				res => {
					that.isUse = false
					if (res.data.code == 200) {
						uni.showModal({
							title: '提示',
							content: '修改成功',
							showCancel:false,
							success: function(resst) {
								uni.navigateBack()
							}
						});
					} else {
						that.$u.toast(res.data.msg);
					}
				},
				err => {
					that.isUse = false
					console.log(err);
				}
			);
		},
		codeChange(text) {
			this.codeTips = text;
		},
		// 获取验证码
		getCode() {
			let that = this
			if(that.$refs.uCode.canGetCode) {
				if(that.$refs.tel.validateState == 'success') {
					let datas = {tel:this.form.tel}
					that.$api.forgetSms(datas).then(
						res => {
							if (res.data.code == 200) {
								that.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								that.$refs.uCode.start();
							} else {
								that.$u.toast(res.data.msg);
							}
						},
						err => {
							console.log(err);
						});
				} else {
					this.$refs.tel.onFieldChange()
				}
			}
				
		},
	},
	onLoad(option) {
		let that = this;
		// this.from = option.from; // 看页面没有用到
		uni.login({
			provider: 'weixin',
			success: function(loginRes) {
				that.code = loginRes.code;
			}
		});
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules)
	},
};
</script>

<style scoped lang="scss">
	.wxBtn{
		position: fixed;
		bottom: 10%;
		width: 100%;
		left: 0;
	}
	/deep/ .wxBtn button::after{
	    border: none; 
	}
	.loginBtn{
		width: 526rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #015EEA, #00C0FA);
		box-shadow: 0rpx 10rpx 16rpx 4rpx rgba(1, 99, 235, 0.04);
		opacity: 0.6;
		border-radius: 40rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		margin: 40rpx auto;
		
		&.able {
			opacity: 1;
		}
	}
	
	
	.wxloginBtn{
		background: url("/static/loginBtn.png") no-repeat;
		background-size:100% 100%;
		border:none;
		width: 100rpx;
		height: 100rpx;
	}
	
	/deep/page {
		background-color: #FFFFFF;
		height: 100%;
		width: 100%;
	}
	.login_box{
		width: 100%;
		height: 566rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(1, 99, 235, 0.1);
		border-radius: 24rpx;
		margin-top: 30rpx;
		padding:40rpx 35rpx;
		
		.password {
			/deep/.uicon-eye-fill {
				&::before{
					color:#007AFF;
					content:"\e613";
				}
			}
		}
	}
	/deep/ .u-item-bg{
		border-radius: 32px !important;
	}
	/deep/ .u-subsection{
		border-radius: 32px !important;
	}
.full_img {
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	z-index: -999;
	top: 0;
}

.head {
	height: 96rpx;
	width: 100%;
	line-height: 96rpx;
	margin-top: 40rpx;
	text-align: center;
	display: flex;
	position: relative;
	justify-content: center;
}
.icon {
	position: absolute;
	left: 30rpx;
}
</style>