12

- 修改 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
+  try {
     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) {
+      const sendRes = await userSend({telNum: phoneNum.value, zone: '+86'})
+      startCountdown()
         pane.value = 1
+        await nextTick()
         vanSwipeRef.value?.swipeTo(pane.value)
         nextTick(() => {
-    codeInput.value.focus()
+          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');
@@ -104,14 +108,15 @@ const togglePasswordVisibility = () => {
 </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>
             <div class="">
               <div class="border-b-[1.7px] mt-[8px]">
                 <van-field v-model="phoneNum" clearable :placeholder="$t('collectCode.login.phoneNumberPlaceholder')">
@@ -122,7 +127,7 @@ const togglePasswordVisibility = () => {
                   </template>
                 </van-field>
               </div>
-            <div class="border-b-[1.7px] mt-[8px]" v-show="loginType === 1">
+              <div class="border-b-[1.7px] mt-[8px]" v-if="loginType === 1">
                 <van-field
                     v-model="password"
                     :type="showPassword ? 'text' : 'password'"
@@ -150,26 +155,34 @@ const togglePasswordVisibility = () => {
                   {{ loginType === 0 ? $t('collectCode.login.passwordLogin') : $t('collectCode.login.codeLogin') }}
                 </div>
               </div>
-            <div/>
             </div>
             <div class="mt-[55px]">
               <div v-if="loginType === 0">
                 <van-button :loading="loadingRef.loading1" v-if="phoneNum" :loading-text="$t('collectCode.login.getCode')"
-                          type="primary" block style="height: 48px" @click="getCode">{{ $t('collectCode.login.getCode') }}
+                            type="primary" block style="height: 48px" @click="getCode">{{
+                    $t('collectCode.login.getCode')
+                  }}
+                </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">{{ $t('collectCode.login.getCode') }}</van-button>
               </div>
               <div v-else>
-              <van-button type="primary" v-if="password" block :loading="loadingRef.loading2" :loading-text="$t('collectCode.login.login')"
+                <van-button type="primary" v-if="password" block :loading="loadingRef.loading2"
+                            :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>
+                <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>
             <div class="flex mb-[16px]">
               <div class="text-[16px] text-[#BDBDBD] mr-[10px]">{{ $t('collectCode.login.hasSendTo') }}</div>
               <div class="text-[16px] text-[#000]">+86 {{ phoneNum }}</div>
@@ -210,6 +223,7 @@ const togglePasswordVisibility = () => {
               </van-button>
             </div>
           </div>
+        </div>
       </van-swipe-item>
     </van-swipe>
   </div>

app/plugins/vconsole.client.js

@@ -1,5 +1,7 @@
 import VConsole from 'vconsole'
 
 export default defineNuxtPlugin(() => {
+  if (process.env.NODE_ENV !== 'production') {
     const vConsole = new VConsole()
+  }
 })

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
     }
 })