liveh5-nuxt/app/pages/login/index.vue

<script setup>
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({
  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>
  <div class="h-[100vh] w-[100vw] bg-[url('@/static/images/asdfsdd.png')] bg-cover px-[31px] pt-[86px]">
    <div class="w-full flex justify-center mb-[100px]">
      <img class="h-[105px] w-[189px]" src="@/static/images/ghfggff.png" alt="">
    </div>
    <div v-if="pane === 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="$t('login.phonePlaceholder')">
            <template #label>
              <div class="text-[16px] text-[#1A1A1A] flex align-center justify-start">
                +{{ selectedZone }}
              </div>
            </template>
          </van-field>
        </div>
        <div />
      </div>
      <div class="mt-[55px]">
        <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]">{{ $t('login.hasSendTo') }}</div>
        <div class="text-[16px] text-[#000]">+{{ selectedZone }} {{ phoneNum }}</div>
      </div>
      <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" @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>
</template>

<style scoped lang="scss">
: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;
  height: 41px;
}
</style>