MD_worker/pages/index/changePassword.vue

<template>
	<view class="content">
		<up-form :model="form" labelWidth="70" ref="uFormRef">
			<view class="title" style="margin-top: 0;">
				修改密码
			</view>

			<!-- 原密码 -->
			<up-form-item label="原密码" :required="rules.password[0].required" prop="password">
				<up-input v-model="form.password" placeholder="请输入原密码" type="password" clearable />
			</up-form-item>

			<!-- 新密码 -->
			<up-form-item label="新密码" :required="rules.newpassword[0].required" prop="newpassword">
				<up-input v-model="form.newpassword" placeholder="请输入新密码" type="password" clearable
					@change="onNewPwdInput" />
			</up-form-item>

			<!-- 新增：动态密码规则 -->
			<view v-if="form.newpassword" class="pwd-rules-box">
				<view class="pwd-rule" v-for="item in rulesDisplay" :key="item.key">
					<text :style="{ color: item.pass ? '#07c160' : '#fa5151' }">
						{{ item.pass ? '✔' : '✖' }} {{ item.text }}
					</text>
				</view>
			</view>

			<!-- 确认密码 -->
			<up-form-item label="确认密码" :required="rules.confirmPassword[0].required" prop="confirmPassword">
				<up-input v-model="form.confirmPassword" placeholder="请确认新密码" type="password" clearable
					@change="onConfirmInput" />
			</up-form-item>

			<!-- 新增：两次密码不一致提示 -->
			<view v-if="confirmPassword === false" class="errmsg">
				两次密码不一致
			</view>
		</up-form>

		<view style="padding-bottom: 50px;width: 350rpx;margin: 40rpx auto 0;" @click="save">
			<My-button text="确认修改" :loading="loading" />
		</view>
	</view>
</template>



<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const { $Http } = getCurrentInstance().proxy;

/* ---------------------- 表单结构 ---------------------- */
const uFormRef = ref(null);
const form = reactive({
	password: '',
	newpassword: '',
	confirmPassword: ''
});

const confirmPassword = ref(""); // true、false、""

/* ---------------------- 从缓存中读取 site 配置 ---------------------- */
const site = uni.getStorageSync("siteP") || {};

/* 获取密码规则 */
function getPasswordRules() {
	return {
		minLength: site.password_length || 6,
		needLowercase: site.password_needlowercase == 1,
		needUppercase: site.password_needcapital == 1,
		needNumber: site.password_neednum == 1,
		needSpecial: site.password_needspecialchar == 1
	};
}

/* ---------------------- 动态规则展示 ---------------------- */
const rulesDisplay = ref([]);

// 更新规则显示列表
function updateRuleList(pwd) {
	const rules = getPasswordRules();
	const list = [];

	list.push({
		key: "min",
		text: `长度至少 ${rules.minLength} 位`,
		pass: pwd.length >= rules.minLength
	});

	if (rules.needLowercase)
		list.push({ key: "lower", text: "包含小写字母 a-z", pass: /[a-z]/.test(pwd) });

	if (rules.needUppercase)
		list.push({ key: "upper", text: "包含大写字母 A-Z", pass: /[A-Z]/.test(pwd) });

	if (rules.needNumber)
		list.push({ key: "num", text: "包含数字 0-9", pass: /\d/.test(pwd) });

	if (rules.needSpecial)
		list.push({
			key: "special",
			text: "包含特殊符号（如 !@#$% 等）",
			pass: /[^A-Za-z0-9]/.test(pwd)
		});

	rulesDisplay.value = list;
}


/* ---------------------- 输入事件 ---------------------- */
function onNewPwdInput(value) {
	form.newpassword = value; // 保证同步
	updateRuleList(value);
	checkConfirmPassword();
}

function onConfirmInput(value) {
	form.confirmPassword = value; // 保证同步
	checkConfirmPassword();
}

// 判断两次密码是否一致
function checkConfirmPassword() {
	if (!form.newpassword || !form.confirmPassword) {
		confirmPassword.value = "";
		return;
	}
	confirmPassword.value = form.newpassword === form.confirmPassword;
}

