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

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>