登录测试

src/store/user.js

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import { reactive } from 'vue'
 import { setToken } from '@/utils/auth'
 import { smsLogin } from '@/api/common/index'
+import { useRouter } from 'vue-router'
 
 export const userLocaleStore = defineStore('user',
   () => {
@@ -15,6 +16,7 @@ export const userLocaleStore = defineStore('user',
           setToken(data.accessToken)
           userInfo = data
           localStorage.setItem('expiresTime', data.expiresTime) // token过期时间
+          useRouter().push('/home')
           resolve()
         }).catch(err => { reject(err) })
       })

src/views/login/components/password.vue

@@ -1,68 +0,0 @@
-<template>
-  <v-form @submit.prevent>
-    <v-text-field
-      v-model="loginData.query.username"
-      placeholder="请输入账户" 
-      color="#00897B" 
-      variant="outlined" 
-      density="compact" 
-      prepend-inner-icon="mdi-account-outline" 
-      :rules="[v=> !!v || '请输入账户']"
-    ></v-text-field>
-    <v-text-field
-      v-model="loginData.query.passwod"
-      placeholder="请输入密码" 
-      variant="outlined" 
-      density="compact"
-      color="#00897B"
-      prepend-inner-icon="mdi-lock-outline" 
-      :append-inner-icon="passwordType ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
-      :type="passwordType ? 'text' : 'password'"
-      :rules="[v=> !!v || '请填写密码']"
-      @click:append-inner="passwordType = !passwordType"
-    ></v-text-field>
-  </v-form>
-  <!-- <m-form ref="form" :items="formItems"></m-form> -->
-</template>
-
-<script setup>
-// import MForm from '@/components/Form/index'
-import { ref, reactive } from 'vue'
-defineOptions({ name: 'passowrd-form' })
-const passwordType = ref(false)
-
-const loginData = reactive({
-  query: {
-    username: '',
-    passwod: ''
-  }
-})
-// const formItems = ref({
-//   options: [
-//     {
-//       type: 'number',
-//       key: 'username',
-//       value: null,
-//       placeholder: '请输入账户',
-//       width: 289,
-//       color: '#00897B',
-//       prependInnerIcon: "mdi-account-outline" ,
-//       rules: [v => !!v || '请输入账户']
-//     },
-//     {
-//       type: 'number',
-//       key: 'password',
-//       width: 289,
-//       value: null,
-//       color: '#00897B',
-//       placeholder: '请填写密码',
-//       prependInnerIcon: 'mdi-lock-outline',
-//       appendIcon: 'mdi-eye-off-outline',
-//       rules: [v => !!v || '请填写密码'],
-//       clickAppendInner: handleAppendInnerIcon
-//     }
-//   ]
-// })
-// const handleAppendInnerIcon = () => {
-// }
-</script>

src/views/login/components/passwordPage.vue

@@ -0,0 +1,71 @@
+<template>
+  <v-form ref="passwordForm" @submit.prevent>
+    <v-text-field v-model="loginData.phone" placeholder="请输入手机号" color="#00897B" variant="outlined" density="compact" :rules="phoneRules" validate-on="input">
+        <template v-slot:prepend-inner>
+          <span class="d-flex">
+            <v-icon icon="mdi-cellphone" size="20"></v-icon>
+            <span class="d-flex" id="menu-activator">
+              <span class="phone-number">{{ currentArea }}</span>
+              <v-icon size="20">mdi-chevron-down</v-icon>
+            </span>
+            <v-menu activator="#menu-activator">
+              <v-list>
+                <v-list-item v-for="(item, index) in items" :key="index" :value="index" @click="handleChangeCurrentArea(item)">
+                  <v-list-item-title>{{ item.label }}</v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </span>
+        </template>
+      </v-text-field>
+    <v-text-field
+      v-model="loginData.password"
+      placeholder="请输入密码" 
+      variant="outlined" 
+      density="compact"
+      color="#00897B"
+      prepend-inner-icon="mdi-lock-outline" 
+      :append-inner-icon="passwordType ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
+      :type="passwordType ? 'text' : 'password'"
+      :rules="[v=> !!v || '请填写密码']"
+      @click:append-inner="passwordType = !passwordType"
+    ></v-text-field>
+  </v-form>
+</template>
+
+<script setup name="passwordPage">
+import { ref, reactive } from 'vue'
+defineOptions({ name: 'password-form' })
+const passwordType = ref(false)
+
+const phoneRules = ref([
+  value => {
+    if (value) return true
+    return '请输入手机号'
+  },
+  value => {
+    if (value?.length <= 11 && /^1[3456789]\d{9}$/.test(value)) return true
+    return '请输入正确的手机号码'
+  }
+])
+
+// 手机号区域
+const currentArea = ref('0086')
+const items = [
+  { label: '中国大陆-0086', value: '0086' }
+]
+const handleChangeCurrentArea = (e) => {
+  currentArea.value = e.value
+}
+
+const loginData = reactive({
+  phone: '13229740091',
+  password: ''
+})
+
+const passwordForm = ref()
+defineExpose({
+  loginData,
+  passwordForm
+})
+</script>

src/views/login/components/phone.vue → src/views/login/components/phonePage.vue

@@ -30,11 +30,10 @@
   </div>
 </template>
 
-<script setup>
+<script setup name="phoneIndex">
 import { ref, reactive, defineExpose } from 'vue'
 import { setCodeTime } from '@/utils/code'
 import { sendSmsCode } from '@/api/common/index'
-defineOptions({ name: 'phone-index' })
 
 const phoneRules = ref([
   value => {
@@ -115,16 +114,9 @@ const loginData = reactive({
 })
 
 const phoneForm = ref()
-// const handleValidate = async () => {
-//   const { valid } = await phoneForm.value.validate()
-//   console.log(valid, 'valid')
-//   return valid
-// }
-
 
 defineExpose({
   loginData, 
-  // handleValidate,
   phoneForm
 })
 </script>

src/views/login/index.vue

@@ -49,8 +49,8 @@
 
 <script setup>
 import { ref } from 'vue'
-import passwordFrom from './components/password.vue'
-import phoneFrom from './components/phone.vue'
+import passwordFrom from './components/passwordPage.vue'
+import phoneFrom from './components/phonePage.vue'
 import qrCode from './components/qrCode.vue'
 import { userLocaleStore } from '@/store/user'
 import { useRouter } from 'vue-router'
@@ -76,6 +76,8 @@ const handleLogin = async () => {
   loginLoading.value = true
   try {
     await userStore.handleLogin(phoneRef.value.loginData)
+  } catch (error) {
+    console.log(error, 'error-login')
   } finally {
     loginLoading.value = false
   }