feat(login): 实现登录页面功能,包含手机号输入和验证码验证
This commit is contained in:
scout
parent
4d92cc13fc
commit
00188a9d48
@ -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 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>
|
||||
@ -18,19 +80,19 @@ const pane=ref(0)
|
||||
<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 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="请输入手机号">
|
||||
<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,39 +100,45 @@ 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>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.van-cell.van-field){
|
||||
:deep(.van-cell.van-field) {
|
||||
padding-left: 0;
|
||||
}
|
||||
:deep(.van-password-input){
|
||||
|
||||
:deep(.van-password-input) {
|
||||
margin: 0;
|
||||
}
|
||||
:deep(.van-password-input__item){
|
||||
|
||||
:deep(.van-password-input__item) {
|
||||
border: 1px solid #E5E5E5;
|
||||
width: 41px;
|
||||
height: 41px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user