239 lines
7.3 KiB
Vue
239 lines
7.3 KiB
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'
|
|
import {fddCheck} from "~/api/goods/index.js";
|
|
const {userInfo,token,selectedZone}= authStore()
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const { locale } = useI18n()
|
|
definePageMeta({
|
|
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('')
|
|
const code = ref('')
|
|
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 selectedCountry = ref(route.query.countryName || defaultCountry.name)
|
|
onMounted(()=>{
|
|
selectedZone.value=route.query.zone || defaultCountry.zone
|
|
})
|
|
// 监听语言变化，更新默认国家
|
|
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?.accountInfo?.userExtend?.isReal===0){
|
|
await router.push({
|
|
path: '/realAuth',
|
|
query:{
|
|
statusCode:0
|
|
}
|
|
})
|
|
}else if (res.data.isJumpFdd){
|
|
const res1=await fddCheck()
|
|
if (res1.status===0){
|
|
window.location.href=res1.data.h5Url
|
|
}
|
|
console.log('123')
|
|
}else {
|
|
await router.push('/');
|
|
}
|
|
}
|
|
loadingRef.value.loading2=false
|
|
}
|
|
const isKeyboardVisible = ref(false)
|
|
const windowHeight = ref(window.innerHeight)
|
|
|
|
onMounted(() => {
|
|
// 记录初始窗口高度
|
|
windowHeight.value = window.innerHeight
|
|
|
|
// 监听窗口大小变化
|
|
window.addEventListener('resize', () => {
|
|
// 如果当前高度明显小于初始高度，认为键盘已打开
|
|
isKeyboardVisible.value = window.innerHeight < windowHeight.value * 0.8
|
|
})
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('resize', () => {})
|
|
})
|
|
</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-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 :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-if="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="flex justify-between">
|
|
<div :class="`${countdown>0?'text-#BDBDBD':'text-#2B53AC'} text-14px`">
|
|
{{ $t('login.reSend') }}<span v-if="countdown>0">({{countdown}})</span>
|
|
</div>
|
|
<div @click="goBack" class="text-#2B53AC text-14px">
|
|
{{ $t('login.back') }}
|
|
</div>
|
|
</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>
|
|
</van-swipe-item>
|
|
</van-swipe>
|
|
<van-number-keyboard v-model="code" :show="showKeyboard" @blur="showKeyboard = false" />
|
|
<div v-if="!isKeyboardVisible" class="text-center text-14px absolute left-1/2 transform translate-x--1/2 bottom-20px">
|
|
{{ $t('login.agreement') }}<span class="text-#3454AF " @click="$router.push('/privacyPolicy')">{{ $t('login.privacyPolicy') }}</span>
|
|
</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>
|