✨ scan the QR code to log in on the WeChat public account

src/views/QRLogin/QRLogin.vue

@@ -17,8 +17,10 @@
               class="qrlogin-card-qr"
               :size="230"
               :error-level="'H'"
-              value="https://www.antdv.com"
-              icon="https://www.antdv.com/assets/logo.1ef800a8.svg"
+              :status="status"
+              @refresh="async () => await getQrCode()"
+              :value=qrcode
+              :icon="logo"
           />
           <ACheckbox class="qrlogin-card-auto-login">{{ t("login.autoLogin") }}</ACheckbox>
         </AFlex>
@@ -40,11 +42,49 @@ import {useI18n} from "vue-i18n";
 import BoxDog from "@/components/BoxDog/BoxDog.vue";
 import QRLoginFooter from "@/views/QRLogin/QRLoginFooter.vue";
 import {useRouter} from 'vue-router';
+import {generateClientId, generateQrCode} from "@/api/oauth";
+import {ref} from "vue";
+import logo from "@/assets/svgs/logo-schisandra.svg";
 
 const {t} = useI18n();
 
 const router = useRouter();
 
+const qrcode = ref<string>('');
+const status = ref<string>('loading');
+
+/**
+ *  获取client_id
+ */
+async function getClientId() {
+  const id: string | null = localStorage.getItem('client_id');
+  if (!id) {
+    const res: any = await generateClientId();
+    if (res.code === 0 && res.data) {
+      localStorage.setItem('client_id', res.data);
+    }
+  }
+}
+
+getClientId();
+
+/**
+ *  获取二维码
+ */
+async function getQrCode() {
+  const clientId: any = localStorage.getItem('client_id');
+  const res: any = await generateQrCode(clientId);
+  console.log(res);
+  if (res.code === 0 && res.data) {
+    status.value = 'active';
+    qrcode.value = res.data;
+    localStorage.setItem('qr_code', res.data);
+  } else {
+    status.value = 'expired';
+  }
+}
+
+getQrCode();
 </script>
 <style src="./index.scss" scoped>
 @import "@/assets/styles/global.scss";