feat: 商品详情异常问题处理

components/ImageSwiper/index.vue

@@ -14,7 +14,7 @@
         v-for="(item, index) in thumbnails"
         :key="index"
       >
-        <image :src="item.imageUrl" mode="aspectFill"></image>
+        <image :src="item.photoUrl" mode="aspectFill"></image>
       </swiper-item>
     </swiper>
 
@@ -23,7 +23,11 @@
     </view>
 
     <!-- 缩略图部分 -->
-    <view v-if="showThumbnails" class="thumbnail-box">
+    <view
+      v-if="showThumbnails"
+      class="thumbnail-box"
+      :style="thumbnailBoxStyle"
+    >
       <scroll-view
         class="thumbnail-scroll"
         scroll-x="true"
@@ -39,8 +43,8 @@
             :id="`thumbnail-${index}`"
             @click="handleThumbnailClick(index)"
           >
-            <image :src="thumb.imageUrl" mode="aspectFill"></image>
-            <text>{{ thumb.name }}</text>
+            <image :src="thumb.photoUrl" mode="aspectFill"></image>
+            <text>{{ thumb.photoName }}</text>
           </view>
         </view>
       </scroll-view>
@@ -73,6 +77,11 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  // 缩略图距离底部的距离，支持数字(px)或字符串
+  thumbnailBottom: {
+    type: [Number, String],
+    default: 0,
+  },
 });
 
 const active = ref(0);
@@ -103,38 +112,18 @@ const swiperStyle = computed(() => {
   };
 });
 
-// 默认图片数据
-const defaultImages = [
-  {
-    imageUrl:
-      "https://one-feel-image-bucket.oss-cn-chengdu.aliyuncs.com/DH04006.jpg",
-    name: "瑶山古寨",
-  },
-  {
-    imageUrl:
-      "https://one-feel-image-bucket.oss-cn-chengdu.aliyuncs.com/DH04002.JPG",
-      name: "民俗表演",
-  },
-  {
-    imageUrl:
-      "https://one-feel-image-bucket.oss-cn-chengdu.aliyuncs.com/DH04007.jpg",
-      name: "特色美食",
-  },
-  {
-    imageUrl:
-      "https://one-feel-image-bucket.oss-cn-chengdu.aliyuncs.com/DH04014.JPG",
-    name: "传统服饰",
-  },
-  {
-    imageUrl:
-      "https://one-feel-image-bucket.oss-cn-chengdu.aliyuncs.com/DH04020.JPG",
-    name: "其他",
-  },
-];
-
 // 使用传入的图片数据或默认数据
-const thumbnails = computed(() => {
-  return props.images;
+const thumbnails = computed(() => props.images);
+
+// 计算缩略图底部距离样式
+const thumbnailBoxStyle = computed(() => {
+  const bottom =
+    typeof props.thumbnailBottom === "number"
+      ? `${props.thumbnailBottom}px`
+      : props.thumbnailBottom;
+  return {
+    bottom: bottom,
+  };
 });
 
 const handleThumbnailClick = (index) => {