feat:完成登录页面+各种细节

Yi.BBS.Vue3/src/views/Login.vue

@@ -1,55 +1,74 @@
 <template>
-  <h2>  登录-欢迎</h2>
+    <div class="login-wrapper">
+        <h1>意社区-登录</h1>
+        <div class="login-form">
+            <div class="username form-item">
+                <span>使用邮箱或者手机号</span>
+                <input type="text" class="input-item" v-model="loginForm.userName">
+            </div>
+            <div class="password form-item">
+                <span>密码</span>
+                <input type="password" class="input-item" v-model="loginForm.password">
+            </div>
+            <button class="login-btn" @click="login">登 录</button>
+            <button class="login-btn" @click="guestlogin">游客临时登录</button>
+        </div>
+        <div class="divider">
+            <span class="line"></span>
+            <span class="divider-text">其他方式登录</span>
+            <span class="line"></span>
+        </div>
+        <div class="other-login-wrapper">
+            <div class="other-login-item">
+                <img src="@/assets/login_images/QQ.png" alt="">
+            </div>
+            <div class="other-login-item">
+                <img src="@/assets/login_images/WeChat.png" alt="">
+            </div>
+        </div>
+    </div>
+    <!-- <h2> 登录-欢迎</h2>
     <el-input v-model="loginForm.userName" placeholder="用户名" />
     <el-input v-model="loginForm.password" placeholder="密码" show-password />
-    <el-button class="login-btn" type="primary" @click="login" >登录</el-button>
+    <el-button class="login-btn" type="primary" @click="login">登录</el-button>
     <br>
-    <el-button class="login-btn" type="primary" @click="guestlogin" >游客临时登录</el-button>
+    <el-button class="login-btn" type="primary" @click="guestlogin">游客临时登录</el-button> -->
 </template>
 <script setup>
 import { reactive } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import useUserStore from '@/stores/user.js'
-const  userStore=useUserStore();
-const router=useRouter();
-const loginForm=reactive({
-    userName:"",
-    password:"",
-    uuid:"",
-    code:""
+const userStore = useUserStore();
+const router = useRouter();
+const route = useRoute();
+const loginForm = reactive({
+    userName: "",
+    password: "",
+    uuid: "",
+    code: ""
 })
-const guestlogin=async ()=>{
-    loginForm.userName="guest";
-    loginForm.password="123456"
+const guestlogin = async () => {
+    loginForm.userName = "guest";
+    loginForm.password = "123456"
     await userStore.login(loginForm);
-    router.push("/index")
-}
-const login=async ()=>{
-const response= await userStore.login(loginForm);
-console.log(response);
-if( response.status==200)
-{
-    router.push("/index")
-}
-else
-{
-    alert("登录失败")
-}
+    const redirect = route.query?.redirect ?? '/index'
+    router.push(redirect)
 }
+const login = async () => {
+    const response = await userStore.login(loginForm).catch((e) => {
+        loginForm.password = "";
+    });
+    if (response!=undefined) {
+        ElMessage({
+            message: `您好${loginForm.userName}，登录成功！`,
+            type: 'success',
+        })
 
+        const redirect = route.query?.redirect ?? '/index'
+        router.push(redirect)
+
+    }
+
+}
 </script>
-<style scoped>
-h2{
-    text-align: center;
-}
-.el-input
-{
-margin:0rem 0 0.5rem 0;
-
-}
-.login-btn
-{
-    width: 100%;
-    margin-bottom: 0.5rem;
-}
-</style>
+<style src="@/assets/styles/login.scss" scoped></style>