feat(login): 实现登录页面功能,包含手机号输入和验证码验证

app/pages/login/index.vue

@@ -1,16 +1,78 @@
 <script setup>
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n'
+import countryCode from '../countryRegion/data/index.js'
 
 const router = useRouter();
+const route = useRoute();
+const { locale } = useI18n()
+
 definePageMeta({
-  layout: 'login',
+  title: '登录',
+  i18n: 'login.title',
 })
+
 function goToPage() {
   router.push('/countryRegion');
 }
+
 const phoneNum = ref('')
 const code = ref('')
 const pane = ref(0)
+const showKeyboard = ref(true);
+// 根据语言获取默认国家
+const getDefaultCountry = () => {
+  let defaultCode = 'CN' // 默认中国大陆
+  switch (locale.value) {
+    case 'zh-CN':
+      defaultCode = 'CN'
+      break
+    case 'zh-TW':
+      defaultCode = 'TW'
+      break
+    case 'ja-JP':
+      defaultCode = 'JP'
+      break
+    case 'en-US':
+      defaultCode = 'US'
+      break
+  }
+
+  const country = countryCode.find(c => c.code === defaultCode)
+  return {
+    zone: country.zone,
+    name: locale.value === 'zh-CN' ? country.cn :
+      locale.value === 'zh-TW' ? country.tw :
+        locale.value === 'ja-JP' ? country.ja :
+          country.en
+  }
+}
+
+const defaultCountry = getDefaultCountry()
+
+// 获取选择的国家信息
+const selectedZone = ref(route.query.zone || defaultCountry.zone)
+const selectedCountry = ref(route.query.countryName || defaultCountry.name)
+
+// 监听语言变化，更新默认国家
+watch(locale, () => {
+  if (!route.query.zone) {
+    const newDefault = getDefaultCountry()
+    selectedZone.value = newDefault.zone
+    selectedCountry.value = newDefault.name
+  }
+})
+
+const getCode = () => {
+  pane.value = 1
+}
+const goBack = () => {
+  code.value = ''
+  pane.value = 0
+}
+const goLogin = () => {
+  router.push('/realAuth');
+} 
 </script>
 
 <template>
@@ -22,15 +84,15 @@ const pane=ref(0)
       <div class="">
         <div class="w-full flex justify-between" @click="goToPage">
           <div class="text-[16px] text-[#000]">
-            中国（大陆）
+            {{ selectedCountry }}
           </div>
           <div><van-icon color="#777" name="arrow" size="14" /></div>
         </div>
         <div class="border-b-[1.7px] mt-[8px]">
-          <van-field v-model="phoneNum" clearable placeholder="请输入手机号">
+          <van-field v-model="phoneNum" clearable :placeholder="$t('login.phonePlaceholder')">
             <template #label>
               <div class="text-[16px] text-[#1A1A1A] flex align-center justify-start">
-                +86
+                +{{ selectedZone }}
               </div>
             </template>
           </van-field>
@@ -38,26 +100,30 @@ const pane=ref(0)
         <div />
       </div>
       <div class="mt-[55px]">
-        <van-button v-if="phoneNum" type="primary"  block style="height: 48px" >获取验证码</van-button>
-        <van-button v-else type="primary" color="#D3D3D3"  block style="height: 48px" >获取验证码</van-button>
+        <van-button v-if="phoneNum" type="primary" block style="height: 48px" @click="getCode">{{ $t('login.getCode')
+          }}</van-button>
+        <van-button v-else type="primary" color="#D3D3D3" block style="height: 48px">{{ $t('login.getCode')
+          }}</van-button>
       </div>
     </div>
     <div v-else>
       <div class="flex mb-[16px]">
-        <div class="text-[16px] text-[#BDBDBD] mr-[10px]">已发送验证码至</div>
-        <div class="text-[16px] text-[#000]">15834362333</div>
+        <div class="text-[16px] text-[#BDBDBD] mr-[10px]">{{ $t('login.hasSendTo') }}</div>
+        <div class="text-[16px] text-[#000]">+{{ selectedZone }} {{ phoneNum }}</div>
       </div>
-      <van-password-input
-          :value="code"
-          :gutter="10"
-          focused
-      />
+      <van-password-input :value="code" :gutter="10" :mask="false" focused @focus="showKeyboard = true" />
+      <van-number-keyboard v-model="code" :show="showKeyboard" @blur="showKeyboard = false" />
       <div class="text-#2B53AC text-14px">
-        重新发送
+        {{ $t('login.reSend') }}
       </div>
       <div class="mt-[17px]">
-        <van-button v-if="code.length === 6" type="primary"  block style="height: 48px" >登录</van-button>
-        <van-button v-else type="primary" color="#D3D3D3"  block style="height: 48px" >登录</van-button>
+        <van-button v-if="code.length === 6" type="primary" block style="height: 48px" @click="goLogin">{{
+          $t('login.login')
+          }}</van-button>
+        <van-button v-else type="primary" color="#D3D3D3" block style="height: 48px">{{ $t('login.login') }}</van-button>
+      </div>
+      <div class="mt-[17px]">
+        <van-button type="primary" @click="goBack" block style="height: 48px">{{ $t('login.back') }}</van-button>
       </div>
     </div>
   </div>
@@ -67,9 +133,11 @@ const pane=ref(0)
 :deep(.van-cell.van-field) {
   padding-left: 0;
 }
+
 :deep(.van-password-input) {
   margin: 0;
 }
+
 :deep(.van-password-input__item) {
   border: 1px solid #E5E5E5;
   width: 41px;