From d3cb4d55b46e7c3d45028e5f0a62eaffa50b8989 Mon Sep 17 00:00:00 2001
From: xingyy <64720302+Concur-max@users.noreply.github.com>
Date: Wed, 22 Jan 2025 16:23:48 +0800
Subject: [PATCH] =?UTF-8?q?refactor(components):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=A4=9A=E4=B8=AA=E7=BB=84=E4=BB=B6=E7=9A=84=E7=BB=93=E6=9E=84?=
 =?UTF-8?q?=E5=92=8C=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为 x-button 和 x-popup 组件添加注释说明
- 在 x-image 组件中添加 lazy 加载属性
- 优化 profile 页面的我的拍品列表展示
- 更新 tang
---
 app/components/x-button/index.vue             |  3 +
 app/components/x-image/index.vue              |  1 +
 app/components/x-popup/index.vue              |  9 ++-
 app/pages/home/components/Column/index.vue    |  1 +
 .../components/SideButton/tangPopup.vue       | 15 ++--
 app/pages/profile/index.vue                   | 69 ++++++++-----------
 6 files changed, 44 insertions(+), 54 deletions(-)

diff --git a/app/components/x-button/index.vue b/app/components/x-button/index.vue
index a132a30..55352a5 100644
--- a/app/components/x-button/index.vue
+++ b/app/components/x-button/index.vue
@@ -1,4 +1,7 @@
 <script setup>
+/*
+* 此组件的目的是使用该组件包裹的内容具有按压状态效果
+* */
 import {ref, defineEmits} from "vue";
 
 const emit = defineEmits(["click"]);
