BiKing/pages/content/change-password.vue

<template>
	<view>
		<headContent>
			<template #left>
				<reverse-back />
			</template>
			<template #content>
				<view class="haed-title">
					修改登录密码
				</view>
			</template>
		</headContent>

		<view class="change-hint">
			<text class="iconfont">&#xe8ec;</text>
			<text>修改登录密码需24小时后才能操作体现</text>
		</view>

		<view class="form-box">
			<form class="form-content">
				<view class="form-item ">
					<view class="form-item-lable">原密码</view>
					<input class="form-item-input" v-model="formData.password" :maxlength="maxlength"
						placeholder-class="form-item-place" :type="showPwd ? 'text' : 'password'" placeholder="请输入原密码">
					<!-- <input class="form-item-input" v-model="formData.password" :maxlength="maxlength"
						placeholder-class="form-item-place" :type="showConfirmPsd ? 'text' : 'password'" placeholder="请输入原密码"> -->
					<view class="form-item-icon" @click.stop="showPwd = !showPwd">
						<text v-show="showPwd" class="iconfont">&#xe663;</text>
						<text v-show="!showPwd" class="iconfont">&#xe664;</text>
					</view>
				</view>
				<view class="err-hint">{{ formError.psdErr }}</view>
				<view class="form-item ">
					<view class="form-item-lable">新密码</view>
					<input class="form-item-input" v-model="formData.newPassword" :maxlength="maxlength"
						placeholder-class="form-item-place" :type="showNewPsd ? 'text' : 'password'" placeholder="请输入新密码">
					<view class="form-item-icon" @click.stop="showNewPsd = !showNewPsd">
						<text v-show="showNewPsd" class="iconfont">&#xe663;</text>
						<text v-show="!showNewPsd" class="iconfont">&#xe664;</text>
					</view>
				</view>
				<view class="err-hint">{{ formError.newPsdErr }}</view>
				<view class="form-item ">
					<view class="form-item-lable">确认密码</view>
					<input class="form-item-input" v-model="formData.confirmPassword" :maxlength="maxlength"
						placeholder-class="form-item-place" :type="showConfirmPsd ? 'text' : 'password'" placeholder="请再次输入新密码">
					<view class="form-item-icon" @click.stop="showConfirmPsd = !showConfirmPsd">
						<text v-show="showConfirmPsd" class="iconfont">&#xe663;</text>
						<text v-show="!showConfirmPsd" class="iconfont">&#xe664;</text>
					</view>
				</view>
				<view class="err-hint">{{ formError.confirmPsdErr }}</view>
			</form>

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

<script>
	import {
		validPassword
	} from "@/utils/validate.js"
	export default {
		name: 'change-password',
		data() {
			return {
				maxlength: 20,
				showPwd: false,
				showNewPsd:false,
				showConfirmPsd:false,
				formData: {
					password: '',
					newPassword: '',
					confirmPassword: ''
				},
				formError: {
					psdErr: '',
					newPsdErr: '',
					confirmPsdErr: ''
				}
			};
		},
		watch: {
			'formData.password'(newPsd, oldPsd) {
				this.validateField('password')
			},
			'formData.newPassword'(newPsd, oldPsd) {
				this.validateField('newPassword')
			},
			'formData.confirmPassword'(newPsd, oldPsd) {
				this.validateField('confirmPassword')
			}
		},
		methods: {
			validateField(key) {
				let validateStatus = false
				switch (key) {
					case 'password':
						if (this.formData[key].trim()) {
							this.formError.psdErr = '';
							validateStatus = true;
						} else {
							this.formError.psdErr = '请输入原密码';
							validateStatus = false;
						};
						break;
					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) {
						console.log('SubmitPassWord', key)
						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 => {
					uni.showLoading({
						title: '修改中',
						mask: true
					})


					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				})


			}



		}
	}
</script>

<style lang="scss" scoped>
	.change-hint {
		font-size: 26rpx;
		padding: 0 $pages-padding;
		display: flex;
		align-items: center;
		color: $Theme-Color;
		border-top: 1rpx solid $border-color;
		height: 80rpx;

		.iconfont {
			margin-right: 20rpx;
		}
	}

	.form-box {
		width: 100%;
		padding: 0 $pages-padding;

		.form-content {
			width: 100%;

			.form-item {
				width: 100%;
				height: 80rpx;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				border-bottom: 1rpx solid $border-color;

				.form-item-lable {
					width: 180rpx;
				}

				.form-item-input {
					font-size: 28rpx;
					flex: 1;
					height: 100%;
					border: none;
				}

				.form-item-place {
					font-size: 28rpx;
					color: #ccc;
				}

				.form-item-icon {
					width: 50rpx;
					height: 100%;
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.iconfont {
						font-size: 26rpx;
					}
				}
			}

			.err-hint {
				width: 100%;
				min-height: 50rpx;
				font-size: 26rpx;
				color: red;
				line-height: 1.2;
				padding-top: 10rpx;
			}
		}

		.form-btn {
			width: 100%;
			background-color: #ccc;
			height: 80rpx;
			margin-top: 60rpx;
			border-radius: 10rpx;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
			letter-spacing: 1px;
			font-size: 28rpx;
		}

		.active-form-btn {
			background-color: $Theme-Color ;
		}
	}
</style>