feat(login): 优化登录页面验证码输入体验

- 移除虚拟键盘，改用原生输入框
- 添加输入框焦点管理，提升用户体验
- 优化验证码输入框样式和功能
- 改进登录流程中的页面切换逻辑

app/pages/collectCode/login/index.vue

@@ -36,7 +36,6 @@ const countdown = ref(0);
 const phoneNum = ref('')
 const code = ref('')
 const pane = ref(0)
-const showKeyboard = ref(false);
 const getFingerprint = async () => {
   const fp = await FingerprintJS.load()
   const result = await fp.get()
@@ -50,6 +49,7 @@ const checkFingerprint = async () => {
     await router.push('/collectCode/mine')
   }
 }
+const isFocused = ref(false)
 checkFingerprint()
 const vanSwipeRef = ref(null)
 const getCode = async () => {
@@ -63,23 +63,13 @@ const getCode = async () => {
     if (res.status === 0) {
       pane.value = 1
       vanSwipeRef.value?.swipeTo(pane.value)
-      showKeyboard.value = true
+      nextTick(()=>{
+    codeInput.value.focus()
+  })
     }
   }
-  /*  loadingRef.value.loading1 = false
-    if (res.status === 0) {
 
 
-    }
-    pane.value = 1
-    vanSwipeRef.value?.swipeTo(pane.value)
-    showKeyboard.value = true
-    startCountdown();*/
-  /*  pane.value = 1
-    vanSwipeRef.value?.swipeTo(pane.value)
-    showKeyboard.value=true
-    startCountdown();*/
-
 }
 const changeToPwd = async () => {
   loginType.value = loginType.value === 0 ? 1 : 0
@@ -184,7 +174,24 @@ const togglePasswordVisibility = () => {
             <div class="text-[16px] text-[#BDBDBD] mr-[10px]">{{ $t('collectCode.login.hasSendTo') }}</div>
             <div class="text-[16px] text-[#000]">+86 {{ phoneNum }}</div>
           </div>
-          <van-password-input :value="code" :gutter="10" :mask="false" focused @focus="showKeyboard = true"/>
+          <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>
@@ -205,7 +212,6 @@ const togglePasswordVisibility = () => {
         </div>
       </van-swipe-item>
     </van-swipe>
-    <van-number-keyboard v-model="code" :show="showKeyboard" @blur="showKeyboard = false"/>
   </div>
 </template>
 

app/pages/login/index.vue

@@ -19,6 +19,7 @@ const loadingRef=ref({
 })
 const isExist=ref(false)//帐号是否存在  true存在
 const isReal=ref(false) //isReal 是否实名过
+const codeInput=ref(null)
 function goToPage() {
   router.push('/countryRegion');
 }
@@ -40,7 +41,6 @@ const countdown = ref(0);
 const phoneNum = ref('')
 const code = ref('')
 const pane = ref(0)
-const showKeyboard = ref(false);
 // 根据语言获取默认国家
 const getDefaultCountry = () => {
   let defaultCode = 'CN' // 默认中国大陆
@@ -98,13 +98,11 @@ const getCode =async () => {
   }
   pane.value = 1
   vanSwipeRef.value?.swipeTo(pane.value)
-  showKeyboard.value=true
-  startCountdown();
-/*  pane.value = 1
-  vanSwipeRef.value?.swipeTo(pane.value)
-  showKeyboard.value=true
-  startCountdown();*/
  
+  startCountdown();
+  nextTick(()=>{
+    codeInput.value.focus()
+  })
 }
 const goBack = () => {
   code.value = ''
@@ -142,7 +140,7 @@ const goLogin =async () => {
 }
 const isKeyboardVisible = ref(false)
 const windowHeight = ref(window.innerHeight)
-
+const isFocused = ref(false)
 onMounted(() => {
   // 记录初始窗口高度
   windowHeight.value = window.innerHeight
@@ -197,20 +195,22 @@ onUnmounted(() => {
             <div class="text-[16px] text-[#BDBDBD] mr-[10px]">{{ $t('login.hasSendTo') }}</div>
             <div class="text-[16px] text-[#000]">+{{ selectedZone }} {{ phoneNum }}</div>
           </div>
-      <div class="relative">
+          <div class="relative">
         <van-password-input 
   :value="code" 
   :gutter="10" 
   :mask="false" 
-  :focused="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">