diff --git a/app/components/x-image/index.vue b/app/components/x-image/index.vue
index 6e9b79a..c3e2f5f 100644
--- a/app/components/x-image/index.vue
+++ b/app/components/x-image/index.vue
@@ -21,6 +21,7 @@ const showImage = () => {
 </script>
 <template>
   <img
+      loading="lazy"
       v-bind="{ ...props, ...$attrs }"
       @click="showImage"
   >
diff --git a/app/components/x-popup/index.vue b/app/components/x-popup/index.vue
index 2fa7fa7..99e1146 100644
--- a/app/components/x-popup/index.vue
+++ b/app/components/x-popup/index.vue
@@ -1,5 +1,7 @@
 <script setup>
-
+/*
+* 封装一个带标题栏的弹窗
+* */
 const props = defineProps({
   show: {
     type: Boolean,
@@ -24,9 +26,10 @@ const close=()=>{
     <div class="flex flex-col h-full">
       <!-- 标题栏 -->
       <div class="flex items-center pl-16px pr-19px h-40px border-b-1px border-gray-300 shrink-0">
-        <slot name="title">
-          <div class="text-black text-16px">{{ title }}</div>
+
+        <slot v-if="$slots.title" name="title">
         </slot>
+        <div v-else class="text-black text-16px">{{ title }}</div>
         <van-icon
             class="ml-auto"
             size="20"
diff --git a/app/pages/home/components/Column/index.vue b/app/pages/home/components/Column/index.vue
index 0449d1a..f2f018a 100644
--- a/app/pages/home/components/Column/index.vue
+++ b/app/pages/home/components/Column/index.vue
@@ -1,5 +1,6 @@
 
 <script setup>
+
 const props = defineProps({
   items: Array,
   colIndex: {
diff --git a/app/pages/liveRoom/components/SideButton/tangPopup.vue b/app/pages/liveRoom/components/SideButton/tangPopup.vue
index cc709c6..d76eaf0 100644
--- a/app/pages/liveRoom/components/SideButton/tangPopup.vue
+++ b/app/pages/liveRoom/components/SideButton/tangPopup.vue
@@ -1,7 +1,7 @@
 <script setup>
 import xPopup from '@/components/x-popup/index.vue'
 import {goodStore} from "~/stores/goods/index.js";
-import { showImagePreview } from 'vant';
+import xImage from '@/components/x-image/index.vue'
 const {pageRef,itemList} = goodStore();
 const props = defineProps({
   show: Boolean,
@@ -13,9 +13,7 @@ const props = defineProps({
 const emit = defineEmits(['update:show'])
 
 const close = () => emit('update:show', false);
-const openImage = (url) => {
-  showImagePreview([url]);
-}
+
 </script>
 
 <template>
@@ -32,14 +30,13 @@ const openImage = (url) => {
       >
         <div
             class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer"
-            @click="openImage(item.artwork.hdPic)"
         >
-          <img
+          <xImage
               class="w-80px h-80px"
-              :src="item.artwork.hdPic"
-              :alt="item.artworkTitle"
+              :src="item.artwork?.hdPic"
+              :alt="item?.artworkTitle"
               loading="lazy"
-          >
+          />
         </div>
         <div>
           <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
diff --git a/app/pages/profile/index.vue b/app/pages/profile/index.vue
index c4fb918..128966c 100644
--- a/app/pages/profile/index.vue
+++ b/app/pages/profile/index.vue
@@ -1,18 +1,36 @@
 <script setup>
 import {userArtworks} from "~/api/goods/index.js";
 import {authStore} from "~/stores/auth/index.js";
-
+import xImage from '@/components/x-image/index.vue'
 definePageMeta({
   layout: 'default',
   title: '我的',
   i18n: 'menu.profile',
 })
 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)
   }
 }
 initData()
@@ -29,55 +47,22 @@ initData()
       <div class="text-#575757 text-14px">{{userInfo.telNum}}</div>
     </div>
   </div>
-    <div class="flex-grow-1">
+    <div class="flex-grow-1 ">
       <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">我的拍品</div>
       </div>
-      <van-pull-refresh>
+      <van-pull-refresh     @refresh="initData">
         <van-list
             finished-text="没有更多了"
         >
-          <div class="px-16px pt-14px">
-            <div class="text-#575757 text-14px mb-3px">2025.01.12</div>
-            <div class="flex mb-22px">
-              <div class="flex-shrink-0 mr-10px">
-                <img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
+          <div class="px-16px pt-14px" v-for="(item,index) of showMyList">
+            <div class="text-#575757 text-14px mb-3px">{{item.userCreatedAt}}</div>
+            <div class="flex mb-22px" v-for="(item1,index1) of item.list">
+              <div class="flex-shrink-0 mr-10px rounded-4px overflow-hidden">
+                <x-image class="w-80px h-80px" :src="item1?.auctionArtworkInfo?.artwork?.hdPic" alt=""/>
               </div>
               <div class="flex flex-col justify-between">
-                <div class="text-#000 text-16px ellipsis line-height-21px">张天赐 | 日出而作，日落而息撒打算撒打算撒打决赛多久啊是世奥兰…</div>
-                <div class="text-#575757 text-14px line-height-none ">起拍价：RMB 1,000</div>
-                <div class="text-#B58047 text-14px line-height-none">成交价：RMB 10,000</div>
-              </div>
-            </div>
-            <div class="flex">
-              <div class="flex-shrink-0 mr-10px">
-                <img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
-              </div>
-              <div class="flex flex-col justify-between">
-                <div class="text-#000 text-16px ellipsis line-height-21px">张天赐 | 日出而作，日落而息撒打算撒打算撒打决赛多久啊是世奥兰…</div>
-                <div class="text-#575757 text-14px line-height-none ">起拍价：RMB 1,000</div>
-                <div class="text-[#fdc181ff] line-height-none">成交价：RMB 10,000</div>
-              </div>
-            </div>
-          </div>
-          <div class="px-16px pt-14px">
-            <div class="text-#575757 text-14px mb-3px">2025.01.12</div>
-            <div class="flex mb-22px">
-              <div class="flex-shrink-0 mr-10px">
-                <img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
-              </div>
-              <div class="flex flex-col justify-between">
-                <div class="text-#000 text-16px ellipsis line-height-21px">张天赐 | 日出而作，日落而息撒打算撒打算撒打决赛多久啊是世奥兰…</div>
-                <div class="text-#575757 text-14px line-height-none ">起拍价：RMB 1,000</div>
-                <div class="text-#B58047 text-14px line-height-none">成交价：RMB 10,000</div>
-              </div>
-            </div>
-            <div class="flex">
-              <div class="flex-shrink-0 mr-10px">
-                <img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
-              </div>
-              <div class="flex flex-col justify-between">
-                <div class="text-#000 text-16px ellipsis line-height-21px">张天赐 | 日出而作，日落而息撒打算撒打算撒打决赛多久啊是世奥兰…</div>
+                <div class="text-#000 text-16px ellipsis line-height-21px">{{item1?.auctionArtworkInfo?.artworkTitle}}</div>
                 <div class="text-#575757 text-14px line-height-none ">起拍价：RMB 1,000</div>
                 <div class="text-#B58047 text-14px line-height-none">成交价：RMB 10,000</div>
               </div>