Improved register UI, implemented axios requests for both register and dashboard

components.d.ts

@@ -11,6 +11,7 @@ declare module 'vue' {
     ElAside: typeof import('element-plus/es')['ElAside']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElCard: typeof import('element-plus/es')['ElCard']
+    ElCol: typeof import('element-plus/es')['ElCol']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
     ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
@@ -18,6 +19,7 @@ declare module 'vue' {
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElMain: typeof import('element-plus/es')['ElMain']
+    ElRow: typeof import('element-plus/es')['ElRow']
     Footer: typeof import('./src/components/Footer.vue')['default']
     Header: typeof import('./src/components/Header.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']

src/components/Dashboard.vue

@@ -1,21 +1,32 @@
 <script setup lang="ts">
   import { ref } from 'vue';
+  import {onMounted} from "vue";
+  import axios from 'axios';
 
   const name = ref('haha')
+  const tel = ref('')
+  const address = ref('这里做的时候本来想放个表格的，结果发现一个用户其实只有一个地址，但这个已经改成了一个这么大的布局所以先这样吧')
 
-  const address = ref('江苏省南京市栖霞区仙林大道163号')
+  const isCustomer = true
+  const isStaff = ''
 
-</script>
+  onMounted(() => {
+    const res = axios.get('/user')
 
-<template>
+    name.value = res.data.name
+    tel.value = res.data.phone
+    address.value = res.data.address
 
-<!--  <div class="full-height flex items-center justify-center p-8">-->
-<!--    <el-card class="w-full h-full bg-white rounded-lg shadow-md md:mt-0 sm:max-w-md xl:p-0">-->
+    const isCustomer = (res.data.role == 'CUSTOMER')
+    const isStaff = (res.data.role == 'STAFF')
+  })
 
-<!--    </el-card>-->
-<!--  </div>-->
-  <div id="updateProductModal" tabindex="-1" class="hidden overflow-y-auto overflow-x-hidden absolute justify-center items-center w-full h-full">
+</script>
+
+<template>
 
+  <div id="updateSuccess" class="hidden overflow-y-auto overflow-x-hidden absolute justify-center items-center w-full h-full">
+    这个是一个弹窗，还没有写好
   </div>
 
   <div class="flex items-center justify-center p-8 h-full overflow-y-clip space-x-5">
@@ -26,7 +37,11 @@
           <span class="text-3xl"> 头像 </span>
         </el-avatar>
 
-        <label class="w-2/5 px-3 py-2 text-center bg-primary-400 rounded-3xl text-white">顾客</label>
+        <label v-if="isCustomer"
+            class="w-2/5 px-3 py-2 text-center bg-primary-400 rounded-3xl text-white">顾客</label>
+        <label v-else-if="isStaff"
+               class="w-3/5 px-3 py-2 text-center bg-amber-500 rounded-3xl text-white">工作人员</label>
+
       </div>
 
 
@@ -116,7 +131,7 @@
         </div>
 
         <form class="m-3">
-          <div class="grid gap-6 mb-6 grid-cols-3 mx-4">
+          <div class="grid gap-6 mb-6 grid-cols-2 mx-4">
             <div>
               <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">昵称</label>
               <input type="text" id="name" v-model="name"
@@ -125,13 +140,14 @@
 
             <div>
               <label for="phone" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">手机号</label>
-              <input type="tel" id="phone" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+              <input type="tel" id="phone" v-model="tel"
+                     class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
             </div>
 
-            <div>
-              <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">邮箱</label>
-              <input type="email" id="email" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-            </div>
+<!--            <div>-->
+<!--              <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">邮箱</label>-->
+<!--              <input type="email" id="email" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">-->
+<!--            </div>-->
           </div>
         </form>
       </div>

src/components/Login.vue

@@ -54,6 +54,7 @@
     // router.push({ path: "/home" })
   }
 
+
 </script>
 
 

src/components/Register.vue

@@ -3,18 +3,24 @@
   import axios from "axios";
   import {router} from '../router'
 
+
   const name = ref('')
+  const identity = ref('')
   const tel = ref('')
+  const address = ref('')
   const password = ref('')
   const confirmPassword = ref('')
 
 
+
   // const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
   const chinaMobileRegex = /^1(3[0-9]|4[579]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[189])\d{8}$/;
 
   const hasTelInput = computed(() => tel.value != '');
   const hasPasswordInput = computed(() => password.value != '');
   const hasConfirmPasswordInput = computed(() => confirmPassword.value != '');
+  const hasAddressInput = computed(() => address.value != '');
+  const hasIdentityChosen = computed(() => identity.value != '')
 
 
   const telLegal = computed(() => chinaMobileRegex.test(tel.value));
@@ -22,10 +28,10 @@
 
 
   const registerDisabled = computed(() => {
-
-    return !(telLegal.value && hasPasswordInput.value && isPasswordIdentical.value)
+    return !(telLegal.value && hasPasswordInput.value && isPasswordIdentical.value && hasAddressInput.value && hasIdentityChosen.value)
   });
 
+
   // POST /api/user/register
   // body
   //    id
@@ -39,12 +45,15 @@
   // 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,
-        time: new Date().getTime()
+        address: address.value,
+        createTime: new Date().getTime()
       }, {
         headers: {
           'Content-Type': 'application/json'
@@ -56,8 +65,9 @@
     } catch (e) {
       console.log(e)
     }
-
   }
