优化代码

src/views/HomeView.vue

@@ -1,30 +1,241 @@
 <template>
-  <div></div>
+  <div class="HomeView">
+    <div class="login">
+      <!-- 登录切换 -->
+      <div class="Switch">
+        <div class="Switch-content" @click="fuSWitch">
+          <img v-if="refSwitch" class="Switchimg" src="../assets/switchEmail.png" alt="" />
+          <img v-if="!refSwitch" class="Switchimg" src="../assets/switchvx.png" alt="" />
+        </div>
+      </div>
+      <!-- 标题 -->
+      <div v-if="!refSwitch" class="container">
+        <div class="title">欢迎登录</div>
+        <div class="striping"></div>
+        <div class="input-Email">
+          <img class="Emailimg" src="../assets/Email.png" alt="" />
+          <div class="vertical"></div>
+          <input
+            class="input-text"
+            v-model="refEmail"
+            placeholder="请输入邮箱"
+            placeholder-class="input-placeholder"
+            @input=""
+          />
+        </div>
+        <div class="input-Password">
+          <img class="Passwordimg" src="../assets/Password.png" alt="" />
+          <div class="vertical"></div>
+          <input
+            class="input-text"
+            v-model="refpassword"
+            placeholder="请输入密码"
+            type="password"
+            placeholder-class="input-placeholder"
+            @input=""
+          />
+        </div>
+        <div class="login-btn">登录</div>
+      </div>
+      <!-- 微信登录 -->
+      <div v-if="refSwitch" class="container">
+        <div class="title">微信小程序登录</div>
+        <div class="striping"></div>
+        <img class="qrcode" :src="Qrcode.qrcode" alt="">
+        <div class="qrcode-text">使用微信小程序扫描二维码登录</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import {
-  ref, // 响应式基础
-  watch, // 侦听器
-  onMounted, // 组件挂载完成后执行
-  onUpdated, // 组件更新后执行
-  onUnmounted, // 组件销毁前执行
-} from "vue";
-const refname = ref('');
+import { ref, watch, onMounted, onUnmounted } from "vue";
+import { getVxQrcode,getScanResult } from "@/api/account"; // 导入登录接口
+
+const refname = ref("");
+const refEmail = ref(""); // 邮箱
+const refpassword = ref(""); // 密码
+const refSwitch = ref(false); // 登录切换/true:微信登录/false:邮箱登录
+const Qrcode = ref(""); // 二维码
+
+// 登录切换
+let vxloginstatus;
+function fuSWitch() {
+  refSwitch.value = !refSwitch.value;
+  if (refSwitch.value) {
+    vxloginstatus =setInterval(checkLogin, 2000);
+  } else {
+      console.log("邮箱登录");
+      clearInterval(vxloginstatus);
+  }
+}
+
+// 验证邮箱地址
+function isValidEmail(email) {
+  // 邮箱地址的正则表达式
+  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+  return emailRegex.test(email);
+}
+
+// 获取二维码
+function fetchQrcode() {
+  getVxQrcode().then((res) => {
+    Qrcode.value = res;
+    console.log(res);
+  });
+}
+//查询微信扫码是否成功
+function checkLogin() {
+  getScanResult(Qrcode.value.uuid).then((res) => {
+    
+  });
+}
+  // 轮询查询登录状态
+let pollInterval;
+
 watch(refname, async (newQuestion, oldQuestion) => {
   // 变化后执行
 });
+
 onMounted(() => {
-  // 组件挂载完成后执行
-});
-onUpdated(() => {
-  // 组件更新后执行
+  // 初始化获取二维码
+  fetchQrcode();
+  // 设置每两分钟轮询一次
+  pollInterval = setInterval(fetchQrcode, 120000);
 });
+
 onUnmounted(() => {
-  // 组件销毁前执行
+  // 清除轮询
+  clearInterval(pollInterval);
+  clearInterval(vxloginstatus);
 });
 </script>
 
 <style scoped>