/* ---------------------- 表单验证规则 ---------------------- */
const rules = reactive({
	password: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
	newpassword: [
		{ required: true, message: '请输入新密码', trigger: 'blur' },
		{
			validator: (rule, value) => {
				const rules = getPasswordRules();

				if (value.length < rules.minLength)
					return new Error(`密码长度至少 ${rules.minLength} 位`);

				if (rules.needLowercase && !/[a-z]/.test(value))
					return new Error("需包含小写字母");

				if (rules.needUppercase && !/[A-Z]/.test(value))
					return new Error("需包含大写字母");

				if (rules.needNumber && !/\d/.test(value))
					return new Error("需包含数字");

				if (rules.needSpecial && !/[^A-Za-z0-9]/.test(value))
					return new Error("需包含特殊符号");

				return true;
			},
			trigger: 'blur'
		}
	],
	confirmPassword: [
		{ required: true, message: '请确认新密码', trigger: 'input' },
		{
			validator: (rule, value) => {
				if (value !== form.newpassword) {
					return new Error("两次输入的密码不一致");
				}
				return true;
			},
			trigger: 'input'
		}
	]
});
let token = null;

onLoad(async (options) => {
	// 定义一个函数用于初始化规则
	const init = () => {
		// 根据最新 site 初始化规则提示（如果 newpassword 有值会实时计算）
		updateRuleList(form.newpassword);

		// 延迟是为了等待 uForm 渲染完成
		setTimeout(() => {
			uFormRef.value?.setRules(rules);
		}, 50);
	};

	// ------------------ 情况 1：通过 token 异步获取 site ------------------
	if (options.token) {
		$Http.base({
			"classname": "webmanage.site.site",
			"method": "querySite_Parameter",
			"content": {},
			"accesstoken": options.token
		}).then(res => {
			if (res.msg === "成功") {
				uni.setStorageSync("siteP", res.data);
				// 更新本地 site
				Object.assign(site, res.data);
			} else {
				uni.showToast({ title: res.msg, icon: "none" });
			}
			token = options.token;
			init();  // 异步返回后初始化规则
		}).catch(() => {
			init();  // 保底执行
		});

		return; // 结束 onLoad，避免执行后面的本地初始化
	}

	// ------------------ 情况 2：直接读取本地缓存 site ------------------
	const localSite = uni.getStorageSync("siteP");
	if (localSite) Object.assign(site, localSite);

	init(); // 本地立即初始化
});


/* ---------------------- 保存 ---------------------- */
let loading = ref(false);

async function save() {
	if (loading.value) return;

	// 先跑 uView 表单校验
	uFormRef.value.validate().then(valid => {
		if (!valid) return;

		if (confirmPassword.value !== true) {
			return uni.showToast({ title: "两次密码不一致", icon: "none" });
		}

		loading.value = true;
		// 发起实际请求
		$Http.base({
			"classname": "common.usercenter.usercenter",
			"method": "changePassWord",
			"content": {
				"newpassword": hexMD5(form.newpassword),
				"password": hexMD5(form.password),
			},
			"accesstoken": token || uni.getStorageSync("userMsg").token
		}).then(res => {
			loading.value = false;
			if (res.code == 1) {
				uni.showToast({ title: '密码修改成功，请重新登录', icon: 'none', mask: true });
				$Http.claerPassword && $Http.claerPassword(); // 清除密码缓存
				setTimeout(() => uni.reLaunch({ url: '/pages/login/login' }), 500);
				uni.removeStorageSync('accountnoPwd');
				uni.setStorageSync('accountnoPwd', '');
			} else {
				uni.showToast({ title: res.msg || '密码修改失败', icon: 'none' });
			}
		});
	}).catch(err => {
		console.error("表单验证失败", err);
	});
}


/* 以下为MD5加密 */
function hexMD5(str) {
	return binl2hex(coreMD5(str2binl(str)))
}

