BiKing/pages/login/modules/set-pswd.vue

<template>
	<view>
		<text class="login-content">密码长度为8-20位字符，必须同时包含大写字母、小写字母和数字</text>

		<form class="login-form">
			<view class="form-item">
				<input class="form-input" v-model="formData.newPassword" placeholder-class="form-input-place"
					placeholder="请输入您的新密码" />
			</view>
			<view class="form-error">
				{{ formError.newPsdErr }}
			</view>
			<view class="form-item">
				<input class="form-input" v-model="formData.confirmPassword" placeholder-class="form-input-place"
					placeholder="请确认密码" />
			</view>

			<view class="form-error">
				{{ formError.confirmPsdErr }}
			</view>

			<view :class="['form-btn' , deblockingSubmitBtn() ? '' : 'active-form-btn' ]"
				@click.stop="SubmitPassWord()">
				确定
			</view>
		</form>
	</view>
</template>

<script>
	import {
		validPassword
	} from "@/utils/validate.js"
	import {
		reverseBack
	} from "@/utils/common.js"
	export default {
		name: 'login',
		data() {
			return {
				formData: {
					newPassword: '',
					confirmPassword: ''
				},
				formError: {
					newPsdErr: '',
					confirmPsdErr: ''
				}
			};
		},

		watch: {

			'formData.newPassword'(newPsd, oldPsd) {
				this.validateField('newPassword')
			},
			'formData.confirmPassword'(newPsd, oldPsd) {
				this.validateField('confirmPassword')
			}
		},
		mounted() {

		},
		methods: {
			validateField(key) {
				let validateStatus = false
				switch (key) {
					case 'newPassword':
						if (!this.formData[key].trim()) {
							this.formError.newPsdErr = '请输入新密码'
							validateStatus = false;
						} else if (!validPassword(this.formData[key])) {
							this.formError.newPsdErr = '密码长度为8-20位字符，必须同时包含大写字母、小写字母和数字';
							validateStatus = false;
						} else {
							this.formError.newPsdErr = '';
							validateStatus = true;
						};
						break;
					case 'confirmPassword':
						if (!this.formData[key].trim()) {
							this.formError.confirmPsdErr = '请再次输入新密码';
							validateStatus = false;
						} else if (this.formData[key] !== this.formData.newPassword) {
							this.formError.confirmPsdErr = '确认密码和新密码输入不一致';
							validateStatus = false;
						} else {
							this.formError.confirmPsdErr = '';
							validateStatus = true;
						}
						break;
					default:
						validateStatus = false

				};
				return validateStatus;
			},
			confirmValidateField() {
				return new Promise((resolve, reject) => {
					let validateStatus = true;
					for (let key in this.formData) {
						if (validateStatus) {
							validateStatus = this.validateField(key)
						} else {
							this.validateField(key)
						}
					}
					if (validateStatus) {
						resolve()
					} else {
						reject()
					};
				})

			},

			deblockingSubmitBtn() {
				for (let key in this.formData) {
					if (this.formData[key] === '') {
						return false
						break;
					}
				};
				return true
			},
			SubmitPassWord() {
			
				this.confirmValidateField().then(res => {
				 
				this.$emit("submitPswd" , this.formData)
					// this.$nextTick(() => {
					// 	this.$refs.loadRef.open()
					// });
					// const obj = {
					// 	account: this.account,
					// 	code: this.code || -1,
					// 	password: this.formData.newPassword,
					// 	repassword: this.formData.newPassword
					// }
					// Api_setPassword(obj).then(res => {
					// 	setTimeout(() => {
					// 		uni.redirectTo({
					// 			url: '/pages/login/index'
					// 		});
					// 	}, 501)
					// }).catch(err => {}).finally(() => {
					// 	this.$refs.loadRef.close()
					// })


				}).catch(err => {})


			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~../common.scss";

	.form-item {
		margin-top: 0 !important;

		&:first-child {
			margin-top: 40rpx !important;
		}
	}

	.form-error {
		width: 100%;
		min-height: 80rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 0;
		color: red;
	}

	.active-form-btn {
		background-color: #ccc;

	}
</style>