Implemented some of registering function logic, need further discussion on api

src/components/Header.vue

@@ -3,7 +3,7 @@ import {UserFilled, SwitchButton} from "@element-plus/icons-vue";
 </script>
 
 <template>
-  <div class="bg-primary-500 min-w-full top-0 shadow-md flex-shrink-0">
+  <div class="bg-primary-500 min-w-full top-0 shadow-md flex-shrink-0 rounded-b-xl">
 
     <div class="mx-auto p-4">
       <div class="flex items-center justify-between">

src/components/Login.vue

@@ -5,22 +5,22 @@
   import {router} from '../router'
 
   // 输入框值
-  const account = ref('')
+  const tel = ref('')
   const password = ref('')
 
   // 用于前端阻拦不合法输入
   // const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-  const hasAccountInput = computed(() => account.value != '');
+  const hasTelInput = computed(() => tel.value != '');
   const hasPasswordInput = computed(() => password.value != '');
 
   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 accountLegal = computed(() => chinaMobileRegex.test(account.value));
+  const telLegal = computed(() => chinaMobileRegex.test(tel.value));
 
   // 密码有就行
   const passwordLegal = hasPasswordInput;
 
   const loginDisabled = computed(() => {
-    return !(accountLegal.value && passwordLegal.value);
+    return !(telLegal.value && passwordLegal.value);
   });
 
 
@@ -28,12 +28,14 @@
   // params
   //    phone: string
   //    password: string
+  // response
+  //    token: string
   async function handleLogin() {
 
     try {
       const response = await axios.post('/user/login', {
         params: {
-          phone: account.value,
+          phone: tel.value,
           password: password.value,
         }
       })
@@ -74,21 +76,15 @@
         <el-form class="space-y-4 md:space-y-6">
 
           <el-form-item>
-            <label v-if="!hasAccountInput" for="tel" class="inline-block mb-2 text-sm font-medium text-gray-900">
-              注册手机号
-            </label>
-            <label v-else-if="!accountLegal" 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 id="tel" type="tel" v-model="account"
+            <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 id="tel" type="tel" v-model="tel"
                    required
-                   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="">
+                   class="bg-gray-50 border border-gray-300 text-gray-900 focus:outline-primary-600 sm:text-sm rounded-lg block w-full p-2.5"
+                   :class="{'focus:outline-red-600':hasTelInput && !telLegal}"
+                   placeholder="请输入中国大陆手机号">
           </el-form-item>
 
           <el-form-item>

src/components/Register.vue

@@ -1,20 +1,62 @@
 <script setup lang="ts">
   import { ref, computed } from 'vue';
+  import axios from "axios";
+  import {router} from '../router'
 
-  const email = ref('')
+  const name = ref('')
   const tel = 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 telLegal = computed(() => chinaMobileRegex.test(tel.value));
+  const isPasswordIdentical = computed(() => password.value == confirmPassword.value);
+
+
   const registerDisabled = computed(() => {
-    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}$/;
 
-    return !(emailRegex.test(email.value) && chinaMobileRegex.test(tel.value) && password.value.trim() !== '' && (password.value == confirmPassword.value))
+    return !(telLegal.value && hasPasswordInput.value && isPasswordIdentical.value)
   });
 
-  function handleRegister() {
-    console.log(email.value)
+  // 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', {
+        name: name.value,
+        phone: tel.value,
+        password: password.value,
+        time: new Date().getTime()
+      }, {
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+
+      return res;
+
+    } catch (e) {
+      console.log(e)
+    }
+
   }
 </script>
 
@@ -37,19 +79,32 @@
         <el-form class="space-y-4 md:space-y-6">
 
           <el-form-item>
-            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">邮箱</label>
-            <input id="email" type="email"
-                   v-model="email"
+            <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="name@company.com">
+                   placeholder="小明">
           </el-form-item>
 
           <el-form-item>
-            <label for="tel" class="block mb-2 text-sm font-medium text-gray-900">手机号</label>
+<!--            <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"
-                   placeholder="+86•••••••••••">
+                   :class="{'focus:outline-red-600':hasTelInput && !telLegal}"
+                   placeholder="请输入中国大陆手机号">
           </el-form-item>
 
           <el-form-item>
@@ -61,10 +116,14 @@
           </el-form-item>
 
           <el-form-item>
-            <label class="block mb-2 text-sm font-medium text-gray-900">确认密码</label>
+            <label v-if="!hasConfirmPasswordInput" class="inline-block mb-2 text-sm font-medium text-gray-900">确认密码</label>
+            <label v-else-if="!isPasswordIdentical" class="inline-block mb-2 text-sm font-medium text-red-600">密码不一致</label>
+            <label v-else class="inline-block mb-2 text-sm font-medium text-gray-900">确认密码</label>
+
             <input type="password" id="confirm-password"
                    v-model="confirmPassword"
                    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': hasConfirmPasswordInput && !isPasswordIdentical}"
                    placeholder="••••••••">
           </el-form-item>
 

src/style.css

@@ -12,6 +12,7 @@ html, body {
   margin: 0;
   padding: 0;
   height: 100%;
+  flex: auto;
 }
 
 #app {