ygoa_miniapp/pages/mine/setting/pwdEdit/pwdEdit.vue

<template>
	<view class="container">
		<!-- 旧密码输入框 -->
		<view class="uni-input-wrapper">
			<input class="uni-input" placeholder="请输入旧密码" :password="showPassword1" v-model="oldPassword" />
			<text class="uni-icon" :class="[!showPassword1 ? 'uni-eye-active' : '']"
				@click="changePassword1">&#xe568;</text>
		</view>

		<!-- 新密码输入框 -->
		<view class="uni-input-wrapper">
			<input class="uni-input" placeholder="请输入新密码" :password="showPassword2" v-model="newPassword" />
			<text class="uni-icon" :class="[!showPassword2 ? 'uni-eye-active' : '']"
				@click="changePassword2">&#xe568;</text>
		</view>

		<!-- 确认新密码输入框 -->
		<view class="uni-input-wrapper">
			<input class="uni-input" placeholder="请确认新密码" :password="showPassword3" v-model="confirmPassword" />
			<text class="uni-icon" :class="[!showPassword3 ? 'uni-eye-active' : '']"
				@click="changePassword3">&#xe568;</text>
		</view>

		<!-- 提交按钮 -->
		<button @click="submit" class="submitBtn">提交</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import $modal from '@/plugins/modal.js'
	import {
		ChangePWD
	} from '@/api/mine';
	import {
		useUserStore
	} from '@/store/user';
	import $tab from '@/plugins/tab.js'
	const userStore = useUserStore();
	const oldPassword = ref(''); // 旧密码
	const newPassword = ref(''); // 新密码
	const confirmPassword = ref(''); // 确认新密码
	const showPassword1 = ref(true); // 旧密码可见性
	const showPassword2 = ref(true); // 新密码可见性
	const showPassword3 = ref(true); // 确认密码可见性

	// 提交逻辑
	function submit() {
		// 检查新密码和确认密码是否一致
		if (newPassword.value !== confirmPassword.value) {
			$modal.showToast('新密码和确认密码不一致')
			return; // 终止提交
		}

		// 检查新密码强度
		if (!validatePassword(newPassword.value)) {
			$modal.showToast('新密码必须包含至少6个字符、包含字母和数字')
			return; // 终止提交
		}

		// 通过校验后，提示提交成功
		const params = {
			staffId: userStore.user.useId,
			oldpassword: oldPassword.value,
			newpassword: newPassword.value,
		}
		ChangePWD(params).then(res => {
			$modal.showToast(res.returnMsg);
			if ("1" == res.returnCode) { //修改成功
				userStore.LogOut().then(() => {
					$tab.reLaunch('/pages/login')
				})
			}
		})
	}

	// 校验密码强度
	function validatePassword(password) {
		// 密码至少有6个字符，包含字母和数字
		const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/;
		return passwordRegex.test(password);
	}

	// 切换旧密码可见性
	function changePassword1() {
		showPassword1.value = !showPassword1.value;
	}

	// 切换新密码可见性
	function changePassword2() {
		showPassword2.value = !showPassword2.value;
	}

	// 切换确认密码可见性
	function changePassword3() {
		showPassword3.value = !showPassword3.value;
	}
</script>

<style>
	ontainer {
		padding: 40rpx;
	}

	.input-group {
		margin-bottom: 30rpx;
	}

	button {
		background-color: #007aff;
		color: white;
		padding: 20rpx 40rpx;
		border: none;
		border-radius: 10rpx;
		cursor: pointer;
	}

	.uni-input-wrapper {
		display: flex;
		align-items: center;
		padding: 20rpx;
		margin: 20rpx;

	}


	.uni-icon {
		margin-left: 20rpx;

	}

	.uni-eye-active {
		color: #007aff;
	}

	.submitBtn {
		width: 90%;
		margin-top: 30rpx;
	}
</style>