From 9e225417a65fe116928ff5a86d78cd41d2deb491 Mon Sep 17 00:00:00 2001
From: wangqiao <wangqiao@58hn.cn>
Date: Wed, 15 Oct 2025 22:27:12 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=BE=AE=E4=BF=A1=E6=89=AB?=
 =?UTF-8?q?=E7=A0=81=E7=99=BB=E5=BD=95=E5=8A=9F=E8=83=BD=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/personal-center/index.ts        | 12 ++++-
 components/wx.vue                   | 69 +++++++++++++++++++++++++++--
 pages/home/components/LoginForm.vue | 12 ++---
 pages/index.vue                     |  2 +-
 4 files changed, 81 insertions(+), 14 deletions(-)

diff --git a/api/personal-center/index.ts b/api/personal-center/index.ts
index 2321413..a2f02b4 100644
--- a/api/personal-center/index.ts
+++ b/api/personal-center/index.ts
@@ -184,5 +184,15 @@ export const getWalletConfig = () => {
  */
 
 export const getLoginQrcode = () => {
-  return useDollarFetchRequest.get<IResponse<string>>('/prod-api/app-api/member/auth/wx-login-url', {})
+  return useDollarFetchRequest.get<IResponse<{ sceneStr: string; qrCodeUrl: string }>>('/prod-api/app-api/member/auth/wx-login-url', {})
+}
+
+/***
+ * member/auth/checkScanStatus
+ * 检查扫码登录状态
+ */
+export const checkScanStatus = (params: { sceneStr: string }) => {
+  return useDollarFetchRequest.get<IResponse<{ status: string; openId: string | null; message: string }>>('/prod-api/app-api/member/auth/checkScanStatus', {
+    query: params,
+  })
 }
diff --git a/components/wx.vue b/components/wx.vue
index e9f69f9..02f06f0 100644
--- a/components/wx.vue
+++ b/components/wx.vue
@@ -5,24 +5,87 @@
       <qrcode-vue :value="qrcode" :size="300" :margin="2" colorDark="#2c3e50" colorLight="#f8f9fa" errorCorrectionLevel="H" />
       <!-- 扫码状态 -->
       <div class="text-center">
-        <span>请使用微信扫描二维码登录</span>
+        <span>{{ checkLoginStatus }}</span>
       </div>
     </el-dialog>
   </div>
 </template>
 <script setup lang="ts">
+  import { getLoginQrcode, checkScanStatus } from '~/api/personal-center/index'
   import QrcodeVue from 'qrcode.vue'
+
   const visible = defineModel('visible', {
     default: false,
   })
-  const qrcode = defineModel('qrcode', {
-    default: '',
+
+  const checkLoginStatus = computed(() => {
+    const type = {
+      EXPIRED: '已过期',
+      CONFIRMED: '已确认',
+      SCANNED: '已扫码',
+      WAITING: '等待扫码',
+      SUCCESS: '登录成功',
+    }
+    if (checkLoginInfo.value) {
+      return type[checkLoginInfo.value.status as keyof typeof type]
+    }
+    return '微信扫码登录'
   })
 
+  const qrcode = ref('')
+  const sceneStr = ref('')
+  const timer = ref<any>()
+  const getQrcode = async () => {
+    // 获取二维码
+    const res = await getLoginQrcode()
+    if (res.code === 0) {
+      const jsonurl = res.data.qrCodeUrl
+      const qrCodeUrl = jsonurl ? JSON.parse(jsonurl) : ''
+
+      if (qrCodeUrl?.qrCodeUrl) {
+        qrcode.value = qrCodeUrl.qrCodeUrl
+        sceneStr.value = res.data.sceneStr
+
+        // 轮询检查扫码状态
+        getCheckScanStatus()
+      }
+    }
+  }
+
+  const checkLoginInfo = ref<{ status: string; openId: string | null; message: string }>()
+  const getCheckScanStatus = async () => {
+    // 轮询检查扫码状态
+    timer.value = setInterval(async () => {
+      const response = await checkScanStatus({ sceneStr: sceneStr.value })
+      if (response.code === 0) {
+        checkLoginInfo.value = response.data
+        if (checkLoginInfo.value.status === 'SCANNED') {
+          // 扫码成功
+          //   visible.value = false
+          clearInterval(timer.value)
+        } else if (checkLoginInfo.value.status === 'EXPIRED') {
+          // 二维码过期
+          clearInterval(timer.value)
+          // 重新获取二维码
+          getQrcode()
+        }
+      }
+    }, 5000)
+  }
+
   const close = () => {
     visible.value = false
     qrcode.value = ''
   }
+
+  onMounted(() => {
+    // 获取二维码
+    getQrcode()
+  })
+  // 关闭定时器
+  onUnmounted(() => {
+    clearInterval(timer.value)
+  })
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/home/components/LoginForm.vue b/pages/home/components/LoginForm.vue
index fe82d46..65cd9c5 100644
--- a/pages/home/components/LoginForm.vue
+++ b/pages/home/components/LoginForm.vue
@@ -75,7 +75,7 @@
   </div>
 
   <!-- wx二维码弹窗 -->
-  <wx v-model:visible="visible" v-model:qrcode="qrcode" />
+  <wx v-model:visible="visible" v-if="visible" />
 </template>
 
 <script setup lang="ts">
@@ -83,7 +83,7 @@
   import { getCurrentInstance, computed, watchEffect, ref } from 'vue'
   import { handleLoginQQ, handleLoginWechat } from '~/utils/login'
   import type { UserStatisticsCountRespVO } from '~/api/personal-center/types'
-  import { getUserStatistics, getLoginQrcode } from '~/api/personal-center/index'
+  import { getUserStatistics } from '~/api/personal-center/index'
   import useUserStore from '~/stores/user'
   const userStore = useUserStore()
   const app = useNuxtApp()
@@ -94,15 +94,9 @@
   })
 
   // 打开微信二维码
-  const qrcode = ref<string>()
   const visible = ref<boolean>(false)
   const handleLoginWechatV2 = () => {
-    getLoginQrcode().then((res) => {
-      if (res.code === 0) {
-        visible.value = true
-        qrcode.value = res.data
-      }
-    })
+    visible.value = true
   }
 
   // 获取用户统计信息
diff --git a/pages/index.vue b/pages/index.vue
index bca3aa7..75e9442 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -17,7 +17,7 @@
     <!-- 热门图纸 -->
     <PopularDrawings></PopularDrawings>
     <!-- 排行榜 -->
-    <Leaderboard></Leaderboard>
+    <!-- <Leaderboard></Leaderboard> -->
   </div>
 </template>