refactor(app): 优化登录功能并添加新组件

- 在 Column 组件中使用可选链操作符,提高代码健壮性- 添加 ItemList 组件,但未提供具体实现
- 在 login 组件中:
  - 引入消息提示功能
  -优化登录流程,添加 loading 状态
  - 修复登录后的页面跳转
  - 为登录按钮添加 loading 状态和文本
This commit is contained in:
xingyy 2025-01-20 13:59:50 +08:00
parent bda4666782
commit efc47a27fd
3 changed files with 21 additions and 5 deletions

View File

@ -8,7 +8,7 @@
> >
<div class="relative w-full"> <div class="relative w-full">
<van-image <van-image
:src="item.artwork.hdPic" :src="item.artwork?.hdPic"
fit="cover" fit="cover"
class="w-full" class="w-full"
/> />

View File

@ -0,0 +1,11 @@
<script setup lang="ts">
</script>
<template>
</template>
<style scoped>
</style>

View File

@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
import countryCode from '../countryRegion/data/index.js' import countryCode from '../countryRegion/data/index.js'
import {senCode, userLogin} from "@/api/auth/index.js"; import {senCode, userLogin} from "@/api/auth/index.js";
import {authStore} from "~/stores/auth/index.js"; import {authStore} from "~/stores/auth/index.js";
import {message} from '@/components/x-message/useMessage.js'
const {userInfo,token}= authStore() const {userInfo,token}= authStore()
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
@ -13,7 +14,8 @@ definePageMeta({
i18n: 'login.title', i18n: 'login.title',
}) })
const loadingRef=ref({ const loadingRef=ref({
loading1:false loading1:false,
loading2:false,
}) })
const isExist=ref(false)// true const isExist=ref(false)// true
const isReal=ref(false) //isReal const isReal=ref(false) //isReal
@ -108,6 +110,7 @@ const goBack = () => {
vanSwipeRef.value?.swipeTo(pane.value) vanSwipeRef.value?.swipeTo(pane.value)
} }
const goLogin =async () => { const goLogin =async () => {
loadingRef.value.loading2=true
const res=await userLogin({ const res=await userLogin({
telNum:phoneNum.value, telNum:phoneNum.value,
zone:selectedZone.value, zone:selectedZone.value,
@ -116,12 +119,14 @@ const goLogin =async () => {
if (res.status===0){ if (res.status===0){
userInfo.value=res.data.accountInfo userInfo.value=res.data.accountInfo
token.value=res.data.token token.value=res.data.token
if (!res.data.isReal){ if (!res.data.isReal){
router.push('/realAuth'); await router.push('/realAuth');
}else { }else {
router.push('/'); await router.push('/');
} }
} }
loadingRef.value.loading2=false
} }
</script> </script>
@ -170,7 +175,7 @@ const goLogin =async () => {
{{ $t('login.reSend') }}<span v-if="countdown>0">({{countdown}})</span> {{ $t('login.reSend') }}<span v-if="countdown>0">({{countdown}})</span>
</div> </div>
<div class="mt-[17px]"> <div class="mt-[17px]">
<van-button v-if="code.length === 6" type="primary" block style="height: 48px" @click="goLogin">{{ <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') $t('login.login')
}}</van-button> }}</van-button>
<van-button v-else type="primary" color="#D3D3D3" block style="height: 48px">{{ $t('login.login') }}</van-button> <van-button v-else type="primary" color="#D3D3D3" block style="height: 48px">{{ $t('login.login') }}</van-button>