refactor(profile): 重构个人主页组件
- 优化代码结构，提高可读性和维护性 - 重构数据获取和处理逻辑，使用 async/await -简化分组排序函数，提高性能 - 优化模板结构，提高渲染效率 - 添加注释，提高代码可理解性
This commit is contained in:
xingyy
parent
06b683557a
commit
c0f4a14186
@ -1,133 +1,144 @@
|
||||
<script setup>
|
||||
import {userArtworks} from "@/api/goods/index.js";
|
||||
import {authStore} from "@/stores/auth/index.js";
|
||||
import { userArtworks } from "@/api/goods/index.js"
|
||||
import { authStore } from "@/stores/auth/index.js"
|
||||
import xImage from '@/components/x-image/index.vue'
|
||||
import {goodStore} from "~/stores/goods/index.js";
|
||||
import {ref} from "vue";
|
||||
import { ref } from "vue"
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default',
|
||||
title: '我的',
|
||||
i18n: 'menu.profile',
|
||||
})
|
||||
const {artWorkDetail} = goodStore()
|
||||
const myList=ref([])
|
||||
const showMyList=ref([])
|
||||
const {userInfo}= authStore()
|
||||
const groupAndSortByDate=(data)=> {
|
||||
if (!Array.isArray(data)) {
|
||||
return
|
||||
}
|
||||
return Object.values(data.reduce((acc, curr) => {
|
||||
if (!acc[curr.userCreatedAt]) {
|
||||
acc[curr.userCreatedAt] = {
|
||||
userCreatedAt: curr.userCreatedAt,
|
||||
list: []
|
||||
}
|
||||
}
|
||||
acc[curr.userCreatedAt].list.push(curr)
|
||||
return acc;
|
||||
}, {})).sort((a, b) => new Date(b.userCreatedAt) - new Date(a.userCreatedAt));
|
||||
}
|
||||
const initData=async ()=>{
|
||||
const res=await userArtworks({})
|
||||
if (res.status===0){
|
||||
myList.value=res.data.data
|
||||
showMyList.value=groupAndSortByDate(myList.value)
|
||||
// showMyList.value=[]
|
||||
}
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
const { userInfo } = authStore()
|
||||
const showMyList = ref([])
|
||||
const localState = ref({
|
||||
finished: false,
|
||||
refreshing: false,
|
||||
showDetail: false,
|
||||
showHeight: ''
|
||||
finished: true,
|
||||
refreshing: false
|
||||
})
|
||||
initData()
|
||||
const goPay=()=>{
|
||||
router.push({
|
||||
path:'/signature/personal-Info'
|
||||
})
|
||||
}
|
||||
const goDetail=(item)=>{
|
||||
router.push({
|
||||
path:'/artDetail',
|
||||
query:{
|
||||
uuid:item.uuid
|
||||
|
||||
// 简化分组排序函数
|
||||
const groupByDate = (data) => {
|
||||
if (!Array.isArray(data)) return []
|
||||
|
||||
return Object.values(data.reduce((acc, curr) => {
|
||||
const date = curr.userCreatedAt
|
||||
if (!acc[date]) {
|
||||
acc[date] = { userCreatedAt: date, list: [] }
|
||||
}
|
||||
})
|
||||
acc[date].list.push(curr)
|
||||
return acc
|
||||
}, {})).sort((a, b) => new Date(b.userCreatedAt) - new Date(a.userCreatedAt))
|
||||
}
|
||||
const onRefresh = async () => {
|
||||
|
||||
// 获取数据
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
localState.value.refreshing = true
|
||||
localState.value.finished = false
|
||||
const { finished } = await getArtworkList(true)
|
||||
localState.value.finished = finished
|
||||
} finally {
|
||||
localState.value.refreshing = false
|
||||
const res = await userArtworks({})
|
||||
if (res.status === 0) {
|
||||
showMyList.value = groupByDate(res.data.data)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取数据失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 刷新处理
|
||||
const onRefresh = async () => {
|
||||
localState.value.refreshing = true
|
||||
await fetchData()
|
||||
localState.value.refreshing = false
|
||||
}
|
||||
|
||||
// 导航函数
|
||||
const goPay = () => router.push('/signature/personal-Info')
|
||||
const goDetail = (item) => router.push({ path: '/artDetail', query: { uuid: item.uuid } })
|
||||
|
||||
// 初始化
|
||||
fetchData()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-[100vw] bg-[url('@/static/images/3532@2x.png')] bg-cover pt-43px flex-grow-1 flex flex-col">
|
||||
<div class="flex items-center px-16px mb-43px">
|
||||
<div class="mr-23px">
|
||||
<img class="w-57px h-57px" src="@/static/images/5514@2x.png" alt="">
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="text-18px text-#181818">{{userInfo.realName}}</div>
|
||||
<div class="text-#575757 text-14px">{{userInfo.telNum}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grow-1 flex flex-col">
|
||||
<div class="border-b-1px border-b-#D3D3D3 px-16px flex">
|
||||
<div class="text-#000 text-16px border-b-3 border-b-#2B53AC h-36px">{{$t('home.my_lots')}}</div>
|
||||
<!-- 用户信息 -->
|
||||
<div class="flex items-center px-16px mb-43px">
|
||||
<img class="w-57px h-57px mr-23px" src="@/static/images/5514@2x.png" alt="">
|
||||
<div class="flex flex-col">
|
||||
<div class="text-18px text-#181818">{{ userInfo.realName }}</div>
|
||||
<div class="text-#575757 text-14px">{{ userInfo.telNum }}</div>
|
||||
</div>
|
||||
<van-pull-refresh v-model="localState.refreshing"
|
||||
:success-text="$t('home.refresh_show')"
|
||||
:success-duration="700"
|
||||
class="h-full grow-1"
|
||||
@refresh="onRefresh">
|
||||
</div>
|
||||
|
||||
<!-- 列表内容 -->
|
||||
<div class="grow-1 flex flex-col">
|
||||
<div class="border-b-1px border-b-#D3D3D3 px-16px">
|
||||
<div class="text-#000 text-16px border-b-3 border-b-#2B53AC w-80px h-36px">{{ $t('home.my_lots') }}</div>
|
||||
</div>
|
||||
|
||||
<van-pull-refresh
|
||||
v-model="localState.refreshing"
|
||||
:success-duration="700"
|
||||
class="h-full grow-1"
|
||||
@refresh="onRefresh"
|
||||
>
|
||||
<template #success>
|
||||
<van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
|
||||
</template>
|
||||
<van-list
|
||||
:finished="localState.finished"
|
||||
:finished-text="$t('home.finished_text')"
|
||||
class="h-full"
|
||||
|
||||
>
|
||||
<div class="flex flex-col items-center pt-100px" v-if="showMyList?.length<1">
|
||||
<van-list :finished="localState.finished" :finished-text="$t('home.finished_text')" class="h-full">
|
||||
<!-- 空状态 -->
|
||||
<div v-if="showMyList?.length < 1" class="flex flex-col items-center pt-100px">
|
||||
<img class="w-103px h-88px mb-19px" src="@/static/images/zu5512@2x.png" alt="">
|
||||
<div class="text-14px text-#575757">您暂无拍品</div>
|
||||
<div class="text-14px text-#575757">快去竞拍吧</div>
|
||||
</div>
|
||||
<div class="px-16px pt-14px" v-for="(item,index) of showMyList" v-else >
|
||||
<div class="text-#575757 text-14px mb-3px">{{item.userCreatedAt}}</div>
|
||||
<div class="flex mb-22px" v-for="(item1,index1) of item.list" @click="goDetail(item1)">
|
||||
<div class="flex-shrink-0 mr-10px rounded-4px overflow-hidden">
|
||||
<x-image class="w-80px h-80px" :src="item1?.auctionArtworkInfo?.artwork?.hdPic" :preview="false" alt=""/>
|
||||
</div>
|
||||
<div class="flex flex-col justify-between grow-1">
|
||||
<div class="text-#000 text-16px ellipsis line-height-21px">{{item1?.auctionArtworkInfo?.artworkTitle}}</div>
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<div class="text-#575757 text-14px line-height-none mb-5px">{{$t('home.start_price')}}：RMB 1,000</div>
|
||||
<div class="text-#B58047 text-14px line-height-none">{{$t('home.close_price')}}：RMB 10,000</div>
|
||||
|
||||
<!-- 列表内容 -->
|
||||
<template v-else>
|
||||
<div v-for="group in showMyList" :key="group.userCreatedAt" class="px-16px pt-14px">
|
||||
<div class="text-#575757 text-14px mb-3px">{{ group.userCreatedAt }}</div>
|
||||
<div
|
||||
v-for="item in group.list"
|
||||
:key="item.uuid"
|
||||
class="flex mb-22px"
|
||||
@click="goDetail(item)"
|
||||
>
|
||||
<x-image
|
||||
class="w-80px h-80px flex-shrink-0 mr-10px rounded-4px overflow-hidden"
|
||||
:src="item?.auctionArtworkInfo?.artwork?.hdPic"
|
||||
:preview="false"
|
||||
/>
|
||||
<div class="flex flex-col justify-between grow-1">
|
||||
<div class="text-#000 text-16px ellipsis line-height-21px">
|
||||
{{ item?.auctionArtworkInfo?.artworkTitle }}
|
||||
</div>
|
||||
<div v-if="[1,3,4].includes(item1.status)" @click.stop="goPay">
|
||||
<van-button class="w-73px !h-30px" type="primary"><span class="text-12px">{{$t('art_detail_page.button')}}</span></van-button>
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<div class="text-#575757 text-14px line-height-none mb-5px">
|
||||
{{ $t('home.start_price') }}：RMB 1,000
|
||||
</div>
|
||||
<div class="text-#B58047 text-14px line-height-none">
|
||||
{{ $t('home.close_price') }}：RMB 10,000
|
||||
</div>
|
||||
</div>
|
||||
<van-button
|
||||
v-if="[1,3,4].includes(item.status)"
|
||||
class="w-73px !h-30px"
|
||||
type="primary"
|
||||
@click.stop="goPay"
|
||||
>
|
||||
<span class="text-12px">{{ $t('art_detail_page.button') }}</span>
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</van-list>
|
||||
</van-pull-refresh>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ellipsis {
|
||||
display: -webkit-box;
|
||||
@ -136,4 +147,4 @@ const onRefresh = async () => {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user