From 0a0b2fed2eb29f2ad20e8bde2aa018d64454a635 Mon Sep 17 00:00:00 2001
From: junleea <354425203@qq.com>
Date: Sat, 1 Jun 2024 18:00:07 +0800
Subject: [PATCH] =?UTF-8?q?login=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Login.vue | 252 ++++++++++++++++++++++----------------------
 1 file changed, 124 insertions(+), 128 deletions(-)

diff --git a/src/views/Login.vue b/src/views/Login.vue
index 2b83559..30da79a 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -87,63 +87,75 @@
   </el-row>
   <div>
     <div class="qrcode" ref="qrCodeUrl"></div>
-    <vue-qr :logoSrc="imageUrl" text="https://blog.csdn.net/weixin_42601136" :size="200"></vue-qr>
+    <vue-qr
+      :logoSrc="imageUrl"
+      text="https://blog.csdn.net/weixin_42601136"
+      :size="200"
+    ></vue-qr>
   </div>
 </template>
 
 <script setup>
-import { ref, inject } from "vue";
-import axios from "axios";
-import { getQRService, getUUIDService, loginService, registerService } from "@/api/user.js";
-import router from "@/router/index.js";
-import VueQr from 'vue-qr'
-const isLogin = ref(true);
-if (localStorage.getItem("token") !== null) {
-  router.push("/videoList");
-}
+import { ref, onMounted, inject } from "vue";  
+import axios from "axios";  
+import { getQRService, getUUIDService, loginService, registerService } from "@/api/user.js";  
+import router from "@/router/index.js";  
+import VueQr from 'vue-qr'; // 确保你已经注册了这个组件 
 
