| | |
|---|
| | | |
|---|
| | | import { checkCaptcha, getCaptcha } from '#/api/core/auth'; |
|---|
| | | import { useAuthStore } from '#/store'; |
|---|
| | | import { selectTerminal, terminalType } from '#/mobile/terminal'; |
|---|
| | | import { errorText } from '#/mobile/api'; |
|---|
| | | import { useRoute } from 'vue-router'; |
|---|
| | | |
|---|
| | | defineOptions({ name: 'Login' }); |
|---|
| | | |
|---|
| | | const authStore = useAuthStore(); |
|---|
| | | const route = useRoute(); |
|---|
| | | const loginError = ref(route.query.loadError ? '菜单加载失败，请重新登录后重试。' : ''); |
|---|
| | | const captchaEnable = isCaptchaEnable(); |
|---|
| | | |
|---|
| | | const loginRef = ref(); |
|---|
| | |
|---|
| | | verifyRef.value.show(); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | await authStore.authLogin('username', values); |
|---|
| | | loginError.value = ''; |
|---|
| | | try { await authStore.authLogin('username', values); } |
|---|
| | | catch (e) { loginError.value = errorText(e); } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** 验证码通过，执行登录 */ |
|---|
| | |
|---|
| | | }: { |
|---|
| | | captchaVerification: string; |
|---|
| | | }) { |
|---|
| | | await authStore.authLogin('username', { |
|---|
| | | loginError.value = ''; |
|---|
| | | try { await authStore.authLogin('username', { |
|---|
| | | ...(await loginRef.value.getFormApi().getValues()), |
|---|
| | | captchaVerification, |
|---|
| | | }); |
|---|
| | | }); } catch (e) { loginError.value = errorText(e); } |
|---|
| | | } |
|---|
| | | |
|---|
| | | const formSchema = computed((): VbenFormSchema[] => { |
|---|
| | |
|---|
| | | |
|---|
| | | <template> |
|---|
| | | <div> |
|---|
| | | <fieldset class="terminal-selector"> |
|---|
| | | <legend>选择使用端</legend> |
|---|
| | | <div class="terminal-options"> |
|---|
| | | <label :class="{ selected: terminalType === 'mobile' }"> |
|---|
| | | <input type="radio" name="terminal" value="mobile" :checked="terminalType === 'mobile'" :disabled="authStore.loginLoading" @change="selectTerminal('mobile')" /> |
|---|
| | | <span>移动端</span> |
|---|
| | | </label> |
|---|
| | | <label :class="{ selected: terminalType === 'pc' }"> |
|---|
| | | <input type="radio" name="terminal" value="pc" :checked="terminalType === 'pc'" :disabled="authStore.loginLoading" @change="selectTerminal('pc')" /> |
|---|
| | | <span>PC 端</span> |
|---|
| | | </label> |
|---|
| | | </div> |
|---|
| | | <p>已按屏幕大小选择，可手动切换</p> |
|---|
| | | </fieldset> |
|---|
| | | <AuthenticationLogin |
|---|
| | | ref="loginRef" |
|---|
| | | :form-schema="formSchema" |
|---|
| | | :loading="authStore.loginLoading" |
|---|
| | | :show-field-labels="terminalType === 'mobile'" |
|---|
| | | :submit-button-text="terminalType === 'mobile' ? '登录移动端' : '登录 PC 端'" |
|---|
| | | title="欢迎回来" |
|---|
| | | sub-title="登录种植业数字化平台，开启智慧种植" |
|---|
| | | :sub-title="terminalType === 'mobile' ? '使用已有账号登录现场作业' : '登录种植业数字化平台，开启智慧种植'" |
|---|
| | | :show-code-login="false" |
|---|
| | | :show-qrcode-login="false" |
|---|
| | | :show-third-party-login="false" |
|---|
| | |
|---|
| | | :show-doc-link="false" |
|---|
| | | @submit="handleLogin" |
|---|
| | | /> |
|---|
| | | <p v-if="loginError" class="login-error" role="alert">{{loginError}}</p> |
|---|
| | | <Verification |
|---|
| | | ref="verifyRef" |
|---|
| | | v-if="captchaEnable" |
|---|
| | |
|---|
| | | /> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | .terminal-selector { border: 0; margin: 0 0 24px; padding: 0; } |
|---|
| | | .login-error { padding:12px;color:#b91c1c;background:#fef2f2;border-radius:8px; } |
|---|
| | | .terminal-selector legend { font-size: 16px; margin-bottom: 8px; } |
|---|
| | | .terminal-options { display: flex; gap: 12px; } |
|---|
| | | .terminal-options label { display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-height:52px;border:1px solid #64748b;border-radius:8px;cursor:pointer; } |
|---|
| | | .terminal-options label.selected { border-color:#0369a1;color:#0369a1;background:#f0f9ff; } |
|---|
| | | .terminal-options label:focus-within { outline:2px solid #0369a1;outline-offset:2px; } |
|---|
| | | .terminal-selector p { margin-top:8px;color:#475569;font-size:14px; } |
|---|
| | | </style> |
|---|
