完成修改密码功能2
This commit is contained in:
@@ -29,22 +29,31 @@
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">原始密码</text>
|
||||
<view class="form-content">
|
||||
<input class="uni-input" type="password" v-model="formData.oldPassword" placeholder="请输入原始密码" />
|
||||
<view class="form-content password-input-wrapper">
|
||||
<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 class="form-item">
|
||||
<text class="form-label">新密码</text>
|
||||
<view class="form-content">
|
||||
<input class="uni-input" type="password" v-model="formData.newPassword" placeholder="请输入新密码" />
|
||||
<view class="form-content password-input-wrapper">
|
||||
<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 class="form-item">
|
||||
<text class="form-label">确认密码</text>
|
||||
<view class="form-content">
|
||||
<input class="uni-input" type="password" v-model="formData.confirmPassword" placeholder="请再次输入新密码" />
|
||||
<view class="form-content password-input-wrapper">
|
||||
<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>
|
||||
|
||||
@@ -72,6 +81,10 @@ const formData = reactive({
|
||||
confirmPassword: ''
|
||||
})
|
||||
|
||||
const showOldPassword = ref(false)
|
||||
const showNewPassword = ref(false)
|
||||
const showConfirmPassword = ref(false)
|
||||
|
||||
const isSubmitting = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
@@ -261,6 +274,33 @@ const onSubmit = async () => {
|
||||
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 {
|
||||
background-color: #f5f7fa;
|
||||
color: #c0c4cc;
|
||||
|
||||
Reference in New Issue
Block a user