From c0f4a14186b30523e7862973bb6879d878f660f3 Mon Sep 17 00:00:00 2001
From: xingyy <64720302+Concur-max@users.noreply.github.com>
Date: Thu, 13 Feb 2025 13:51:53 +0800
Subject: [PATCH] =?UTF-8?q?refactor(profile):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=B8=BB=E9=A1=B5=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 优化代码结构，提高可读性和维护性
- 重构数据获取和处理逻辑，使用 async/await
-简化分组排序函数，提高性能
- 优化模板结构，提高渲染效率
- 添加注释，提高代码可理解性
---
 app/pages/profile/index.vue | 201 +++++++++++++++++++-----------------
 1 file changed, 106 insertions(+), 95 deletions(-)

diff --git a/app/pages/profile/index.vue b/app/pages/profile/index.vue
index becdfc5..645d803 100644
--- a/app/pages/profile/index.vue
+++ b/app/pages/profile/index.vue
@@ -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>
\ No newline at end of file