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'
import {senCode, userLogin} from "@/api/auth/index.js";
import {authStore} from "@/stores/auth/index.js";
import {message} from '@/components/x-message/useMessage.js'
const {userInfo,token}= authStore()
const router = useRouter();
const route = useRoute();
const { locale } = useI18n()
definePageMeta({
  title: '登录',
  i18n: 'login.title',
})
const loadingRef=ref({
  loading1:false,
  loading2:false,
})
const isExist=ref(false)//帐号是否存在  true存在
const isReal=ref(false) //isReal 是否实名过
function goToPage() {
  router.push('/countryRegion');
}
const interval=ref(null)
const startCountdown=()=> {
  if (interval.value){
    clearInterval(interval.value);
  }
  countdown.value = 60;
  interval.value = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
    } else {
      clearInterval(interval.value);
    }
  }, 1000);
}
const countdown = ref(0);
const phoneNum = ref('17630920520')
const code = ref('123789')
const pane = ref(0)
const showKeyboard = ref(false);
// 根据语言获取默认国家
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 vanSwipeRef=ref(null)
const getCode =async () => {
  loadingRef.value.loading1=true
 const res=await senCode({
   telNum:phoneNum.value,
   zone:selectedZone.value
 })
  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 goBack = () => {
  code.value = ''
  pane.value = 0
  vanSwipeRef.value?.swipeTo(pane.value)
}
const goLogin =async () => {
  loadingRef.value.loading2=true
 const res=await userLogin({
   telNum:phoneNum.value,
   zone:selectedZone.value,
   code:code.value
 })
  if (res.status===0){
    userInfo.value=res.data.accountInfo
    token.value=res.data.token

    if (!res.data.isReal){
      await router.push('/realAuth');
    }else {
      await router.push('/');
    }
  }
  loadingRef.value.loading2=false
}
</script>

<template>
  <div class="h-screen-nav 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>
    <van-swipe ref="vanSwipeRef" :show-indicators="false" :touchable="false" :lazy-render="true" :loop="false">
      <van-swipe-item >
        <div v-show="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 :loading="loadingRef.loading1" v-if="phoneNum" :loading-text="$t('login.getCode')" color="#2B53AC" 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>
      </van-swipe-item>
      <van-swipe-item>
        <div v-show="pane===1">
          <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" />
          <div :class="`${countdown>0?'text-#BDBDBD':'text-#2B53AC'}  text-14px`">
            {{ $t('login.reSend') }}<span v-if="countdown>0">({{countdown}})</span>
          </div>
          <div class="mt-[17px]">
            <van-button v-if="code.length === 6" type="primary" block :loading="loadingRef.loading2" :loading-text="$t('login.login')" 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>
      </van-swipe-item>
    </van-swipe>
    <van-number-keyboard v-model="code" :show="showKeyboard" @blur="showKeyboard = false" />

  </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>