function safe_add(x, y) {
	var lsw = (x & 0xFFFF) + (y & 0xFFFF)
	var msw = (x >> 16) + (y >> 16) + (lsw >> 16)
	return (msw << 16) | (lsw & 0xFFFF)
}
function rol(num, cnt) {
	return (num << cnt) | (num >>> (32 - cnt))
}
function cmn(q, a, b, x, s, t) {
	return safe_add(rol(safe_add(safe_add(a, q), safe_add(x, t)), s), b)
}
function ff(a, b, c, d, x, s, t) {
	return cmn((b & c) | ((~b) & d), a, b, x, s, t)
}
function gg(a, b, c, d, x, s, t) {
	return cmn((b & d) | (c & (~d)), a, b, x, s, t)
}
function hh(a, b, c, d, x, s, t) {
	return cmn(b ^ c ^ d, a, b, x, s, t)
}
function ii(a, b, c, d, x, s, t) {
	return cmn(c ^ (b | (~d)), a, b, x, s, t)
}
function coreMD5(x) {
	var a = 1732584193
	var b = -271733879
	var c = -1732584194
	var d = 271733878

	for (var i = 0; i < x.length; i += 16) {
		var olda = a
		var oldb = b
		var oldc = c
		var oldd = d

		a = ff(a, b, c, d, x[i + 0], 7, -680876936)
		d = ff(d, a, b, c, x[i + 1], 12, -389564586)
		c = ff(c, d, a, b, x[i + 2], 17, 606105819)
		b = ff(b, c, d, a, x[i + 3], 22, -1044525330)
		a = ff(a, b, c, d, x[i + 4], 7, -176418897)
		d = ff(d, a, b, c, x[i + 5], 12, 1200080426)
		c = ff(c, d, a, b, x[i + 6], 17, -1473231341)
		b = ff(b, c, d, a, x[i + 7], 22, -45705983)
		a = ff(a, b, c, d, x[i + 8], 7, 1770035416)
		d = ff(d, a, b, c, x[i + 9], 12, -1958414417)
		c = ff(c, d, a, b, x[i + 10], 17, -42063)
		b = ff(b, c, d, a, x[i + 11], 22, -1990404162)
		a = ff(a, b, c, d, x[i + 12], 7, 1804603682)
		d = ff(d, a, b, c, x[i + 13], 12, -40341101)
		c = ff(c, d, a, b, x[i + 14], 17, -1502002290)
		b = ff(b, c, d, a, x[i + 15], 22, 1236535329)

		a = gg(a, b, c, d, x[i + 1], 5, -165796510)
		d = gg(d, a, b, c, x[i + 6], 9, -1069501632)
		c = gg(c, d, a, b, x[i + 11], 14, 643717713)
		b = gg(b, c, d, a, x[i + 0], 20, -373897302)
		a = gg(a, b, c, d, x[i + 5], 5, -701558691)
		d = gg(d, a, b, c, x[i + 10], 9, 38016083)
		c = gg(c, d, a, b, x[i + 15], 14, -660478335)
		b = gg(b, c, d, a, x[i + 4], 20, -405537848)
		a = gg(a, b, c, d, x[i + 9], 5, 568446438)
		d = gg(d, a, b, c, x[i + 14], 9, -1019803690)
		c = gg(c, d, a, b, x[i + 3], 14, -187363961)
		b = gg(b, c, d, a, x[i + 8], 20, 1163531501)
		a = gg(a, b, c, d, x[i + 13], 5, -1444681467)
		d = gg(d, a, b, c, x[i + 2], 9, -51403784)
		c = gg(c, d, a, b, x[i + 7], 14, 1735328473)
		b = gg(b, c, d, a, x[i + 12], 20, -1926607734)

		a = hh(a, b, c, d, x[i + 5], 4, -378558)
		d = hh(d, a, b, c, x[i + 8], 11, -2022574463)
		c = hh(c, d, a, b, x[i + 11], 16, 1839030562)
		b = hh(b, c, d, a, x[i + 14], 23, -35309556)
		a = hh(a, b, c, d, x[i + 1], 4, -1530992060)
		d = hh(d, a, b, c, x[i + 4], 11, 1272893353)
		c = hh(c, d, a, b, x[i + 7], 16, -155497632)
		b = hh(b, c, d, a, x[i + 10], 23, -1094730640)
		a = hh(a, b, c, d, x[i + 13], 4, 681279174)
		d = hh(d, a, b, c, x[i + 0], 11, -358537222)
		c = hh(c, d, a, b, x[i + 3], 16, -722521979)
		b = hh(b, c, d, a, x[i + 6], 23, 76029189)
		a = hh(a, b, c, d, x[i + 9], 4, -640364487)
		d = hh(d, a, b, c, x[i + 12], 11, -421815835)
		c = hh(c, d, a, b, x[i + 15], 16, 530742520)
		b = hh(b, c, d, a, x[i + 2], 23, -995338651)

		a = ii(a, b, c, d, x[i + 0], 6, -198630844)
		d = ii(d, a, b, c, x[i + 7], 10, 1126891415)
		c = ii(c, d, a, b, x[i + 14], 15, -1416354905)
		b = ii(b, c, d, a, x[i + 5], 21, -57434055)
		a = ii(a, b, c, d, x[i + 12], 6, 1700485571)
		d = ii(d, a, b, c, x[i + 3], 10, -1894986606)
		c = ii(c, d, a, b, x[i + 10], 15, -1051523)
		b = ii(b, c, d, a, x[i + 1], 21, -2054922799)
		a = ii(a, b, c, d, x[i + 8], 6, 1873313359)
		d = ii(d, a, b, c, x[i + 15], 10, -30611744)
		c = ii(c, d, a, b, x[i + 6], 15, -1560198380)
		b = ii(b, c, d, a, x[i + 13], 21, 1309151649)
		a = ii(a, b, c, d, x[i + 4], 6, -145523070)
		d = ii(d, a, b, c, x[i + 11], 10, -1120210379)
		c = ii(c, d, a, b, x[i + 2], 15, 718787259)
		b = ii(b, c, d, a, x[i + 9], 21, -343485551)

		a = safe_add(a, olda)
		b = safe_add(b, oldb)
		c = safe_add(c, oldc)
		d = safe_add(d, oldd)
	}
	return [a, b, c, d]
}
function binl2hex(binarray) {
	var hex_tab = "0123456789abcdef"
	var str = ""
	for (var i = 0; i < binarray.length * 4; i++) {
		str += hex_tab.charAt((binarray[i >> 2] >> ((i % 4) * 8 + 4)) & 0xF) +
			hex_tab.charAt((binarray[i >> 2] >> ((i % 4) * 8)) & 0xF)
	}
	return str
}
function str2binl(str) {
	var nblk = ((str.length + 8) >> 6) + 1 // number of 16-word blocks  
	var blks = new Array(nblk * 16)
	for (var i = 0; i < nblk * 16; i++) blks[i] = 0
	for (var i = 0; i < str.length; i++)
		blks[i >> 2] |= (str.charCodeAt(i) & 0xFF) << ((i % 4) * 8)
	blks[i >> 2] |= 0x80 << ((i % 4) * 8)
	blks[nblk * 16 - 2] = str.length * 8
	return blks
}
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;
	padding: 20px;
	min-height: 100vh;
	background: #fff;
	box-sizing: border-box;

	.title {
		font-size: 34rpx;
		color: #4773EE;
		margin: 20rpx 0;
		font-weight: bold;
	}
}

/* 新增：动态密码规则样式 */
.pwd-rules-box {
	margin: 10rpx 0 20rpx;
	font-size: 26rpx;
	line-height: 40rpx;
	box-sizing: border-box;
}

.pwd-rule {
	margin: 6rpx 0;
}

.errmsg {
	color: #fa5151;
	margin: 10rpx 0 20rpx;
}
</style>