优化微信扫码登录功能实现

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,
+  })
 }

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>

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
   }
 
   // 获取用户统计信息

pages/index.vue

@@ -17,7 +17,7 @@
     <!-- 热门图纸 -->
     <PopularDrawings></PopularDrawings>
     <!-- 排行榜 -->
-    <Leaderboard></Leaderboard>
+    <!-- <Leaderboard></Leaderboard> -->
   </div>
 </template>