feat: 登录验证

src/views/login/index.vue

 <template>
-    <div class="w-full h-full flex justify-center items-center bg-primary">
-        <div class="w-[400px] py-4 px-8 bg-white shadow-xl rounded-3xl" @keyup.enter="handleLogin">
-            <div class="flex justify-center my-8"><a-image :src="logo" :preview="false" fit="fill" /></div>
-            <div v-show="showScanCode">
-                <qrcode-vue :value="scanCode" :size="336" render-as="svg" />
-                <a-button class="shadow-xl my-4" size="large" type="primary" @click="handleBack" long>返回登录</a-button>
-            </div>
-            <div v-show="!showScanCode">
-                <h3 class="font-bold text-xl">{{ getLoginMethod.name }}</h3>
-                <a-form ref="loginFormRef" :rules="rules" :model="loginForm" layout="vertical">
-                    <a-form-item field="username" label="用户名:" validate-trigger="change" hide-asterisk>
-                        <a-input v-model="loginForm.username" placeholder="请输入你的用户名" size="large" allow-clear />
-                    </a-form-item>
-                    <a-form-item field="password" label="密码:" validate-trigger="change" hide-asterisk>
-                        <a-input-password v-model="loginForm.password" size="large" placeholder="请输入你的密码" allow-clear />
-                    </a-form-item>
-                    <a-form-item field="captcha" label="验证码:" validate-trigger="change" hide-asterisk>
-                        <a-input v-model="loginForm.captcha" placeholder="请输入验证码" size="large" allow-clear />
-                        <div class="w-24 h-9 ml-2 cursor-pointer" @click="getCaptcha">
-                            <a-image width="100%" height="100%" :src="loginCode" :preview="false" fit="fill" v-if="loginCode && loginForm.username"></a-image>
-                        </div>
-                    </a-form-item>
-                    <a-form-item>
-                        <a-button class="shadow-xl" size="large" type="primary" @click="handleLogin" long :loading="loading">登录</a-button>
-                    </a-form-item>
-                </a-form>
-                <div class="m-4 text-center cursor-pointer underline text-xs" style="color: rgb(32, 128, 240)" @click="handleLoginMethod">{{ getLoginMethod.btnText }}</div>
+    <a-spin :loading="loading" tip="登陆中..." class="w-full h-full">
+        <div class="w-full h-full flex justify-center items-center bg-primary">
+            <div class="w-[400px] py-4 px-8 bg-white shadow-xl rounded-3xl" @keyup.enter="handleLogin">
+                <div class="flex justify-center my-8"><a-image :src="logo" :preview="false" fit="fill" /></div>
+                <div v-show="showScanCode">
+                    <qrcode-vue :value="scanCode" :size="336" render-as="svg" />
+                    <a-button class="shadow-xl my-4" size="large" type="primary" @click="handleBack" long>返回登录</a-button>
+                </div>
+                <div v-show="!showScanCode">
+                    <h3 class="font-bold text-xl">{{ getLoginMethod.name }}</h3>
+                    <a-form ref="loginFormRef" :rules="rules" :model="loginForm" layout="vertical">
+                        <a-form-item field="username" label="用户名:" validate-trigger="change" hide-asterisk>
+                            <a-input v-model="loginForm.username" placeholder="请输入你的用户名" size="large" allow-clear />
+                        </a-form-item>
+                        <a-form-item field="password" label="密码:" validate-trigger="change" hide-asterisk>
+                            <a-input-password v-model="loginForm.password" size="large" placeholder="请输入你的密码" allow-clear />
+                        </a-form-item>
+                        <a-form-item field="captcha" label="验证码:" validate-trigger="change" hide-asterisk>
+                            <a-input v-model="loginForm.captcha" placeholder="请输入验证码" size="large" allow-clear />
+                            <div class="w-24 h-9 ml-2 cursor-pointer" @click="getCaptcha">
+                                <a-image width="100%" height="100%" :src="loginCode" :preview="false" fit="fill" v-if="loginCode && loginForm.username"></a-image>
+                            </div>
+                        </a-form-item>
+                        <a-form-item>
+                            <a-button class="shadow-xl" size="large" type="primary" @click="handleLogin" long :loading="loading">登录</a-button>
+                        </a-form-item>
+                    </a-form>
+                    <div class="m-4 text-center cursor-pointer underline text-xs" style="color: rgb(32, 128, 240)" @click="handleLoginMethod">{{ getLoginMethod.btnText }}</div>
+                </div>
             </div>
         </div>
-    </div>
+    </a-spin>
+    <global-model v-model:visible="showConfirmModel" title="提示" :width="320">
+        当前账号已在线，是否确认登录？
+        <template #footer>
+            <a-button size="large" type="primary" @click="tryLogin">确定</a-button>
+            <a-button size="large" @click="showConfirmModel = false">取消</a-button>
+        </template>
+    </global-model>
 </template>
 
 <script setup lang="ts">
@@ -36,9 +45,9 @@ import logo from '@/assets/images/header/logo.png'
 import useUserStore from '@/store/user'
 import { Notification, ValidatedError } from '@arco-design/web-vue'
 import { alova } from '@/api/alova-instance'
-import { useRequest } from 'alova'
 import { debounce } from 'lodash'
 import QrcodeVue from 'qrcode.vue'
+import { useRequest } from 'alova'
 
 const loginForm = reactive({
     username: '',
@@ -86,36 +95,45 @@ const handleBack = () => {
     scanCode.value = ''
 }
 //登录
+const showConfirmModel = ref(false)
 const loginFormRef = ref()
 const userStore = useUserStore()
-const {
-    loading,
-    send: sendLogin,
-    onSuccess: loginSuccess
-} = useRequest(
-    () =>
-        alova.Post<any>('/admin/login', loginForm, {
-            // @ts-ignore
-            meta: {
-                loading: '登陆中...'
-            }
-        }),
-    {
-        immediate: false
-    }
-)
+const loading = ref(false)
+const { send: sendGetCallState, onSuccess: getUserCallStateSuccess } = useRequest(() => alova.Post<any>('/call/getUserCallState', { username: loginForm.username }), { immediate: false })
+const { send: sendLogin, onSuccess: loginSuccess } = useRequest(() => alova.Post<any>('/admin/login', loginForm), { immediate: false })
 const handleLogin = async () => {
     loginFormRef.value?.validate(async (errors: Record<string, ValidatedError>) => {
         if (!errors && !loading.value) {
-            sendLogin()
+            loading.value = true
+            sendGetCallState()
         }
     })
 }
 //是否扫码登录
 const showScanCode = ref(false)
 const scanCode = ref('')
+//验证登录状态
+getUserCallStateSuccess(({ data: res }) => {
+    if (res.code == 200) {
+        const data = res.data
+        if (data.callState !== 'idle') {
+            loading.value = false
+            Notification.info({
+                content: '当前用户处于通话状态, 请稍后再试'
+            })
+            return
+        }
+        if (data.isSignin === '1') {
+            loading.value = false
+            showConfirmModel.value = true
+            return
+        }
+        return sendLogin()
+    }
+})
 //登录成功
 loginSuccess(({ data: res }) => {
+    loading.value = false
     if (res.code == 200) {
         //扫码登录
         if (loginMethodType.value == 'scan') {
@@ -134,6 +152,11 @@ loginSuccess(({ data: res }) => {
         })
     }
 })
+const tryLogin = () => {
+    showConfirmModel.value = false
+    loading.value = true
+    sendLogin()
+}
 //获取验证码
 const loginCode = ref('')
 const getCaptcha = async () => {