huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成修改密码功能2

Browse Source
This commit is contained in:
huangzhenbao
2026-03-12 20:23:44 +08:00
parent 103c6fe0b6
commit a5304bdc9e
1 changed files with 46 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
pages/mall/admin/userCenter/index.uvue
View File

@@ -29,22 +29,31 @@
<view class="form-item"> <view class="form-item">
<text class="form-label">原始密码</text> <text class="form-label">原始密码</text>
<view class="form-content"> <view class="form-content password-input-wrapper">
<input class="uni-input" type="password" v-model="formData.oldPassword" placeholder="请输入原始密码" /> <input class="uni-input" :type="showOldPassword ? 'text' : 'password'" v-model="formData.oldPassword" placeholder="请输入原始密码" />
<view class="password-eye" @click="showOldPassword = !showOldPassword">
<text class="eye-icon">{{ showOldPassword ? '🙉' : '🙈' }}</text>
</view>
</view> </view>
</view> </view>
<view class="form-item"> <view class="form-item">
<text class="form-label">新密码</text> <text class="form-label">新密码</text>
<view class="form-content"> <view class="form-content password-input-wrapper">
<input class="uni-input" type="password" v-model="formData.newPassword" placeholder="请输入新密码" /> <input class="uni-input" :type="showNewPassword ? 'text' : 'password'" v-model="formData.newPassword" placeholder="请输入新密码" />
<view class="password-eye" @click="showNewPassword = !showNewPassword">
<text class="eye-icon">{{ showNewPassword ? '🙉' : '🙈' }}</text>
</view>
</view> </view>
</view> </view>
<view class="form-item"> <view class="form-item">
<text class="form-label">确认密码</text> <text class="form-label">确认密码</text>
<view class="form-content"> <view class="form-content password-input-wrapper">
<input class="uni-input" type="password" v-model="formData.confirmPassword" placeholder="请再次输入新密码" /> <input class="uni-input" :type="showConfirmPassword ? 'text' : 'password'" v-model="formData.confirmPassword" placeholder="请再次输入新密码" />
<view class="password-eye" @click="showConfirmPassword = !showConfirmPassword">
<text class="eye-icon">{{ showConfirmPassword ? '🙉' : '🙈' }}</text>
</view>
</view> </view>
</view> </view>
@@ -72,6 +81,10 @@ const formData = reactive({
confirmPassword: '' confirmPassword: ''
}) })
const showOldPassword = ref(false)
const showNewPassword = ref(false)
const showConfirmPassword = ref(false)
const isSubmitting = ref(false) const isSubmitting = ref(false)
onMounted(() => { onMounted(() => {
@@ -261,6 +274,33 @@ const onSubmit = async () => {
outline: none; outline: none;
} }
.password-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.password-eye {
position: absolute;
right: 12px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
padding: 0 4px;
}
.eye-icon {
font-size: 18px;
color: #999;
}
.password-eye:active .eye-icon {
color: #1890ff;
}
.disabled { .disabled {
background-color: #f5f7fa; background-color: #f5f7fa;
color: #c0c4cc; color: #c0c4cc;