HL-5269

src/views/login/components/LoginForm.vue

@@ -34,6 +34,11 @@
         </el-form-item>
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px" v-if="needCode">
+        <el-form-item prop="code">
+            <Verify ref="VerifySlide" captchaType="blockPuzzle" mode="" :imgSize="{ width: '450px', height: '225px' }"  @success="capctchaCheckSuccess" @error="capctchaCheckError"></Verify>
+        </el-form-item>
+      </el-col>
+      <!-- <el-col :span="24" style="padding-right: 10px; padding-left: 10px" v-if="needCode">
         <el-form-item prop="code">
           <div class="flex w-[100%]">
             <el-input v-model="loginData.loginForm.code" :placeholder="t('login.codePlaceholder')"
@@ -47,7 +52,7 @@
             </div>
           </div>
         </el-form-item>
-      </el-col>
+      </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%">
@@ -69,14 +74,8 @@
           <XButton :loading="loginLoading" :title="t('login.login')" class="w-[100%]" type="primary"
             @click="handleLogin()" />
         </el-form-item>
+        
       </el-col>
-      <!-- <Verify
-        ref="verify"
-        :captchaType="captchaType"
-        :imgSize="{ width: '400px', height: '200px' }"
-        mode="pop"
-        @success="handleLogin"
-      /> -->
     </el-row>
   </el-form>
 </template>
@@ -99,6 +98,8 @@
   import { getTenant } from '@/utils/systemParam'
   import { getSystermUpdateAlert,getSystermUpdateUrl,getNeedCode } from '@/utils/systemParam'
   import {validateResetTime} from "@/api/system/password";
+  import { Verify } from '@/components/Verifition'
+
   const needCode = ref(getNeedCode()==true||getNeedCode()=='true')
 
   defineOptions({ name: 'LoginForm' })
@@ -115,8 +116,7 @@
   const permissionStore = usePermissionStore()
   const redirect = ref<string>('')
   const loginLoading = ref(false)
-  const verify = ref()
-  const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字
+  const VerifySlide = ref()
 
 
   const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN)
@@ -184,16 +184,18 @@
     }
   }
   function getCode() {
+    console.log('getCode')
     if(!needCode.value){
       return
     }
-    getCodeImg().then(res => {
-      captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
-      if (captchaEnabled.value) {
-        codeUrl.value = "data:image/gif;base64," + res.img;
-        loginData.loginForm.uuid = res.uuid;
-      }
-    });
+    VerifySlide.value.refresh()
+    // getCodeImg().then(res => {
+    //   captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
+    //   if (captchaEnabled.value) {
+    //     codeUrl.value = "data:image/gif;base64," + res.img;
+    //     loginData.loginForm.uuid = res.uuid;
+    //   }
+    // });
   }
   //获取租户ID
   const getTenantId = async () => {
@@ -221,10 +223,23 @@
       name: 'ForgetPassword',
     })
   };
+  // 滑块校验成功
+  const capctchaCheckSuccess = async ({captchaVerification})=>{
+    console.log('capctchaCheckSuccess',captchaVerification)
+    if(captchaVerification){
+      loginData.loginForm.code = captchaVerification
+      await handleLogin()
+    }
+  }
+  // 滑块校验失败
+  const capctchaCheckError = ()=>{
+    VerifySlide.value.refresh()
+  }
+
 
   const loading = ref() // ElLoading.service 返回的实例
   // 登录
-  const handleLogin = async (params) => {
+  const handleLogin = async () => {
     console.log('登录-185')
     if(getSystermUpdateAlert()=='true'||getSystermUpdateAlert()===true){
       await ElMessageBox.alert(
@@ -237,8 +252,10 @@
       )
     }
     loginLoading.value = true
+    
     try {
       await getTenantId()
+      
       const data = await validForm()
       if (!data) {
         return
@@ -249,6 +266,8 @@
       }else{
         res = await LoginApi.login(loginData.loginForm)
       }
+
+      console.log('登陆res',res)
       try{
         await PassWordApi.validateResetTime(res.userId)
       }catch (e) {
@@ -293,9 +312,9 @@
       wsCache.set(CACHE_KEY.DEPT, await DeptApi.getSimpleDeptList())
     }finally {
       console.log('登录-224')
-      getCode()
       loginLoading.value = false
       loading?.value?.close()
+      getCode()
     }
   }
   // 社交登录