-/* 样式定义 */
-</style>
+.HomeView {
+  padding: 0;
+  margin: 0;
+  width: 100vw;
+  height: 100vh;
+  background-image: url(../assets/bg.png);
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.login {
+  width: 627px;
+  height: 514px;
+  background-image: linear-gradient(180deg, #dbf0f1, #ffffff);
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: 1px solid #4fcacd;
+}
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.Switch {
+  width: 100%;
+  height: 100px;
+  display: flex;
+  justify-content: end;
+}
+.Switch-content {
+  width: 110px;
+  height: 110px;
+  margin-top: 7px;
+  margin-right: 8px;
+}
+.Switchimg {
+  width: 100%;
+  height: 100%;
+}
+.title {
+  font-size: 36px;
+  color: #333333;
+  font-weight: bold;
+  margin-top: -31px;
+}
+.striping {
+  width: 68px;
+  height: 3px;
+  background-color: #0aaeab;
+  margin-top: 10px;
+}
+.qrcode{
+  width: 200px;
+  height: 200px;
+  margin-top: 50px;
+}
+.qrcode-text{
+  color: #333333;
+  font-size: 18px;
+  margin-top: 40px;
+}
+.input-Email {
+  width: 488px;
+  height: 71px;
+  border-radius: 4px;
+  background-color: #f4f4f4;
+  border: 1px solid #e4e4e4;
+  margin-top: 43px;
+  display: flex;
+  align-items: center;
+}
+.Emailimg {
+  width: 28.7px;
+  height: 22.2px;
+  margin-left: 25px;
+  margin-right: 25px;
+}
+.vertical {
+  width: 1px;
+  height: 38px;
+  background-color: #d9d9d9;
+  margin-right: 25px;
+}
+.input-text {
+  width: 360px;
+  height: 38px;
+  border: none;
+  background-color: #0aaeab00;
+  font-size: 20px;
+  color: #999999;
+}
+.input-text:focus {
+  outline: none; /* 移除默认蓝色边框 */
+}
+.input-Password {
+  width: 488px;
+  height: 71px;
+  border-radius: 4px;
+  background-color: #f4f4f4;
+  border: 1px solid #e4e4e4;
+  margin-top: 33px;
+  display: flex;
+  align-items: center;
+}
+.Passwordimg {
+  width: 26.4px;
+  height: 29.3px;
+  margin-left: 25px;
+  margin-right: 25px;
+}
+.login-btn {
+  width: 487px;
+  height: 70px;
+  border-radius: 4px;
+  background-image: linear-gradient(0deg, #4fcacd, #5fdbde);
+  margin-top: 38px;
+  color: #ffffff;
+  text-align: center;
+  line-height: 70px;
+  font-size: 30px;
+  font-weight: Medium;
+  box-shadow: 0px 5px 15px rgba(15, 101, 98, 0.43);
+}
+</style>

src/views/emailRegistration.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="email-registration">
+        
+
+    
+  </div>
+</template>
+
+<script setup>
+import {
+  ref, // 响应式基础
+  watch, // 侦听器
+  onMounted, // 组件挂载完成后执行
+  onUpdated, // 组件更新后执行
+  onUnmounted, // 组件销毁前执行
+} from "vue";
+const refname = ref('');
+watch(refname, async (newQuestion, oldQuestion) => {
+  // 变化后执行
+});
+onMounted(() => {
+  // 组件挂载完成后执行
+});
+onUpdated(() => {
+  // 组件更新后执行
+});
+onUnmounted(() => {
+  // 组件销毁前执行
+});
+</script>
+
+<style scoped>
+/* 样式定义 */
+</style>

src/views/hosts/Forum.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- 站内信 -->
   <div class="forum">
     <div v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
 

src/views/hosts/Message.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- 消息页面 -->
   <div class="message">
     <div style="height: 100%">
       <el-splitter>

src/views/hosts/Mine.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- 我的 -->
   <div class="mine">
   <div class="custom-style">
     <el-segmented v-model="segmentedvalue" :options="options" block>
@@ -13,10 +14,10 @@
     </el-segmented>
   </div>
   <div class="mine-content">
-    <PointsList v-if="segmentedvalue === 4" />
-    <PKRecord v-if="segmentedvalue === 3" />
-    <PKmessage v-if="segmentedvalue === 2" />
-    <AnchorLibrary v-if="segmentedvalue === 1" />
+    <PointsList v-show="segmentedvalue === 4" />
+    <PKRecord v-show="segmentedvalue === 3" />
+    <PKmessage v-show="segmentedvalue === 2" />
+    <AnchorLibrary v-show="segmentedvalue === 1" />
   </div>  
   </div>
 </template>

src/views/hosts/pk.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="pk">
-    <!--  -->
+    <!-- pK页面 -->
     <div class="el-scrollbar__wrap">
       <el-splitter>
         <el-splitter-panel collapsible>