feat:新增QQ登录弹窗

Yi.Bbs.Vue3/src/views/login/index.vue

@@ -139,7 +139,7 @@
             <div>其他方式登录</div>
           </div>
           <div class="icon-list">
-            <div class="icon">
+            <div class="icon" @click="handleQQLogin">
               <img src="@/assets/login_images/QQ.png" alt="" />
             </div>
             <div class="icon">
@@ -302,6 +302,14 @@ onMounted(async () => {
 const handleContact = () => {
   router.push("/contact");
 };
+
+const handleQQLogin = () => {
+  window.open(
+    "https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101951505&redirect_uri=https://ccnetcore.com/qq&state=true&scope=get_user_info",
+    undefined,
+    "width=500,height=500,left=50,top=50"
+  );
+};
 </script>
 <style scoped lang="scss">
 .login {
@@ -425,6 +433,7 @@ const handleContact = () => {
           display: flex;
           justify-content: center;
           .icon {
+            cursor: pointer;
             width: 25px;
             height: 25px;
             margin: 0 10px;

Yi.Bbs.Vue3/src/views/qqAuth/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="message">{{ message }}</div>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+
+const code = ref(route.query.code);
+
+const message = ref("");
+watch(
+  () => code.value,
+  (val) => {
+    if (val) {
+      message.value = "授权成功";
+      window.close();
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<style lang="scss">
+.message {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  font-size: 20px;
+}
+</style>