1231

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

@@ -0,0 +1,96 @@
+<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/utils/format.js

@@ -0,0 +1,44 @@
+/**
+ * 格式化价格
+ * @param {number} price - 价格数值
+ * @param {string} currency - 货币符号，默认为 ¥
+ * @returns {string} 格式化后的价格字符串
+ */
+export const formatPrice = (price, currency = '¥') => {
+  if (price == null || isNaN(price)) return `${currency}0`
+  
+  // 将价格转换为数字
+  const numPrice = Number(price)
+  
+  // 处理小数点，保留两位小数
+  const formattedPrice = numPrice.toFixed(2)
+  
+  // 添加千位分隔符
+  const parts = formattedPrice.toString().split('.')
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  
+  return `${currency}${parts.join('.')}`
+}
+
+/**
+ * 格式化数字
+ * @param {number} num - 需要格式化的数字
+ * @returns {string} 格式化后的数字字符串
+ */
+export const formatNumber = (num) => {
+  if (num == null || isNaN(num)) return '0'
+  
+  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+}
+
+/**
+ * 格式化百分比
+ * @param {number} value - 需要格式化的值
+ * @param {number} decimals - 小数位数，默认为 2
+ * @returns {string} 格式化后的百分比字符串
+ */
+export const formatPercent = (value, decimals = 2) => {
+  if (value == null || isNaN(value)) return '0%'
+  
+  return `${(Number(value) * 100).toFixed(decimals)}%`
+} 

nuxt.config.js

@@ -20,7 +20,7 @@ export default defineNuxtConfig({
       pages.push({
         name: 'home',
         path: '/',
-        file: '~/pages/home/index.vue'
+        file: '@/pages/home/index.vue'
       })
     }
   },