快捷登陆

src/api/login/index.ts

@@ -7,6 +7,8 @@ export interface SmsCodeVO {
   scene: number
 }
 
+
+
 export interface SmsLoginVO {
   mobile: string
   code: string
@@ -72,10 +74,19 @@ export const socialAuthRedirect = (type: number, redirectUri: string) => {
 }
 // 获取验证图片以及 token
 export const getCode = (data: any) => {
-  debugger
   return request.postOriginal({ url: 'system/captcha/get', data })
 }
 
+// 获取登陆图片
+export const getCodeWebPic = (data: any) => {
+  return request.post({ url: 'system/auth/web_code_login', data })
+}
+
+// 根据扫码生产的uuuid 进行登陆
+export const qrLoginCode = (data: any) => {
+  return request.post({ url: 'system/auth/social-qr-login-openid', data })
+}
+
 // 滑动或者点选验证
 export const reqCheck = (data: any) => {
   return request.postOriginal({ url: 'system/captcha/check', data })

src/views/Login/Login.vue

@@ -51,8 +51,7 @@
           >
             <!-- 账号登录 -->
             <LoginForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
-            <!-- 手机登录 -->
-            <MobileForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
+       
             <!-- 二维码登录 -->
             <QrCodeForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
             <!-- 注册 -->

src/views/Login/components/LoginForm.vue

@@ -92,13 +92,13 @@
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item>
           <el-row :gutter="5" justify="space-between" style="width: 100%">
-            <el-col :span="8">
+            <!-- <el-col :span="8">
               <XButton
                 :title="t('login.btnMobile')"
                 class="w-[100%]"
                 @click="setLoginState(LoginStateEnum.MOBILE)"
               />
-            </el-col>
+            </el-col> -->
             <el-col :span="8">
               <XButton
                 :title="t('login.btnQRCode')"
@@ -116,7 +116,7 @@
           </el-row>
         </el-form-item>
       </el-col>
-      <el-divider content-position="center">{{ t('login.otherLogin') }}</el-divider>
+      <!-- <el-divider content-position="center">{{ t('login.otherLogin') }}</el-divider>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item>
           <div class="w-[100%] flex justify-between">
@@ -131,8 +131,8 @@
             />
           </div>
         </el-form-item>
-      </el-col>
-      <el-divider content-position="center">萌新必读</el-divider>
+      </el-col> -->
+      <!-- <el-divider content-position="center">萌新必读</el-divider>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item>
           <div class="w-[100%] flex justify-between">
@@ -146,7 +146,7 @@
             </el-link>
           </div>
         </el-form-item>
-      </el-col>
+      </el-col> -->
     </el-row>
   </el-form>
 </template>

src/views/Login/components/QrCodeForm.vue

@@ -5,7 +5,10 @@
     </el-col>
     <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
       <el-card class="mb-10px text-center" shadow="hover">
-        <Qrcode :logo="logoImg" />
+        <!-- <Qrcode :logo="logoImg" /> -->
+        <!-- 显示图片 -->
+        <img :src="imageUrl" alt="Converted Image" v-if="imageUrl" />
+        <XButton title="显示登陆二维码" class="w-[100%]" @click="getimg()" />
       </el-card>
     </el-col>
     <el-divider class="enter-x">{{ t('login.qrcode') }}</el-divider>
@@ -18,13 +21,81 @@
 </template>
 <script lang="ts" setup>
 import logoImg from '@/assets/imgs/logo.png'
-
+import * as LoginApi from '@/api/login'
+import * as authUtil from '@/utils/auth'
 import LoginFormTitle from './LoginFormTitle.vue'
 import { LoginStateEnum, useLoginState } from './useLogin'
-
+import router from '@/router'
 defineOptions({ name: 'QrCodeForm' })
 
+const imageUrl = ref('');
+const uuuid =ref('')
+
 const { t } = useI18n()
 const { handleBackLogin, getLoginState } = useLoginState()
 const getShow = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE)
+// 存储定时器 ID，用于后续清除定时器
+let intervalId = ref();
+
+
+const getimg =async ()=>{
+
+  const array = new Uint32Array(4);
+  crypto.getRandomValues(array);
+  let result = '';
+  array.forEach((value) => {
+    result += value.toString(16).padStart(8, '0');
+  });
+  uuuid.value = result;
+
+ var mockBinaryData = await LoginApi.getCodeWebPic({
+    scene:uuuid.value,
+    path: 'sub/common/waiting',
+    checkPath: false
+  });
+  // 对 Base64 编码的字符串进行解码
+  const binaryString = atob(mockBinaryData);
+    const len = binaryString.length;
+    const bytes = new Uint8Array(len);
+    for (let i = 0; i < len; i++) {
+      bytes[i] = binaryString.charCodeAt(i);
+    }
+
+  // 将二进制数据转换为Blob对象
+  const blob = new Blob([bytes], { type: 'image/png' });
+  // 创建临时的URL
+  imageUrl.value = URL.createObjectURL(blob);
+
+  //开始刷新扫码信息
+  refaulst();
+}
+
+//定时刷新 判断是否扫码允许
+const refaulst  = ()=>{
+   // 先清除之前的定时器，避免重复调用
+   if (intervalId) {
+    clearInterval(intervalId.value);
+  }
+  // 设置定时器，每 5 秒（可根据实际需求调整）调用一次接口
+  intervalId.value = setInterval(async () => {
+    try {
+      const res = await LoginApi.qrLoginCode({code:uuuid.value})
+     
+      if(res){
+        debugger
+        
+				 authUtil.setToken(res)
+          router.push({ path: '/' })
+        clearInterval(intervalId.value);
+      }
+      
+    } catch (error) {
+      console.error('获取扫码状态失败:', error);
+    }
+  }, 5000);
+}
+onMounted(() => {
+  // getCookie()
+  getimg()
+})
 </script>