登录

src/api/login/index.ts

@@ -62,3 +62,21 @@ export const getCode = (data) => {
 export const reqCheck = (data) => {
   return request.postOriginal({ url: 'system/captcha/check', data })
 }
+
+// 获取验证码
+export const getCodeImg = () => {
+  return request.get({
+    url: 'system/captcha/captchaImage', headers: {
+      isToken: false
+    }})
+}
+// export function getCodeImg() {
+//   return request({
+//     url: '/captchaImage',
+//     headers: {
+//       isToken: false
+//     },
+//     method: 'get',
+//     timeout: 20000
+//   })
+// }

src/views/Login/components/LoginForm.vue

@@ -1,56 +1,61 @@
 <template>
-  <el-form
-    v-show="getShow"
-    ref="formLogin"
-    :model="loginData.loginForm"
-    :rules="LoginRules"
-    class="login-form"
-    label-position="top"
-    label-width="120px"
-    size="large"
-  >
+  <el-form v-show="getShow" ref="formLogin" :model="loginData.loginForm" :rules="LoginRules" class="login-form"
+    label-position="top" label-width="120px" size="large">
     <el-row style="margin-right: -10px; margin-left: -10px">
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item>
           <LoginFormTitle style="width: 100%" />
         </el-form-item>
       </el-col>
-        <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
-          <el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName">
-            <el-input
-              v-model="loginData.loginForm.tenantName"
-              :placeholder="t('login.tenantNamePlaceholder')"
-              :prefix-icon="iconHouse"
-              link
-              type="primary"
-            />
-          </el-form-item>
-        </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName">
+          <el-input v-model="loginData.loginForm.tenantName" :placeholder="t('login.tenantNamePlaceholder')"
+            :prefix-icon="iconHouse" link type="primary" />
+        </el-form-item>
+      </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item prop="username">
-          <el-input
-            v-model="loginData.loginForm.username"
-            :placeholder="t('login.usernamePlaceholder')"
-            :prefix-icon="iconAvatar"
-          />
+          <el-input v-model="loginData.loginForm.username" :placeholder="t('login.usernamePlaceholder')"
+            :prefix-icon="iconAvatar" />
         </el-form-item>
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item prop="password">
-          <el-input
-            v-model="loginData.loginForm.password"
-            :placeholder="t('login.passwordPlaceholder')"
-            :prefix-icon="iconLock"
-            show-password
-            type="password"
-            @keyup.enter="getCode()"
-          />
+          <el-input v-model="loginData.loginForm.password" :placeholder="t('login.passwordPlaceholder')"
+            :prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()" />
         </el-form-item>
       </el-col>
-      <el-col
-        :span="24"
-        style="padding-right: 10px; padding-left: 10px; margin-top: -20px; margin-bottom: -20px"
-      >
+   <!-- <el-col :span="24" style="padding-right: 10px; padding-left: 10px; margin-top: -20px; margin-bottom: -20px">
+          <el-form-item prop="code" v-if="captchaEnabled">
+            <div class="label">
+              <svg-icon icon-class="icon_safe" class="el-input__icon input-icon" />
+              <div>验证码</div>
+            </div>
+            <div>
+              <el-input v-model="loginData.loginForm.password" :placeholder="t('login.passwordPlaceholder')"
+                :prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()" />
+              <div class="login-code">
+                <img :src="codeUrl" @click="getCode" class="login-code-img" />
+              </div>
+            </div>
+          </el-form-item>
+        </el-col> -->
+
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+          <el-form-item prop="code">
+            <div class="flex">
+   <el-input v-model="loginData.loginForm.code" placeholder="请输入验证码" style="width: 320px;"
+                :prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()"/>
+                <div class="login-code flex-1">
+                    <img :src="codeUrl" @click="getCode" class="login-code-img" />
+                  </div>
+            </div>
+           
+          </el-form-item>
+        </el-col>
+
+
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px; margin-top: -20px; margin-bottom: -20px">
         <el-form-item>
           <el-row justify="space-between" style="width: 100%">
             <el-col :span="6">
@@ -64,24 +69,20 @@
           </el-row>
         </el-form-item>
       </el-col>
+     
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item>
-          <XButton
-            :loading="loginLoading"
-            :title="t('login.login')"
-            class="w-[100%]"
-            type="primary"
-            @click="getCode()"
-          />
+          <XButton :loading="loginLoading" :title="t('login.login')" class="w-[100%]" type="primary"
+            @click="handleLogin()" />
         </el-form-item>
       </el-col>
-      <Verify
+      <!-- <Verify
         ref="verify"
         :captchaType="captchaType"
         :imgSize="{ width: '400px', height: '200px' }"
         mode="pop"
         @success="handleLogin"
-      />
+      /> -->
     </el-row>
   </el-form>
 </template>
@@ -96,6 +97,7 @@ import * as authUtil from '@/utils/auth'
 import { usePermissionStore } from '@/store/modules/permission'
 import * as LoginApi from '@/api/login'
 import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
+import { getCodeImg } from "@/api/login";
 
 defineOptions({ name: 'LoginForm' })
 
@@ -115,6 +117,9 @@ const verify = ref()
 const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字
 
 const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN)
+// 验证码开关
+const captchaEnabled = ref(true);
+const codeUrl = ref("");
 
 const LoginRules = {
   tenantName: [required],
@@ -130,7 +135,8 @@ const loginData = reactive({
     username: 'admin',
     password: 'admin123',
     captchaVerification: '',
-    rememberMe: false
+    rememberMe: false,
+    code:''
   }
 })
 
@@ -142,15 +148,24 @@ const socialList = [
 ]
 
 // 获取验证码
-const getCode = async () => {
-  // 情况一，未开启：则直接登录
-  if (loginData.captchaEnable === 'false') {
-    await handleLogin({})
-  } else {
-    // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
-    // 弹出验证码
-    verify.value.show()
-  }
+// const getCode = async () => {
+//   // 情况一，未开启：则直接登录
+//   if (loginData.captchaEnable === 'false') {
+//     await handleLogin({})
+//   } else {
+//     // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
+//     // 弹出验证码
+//     verify.value.show()
+//   }
+// }
+function getCode() {
+  getCodeImg().then(res => {
+    captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
+    if (captchaEnabled.value) {
+      codeUrl.value = "data:image/gif;base64," + res.img;
+      loginForm.value.uuid = res.uuid;
+    }
+  });
 }
 //获取租户ID
 const getTenantId = async () => {
@@ -243,6 +258,7 @@ watch(
   }
 )
 onMounted(() => {
+  getCode();
   getCookie()
 })
 </script>