<script setup> import { userArtworks } from "@/api/goods/index.js" import { authStore } from "@/stores/auth/index.js" import xImage from '@/components/x-image/index.vue' import { ref } from "vue" definePageMeta({ layout: 'default', i18n: 'menu.profile', }) const router = useRouter() const { userInfo } = authStore() const showMyList = ref([]) const localState = ref({ finished: true, refreshing: false }) // 简化分组排序函数 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 fetchData = async () => { try { 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/protocol') 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"> <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> </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 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> <!-- 列表内容 --> <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 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> </template> </van-list> </van-pull-refresh> </div> </div> </template> <style scoped> .ellipsis { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } </style>