resetPassword.vue

<template>
	<view class="reset-pwd-container">
		<uv-form labelPosition="top" :model="formModel" :rules="rules" ref="formRef" labelWidth="80" :borderBottom="false">
			<uv-form-item :label="t('dialog.oldPW')" prop="passwordOld">
				<uv-input v-model="formModel.passwordOld" :password="isPasswordType.old" :placeholder="t('message.enterOldPassword')" border="none"
					class="input-password">
					<template v-slot:suffix>
						<view @click="togglePassword('old')" class="view-password">
							<uv-icon v-if="!isPasswordType.old" name="eye" size="20"></uv-icon>
							<uv-icon v-else name="eye-off-outline" size="20"></uv-icon>
						</view>
					</template>
				</uv-input>
			</uv-form-item>
			<uv-form-item :label="t('dialog.newPW')" prop="passwordNew">
				<uv-input v-model="formModel.passwordNew" :password="isPasswordType.new" :placeholder="t('app.resetPassword.checkPasswordTips',{min:8,max:30})" border="none"
					class="input-password">
					<template v-slot:suffix>
						<view @click="togglePassword('new')" class="view-password">
							<uv-icon v-if="!isPasswordType.new" name="eye" size="20"></uv-icon>
							<uv-icon v-else name="eye-off-outline" size="20"></uv-icon>
						</view>
					</template>
				</uv-input>
			</uv-form-item>
			<uv-form-item :label="t('dialog.confirmPW')" prop="passwordAgain">
				<uv-input v-model="formModel.passwordAgain" :password="isPasswordType.again" :placeholder="t('message.pleaseConfirmNewPassword')" border="none"
					class="input-password">
					<template v-slot:suffix>
						<view @click="togglePassword('again')" class="view-password">
							<uv-icon v-if="!isPasswordType.again" name="eye" size="20"></uv-icon>
							<uv-icon v-else name="eye-off-outline" size="20"></uv-icon>
						</view>
					</template>
				</uv-input>
			</uv-form-item>
			
			<uv-button type="primary" :text="t('button.confirm')" style="margin-top: 20px;" @click="handleSubmit"></uv-button>
		</uv-form>
	</view>
</template>

<script setup>
  import {
    onLoad
  } from '@dcloudio/uni-app'
	import { ref } from 'vue';
	import { w_md5 }from "@/utils"
	import {
		doResetPasswordApi
	} from '@/api';
  import {
    t
  } from '@/plugins/index.js'
  
  onLoad(()=>{
    uni.setNavigationBarTitle({
      title: t('dialog.changePW')
    })
  })

	// 登录功能
	const formModel = ref({
		passwordOld: '',
		passwordNew: '',
		passwordAgain: '',
		// loginName: '',
		// password: '',
	})
	const rules = {
		passwordOld: {
			type: 'string',
			required: true,
			message: t('rules.password'),
			trigger: ['blur']
		},
		passwordNew: [{
			required: true,
			message: t('message.pleaseEnterNewPassword'),
			trigger: ['blur', 'change'],
		}, {
			pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\da-zA-Z]).{8,30}$/,
			message: t('message.pleaseConfirmNewPassword',{min:8, max:30}),
			trigger: ['blur']
		}],
		passwordAgain: [{
			required: true,
			message: t('rules.checkWord'),
			trigger: ['blur', 'change'],
		}, {
			validator: (rule, value, callback) => {
				console.log('validator', rule, value)
				// 返回true表校验通过，返回false表示不通过
				return formModel.value.passwordNew === value
			},
			message: t('rules.checkDifferent'),
			trigger: ['blur']
		}],
	}

	// 密码框
	const isPasswordType = ref({
		old: true,
		new: true,
		again: true,
	})
	const togglePassword = (type) => {
		isPasswordType.value[type] = !isPasswordType.value[type]
	}

	const formRef = ref(null)
	const handleSubmit = () => {
		formRef.value.validate().then(() => {
			 // {"id":9902,"loginName":"陈岩","realName":"陈岩","status":"1","intro":"2025-03-13","accountId":337,"type":-1,"unid":"e8bd71d7702079e56c1c6d79deb54dd2","account":{"id":337,"name":"VIONVISION","unid":"894ac542-6e97-4688-b1fb-981cf662c274","expireDate":"2099-12-31 00:00:00"}}
			const userInfo = uni.getStorageSync('user')
			console.log('userInfo', userInfo)
			if (userInfo) {
				const userObj = JSON.parse(userInfo) || {}
				if (userObj.loginName) {
					// const oldPassWord = w_md5.hex_md5_32(formModel.value.passwordOld + 'AdunceA');
					// const password = w_md5.hex_md5_32(formModel.value.passwordNew + 'AdunceA');
          // 解决小米漏洞时 后端将密文改成了明文
          const oldPassWord = formModel.value.passwordOld;
          const password = formModel.value.passwordNew;
					
          const params = {
						loginName: userObj.loginName, // 用户名
						oldPassWord,
						password,
					}
					doResetPasswordApi(params).then(res => {
						console.log(res)
						uni.showToast({icon: 'success', title: t('message.changePWSuccess')})
            setTimeout(()=>{
              uni.reLaunch({
                url:'/pages/login/index'
              })
            },500)
					})
				} else {
					uni.showToast({icon: 'error', title: t('app.resetPassword.failedToGetUserInfo')})
				}
			}
		})
	}
</script>

<style scoped>
	.reset-pwd-container {
		padding: 20px 25px 10px 25px;
	}
	.input-password {
		background-color: #F6F7F9;
		height: 48px;
		padding-left: 15px !important;
	}
	.view-password {
		margin-right: 17px;
	}
</style>