+
+
 </script>
 
 <template>
@@ -67,7 +77,7 @@
       Blue Whale Shopping Online
     </span>
 
-    <el-card class="w-full bg-white rounded-lg shadow-md md:mt-0 sm:max-w-md xl:p-0">
+    <el-card class="w-2/3 bg-white rounded-lg shadow-md md:mt-0  xl:p-0">
 
 
       <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
@@ -76,36 +86,80 @@
           创建一个新的账户
         </h1>
 
-        <el-form class="space-y-4 md:space-y-6">
+        <el-form class="space-y-6">
+
+          <el-row class="flex flex-row justify-between">
+
+            <el-col :span="15">
+              <el-form-item>
+                <label for="name" class="block mb-2 text-sm font-medium text-gray-900">昵称</label>
+                <input id="name"
+                       v-model="name"
+                       class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
+                       placeholder="小明">
+              </el-form-item>
+            </el-col>
+
+
+            <el-col :span="8">
+              <el-form-item>
+                <label for="identity" class="block mb-2 text-sm font-medium text-gray-900">身份</label>
+                <select id="identity"
+                        v-model="identity"
+                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                  <option disabled value="" selected>请选择</option>
+                  <option value="CUSTOMER">顾客</option>
+                  <option value="STAFF">商家</option>
+                </select>
+              </el-form-item>
+            </el-col>
+
+          </el-row>
+
+
+          <el-row class="flex justify-between">
+            <el-col :span="8">
+              <el-form-item>
+                <!--            <label for="tel" class="block mb-2 text-sm font-medium text-gray-900">手机号</label>-->
+
+                <label v-if="!hasTelInput" for="tel" class="inline-block mb-2 text-sm font-medium text-gray-900">
+                  注册手机号
+                </label>
+                <label v-else-if="!telLegal" for="tel"
+                       class="inline-block mb-2 font-medium text-red-500 text-sm">
+                  手机号不合法
+                </label>
+                <label v-else for="tel" class="inline-block mb-2 text-sm font-medium text-gray-900">
+                  注册手机号
+                </label>
+
+                <input type="tel" id="tel"
+                       v-model="tel"
+                       class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
+                       :class="{'focus:outline-red-600':hasTelInput && !telLegal}"
+                       placeholder="请输入中国大陆手机号">
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="15">
+              <el-form-item>
+                <!--            <label for="tel" class="block mb-2 text-sm font-medium text-gray-900">手机号</label>-->
+
+                <label for="address" class="inline-block mb-2 text-sm font-medium text-gray-900">
+                  地址
+                </label>
+
+                <input id="address"
+                       v-model="address"
+                       class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
+                       placeholder="请输入地址">
+              </el-form-item>
+            </el-col>
+
+          </el-row>
+
 
-          <el-form-item>
-            <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">昵称</label>
-            <input id="name"
-                   v-model="name"
-                   class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
-                   placeholder="小明">
-          </el-form-item>
 
-          <el-form-item>
-<!--            <label for="tel" class="block mb-2 text-sm font-medium text-gray-900">手机号</label>-->
-
-            <label v-if="!hasTelInput" for="tel" class="inline-block mb-2 text-sm font-medium text-gray-900">
-              注册手机号
-            </label>
-            <label v-else-if="!telLegal" for="tel"
-                   class="inline-block mb-2 font-medium text-red-500 text-sm">
-              手机号不合法
-            </label>
-            <label v-else for="tel" class="inline-block mb-2 text-sm font-medium text-gray-900">
-              注册手机号
-            </label>
-
-            <input type="tel" id="tel"
-                   v-model="tel"
-                   class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
-                   :class="{'focus:outline-red-600':hasTelInput && !telLegal}"
-                   placeholder="请输入中国大陆手机号">
-          </el-form-item>
 
           <el-form-item>
             <label for="password" class="block mb-2 text-sm font-medium text-gray-900">密码</label>