HTFX-CRM-APP/pages/user/accountSecurity/index.vue

<template>
	<view class="container">
		<view class="title">
			{{ $t('changeLoginPassword.pageTitle') }}
		</view>
		<uni-forms ref="changeLoginPwdForm" :modelValue="changeLoginPwdFormData" :rules="changeLoginPwdFormRules">
			<uni-forms-item name="old_password">
				<text class="uni-subtitle">{{ $t('form.oldPassword.label') }}</text>
				<uni-easyinput class="uni-mt-5" type="password" trim="all" primaryColor="#29BBE4" v-model="changeLoginPwdFormData.old_password"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="new_password">
				<text class="uni-subtitle">{{ $t('form.newPassword.label') }}</text>
				<uni-easyinput
					class="uni-mt-5"
					type="password"
					trim="all"
					primaryColor="#29BBE4"
					v-model="changeLoginPwdFormData.new_password"
					@input="passwordInputChange"
				></uni-easyinput>
				<view v-if="validating" class="validateStatusWrapper">
					<view v-for="(status, index) in validateStatuses" :key="index" class="validateStatus">
						<view class="verificationRes">
							<image :src="status.valid ? '/static/right.png' : '/static/error.png'" :class="status.valid ? 'right' : 'error'" mode="aspectFit"></image>
						</view>
						<view :class="status.valid ? 'rightText' : 'errorText'">{{ status.text }}</view>
					</view>
				</view>
			</uni-forms-item>
			<uni-forms-item name="new_password2">
				<text class="uni-subtitle">{{ $t('form.confirmPassword.label') }}</text>
				<uni-easyinput
					class="uni-mt-5"
					type="password"
					trim="all"
					primaryColor="#29BBE4"
					v-model="changeLoginPwdFormData.new_password2"
					@input="confirmPasswordInputChange"
				></uni-easyinput>
				<view v-if="confirmValidating" class="validateStatusWrapper">
					<view v-for="(status, index) in confirmValidateStatuses" :key="index" class="validateStatus">
						<view class="verificationRes">
							<image :src="status.valid ? '/static/right.png' : '/static/error.png'" :class="status.valid ? 'right' : 'error'" mode="aspectFit"></image>
						</view>
						<view :class="status.valid ? 'rightText' : 'errorText'">{{ status.text }}</view>
					</view>
				</view>
			</uni-forms-item>
		</uni-forms>
		<button class="primaryButton" type="button" :disabled="submitBtnLoading" @click="saveLoginPwd">
			<image v-show="submitBtnLoading" src="/static/loadingCircle.svg" mode="aspectFit" style="width: 16px; height: 16px"></image>
			{{ $t('form.submit') }}
		</button>
	</view>
</template>

<script>
import { changeLoginPwd } from '@/services/user/completeInfo.ts';
import { UserLanguage, patterns } from '@/utils/const';
export default {
	name: '',
	data() {
		return {
			submitBtnLoading: false,
			changeLoginPwdFormData: {},
			changeLoginPwdFormRules: {
				new_password: {
					rules: [
						{
							required: true,
							errorMessage: this.$t('form.password.required')
						},
						{
							validateFunction: (rule, value, data, callback) => {
								// 异步需要返回 Promise 对象
								return new Promise((resolve, reject) => {
									setTimeout(() => {
										if (this.validateStatuses.every((item) => item.valid)) {
											// 通过返回 resolve
											resolve();
										} else {
											// 不通过返回 reject(new Error('错误信息'))
											reject(new Error(this.$t('form.password.invalid')));
										}
									}, 0);
								});
							}
						}
					]
				},
				new_password2: {
					rules: [
						{
							required: true,
							errorMessage: this.$t('form.password.required')
						},
						{
							validateFunction: (rule, value, data, callback) => {
								// 异步需要返回 Promise 对象
								return new Promise((resolve, reject) => {
									setTimeout(() => {
										if (this.confirmValidateStatuses.every((item) => item.valid)) {
											// 通过返回 resolve
											resolve();
										} else {
											// 不通过返回 reject(new Error('错误信息'))
											reject(new Error(this.$t('form.password.invalid')));
										}
									}, 0);
								});
							}
						},
						{
							validateFunction: (rule, value, data, callback) => {
								// 异步需要返回 Promise 对象
								return new Promise((resolve, reject) => {
									setTimeout(() => {
										if (this.changeLoginPwdFormData.new_password2 === this.changeLoginPwdFormData.new_password) {
											// 通过返回 resolve
											resolve();
										} else {
											// 不通过返回 reject(new Error('错误信息'))
											reject(new Error(this.$t('form.confirmPassword.invalid')));
										}
									}, 0);
								});
							}
						}
					]
				}
			},
			validating: false,
			confirmValidating: false,
			validateStatuses: [
				{ valid: false, text: this.$t('form.password.pattern1') },
				{ valid: false, text: this.$t('form.password.pattern2') },
				{ valid: false, text: this.$t('form.password.pattern3') },
				{ valid: false, text: this.$t('form.password.pattern4') }
			],
			confirmValidateStatuses: [
				{ valid: false, text: this.$t('form.password.pattern1') },
				{ valid: false, text: this.$t('form.password.pattern2') },
				{ valid: false, text: this.$t('form.password.pattern3') },
				{ valid: false, text: this.$t('form.password.pattern4') }
			]
		};
	},
	methods: {
		passwordInputChange(e) {
			if (!this.validating) {
				this.validating = true;
			}
			this.validateStatuses.forEach((item, index) => {
				item.valid = patterns[`passwordPattern${index + 1}`].test(e);
			});
		},
		confirmPasswordInputChange(e) {
			if (!this.confirmValidating) {
				this.confirmValidating = true;
			}
			this.confirmValidateStatuses.forEach((item, index) => {
				item.valid = patterns[`passwordPattern${index + 1}`].test(e);
			});
		},
		async saveLoginPwd() {
			this.$refs.changeLoginPwdForm.validate().then(async (fields) => {
				this.submitBtnLoading = true;
				const res = await changeLoginPwd({
					...fields,
					qcc_language: UserLanguage
				});
				this.submitBtnLoading = false;
				if (res && res.code === 0) {
					this.$cusModal.showModal({
						type: 'message',
						status: 'success',
						contentText: this.$t('common.success.action')
					});
					this.changeLoginPwdFormData = {};
					this.validating = false;
					this.confirmValidating = false;
				} else {
					this.$cusModal.showModal({
						type: 'message',
						status: 'warning',
						contentText: res.msg ?? this.$t('common.error.sysError')
					});
				}
			});
		}
	},
	created() {}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>