From e5fdd4e7ef3ee250a2e9bae9ac1ee04a27af4670 Mon Sep 17 00:00:00 2001
From: xingyy <64720302+Concur-max@users.noreply.github.com>
Date: Mon, 13 Jan 2025 09:40:19 +0800
Subject: [PATCH] =?UTF-8?q?refactor(components):=20=E5=B0=86=E6=8B=8D?=
 =?UTF-8?q?=E5=93=81=E8=AF=A6=E6=83=85=E7=A7=BB=E8=87=B3=E7=8B=AC=E7=AB=8B?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

-将拍品详情从首页组件中抽离，创建独立的 itemDetail 组件
- 在首页中引入并使用新的 itemDetail 组件- 优化代码结构，提高组件的可复用性和可维护性
---
 app/components/itemDetail/index.vue | 55 ++++++++++++++++++++++++++--
 app/pages/home/index.vue            | 56 ++---------------------------
 2 files changed, 56 insertions(+), 55 deletions(-)

diff --git a/app/components/itemDetail/index.vue b/app/components/itemDetail/index.vue
index 5762a82..6798f57 100644
--- a/app/components/itemDetail/index.vue
+++ b/app/components/itemDetail/index.vue
@@ -1,10 +1,61 @@
 <script setup>
-
+import { ImagePreview } from 'vant';
+const images = [
+  'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
+  'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/f7b65e23-ce21-41b4-8e58-9e6dc6950727.png',
+  'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/41eceb23-d168-4049-ae8e-48c5328b192f.png',
+];
+const clickSwipe=(index)=>{
+  showImagePreview({
+    images: images,
+    startPosition:index,
+  })
+}
 </script>
 
 <template>
 <div>
-
+  <van-swipe style="height: 188px" indicator-color="#B4B4B4"   lazy-render >
+    <van-swipe-item v-for="(image,index) in images" :key="image" @click="clickSwipe(index)">
+      <van-image
+          fit="contain"
+          width="100%"
+          :height="188"
+          :src="image"
+      />
+    </van-swipe-item>
+  </van-swipe>
+  <div class="px-[16px] bg-[#fff] pt-[11px] mb-6px">
+    <div class="text-[#000] text-[16px] mb-[12px]">日出而作，日落而息</div>
+    <div class="text-#575757 text-[14px] pb-8px">
+      <div class="flex mb-[4px]">
+        <div class="w-[70px]">作者：</div>
+        <div>张天赐</div>
+      </div>
+      <div class="flex mb-[4px]">
+        <div class="w-[70px] flex-shrink-0">总平尺数：</div>
+        <div>—</div>
+      </div>
+      <div class="flex mb-[4px]">
+        <div class="w-[70px] flex-shrink-0">长*宽：</div>
+        <div>100*200cm</div>
+      </div>
+      <div class="flex mb-[4px]">
+        <div class="w-[70px] flex-shrink-0">画作简介：</div>
+        <div>是打卡时间到卡上即可点击卡拉斯科健康就阿斯科利打卡时间到卡萨带手机的啊科技是打卡时</div>
+      </div>
+    </div>
+  </div>
+  <div class="flex px-[16px] bg-#fff h-[36px] items-center mb-6px">
+    <div class="text-[#575757] text-[14px]">起拍价：</div>
+    <div class="text-#575757 text-14px font-bold">RMB 1,000</div>
+  </div>
+  <div class="px-[16px] bg-#fff pt-12px pb-18px">
+    <div class="text-[#575757] text-[14px] mb-4px">竞价表：</div>
+    <div>
+      <img src="@/static/images/1981736313.png" alt="">
+    </div>
+  </div>
 </div>
 </template>
 
diff --git a/app/pages/home/index.vue b/app/pages/home/index.vue
index 3e44fe4..c8111be 100644
--- a/app/pages/home/index.vue
+++ b/app/pages/home/index.vue
@@ -1,8 +1,8 @@
 <script setup>
 import liveBroadcast from '@/components/liveBroadcast/index.vue'
 import { useRect } from '@vant/use';
-import { ImagePreview } from 'vant';
 
+import itemDetail from '@/components/itemDetail/index.vue'
 const liveRef=ref(null)
 const loading = ref(false)
 const finished = ref(false)
@@ -88,17 +88,7 @@ const openShow=()=>{
     show.value=true
   })
 }
-const images = [
-  'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
-  'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/f7b65e23-ce21-41b4-8e58-9e6dc6950727.png',
-  'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/41eceb23-d168-4049-ae8e-48c5328b192f.png',
-];
-const clickSwipe=(index)=>{
-  showImagePreview({
-    images: images,
-    startPosition:index,
-  })
-}
+
 </script>
 
 <template>
@@ -197,47 +187,7 @@ const clickSwipe=(index)=>{
   <van-back-top right="15vw" bottom="10vh"/>
   <van-action-sheet :round="false" v-model:show="show" title="拍品详情">
     <div class="content bg-[#F0F0F0]" :style="`height: calc(100vh - ${showHeight+85}px)`">
-      <van-swipe style="height: 188px" indicator-color="#B4B4B4"   lazy-render >
-        <van-swipe-item v-for="(image,index) in images" :key="image" @click="clickSwipe(index)">
-          <van-image
-              fit="contain"
-              width="100%"
-              :height="188"
-              :src="image"
-          />
-        </van-swipe-item>
-      </van-swipe>
-      <div class="px-[16px] bg-[#fff] pt-[11px] mb-6px">
-        <div class="text-[#000] text-[16px] mb-[12px]">日出而作，日落而息</div>
-        <div class="text-#575757 text-[14px] pb-8px">
-          <div class="flex mb-[4px]">
-            <div class="w-[70px]">作者：</div>
-            <div>张天赐</div>
-          </div>
-          <div class="flex mb-[4px]">
-            <div class="w-[70px] flex-shrink-0">总平尺数：</div>
-            <div>—</div>
-          </div>
-          <div class="flex mb-[4px]">
-            <div class="w-[70px] flex-shrink-0">长*宽：</div>
-            <div>100*200cm</div>
-          </div>
-          <div class="flex mb-[4px]">
-            <div class="w-[70px] flex-shrink-0">画作简介：</div>
-            <div>是打卡时间到卡上即可点击卡拉斯科健康就阿斯科利打卡时间到卡萨带手机的啊科技是打卡时</div>
-          </div>
-        </div>
-      </div>
-      <div class="flex px-[16px] bg-#fff h-[36px] items-center mb-6px">
-        <div class="text-[#575757] text-[14px]">起拍价：</div>
-        <div class="text-#575757 text-14px font-bold">RMB 1,000</div>
-      </div>
-      <div class="px-[16px] bg-#fff pt-12px pb-18px">
-        <div class="text-[#575757] text-[14px] mb-4px">竞价表：</div>
-        <div>
-          <img src="@/static/images/1981736313.png" alt="">
-        </div>
-      </div>
+      <itemDetail></itemDetail>
     </div>
   </van-action-sheet>
 </template>