refactor(auth): 重构登录模块并优化验证码功能

- 修改 token 在 codeAuthStore 中的名称，从 token 改为 codeToken
- 优化验证码发送逻辑，增加错误处理和加载状态管理
- 调整页面布局和样式，提高用户体验
- 修复了一些小的 UI 问题，例如输入框聚焦状态和倒计时显示

app/api-collect-code/http.js

@@ -9,7 +9,7 @@ let http
 // HTTP 状态码映射 - 使用i18n国际化
 export function setupHttp() {
   if (http) return http
- const {token}=  codeAuthStore()
+ const {codeToken}=  codeAuthStore()
   const config = useRuntimeConfig()
   const baseURL = config.public.NUXT_PUBLIC_API_COLLECT_CODE
   const router = useRouter()
@@ -43,7 +43,7 @@ export function setupHttp() {
       // 添加 token
       options.headers = {
         ...options.headers,
-        Authorization: token.value,
+        Authorization: codeToken.value,
         'accept-language': i18n.locale.value
       }
 

app/pages/collectCode/login/index.vue

@@ -8,7 +8,7 @@ import {message} from '@/components/x-message/useMessage.js'
 import FingerprintJS from '@fingerprintjs/fingerprintjs'
 import {checkPhone, mobileLogin, userSend} from "@/api-collect-code/auth/index.js";
 
-const {userInfo, token, fingerprint} = codeAuthStore()
+const {userInfo, codeToken, fingerprint} = codeAuthStore()
 const router = useRouter();
 const route = useRoute();
 const {locale} = useI18n()
@@ -49,27 +49,31 @@ const checkFingerprint = async () => {
     await router.push('/collectCode/mine')
   }
 }
+const codeInput = ref(null)
 const isFocused = ref(false)
 checkFingerprint()
 const vanSwipeRef = ref(null)
 const getCode = async () => {
   loadingRef.value.loading1 = true
-  const res = await checkPhone({
+  try {
-    tel: phoneNum.value,
+    const res = await checkPhone({
-  })
+      tel: phoneNum.value,
-  loadingRef.value.loading1 = false
+    })
-  if (res.status === 0) {
-    const res = await userSend({telNum: phoneNum.value, zone: '+86'})
     if (res.status === 0) {
-      pane.value = 1
+      const sendRes = await userSend({telNum: phoneNum.value, zone: '+86'})
-      vanSwipeRef.value?.swipeTo(pane.value)
+      startCountdown()
-      nextTick(()=>{
+        pane.value = 1
-    codeInput.value.focus()
+        await nextTick()
-  })
+        vanSwipeRef.value?.swipeTo(pane.value)
+        nextTick(() => {
+          codeInput.value?.focus()
+        })
     }
+  } catch (error) {
+    console.error('获取验证码失败:', error)
+  } finally {
+    loadingRef.value.loading1 = false
   }
-
-
 }
 const changeToPwd = async () => {
   loginType.value = loginType.value === 0 ? 1 : 0
@@ -88,7 +92,7 @@ const goLogin = async () => {
   })
   if (res.status === 0) {
     userInfo.value = res.data.accountInfo
-    token.value = res.data.token
+    codeToken.value = res.data.token
     fingerprint.value = await getFingerprint()
 
     await router.push('/collectCode/mine');
@@ -101,113 +105,126 @@ const showPassword = ref(false)
 const togglePasswordVisibility = () => {
   showPassword.value = !showPassword.value
 }
+onMounted(()=>{
+  // vanSwipeRef.value?.swipeTo(1)
+})
 </script>
 
 <template>
-  <div class="h-[100vh] w-[100vw] bg-[url('@/static/images/asdfsdd.png')] bg-cover px-[31px] pt-[86px]">
+  <div class="grow-1 w-[100vw] bg-[url('@/static/images/asdfsdd.png')] bg-bottom bg-cover px-[31px] pt-[86px]">
     <div class="w-full flex justify-center mb-[100px] flex-col items-center">
       <img class="h-[105px] w-[189px]" src="@/static/images/ghfggff.png" alt="">
       <img class="h-[29px] w-[108px]" src="@/static/images/qrcodetext.png" alt="">
     </div>
     <van-swipe ref="vanSwipeRef" :show-indicators="false" :touchable="false" :lazy-render="true" :loop="false">
       <van-swipe-item>
-        <div v-show="pane === 0">
+        <div v-if="pane === 0">
-          <div class="">
+          <div>
-            <div class="border-b-[1.7px] mt-[8px]">
+            <div class="">
-              <van-field v-model="phoneNum" clearable :placeholder="$t('collectCode.login.phoneNumberPlaceholder')">
+              <div class="border-b-[1.7px] mt-[8px]">
-                <template #label>
+                <van-field v-model="phoneNum" clearable :placeholder="$t('collectCode.login.phoneNumberPlaceholder')">
-                  <div class="text-[16px] text-[#1A1A1A] flex align-center justify-start">
+                  <template #label>
-                    {{ $t('collectCode.login.phoneNumber') }}
+                    <div class="text-[16px] text-[#1A1A1A] flex align-center justify-start">
-                  </div>
+                      {{ $t('collectCode.login.phoneNumber') }}
-                </template>
+                    </div>
-              </van-field>
+                  </template>
-            </div>
+                </van-field>
-            <div class="border-b-[1.7px] mt-[8px]" v-show="loginType === 1">
+              </div>
-              <van-field
+              <div class="border-b-[1.7px] mt-[8px]" v-if="loginType === 1">
-                  v-model="password"
+                <van-field
-                  :type="showPassword ? 'text' : 'password'"
+                    v-model="password"
-                  clearable
+                    :type="showPassword ? 'text' : 'password'"
-                  :placeholder="$t('collectCode.login.passwordPlaceholder')"
+                    clearable
-              >
+                    :placeholder="$t('collectCode.login.passwordPlaceholder')"
-                <template #label>
+                >
-                  <div class="text-[16px] text-[#1A1A1A] flex align-center justify-start">
+                  <template #label>
-                    {{ $t('collectCode.login.password') }}
+                    <div class="text-[16px] text-[#1A1A1A] flex align-center justify-start">
-                  </div>
+                      {{ $t('collectCode.login.password') }}
-                </template>
+                    </div>
-                <template #button>
+                  </template>
-                  <div class="flex justify-center items-center">
+                  <template #button>
-                    <van-icon
+                    <div class="flex justify-center items-center">
-                        size="20"
+                      <van-icon
-                        :name="showPassword ? 'eye-o' : 'closed-eye'"
+                          size="20"
-                        @click="togglePasswordVisibility"
+                          :name="showPassword ? 'eye-o' : 'closed-eye'"
-                    />
+                          @click="togglePasswordVisibility"
-                  </div>
+                      />
-                </template>
+                    </div>
-              </van-field>
+                  </template>
-            </div>
+                </van-field>
-            <div class="flex justify-end mt-[10px]">
+              </div>
-              <div class="text-[14px] text-[#2B53AC]" @click="changeToPwd">
+              <div class="flex justify-end mt-[10px]">
-                {{ loginType === 0 ? $t('collectCode.login.passwordLogin') : $t('collectCode.login.codeLogin') }}
+                <div class="text-[14px] text-[#2B53AC]" @click="changeToPwd">
+                  {{ loginType === 0 ? $t('collectCode.login.passwordLogin') : $t('collectCode.login.codeLogin') }}
+                </div>
               </div>
             </div>
-            <div/>
+            <div class="mt-[55px]">
-          </div>
+              <div v-if="loginType === 0">
-          <div class="mt-[55px]">
+                <van-button :loading="loadingRef.loading1" v-if="phoneNum" :loading-text="$t('collectCode.login.getCode')"
-            <div v-if="loginType === 0">
+                            type="primary" block style="height: 48px" @click="getCode">{{
-              <van-button :loading="loadingRef.loading1" v-if="phoneNum" :loading-text="$t('collectCode.login.getCode')"
+                    $t('collectCode.login.getCode')
-                          type="primary" block style="height: 48px" @click="getCode">{{ $t('collectCode.login.getCode') }}
+                  }}
-              </van-button>
+                </van-button>
-              <van-button v-else type="primary" color="#D3D3D3" block style="height: 48px">{{ $t('collectCode.login.getCode') }}</van-button>
+                <van-button v-else type="primary" color="#D3D3D3" block style="height: 48px">
-            </div>
+                  {{ $t('collectCode.login.getCode') }}
-            <div v-else>
+                </van-button>
-              <van-button type="primary" v-if="password" block :loading="loadingRef.loading2" :loading-text="$t('collectCode.login.login')"
+              </div>
-                          style="height: 48px;margin-top:10px" @click="goLogin">{{ $t('collectCode.login.login') }}
+              <div v-else>
-              </van-button>
+                <van-button type="primary" v-if="password" block :loading="loadingRef.loading2"
-              <van-button v-else type="primary" color="#D3D3D3" block style="height: 48px">{{ $t('collectCode.login.login') }}</van-button>
+                            :loading-text="$t('collectCode.login.login')"
+                            style="height: 48px;margin-top:10px" @click="goLogin">{{ $t('collectCode.login.login') }}
+                </van-button>
+                <van-button v-else type="primary" color="#D3D3D3" block style="height: 48px">
+                  {{ $t('collectCode.login.login') }}
+                </van-button>
+              </div>
             </div>
           </div>
         </div>
       </van-swipe-item>
       <van-swipe-item>
-        <div v-show="pane === 1">
+        <div v-if="pane == 1">
-          <div class="flex mb-[16px]">
+          <div>
-            <div class="text-[16px] text-[#BDBDBD] mr-[10px]">{{ $t('collectCode.login.hasSendTo') }}</div>
+            <div class="flex mb-[16px]">
-            <div class="text-[16px] text-[#000]">+86 {{ phoneNum }}</div>
+              <div class="text-[16px] text-[#BDBDBD] mr-[10px]">{{ $t('collectCode.login.hasSendTo') }}</div>
-          </div>
+              <div class="text-[16px] text-[#000]">+86 {{ phoneNum }}</div>
-          <div class="relative">
-        <van-password-input 
-  :value="code" 
-  :gutter="10" 
-  :mask="false" 
-  :focused="isFocused"
-/>
-<input 
-  v-model="code" 
-  type="tel" 
-  maxlength="6" 
-   ref="codeInput"
-  class="opacity-0 absolute top-0 left-0 h-full w-full" 
-  @input="code = $event.target.value.replace(/\D/g, '').slice(0, 6)"
-  @focus="isFocused = true"
-  @blur="isFocused = false"
-/>
-      </div>
-          <div class="flex justify-between">
-            <div :class="`${countdown>0?'text-#BDBDBD':'text-#2B53AC'}  text-14px`">
-              {{ $t('collectCode.login.reSend') }}<span v-if="countdown>0">({{ countdown }})</span>
             </div>
-            <div @click="goBack" class="text-#2B53AC text-14px">
+            <div class="relative">
-              {{ $t('collectCode.login.back') }}
+              <van-password-input
+                  :value="code"
+                  :gutter="10"
+                  :mask="false"
+                  :focused="isFocused"
+              />
+              <input
+                  v-model="code"
+                  type="tel"
+                  maxlength="6"
+                  ref="codeInput"
+                  class="opacity-0 absolute top-0 left-0 h-full w-full"
+                  @input="code = $event.target.value.replace(/\D/g, '').slice(0, 6)"
+                  @focus="isFocused = true"
+                  @blur="isFocused = false"
+              />
+            </div>
+            <div class="flex justify-between">
+              <div :class="`${countdown>0?'text-#BDBDBD':'text-#2B53AC'}  text-14px`">
+                {{ $t('collectCode.login.reSend') }}<span v-if="countdown>0">({{ countdown }})</span>
+              </div>
+              <div @click="goBack" class="text-#2B53AC text-14px">
+                {{ $t('collectCode.login.back') }}
+              </div>
+            </div>
+            <div class="mt-[17px]">
+              <van-button v-if="code.length === 6" type="primary" block :loading="loadingRef.loading2"
+                          :loading-text="$t('collectCode.login.login')" style="height: 48px" @click="goLogin">
+                {{ $t('collectCode.login.login') }}
+              </van-button>
+              <van-button v-else type="primary" color="#D3D3D3" block style="height: 48px">
+                {{ $t('collectCode.login.login') }}
+              </van-button>
             </div>
-          </div>
-          <div class="mt-[17px]">
-            <van-button v-if="code.length === 6" type="primary" block :loading="loadingRef.loading2"
-                        :loading-text="$t('collectCode.login.login')" style="height: 48px" @click="goLogin">
-              {{ $t('collectCode.login.login') }}
-            </van-button>
-            <van-button v-else type="primary" color="#D3D3D3" block style="height: 48px">
-              {{ $t('collectCode.login.login') }}
-            </van-button>
           </div>
         </div>
       </van-swipe-item>

app/stores-collect-code/auth/index.js

@@ -1,6 +1,6 @@
 import { createGlobalState,useLocalStorage } from '@vueuse/core'
 export const codeAuthStore = createGlobalState(() => {
-    const token=useLocalStorage('token','')
+    const codeToken=useLocalStorage('codeToken','')
     const RefreshToken=useLocalStorage('RefreshToken','')
     const userInfo=useLocalStorage('userInfo',{})
     const fingerprint=useLocalStorage('fingerprint','')
@@ -41,7 +41,7 @@ export const codeAuthStore = createGlobalState(() => {
         formData,
         userInfo,
         RefreshToken,
-        token,
+        codeToken,
         fingerprint
     }
 })