179 lines
4.2 KiB
Vue
179 lines
4.2 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="padding bg-white margin-top">
|
||
<!-- 旧密码 -->
|
||
<view class="form-item solid-bottom">
|
||
<view class="form-label">旧密码</view>
|
||
<view class="form-input-wrap">
|
||
<input
|
||
class="form-input"
|
||
v-model="formData.oldPassword"
|
||
:type="showOldPwd ? 'text' : 'password'"
|
||
placeholder="请输入旧密码"
|
||
/>
|
||
<view class="pwd-toggle" @click="showOldPwd = !showOldPwd">
|
||
<text :class="showOldPwd ? 'cuIcon-attention' : 'cuIcon-attentionforbid'"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 新密码 -->
|
||
<view class="form-item solid-bottom">
|
||
<view class="form-label">新密码</view>
|
||
<view class="form-input-wrap">
|
||
<input
|
||
class="form-input"
|
||
v-model="formData.newPassword"
|
||
:type="showNewPwd ? 'text' : 'password'"
|
||
placeholder="请输入新密码"
|
||
/>
|
||
<view class="pwd-toggle" @click="showNewPwd = !showNewPwd">
|
||
<text :class="showNewPwd ? 'cuIcon-attention' : 'cuIcon-attentionforbid'"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 确认密码 -->
|
||
<view class="form-item">
|
||
<view class="form-label">确认密码</view>
|
||
<view class="form-input-wrap">
|
||
<input
|
||
class="form-input"
|
||
v-model="formData.confirmPassword"
|
||
:type="showConfirmPwd ? 'text' : 'password'"
|
||
placeholder="请再次输入新密码"
|
||
/>
|
||
<view class="pwd-toggle" @click="showConfirmPwd = !showConfirmPwd">
|
||
<text :class="showConfirmPwd ? 'cuIcon-attention' : 'cuIcon-attentionforbid'"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提示信息 -->
|
||
<view class="tips">
|
||
<text class="text-gray text-sm">密码长度至少6位，建议包含字母和数字</text>
|
||
</view>
|
||
|
||
<!-- 保存按钮 -->
|
||
<view class="padding">
|
||
<button class="bg-blue round" @click="handleSave" :loading="saving">保存</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive } from 'vue';
|
||
import { updatePassword } from '@/request/three_one_api/info.js';
|
||
|
||
const saving = ref(false);
|
||
const showOldPwd = ref(false);
|
||
const showNewPwd = ref(false);
|
||
const showConfirmPwd = ref(false);
|
||
|
||
const formData = reactive({
|
||
oldPassword: '',
|
||
newPassword: '',
|
||
confirmPassword: ''
|
||
});
|
||
|
||
// 保存
|
||
const handleSave = async () => {
|
||
// 表单验证
|
||
if (!formData.oldPassword) {
|
||
uni.showToast({ title: '请输入旧密码', icon: 'none' });
|
||
return;
|
||
}
|
||
if (!formData.newPassword) {
|
||
uni.showToast({ title: '请输入新密码', icon: 'none' });
|
||
return;
|
||
}
|
||
if (formData.newPassword.length < 6) {
|
||
uni.showToast({ title: '新密码长度至少6位', icon: 'none' });
|
||
return;
|
||
}
|
||
if (!formData.confirmPassword) {
|
||
uni.showToast({ title: '请确认新密码', icon: 'none' });
|
||
return;
|
||
}
|
||
if (formData.newPassword !== formData.confirmPassword) {
|
||
uni.showToast({ title: '两次输入的密码不一致', icon: 'none' });
|
||
return;
|
||
}
|
||
if (formData.oldPassword === formData.newPassword) {
|
||
uni.showToast({ title: '新密码不能与旧密码相同', icon: 'none' });
|
||
return;
|
||
}
|
||
|
||
saving.value = true;
|
||
try {
|
||
const params = {
|
||
oldPassword: formData.oldPassword,
|
||
newPassword: formData.newPassword,
|
||
confirmPassword: formData.confirmPassword
|
||
};
|
||
|
||
const res = await updatePassword(params);
|
||
if (res.code === 0) {
|
||
uni.showToast({ title: '密码修改成功', icon: 'success' });
|
||
// 清空表单
|
||
formData.oldPassword = '';
|
||
formData.newPassword = '';
|
||
formData.confirmPassword = '';
|
||
// 延迟返回
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 1500);
|
||
} else {
|
||
uni.showToast({ title: res.msg || '修改失败', icon: 'none' });
|
||
}
|
||
} catch (err) {
|
||
console.error('修改密码失败:', err);
|
||
uni.showToast({ title: '修改失败', icon: 'none' });
|
||
} finally {
|
||
saving.value = false;
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
min-height: 100vh;
|
||
background: #EBF2FC;
|
||
}
|
||
|
||
.form-item {
|
||
padding: 30rpx 0;
|
||
}
|
||
|
||
.form-label {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.form-input-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
background: #f5f5f5;
|
||
border-radius: 12rpx;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.form-input {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.pwd-toggle {
|
||
padding: 10rpx;
|
||
font-size: 36rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.tips {
|
||
padding: 20rpx 30rpx;
|
||
}
|
||
</style>
|