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) => {

components/ImageSwiper/styles/index.scss

@@ -1,81 +1,80 @@
 .image-swiper {
-  position: relative;
-  width: 100%;
+    position: relative;
+    width: 100%;
 }
 
 .swiper-box {
-  overflow: hidden;
-  // 高度和圆角通过内联样式动态设置
+    overflow: hidden;
+    // 高度和圆角通过内联样式动态设置
 }
 
 .swiper-item image {
-  width: 100%;
-  height: 100%;
+    width: 100%;
+    height: 100%;
 }
 
 .custom-indicator {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  z-index: 10;
-  background: rgba(0, 0, 0, 0.5);
-  border-radius: 50px;
-  padding: 3px 8px;
-  font-size: 8px;
-  color: #fff;
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: 10;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 50px;
+    padding: 3px 8px;
+    font-size: 8px;
+    color: #fff;
 }
 
 .thumbnail-box {
-  position: absolute;
-  left: 12px;
-  right: 12px;
-  bottom: 0px;
-  height: 60px;
+    position: absolute;
+    left: 12px;
+    right: 12px;
+    height: 60px;
 }
 
 .thumbnail-scroll {
-  width: 100%;
-  height: 100%;
-  white-space: nowrap;
+    width: 100%;
+    height: 100%;
+    white-space: nowrap;
 }
 
 .thumbnail-list {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 0 5px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 0 5px;
 }
 
 .thumbnail-item {
-  flex-shrink: 0;
-  text-align: center;
-  transition: all 0.3s ease;
+    flex-shrink: 0;
+    text-align: center;
+    transition: all 0.3s ease;
 
-  &.active {
-    image {
-      border: 1px solid #fff;
+    &.active {
+        image {
+            border: 1px solid #fff;
+        }
     }
-  }
 }
 
 .thumbnail-item image {
-  width: 48px;
-  height: 38px;
-  border-radius: 4px;
-  box-sizing: border-box;
-  border: 1px solid transparent;
-  transition: all 0.3s ease;
-  display: block;
+    width: 48px;
+    height: 38px;
+    border-radius: 4px;
+    box-sizing: border-box;
+    border: 1px solid transparent;
+    transition: all 0.3s ease;
+    display: block;
 }
 
 .thumbnail-item text {
-  color: #fff;
-  font-size: 8px;
-  display: block;
-  margin-top: 4px;
-  transition: all 0.3s ease;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 48px;
+    color: #fff;
+    font-size: 8px;
+    display: block;
+    margin-top: 4px;
+    transition: all 0.3s ease;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 48px;
 }