fix: 验证码禁用时自动隐藏输入框

## 问题
登录页面验证码图片无法显示,且验证码已禁用但输入框仍然显示

## 解决方案
当captchaEnabled=false时,完全隐藏验证码输入框和图片

## 修改内容
1. 添加captchaEnabled响应式变量控制显示
2. 使用v-if条件渲染验证码输入框
3. 根据captchaEnabled动态设置验证规则

## 用户体验
- 验证码启用:显示输入框和图片,必填
- 验证码禁用:完全隐藏,用户只需输入用户名密码

---
作者:湖北新华业务中台研发团队
This commit is contained in:
神码-方晓辉 2026-02-01 12:18:41 +08:00
parent dde660857a
commit 7f6d6d038a
1 changed files with 9 additions and 5 deletions

View File

@ -30,7 +30,7 @@
/>
</el-form-item>
<el-form-item prop="code">
<el-form-item v-if="captchaEnabled" prop="code">
<div class="captcha-row">
<el-input
v-model="loginForm.code"
@ -93,6 +93,7 @@ const loginFormRef = ref()
const loading = ref(false)
const captchaImg = ref('')
const uuid = ref('')
const captchaEnabled = ref(false)
const loginForm = ref({
username: 'admin',
@ -112,10 +113,13 @@ const getCaptcha = async () => {
try {
const res = await request.get('/api/captchaImage')
if (res.code === 200) {
captchaEnabled.value = res.data.captchaEnabled
if (captchaEnabled.value) {
captchaImg.value = res.data.img
uuid.value = res.data.uuid
//
if (!res.data.captchaEnabled) {
loginRules.code[0].required = true
} else {
//
loginRules.code[0].required = false
}
}