| | |
| | | <template> |
| | | <div class="login-container"> |
| | | <el-card class="login-card"> |
| | | <h2>交通统计报表审核系统</h2> |
| | | <h2>交通统计报表审核系统<span class="login-version" v-if="version">V{{ version }}</span></h2> |
| | | <el-form ref="form" :model="form" :rules="rules"> |
| | | <el-form-item prop="username"> |
| | | <el-input v-model="form.username" placeholder="用户名" @keyup.enter.native="login"></el-input> |
| | |
| | | captchaId: '', |
| | | clickIds: [], |
| | | loggingIn: false, |
| | | captchaRequired: true |
| | | captchaRequired: false, |
| | | version: '' |
| | | } |
| | | }, |
| | | created() { |
| | | axios.get('/api/version', { timeout: 10000 }) |
| | | .then(res => { |
| | | const d = res.data |
| | | if (d && d.data && d.data.version) this.version = d.data.version |
| | | }) |
| | | .catch(() => {}) |
| | | // 验证码是否启用一律以后端 /api/auth/captcha-config 为准: |
| | | // 默认不显示,只有后端明确返回 required=true 才渲染验证码组件。 |
| | | // 修复:此前默认 true 且请求失败时静默忽略,切换网络后该配置读不到, |
| | | // 登录页就会残留一个加载不出来的验证码白框并提示“验证码加载失败,请检查网络”。 |
| | | axios.get('/api/auth/captcha-config', { timeout: 10000 }) |
| | | .then(res => { |
| | | const d = res.data |
| | | if (d && d.code === 200) this.captchaRequired = d.data.required !== false |
| | | this.captchaRequired = !!(d && d.code === 200 && d.data && d.data.required === true) |
| | | }) |
| | | .catch(() => {}) |
| | | .catch(() => { this.captchaRequired = false }) |
| | | }, |
| | | methods: { |
| | | onCaptchaVerified(payload) { |
| | |
| | | .captcha-skip-tip { font-size: 12px; color: #909399; line-height: 1.6; padding: 8px 10px; background: #F5F7FA; border-radius: 4px; } |
| | | .login-card { width: 400px; } |
| | | .login-card h2 { text-align: center; margin-bottom: 18px; } |
| | | .login-version { font-size: 13px; font-weight: normal; color: #909399; margin-left: 8px; vertical-align: 3px; } |
| | | .login-card .el-form-item { margin-bottom: 16px; } |
| | | </style> |