warst/warst-h5/pages/my/updatePwd.vue

<template>
	<!-- 修改密码 -->
	<view class="container">
		<u--form
			labelPosition="left"
			labelWidth="70"
			:model="fmData"
			:rules="rules"
			ref="uForm"
		>
			<u-form-item label="旧密码" prop="originalPwd" borderBottom>
				<c-input
					placeholder="请输入旧密码"
					v-model="fmData.originalPwd"
					border="none"
					type="password"
					show-password
				></c-input>
			</u-form-item>

			<u-form-item label="新密码" prop="password" borderBottom>
				<c-input
					placeholder="8-16位数字、字母、符号组合"
					maxlength="16"
					v-model="fmData.password"
					border="none"
					type="password"
					show-password
				></c-input>
			</u-form-item>

			<u-form-item label="确认密码" prop="rePassword" borderBottom>
				<c-input
					placeholder="请输入确认密码"
					v-model="fmData.rePassword"
					border="none"
					type="password"
					show-password
				></c-input>
			</u-form-item>
		</u--form>

		<c-button type="primary" @click="handleComplete">完成</c-button>
	</view>
</template>

<script>
import { editAdminPwd } from '@/api/user/my.js';
import { rsaEncrypt } from '@/utils/jsencrypt';
export default {
	name: 'updatePwd',
	data() {
		const pwdValidator = (rule, value, callback) => {
			const val = value || '';
			if (val.length < 8 || val.length > 16) {
				callback('长度在 8 到 16 个字符');
				return;
			}
			const letterSmall = /(?=.*?[a-z])/.test(val); // 包含小写字母
			const number = /\d/.test(val); // 包含数字
			const letterBig = /(?=.*?[A-Z])/.test(val); // 包含大写字母。
			const specialWord = /(?=.*[~!@#$%^&*().,\\`|/[\]+-])/.test(val); // 包含特殊字符

			/*小写+数字+大写*/
			const arr1 = [
				letterSmall, // 包含小写字母
				number, // 包含数字
				letterBig, // 包含大写字母
			];
			if (arr1.every((item) => item)) {
				callback();
				return;
			}

			/*小写+数字+特殊字符*/
			const arr2 = [
				letterSmall, // 包含小写字母
				number, // 包含数字
				specialWord, // 包含特殊字符
			];
			if (arr2.every((item) => item)) {
				callback();
				return;
			}

			/*大写+数字+特殊字符*/
			const arr3 = [
				letterBig, // 包含大写字母
				number, // 包含数字
				specialWord, // 包含特殊字符
			];
			if (arr3.every((item) => item)) {
				callback();
				return;
			}

			/*大写+特殊字符+小写*/
			const arr4 = [
				letterBig, // 包含大写字母
				specialWord, // 包含特殊字符
				letterSmall, // 包含小写字母
			];
			if (arr4.every((item) => item)) {
				callback();
				return;
			}

			// 不通过
			callback('至少要有数字、大小写字母、符号中的三种');
		};

		return {
			rules: {
				originalPwd: {
					type: 'string',
					required: true,
					message: '请输入旧密码',
					trigger: ['change'],
				},
				password: [
					{
						type: 'string',
						required: true,
						message: '请输入新密码',
						trigger: ['change'],
					},
					{
						type: 'string',
						validator: pwdValidator,
						trigger: ['change'],
					},
				],
				rePassword: {
					type: 'string',
					required: true,
					validator: (rule, value) => {
						return value === this.fmData.password;
					},
					message: '两次密码不一致',
					trigger: ['change'],
				},
			},
			fmData: {
				originalPwd: '',
				password: '',
				rePassword: '',
			},
		};
	},
	methods: {
		async handleComplete() {
			await this.$refs.uForm.validate();
			try {
				this.$c.loading();
				const { originalPwd, password, rePassword } = this.fmData;
				const params = {
					originalPwd: rsaEncrypt(originalPwd),
					password: rsaEncrypt(password),
					rePassword: rsaEncrypt(rePassword),
				};
				await editAdminPwd(params);
				uni.hideLoading();
				await this.$c.toast({
					icon: 'success',
					title: '修改成功',
				});
				uni.switchTab({
					url: '/pages/my/index',
				});
			} catch (e) {
				uni.hideLoading();
				console.error(e);
			}
		},
	},
};
</script>

<style scoped lang="scss">
.container {
	padding: $pg-pd;

	.u-form {
		background-color: #fff;
		margin-bottom: 100rpx;
		padding: 0px 30rpx;
		.u-form-item {
		}
	}
}
</style>