+export default {
+  components: {  
+    VueQr, // 注册 VueQr 组件  
+  },
+  setup() {
+    const isLogin = ref(true);
+    const globalData = inject("globalData");
+    var uuid = "";
+    //表单数据
+    var loginData = ref({
+      username: "",
+      email: "lijun.lj@foxmail.com",
+      password: "",
+      ip:"",
+    });l
+    const registerData = ref({
+      username: "",
+      email: "",
+      password: "",
+      repassword: "",
+    });
 
-const globalData = inject("globalData");
+    //表单校验规则
+    const rules = {
+      password: [
+        { required: true, message: "请输入密码", trigger: "blur" },
+        {
+          min: 6,
+          max: 20,
+          message: "密码长度在 6 到 20 个字符",
+          trigger: "blur",
+        },
+      ],
+      username: [
+        { required: true, message: "请输入用户名", trigger: "blur" },
+        {
+          min: 5,
+          max: 20,
+          message: "用户名长度在 6 到 20 个字符",
+          trigger: "blur",
+        },
+      ],
+      email: [{}],
+    };
+    onMounted(() => {  
+      const token = localStorage.getItem("token");  
+      if (token !== null) {  
+        isLogin.value = true; // 更新登录状态  
+        router.push("/videoList"); // 跳转到视频列表页面  
+        // 你可以在这里获取 UID 并更新 uid.value  
+      }  
+    }); 
 
-var uuid = "";
-//表单数据
-var loginData = ref({
-  username: "",
-  email: "lijun.lj@foxmail.com",
-  password: "",
-  ip:"",
-});
-const registerData = ref({
-  username: "",
-  email: "",
-  password: "",
-  repassword: "",
-});
-
-//表单校验规则
-const rules = {
-  password: [
-    { required: true, message: "请输入密码", trigger: "blur" },
-    {
-      min: 6,
-      max: 20,
-      message: "密码长度在 6 到 20 个字符",
-      trigger: "blur",
-    },
-  ],
-  username: [
-    { required: true, message: "请输入用户名", trigger: "blur" },
-    {
-      min: 5,
-      max: 20,
-      message: "用户名长度在 6 到 20 个字符",
-      trigger: "blur",
-    },
-  ],
-  email: [{}],
-};
-
-const creatQrCode =async () =>{
+    const creatQrCode =async () =>{
       var qrcode = new qrcode(this.$refs.qrCodeUrl, {
         text: uuid, // 需要转换为二维码的内容
         width: 100,
@@ -154,56 +166,9 @@ const creatQrCode =async () =>{
       });
     };
 
-//登录接口调用
-const login = async () => {
-  //   let req = axios.create({
-  //     baseURL: "/api",
-  //     timeout: 5000,
-  //   });
-  //   await req
-  //     .post("/user/login", {
-  //       email: loginData.value.username,
-  //       password: loginData.value.password,
-  //     })
-  //     .then((response) => {
-  //       alert(response.data.message);
-  //       resp = response.data;
-  //       jwt = resp.data;
-  //       console.log(jwt);
-  //     })
-  //     .catch((error) => {
-  //       console.error(error);
-  //     });
-  let result = await loginService(loginData);
-  globalData.token = result.data;
-  localStorage.setItem("token", result.data.token);
-  localStorage.setItem("userId", result.data.id);
-  localStorage.setItem("username", result.data.username);
-  let now=new Date();
-  localStorage.setItem("end_time", now.setDate(now.getHours() + 12));//过期时间
-  //token.value= result.data;
-  router.push("/videoList");
-};
-
-const getUUID= async() => {
-      try {
-        const response = await getUUIDService({"device":"windows"});
-        uuid =response.data.toString();
-        let uid =uuid.toString();
-        console.log("uuid=",uuid);
-        await creatQrCode(uid);
-      } catch (error) {
-        console.error(error);
-      }
-    };
-
-const getQRStatus = async () => {
-  let result = await getQRService({"uuid":uuid});
-  if (result.code === 0) {
-    if(result.data==="0"){
-    }else if(result.data==="1"){
-      alert("等待确认");
-    }else{
+    //登录接口调用
+    const login = async () => {
+      let result = await loginService(loginData);
       globalData.token = result.data;
       localStorage.setItem("token", result.data.token);
       localStorage.setItem("userId", result.data.id);
@@ -212,38 +177,69 @@ const getQRStatus = async () => {
       localStorage.setItem("end_time", now.setDate(now.getHours() + 12));//过期时间
       //token.value= result.data;
       router.push("/videoList");
+    };
+    const getUUID= async() => {
+          try {
+            const response = await getUUIDService({"device":"windows"});
+            uuid =response.data.toString();
+            let uid =uuid.toString();
+            console.log("uuid=",uuid);
+            await creatQrCode(uid);
+          } catch (error) {
+            console.error(error);
+          }
+        };
+
+    const getQRStatus = async () => {
+      let result = await getQRService({"uuid":uuid});
+      if (result.code === 0) {
+        if(result.data==="0"){
+        }else if(result.data==="1"){
+          alert("等待确认");
+        }else{
+          globalData.token = result.data;
+          localStorage.setItem("token", result.data.token);
+          localStorage.setItem("userId", result.data.id);
+          localStorage.setItem("username", result.data.username);
+          let now=new Date();
+          localStorage.setItem("end_time", now.setDate(now.getHours() + 12));//过期时间
+          //token.value= result.data;
+          router.push("/videoList");
+        }
+
+      } else {
+        alert(result.message);
+      }
     }
 
-  } else {
-    alert(result.message);
-  }
-}
+    const  getIpClient= async() => {
+          try {
+            const response = await axios.get("https://ipinfo.io/json");
+            loginData.value.ip =response.data.ip;
+            localStorage.setItem("ip", response.data.ip);
+            localStorage.setItem("city", response.data.city);
+            // console.log("ip:",response.data.ip);
+            // console.log("login ip:",loginData.ip);
+            // console.log(response.data);
+            // console.log(loginData);
+          } catch (error) {
+            console.error(error);
+          }
+        };
 
-const  getIpClient= async() => {
-      try {
-        const response = await axios.get("https://ipinfo.io/json");
-        loginData.value.ip =response.data.ip;
-        localStorage.setItem("ip", response.data.ip);
-        localStorage.setItem("city", response.data.city);
-        // console.log("ip:",response.data.ip);
-        // console.log("login ip:",loginData.ip);
-        // console.log(response.data);
-        // console.log(loginData);
-      } catch (error) {
-        console.error(error);
+    getIpClient();
+    await getUUID();
+    getQRStatus();
+    setInterval("getQRStatus()","1000");//showLogin()函数名一定要带括号
+    const register = async () => {
+      let result = registerService(registerData.value);
+      if (result.code === 0) {
+        alert(result.message);
+      } else {
+        alert(result.message);
       }
     };
-
-getIpClient();
-await getUUID();
-getQRStatus();
-setInterval("getQRStatus()","1000");//showLogin()函数名一定要带括号
-const register = async () => {
-  let result = registerService(registerData.value);
-  if (result.code === 0) {
-    alert(result.message);
-  } else {
-    alert(result.message);
-  }
+  },
 };
+
 </script>