完善登录注册逻辑和弹窗

src/api/user.ts

@@ -1,7 +1,7 @@
 import {axios} from '../utils/request'
 import {USER_MODULE} from './_prefix'
 
-// 上传文件
+// 用户登录
 export const userLogin = payload => {
     return axios.post(`${USER_MODULE}/login`,null, {params: payload})
         .then(res => {
@@ -12,3 +12,16 @@ export const userLogin = payload => {
             }
         })
 }
+
+
+export const userRegister = payload => {
+    return axios.post(`${USER_MODULE}/register`, payload,
+                    {headers: {'Content-Type': 'application/json'}})
+        .then(res => {
+            if(res.code == '400'){
+                throw new Error('注册失败!')
+            } else {
+                return res
+            }
+        })
+}

src/components/Header.vue

@@ -1,9 +1,32 @@
 <script setup lang="ts">
 import {CirclePlus, UserFilled, SwitchButton} from "@element-plus/icons-vue";
 import {ref} from 'vue';
+import {router} from '../router'
 
 const searchContent = ref('')
 
+function logout() {
+  ElMessageBox.confirm(
+      '是否要退出登录？',
+      '提示',
+      {
+        customClass: "customDialog",
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: "warning",
+        showClose: false,
+        roundButton: true,
+        center: true
+      }
+  ).then(() => {
+    //todo: 清理掉饼干
+    router.push({path: "/login"})
+  }).catch(() => {
+    // do nothing
+  })
+}
+
+
 function search() {
   //todo: search
 
@@ -56,9 +79,9 @@ function search() {
             <el-icon @click="navigate" :size="30" color="white" ><UserFilled /></el-icon>
           </router-link>
 
-          <router-link to="/" v-slot="{navigate}">
-            <el-icon @click="navigate" :size="30" color="white" ><SwitchButton /></el-icon>
-          </router-link>
+          <a @click="logout" class="hover:cursor-pointer">
+            <el-icon :size="30" color="white" ><SwitchButton /></el-icon>
+          </a>
 
 
         </div>
@@ -68,5 +91,13 @@ function search() {
   </div>
 </template>
 
+<style>
+
+.customDialog {
+  @apply w-1/4 space-y-5 text-4xl font-semibold rounded-2xl pb-5 pt-2
+}
+
+</style>
+
 <style scoped>
 </style>

src/components/Login.vue

@@ -24,13 +24,6 @@
     return !(telLegal.value && passwordLegal.value);
   });
 
-
-  // POST /api/user/login
-  // params
-  //    phone: string
-  //    password: string
-  // response
-  //    token: string
   async function handleLogin() {
     const payload = {
       phone: tel.value,
@@ -48,7 +41,7 @@
           router.push({ path: "/home" })
         })
         .catch(e => {
-
+          console.log(e.message)
           ElMessageBox.alert(
               e.message,
               '错误提示',
@@ -61,13 +54,9 @@
                 center: true
               }
           ).then(() => {
-
             // 清空用户密码
             password.value = ''
           })
-
-
-          console.log(e.message)
         })
   }
 
@@ -148,7 +137,7 @@
 <style>
 
 .customDialog {
-  @apply w-1/4 space-y-5 text-4xl font-semibold rounded-2xl pb-5
+  @apply w-1/4 space-y-5 text-4xl font-semibold rounded-2xl pb-5 pt-2
 }
 
 </style>

src/components/Register.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
   import { ref, computed } from 'vue';
-  import axios from "axios";
   import {router} from '../router'
+  import {userRegister} from "../api/user.ts";
+
 
 
   const name = ref('')
@@ -32,42 +33,49 @@
   });
 
 
-  // POST /api/user/register
-  // body
-  //    id
-  //    role
-  //    name
-  //    phone
-  //    password
-  //    storeid
-  //    address
-  //    time
-  // response
-  //    success: boolean
   async function handleRegister() {
-
-    try{
-      const res = axios.post('/user/register', {
-        role: identity.value,
-        name: name.value,
-        phone: tel.value,
-        password: password.value,
-        address: address.value,
-        createTime: new Date().getTime()
-      }, {
-        headers: {
-          'Content-Type': 'application/json'
-        }
-      })
-
-      //todo: 弹窗提示一下成功
-      // 路由跳转
-      router.push({ path: "/login" })
-
-    } catch (e) {
-      //todo: 弹窗提示一下错误
-      console.log(e)
+    const payload = {
+      role: identity.value,
+      name: name.value,
+      phone: tel.value,
+      password: password.value,
+      address: address.value,
+      createTime: new Date().getTime()
     }
+
+    userRegister(payload)
+        .then(res => {
+          ElMessageBox.alert(
+              `${name.value}，感谢您的注册！`,
+              '注册成功',
+              {
+                customClass: "customDialog",
+                confirmButtonText: '跳转到登录',
+                type: "success",
+                showClose: false,
+                roundButton: true,
+                center: true
+              }
+          ).then(() => {
+            // 跳转去登录
+            router.push({ path: "/login" })
+          })
+        })
+        .catch(e => {
+          console.log(e)
+          ElMessageBox.alert(
+              e.message,
+              '错误提示',
+              {
+                customClass: "customDialog",
+                confirmButtonText: '好的',
+                type: "error",
+                showClose: false,
+                roundButton: true,
+                center: true
+              }
+          )
+        })
   }
 
 
@@ -227,6 +235,15 @@
   </div>
 </template>
 
+<style>
+
+.customDialog {
+  @apply w-1/4 space-y-5 text-4xl font-semibold rounded-2xl pb-5 pt-2
+}
+
+</style>
+
+
 <style scoped>
 
 </style>