feat: 商品详情交互开发

components/ImageSwiper/index.vue

@@ -2,7 +2,7 @@
   <view class="image-swiper">
     <swiper
       class="swiper-box"
-      :style="borderRadiusStyle"
+      :style="swiperStyle"
       :autoplay="false"
       :interval="3000"
       :duration="1000"
@@ -23,7 +23,7 @@
     </view>
 
     <!-- 缩略图部分 -->
-    <view class="thumbnail-box">
+    <view v-if="showThumbnails" class="thumbnail-box">
       <scroll-view
         class="thumbnail-scroll"
         scroll-x="true"
@@ -63,6 +63,16 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  // 轮播图高度，支持数字(px)或字符串
+  height: {
+    type: [Number, String],
+    default: 200,
+  },
+  // 是否显示缩略图
+  showThumbnails: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 const active = ref(0);
@@ -79,6 +89,20 @@ const borderRadiusStyle = computed(() => {
   };
 });
 
+// 计算轮播图样式（包含高度和圆角）
+const swiperStyle = computed(() => {
+  const radius =
+    typeof props.borderRadius === "number"
+      ? `${props.borderRadius}px`
+      : props.borderRadius;
+  const swiperHeight =
+    typeof props.height === "number" ? `${props.height}px` : props.height;
+  return {
+    borderRadius: radius,
+    height: swiperHeight,
+  };
+});
+
 // 默认图片数据
 const defaultImages = [
   {