refactor(auth): 重构登录模块并优化验证码功能
- 修改 token 在 codeAuthStore 中的名称，从 token 改为 codeToken - 优化验证码发送逻辑，增加错误处理和加载状态管理 - 调整页面布局和样式，提高用户体验 - 修复了一些小的 UI 问题，例如输入框聚焦状态和倒计时显示
This commit is contained in:
xingyy
parent
8207170a01
commit
53571882a0
@ -9,7 +9,7 @@ let http
|
||||
// HTTP 状态码映射 - 使用i18n国际化
|
||||
export function setupHttp() {
|
||||
if (http) return http
|
||||
const {token}= codeAuthStore()
|
||||
const {codeToken}= codeAuthStore()
|
||||
const config = useRuntimeConfig()
|
||||
const baseURL = config.public.NUXT_PUBLIC_API_COLLECT_CODE
|
||||
const router = useRouter()
|
||||
@ -43,7 +43,7 @@ export function setupHttp() {
|
||||
// 添加 token
|
||||
options.headers = {
|
||||
...options.headers,
|
||||
Authorization: token.value,
|
||||
Authorization: codeToken.value,
|
||||
'accept-language': i18n.locale.value
|
||||
}
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ import {message} from '@/components/x-message/useMessage.js'
|
||||
import FingerprintJS from '@fingerprintjs/fingerprintjs'
|
||||
import {checkPhone, mobileLogin, userSend} from "@/api-collect-code/auth/index.js";
|
||||
|
||||
const {userInfo, token, fingerprint} = codeAuthStore()
|
||||
const {userInfo, codeToken, fingerprint} = codeAuthStore()
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const {locale} = useI18n()
|
||||
@ -49,27 +49,31 @@ const checkFingerprint = async () => {
|
||||
await router.push('/collectCode/mine')
|
||||
}
|
||||
}
|
||||
const codeInput = ref(null)
|
||||
const isFocused = ref(false)
|
||||
checkFingerprint()
|
||||
const vanSwipeRef = ref(null)
|
||||
const getCode = async () => {
|
||||
loadingRef.value.loading1 = true
|
||||
try {
|
||||
const res = await checkPhone({
|
||||
tel: phoneNum.value,
|
||||
})
|
||||
loadingRef.value.loading1 = false
|
||||
if (res.status === 0) {
|
||||
const res = await userSend({telNum: phoneNum.value, zone: '+86'})
|
||||
if (res.status === 0) {
|
||||
const sendRes = await userSend({telNum: phoneNum.value, zone: '+86'})
|
||||
startCountdown()
|
||||
pane.value = 1
|
||||
await nextTick()
|
||||
vanSwipeRef.value?.swipeTo(pane.value)
|
||||
nextTick(()=>{
|
||||
codeInput.value.focus()
|
||||
nextTick(() => {
|
||||
codeInput.value?.focus()
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取验证码失败:', error)
|
||||
} finally {
|
||||
loadingRef.value.loading1 = false
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
const changeToPwd = async () => {
|
||||
loginType.value = loginType.value === 0 ? 1 : 0
|
||||
@ -88,7 +92,7 @@ const goLogin = async () => {
|
||||
})
|
||||
if (res.status === 0) {
|
||||
userInfo.value = res.data.accountInfo
|
||||
token.value = res.data.token
|
||||
codeToken.value = res.data.token
|
||||
fingerprint.value = await getFingerprint()
|
||||
|
||||
await router.push('/collectCode/mine');
|
||||
@ -101,17 +105,21 @@ const showPassword = ref(false)
|
||||
const togglePasswordVisibility = () => {
|
||||
showPassword.value = !showPassword.value
|
||||
}
|
||||
onMounted(()=>{
|
||||
// vanSwipeRef.value?.swipeTo(1)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-[100vh] w-[100vw] bg-[url('@/static/images/asdfsdd.png')] bg-cover px-[31px] pt-[86px]">
|
||||
<div class="grow-1 w-[100vw] bg-[url('@/static/images/asdfsdd.png')] bg-bottom bg-cover px-[31px] pt-[86px]">
|
||||
<div class="w-full flex justify-center mb-[100px] flex-col items-center">
|
||||
<img class="h-[105px] w-[189px]" src="@/static/images/ghfggff.png" alt="">
|
||||
<img class="h-[29px] w-[108px]" src="@/static/images/qrcodetext.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 v-if="pane === 0">
|
||||
<div>
|
||||
<div class="">
|
||||
<div class="border-b-[1.7px] mt-[8px]">
|
||||
<van-field v-model="phoneNum" clearable :placeholder="$t('collectCode.login.phoneNumberPlaceholder')">
|
||||
@ -122,7 +130,7 @@ const togglePasswordVisibility = () => {
|
||||
</template>
|
||||
</van-field>
|
||||
</div>
|
||||
<div class="border-b-[1.7px] mt-[8px]" v-show="loginType === 1">
|
||||
<div class="border-b-[1.7px] mt-[8px]" v-if="loginType === 1">
|
||||
<van-field
|
||||
v-model="password"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
@ -150,26 +158,34 @@ const togglePasswordVisibility = () => {
|
||||
{{ loginType === 0 ? $t('collectCode.login.passwordLogin') : $t('collectCode.login.codeLogin') }}
|
||||
</div>
|
||||
</div>
|
||||
<div/>
|
||||
</div>
|
||||
<div class="mt-[55px]">
|
||||
<div v-if="loginType === 0">
|
||||
<van-button :loading="loadingRef.loading1" v-if="phoneNum" :loading-text="$t('collectCode.login.getCode')"
|
||||
type="primary" block style="height: 48px" @click="getCode">{{ $t('collectCode.login.getCode') }}
|
||||
type="primary" block style="height: 48px" @click="getCode">{{
|
||||
$t('collectCode.login.getCode')
|
||||
}}
|
||||
</van-button>
|
||||
<van-button v-else type="primary" color="#D3D3D3" block style="height: 48px">
|
||||
{{ $t('collectCode.login.getCode') }}
|
||||
</van-button>
|
||||
<van-button v-else type="primary" color="#D3D3D3" block style="height: 48px">{{ $t('collectCode.login.getCode') }}</van-button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<van-button type="primary" v-if="password" block :loading="loadingRef.loading2" :loading-text="$t('collectCode.login.login')"
|
||||
<van-button type="primary" v-if="password" block :loading="loadingRef.loading2"
|
||||
:loading-text="$t('collectCode.login.login')"
|
||||
style="height: 48px;margin-top:10px" @click="goLogin">{{ $t('collectCode.login.login') }}
|
||||
</van-button>
|
||||
<van-button v-else type="primary" color="#D3D3D3" block style="height: 48px">{{ $t('collectCode.login.login') }}</van-button>
|
||||
<van-button v-else type="primary" color="#D3D3D3" block style="height: 48px">
|
||||
{{ $t('collectCode.login.login') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-swipe-item>
|
||||
<van-swipe-item>
|
||||
<div v-show="pane === 1">
|
||||
<div v-if="pane == 1">
|
||||
<div>
|
||||
<div class="flex mb-[16px]">
|
||||
<div class="text-[16px] text-[#BDBDBD] mr-[10px]">{{ $t('collectCode.login.hasSendTo') }}</div>
|
||||
<div class="text-[16px] text-[#000]">+86 {{ phoneNum }}</div>
|
||||
@ -180,8 +196,8 @@ const togglePasswordVisibility = () => {
|
||||
:gutter="10"
|
||||
:mask="false"
|
||||
:focused="isFocused"
|
||||
/>
|
||||
<input
|
||||
/>
|
||||
<input
|
||||
v-model="code"
|
||||
type="tel"
|
||||
maxlength="6"
|
||||
@ -190,7 +206,7 @@ const togglePasswordVisibility = () => {
|
||||
@input="code = $event.target.value.replace(/\D/g, '').slice(0, 6)"
|
||||
@focus="isFocused = true"
|
||||
@blur="isFocused = false"
|
||||
/>
|
||||
/>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<div :class="`${countdown>0?'text-#BDBDBD':'text-#2B53AC'} text-14px`">
|
||||
@ -210,6 +226,7 @@ const togglePasswordVisibility = () => {
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { createGlobalState,useLocalStorage } from '@vueuse/core'
|
||||
export const codeAuthStore = createGlobalState(() => {
|
||||
const token=useLocalStorage('token','')
|
||||
const codeToken=useLocalStorage('codeToken','')
|
||||
const RefreshToken=useLocalStorage('RefreshToken','')
|
||||
const userInfo=useLocalStorage('userInfo',{})
|
||||
const fingerprint=useLocalStorage('fingerprint','')
|
||||
@ -41,7 +41,7 @@ export const codeAuthStore = createGlobalState(() => {
|
||||
formData,
|
||||
userInfo,
|
||||
RefreshToken,
|
||||
token,
|
||||
codeToken,
|
||||
fingerprint
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user