From 51d849ab8249c5a3dcac71e5ef4a2daea27b647b Mon Sep 17 00:00:00 2001
From: forever <2334528060@qq.com>
Date: Fri, 19 Jan 2024 20:48:10 +0800
Subject: [PATCH] 11111

---
 src/api/login/index.ts | 35 +++++++++++++++++++++++++++-----
 src/api/login/type.ts  |  6 ++++++
 src/views/HomeView.vue | 46 +++++++++++++++++++++++++++++++++++++-----
 3 files changed, 77 insertions(+), 10 deletions(-)

diff --git a/src/api/login/index.ts b/src/api/login/index.ts
index b2a3ff5..88e0852 100644
--- a/src/api/login/index.ts
+++ b/src/api/login/index.ts
@@ -10,7 +10,8 @@ const apiPath = {
     code: '/captcha/sent',
     qr: '/login/qr/key',
     qrcreate: "/login/qr/create",
-    qrcheck: "/login/qr/check"
+    qrcheck: "/login/qr/check",
+    state:"/login/status", 
 }
 
 /**
@@ -79,10 +80,34 @@ export function qr() {
         method: "get"
     })
 }
-export function qrcreate(){
+/**
+ * 说明：调用此接口，生成登录二维码
+ * @param params.key：二维码的key
+ * @param params.qrimg：传入后会返回二维码图片的base64编码
+ */
+export function qrcreate(params: loginType.QrParams) {
     return request({
-        url:apiPath.qrcheck,
-        method:"get"
+        url: apiPath.qrcreate,
+        method: "get",
+        params
     })
 }
-111
\ No newline at end of file
+/**
+ * 说明：此接口用来检测二维码的扫描状态
+ * @param params.key：有第一个接口生成 
+ * */
+export function qrcheck(params: loginType.QrParams) {
+    return request({
+        url: apiPath.qrcheck,
+        method: "get",
+        params,
+    })
+}
+
+
+export function state(){
+    return request({
+        url:apiPath.state,
+        method:"get", 
+    })
+}
\ No newline at end of file
diff --git a/src/api/login/type.ts b/src/api/login/type.ts
index a28ca63..d7db058 100644
--- a/src/api/login/type.ts
+++ b/src/api/login/type.ts
@@ -27,3 +27,9 @@ export interface LogoutParams {
   //昵称
   nickname: string | number;
 }
+
+export interface QrParams{
+  key: string,
+  qrimg?:string
+}
+
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 7a2cd9a..deebe56 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -264,10 +264,10 @@
                     @click="switchLogin = false">账号登录</span>
                 <span>|</span>
                 <span :style="{ 'cursor': 'pointer', 'color': switchLogin ? 'red' : '' }"
-                    @click="switchLogin = true">验证码登录</span>
+                    @click="switchLogin = true, qrkey()">扫码登录</span>
             </div>
             <div v-if="switchLogin" class="dialog">
-                <div class="inputLogin">
+                <!-- <div class="inputLogin">
                     <div class="phone">
                         <input v-model="phone" placeholder="请输入手机号" />
                     </div>
@@ -275,8 +275,9 @@
                         <input v-model="code" type="text" placeholder="请输入验证码">
                         <button class="codeBtn" :disabled="codeBtnState" @click="getCode">获取验证码</button>
                     </div>
-                </div>
-                <button @click="getLogin">登录闪电音乐</button>
+                </div> -->
+                <!-- <button @click="getLogin">登录闪电音乐</button> -->
+                <img :src="qrURL" />
             </div>
             <div v-else class="dialog">
                 <div class="inputLogin">
@@ -339,6 +340,7 @@ const coordinate = reactive({
     X: 20, Y: 0
 })
 const timer = ref()
+const qrURL = ref<string>("") //二维码的base64编码
 // const userSongSheetList = ref<any>([])//用户歌单名称列表
 //初始化执行
 onMounted(() => {
@@ -539,12 +541,46 @@ const getCode = () => {
             codeBtn.innerHTML = '获取验证码'
             codeBtnState.value = false
         }
-        111
     }, 1000)
     // loginAPI.LoginCode({ phone: Number(phone.value) }).then(({ data }) => {
     // console.log(data)
     // })
 }
+// 获取二维码的key
+const qrkey = () => {
+    new Promise((resolve, reject) => {
+        loginAPI.qr().then(({ data }) => {
+            resolve(data.data.unikey)
+        })
+    }).then((unikey) => {
+        loginAPI.qrcreate({ key: unikey, qrimg: unikey }).then(({ data: qrCreateData }) => {
+            qrURL.value = qrCreateData.data.qrimg
+        }
+
+        )
+        return new Promise((resolve, reject) => {
+            resolve(unikey)
+        })
+    }).then((unikey) => {
+        const timer = window.setInterval(() => {
+            loginAPI.qrcheck({ key: unikey }).then(({ data: checkData }) => {
+                if (checkData.code === 803) {
+                    loginAPI.state().then(({ data: success }) => {
+                        if (success.data.code == 200) {
+                            return new Promise((resolve, reject) => {
+                                resolve(success.data)
+                            })
+                        }
+                        clearInterval(timer)
+                    })
+                }
+
+            })
+        }, 3000)
+    }).then((data) => {
+        console.log(data)
+    })
+}
 //登录
 const getLogin = () => {
     loginAPI.login({ phone: String(phone.value), password: String(password.value) }).then(({ data }) => {
-- 
Gitee