refactor(components): 重构弹窗组件和详情页展示逻辑

- 修改实名认证详情页布局- 优化 item 详情展示方式
- 调整弹窗组件样式
- 重命名 ItemDetailSheet 为 DetailPopup
- 更新相关组件引用

app/components/itemDetail/index.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { showImagePreview } from 'vant';
+import xImage from '@/components/x-image/index.vue'
 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',
@@ -15,7 +16,10 @@ const clickSwipe=(index)=>{
 
 <template>
 <div>
-  <van-swipe style="height: 188px" indicator-color="#B4B4B4"   lazy-render >
+  <div class="flex justify-center">
+    <xImage class="h-188px" src="https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png"></xImage>
+  </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"
@@ -24,7 +28,7 @@ const clickSwipe=(index)=>{
           :src="image"
       />
     </van-swipe-item>
-  </van-swipe>
+  </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">

app/components/x-popup/index.vue

@@ -25,13 +25,13 @@ 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">
+      <div class="flex items-center pl-16px pr-19px h-40px border-b-1px border-gray-300 shrink-0 relative w-full">
-
         <slot v-if="$slots.title" name="title">
         </slot>
-        <div v-else class="text-black text-16px">{{ title }}</div>
+        <div v-else class="text-black text-16px text-center flex-grow-1">{{ title }}</div>
         <van-icon
-            class="ml-auto"
+            style="position: absolute"
+            class="right-19px"
             size="20"
             name="cross"
             color="#939393"

app/pages/home/components/DetailPopup/index.vue

@@ -0,0 +1,20 @@
+<script setup>
+import xPopup from '@/components/x-popup/index.vue'
+import ItemDetail from "@/components/itemDetail/index.vue";
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:show'])
+const handleClose = () => {
+  emit('update:show', false)
+}
+</script>
+<template>
+  <xPopup :show="show" title="拍品详情" @update:show="handleClose">
+    <ItemDetail />
+  </xPopup>
+</template>

app/pages/home/components/ItemDetailSheet/index.vue

@@ -1,96 +0,0 @@
-<template>
-  <van-popup
-      v-model:show="props.show"
-      position="bottom"
-      :style="{ height: props.height }"
-      round
-      closeable
-      @closed="handleClose"
-  >
-    <div class="p-[16px] overflow-y-auto h-full">
-      <!-- 商品基本信息 -->
-      <div class="flex flex-col gap-[12px]">
-        <img
-            :src="props.detail?.artwork?.hdPic"
-            class="w-full rounded-[4px] object-cover"
-            :alt="props.detail?.name"
-        />
-        <div class="text-[16px] font-medium text-[#000]">
-          {{ props.detail?.name }}
-        </div>
-
-        <!-- 价格信息 -->
-        <div class="flex flex-col gap-[8px]">
-          <div class="text-[14px] text-[#575757]">
-            起拍价：{{ formatPrice(props.detail?.startPrice) }}
-          </div>
-          <div v-if="props.detail?.soldPrice" class="text-[14px] text-[#b58047]">
-            成交价：{{ formatPrice(props.detail?.soldPrice) }}
-          </div>
-        </div>
-
-        <!-- 商品详情 -->
-        <div class="mt-[16px]">
-          <div class="text-[16px] font-medium mb-[12px]">商品详情</div>
-          <div class="flex flex-col gap-[8px]">
-            <div class="flex justify-between text-[14px]">
-              <span class="text-[#575757]">尺寸</span>
-              <span>{{ props.detail?.artwork?.size || '-' }}</span>
-            </div>
-            <div class="flex justify-between text-[14px]">
-              <span class="text-[#575757]">年代</span>
-              <span>{{ props.detail?.artwork?.year || '-' }}</span>
-            </div>
-            <div class="flex justify-between text-[14px]">
-              <span class="text-[#575757]">材质</span>
-              <span>{{ props.detail?.artwork?.material || '-' }}</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- 作品描述 -->
-        <div v-if="props.detail?.artwork?.description" class="mt-[16px]">
-          <div class="text-[16px] font-medium mb-[12px]">作品描述</div>
-          <div class="text-[14px] text-[#575757] whitespace-pre-wrap">
-            {{ props.detail?.artwork?.description }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </van-popup>
-</template>
-
-<script setup>
-import { formatPrice } from '~/utils/format'
-
-const props = defineProps({
-  show: {
-    type: Boolean,
-    default: false
-  },
-  height: {
-    type: String,
-    default: '90vh'
-  },
-  detail: {
-    type: Object,
-    default: () => ({})
-  }
-})
-
-const emit = defineEmits(['update:show'])
-
-const handleClose = () => {
-  emit('update:show', false)
-}
-</script>
-
-<style scoped>
-:deep(.van-popup) {
-  max-height: 90vh;
-}
-
-:deep(.van-popup__close-icon) {
-  color: #000;
-}
-</style>

app/pages/home/components/ItemList/index.vue

@@ -3,7 +3,7 @@ import { ref, computed } from 'vue'
 import { useRect } from "@vant/use"
 import { goodStore } from "@/stores/goods"
 import Column from "../Column/index.vue"
-import ItemDetail from "@/components/itemDetail/index.vue"
+import DetailPopup from '../DetailPopup/index.vue'
 
 const {
   itemList,
@@ -90,20 +90,7 @@ const openShow = async (item) => {
         </div>
       </van-list>
     </van-pull-refresh>
-
+    <DetailPopup v-model:show="localState.showDetail"></DetailPopup>
-    <van-action-sheet
-        teleport="#__nuxt"
-        :round="false"
-        v-model:show="localState.showDetail"
-        title="拍品详情"
-    >
-      <div
-          class="content bg-[#F0F0F0]"
-          :style="`height: calc(100vh - ${localState.showHeight + 85}px)`"
-      >
-        <ItemDetail />
-      </div>
-    </van-action-sheet>
   </div>
 </template>
 

app/pages/realAuth/components/detail.vue

@@ -14,7 +14,7 @@ const {userInfo}= authStore()
 <template>
   <div class="text-#1A1A1A text-16px">
   <template v-if="type===0">
-    <div class="flex mb-20px" >
+    <div class="flex mb-20px">
       <div class="mr-10px">姓名：</div>
       <div>{{userInfo.realName}}</div>
     </div>