warst/warst-h5/pages/user/retrievePwd/setNewPwd.vue

<template>
	<!--设置新密码-->
	<view class="retrieve-pwd">
		<u--form
			labelPosition="left"
			:model="formData"
			:rules="rules"
			ref="uForm"
			labelWidth="80"
		>
			<u-form-item borderBottom label="新密码" prop="password">
				<c-input
					v-model="formData.password"
					placeholder="8-16位数字、字母、符号组合"
					maxlength="16"
					border="none"
					show-password
					type="password"
				>
				</c-input>
			</u-form-item>

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

		<view class="footer" style="margin-top: 130rpx">
			<c-button type="primary" @click="handleComplete">
				完成
			</c-button>
		</view>
	</view>
</template>

<script>
import { common } from '@/api/user/login/retrievePwd.js';
import { rsaEncrypt } from '@/utils/jsencrypt';
export default {
	name: 'retrievePwd',
	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 {
			tips: '',
			formData: {
				phone: '',
				uuid: '', // 上个页面校验验证码接口返回的
				password: '',
				passwordTo: '',
			},
			rules: {
				password: [
					{
						type: 'string',
						required: true,
						message: '请输入新密码',
						trigger: ['change'],
					},
					{
						type: 'string',
						validator: pwdValidator,
						trigger: ['change'],
					},
				],
				passwordTo: {
					type: 'string',
					required: true,
					validator: (rule, value) => {
						return value === this.formData.password;
					},
					message: '两次密码不一致',
					trigger: ['change'],
				},
			},
		};
	},
	onLoad(params) {
		this.formData.phone = params.phone;
		this.formData.uuid = params.uuid;
	},
	methods: {
		async handleComplete() {
			if (this.formData.password.includes(' ')) {
				uni.$c.toast({
					title: '密码中不能出现空格',
					duration: 2000,
				});
				this.formData.password = '';
				return;
			}
			await this.$refs.uForm.validate();
			try {
				this.$c.loading();
				const { password, passwordTo, phone, uuid } = this.formData;
				const params = {
					uuid,
					phone: rsaEncrypt(phone), // 加密
					password: rsaEncrypt(password), // 加密
					passwordTo: rsaEncrypt(passwordTo), // 加密
				};
				await common(params);
				uni.hideLoading();
				await this.$c.toast({
					icon: 'success',
					title: '修改成功',
					duration: 1000,
				});
				uni.$u.route({
					type: 'reLaunch',
					url: '/pages/user/login/index',
				});
			} catch (e) {
				uni.hideLoading();
				console.error(e);
			}
		},
		getCode() {
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码',
				});
				setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}, 2000);
			}
		},
		codeChange(text) {
			this.tips = text;
		},
	},
};
</script>

<style scoped lang="scss">
.retrieve-pwd {
	padding: 28rpx;
	background-color: #f8f8f8;
	height: 100%;

	.u-form {
		padding: 8rpx 20rpx;
		background-color: #fff;
		border-radius: 6px;
	}
}
</style>