feat: 商品详情交互开发

2025-08-03 18:06:06 +08:00
parent 42c5354978
commit 5e0d53fc20
22 changed files with 1906 additions and 582 deletions
--- a/components/ImageSwiper/README.md
+++ b/components/ImageSwiper/README.md
@@ -5,7 +5,9 @@
 ## 功能特性

 - 🎨 **可配置圆角**：支持数字(px)或字符串形式的圆角设置
+- 📏 **可配置高度**：支持数字(px)或字符串形式的高度设置
 - 🖼️ **缩略图导航**：底部缩略图快速切换，支持左右滑动
+- 👁️ **缩略图控制**：可配置显示或隐藏缩略图
 - 📱 **响应式设计**：适配不同屏幕尺寸
 - 🎯 **自定义数据**：支持传入自定义图片数据
 - 📊 **进度指示器**：显示当前图片位置
@@ -42,6 +44,37 @@ import ImageSwiper from '@/components/ImageSwiper/index.vue'
 </template>
 ```

+### 自定义高度
+
+```vue
+<template>
+  <!-- 数字形式 (px) -->
+  <ImageSwiper :height="300" />
+  
+  <!-- 字符串形式 -->
+  <ImageSwiper height="50vh" />
+  
+  <!-- 小高度轮播图 -->
+  <ImageSwiper :height="120" />
+</template>
+```
+
+### 隐藏缩略图
+
+```vue
+<template>
+  <!-- 隐藏缩略图，只显示主轮播图 -->
+  <ImageSwiper :show-thumbnails="false" />
+  
+  <!-- 结合其他属性使用 -->
+  <ImageSwiper 
+    :height="250" 
+    :border-radius="15" 
+    :show-thumbnails="false" 
+  />
+</template>
+```
+
 ### 自定义图片数据

 ```vue
@@ -97,6 +130,8 @@ const manyImages = ref([
 | 参数 | 类型 | 默认值 | 说明 |
 |------|------|--------|------|
 | borderRadius | Number \| String | 8 | 轮播图圆角大小，数字时单位为px |
+| height | Number \| String | 200 | 轮播图高度，数字时单位为px |
+| showThumbnails | Boolean | true | 是否显示缩略图 |
 | images | Array | [] | 图片数据数组，为空时使用默认数据 |

 ### images 数组结构
@@ -157,21 +192,79 @@ const handleChange = (e) => {

 ## 高级用法

-### 响应式圆角
+### 响应式配置

 ```vue
 <template>
-  <ImageSwiper :border-radius="responsiveRadius" />
+  <ImageSwiper 
+    :border-radius="responsiveRadius" 
+    :height="responsiveHeight"
+    :show-thumbnails="showThumbnails"
+  />
 </template>

 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'

-// 根据屏幕宽度动态调整圆角
+// 根据屏幕宽度动态调整圆角和高度
 const responsiveRadius = computed(() => {
  const screenWidth = uni.getSystemInfoSync().screenWidth
  return screenWidth > 750 ? 16 : 8
 })
+
+const responsiveHeight = computed(() => {
+  const screenWidth = uni.getSystemInfoSync().screenWidth
+  return screenWidth > 750 ? 300 : 200
+})
+
+// 动态控制缩略图显示
+const showThumbnails = ref(true)
+</script>
+```
+
+### 动态控制示例
+
+```vue
+<template>
+  <view>
+    <!-- 控制面板 -->
+    <view class="control-panel">
+      <text>高度: {{ dynamicHeight }}px</text>
+      <slider 
+        :value="dynamicHeight" 
+        :min="100" 
+        :max="400" 
+        @change="handleHeightChange"
+      />
+      
+      <view class="checkbox-wrapper">
+        <checkbox :checked="showThumbnails" @change="handleThumbnailToggle" />
+        <text>显示缩略图</text>
+      </view>
+    </view>
+    
+    <!-- 轮播图组件 -->
+    <ImageSwiper 
+      :height="dynamicHeight" 
+      :show-thumbnails="showThumbnails" 
+      :border-radius="10" 
+    />
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const dynamicHeight = ref(200)
+const showThumbnails = ref(true)
+
+const handleHeightChange = (e) => {
+  dynamicHeight.value = e.detail.value
+}
+
+const handleThumbnailToggle = (e) => {
+  showThumbnails.value = e.detail.value
+}
 </script>
 ```

@@ -196,12 +289,22 @@ const themeRadius = computed(() => {
 ## 注意事项

 1. **圆角单位**：数字类型自动添加px单位，字符串类型直接使用
-2. **图片比例**：建议使用相同比例的图片以获得最佳显示效果
-3. **性能优化**：大量图片时建议使用懒加载
-4. **兼容性**：支持微信小程序、H5、App等平台
+2. **高度单位**：数字类型自动添加px单位，字符串类型直接使用（支持vh、rem等）
+3. **缩略图显示**：当设置 `showThumbnails` 为 `false` 时，缩略图完全隐藏
+4. **图片比例**：建议使用相同比例的图片以获得最佳显示效果
+5. **性能优化**：大量图片时建议使用懒加载
+6. **兼容性**：支持微信小程序、H5、App等平台

 ## 更新日志

+### v1.3.0
+- ✨ 新增 `height` 属性，支持自定义轮播图高度
+- ✨ 新增 `showThumbnails` 属性，支持隐藏缩略图
+- 🎨 优化样式系统，移除硬编码高度
+- 🔧 改进计算属性，支持动态高度和缩略图控制
+- 📝 更新文档和演示示例，新增多个高级用法示例
+- 🎯 增强组件灵活性，适应更多使用场景
+
 ### v1.2.0
 - ✨ 新增缩略图左右滑动功能
 - ✨ 新增缩略图选中状态高亮显示
--- a/components/ImageSwiper/demo.vue
+++ b/components/ImageSwiper/demo.vue
@@ -53,6 +53,54 @@
      </view>
      <ImageSwiper :border-radius="dynamicRadius" />
    </view>
+    
+    <!-- 示例8: 自定义高度 -->
+    <view class="demo-section">
+      <view class="section-title">示例8: 自定义高度 (300px)</view>
+      <ImageSwiper :height="300" :border-radius="12" />
+    </view>
+    
+    <!-- 示例9: 小高度轮播图 -->
+    <view class="demo-section">
+      <view class="section-title">示例9: 小高度轮播图 (120px)</view>
+      <ImageSwiper :height="120" :border-radius="8" />
+    </view>
+    
+    <!-- 示例10: 隐藏缩略图 -->
+    <view class="demo-section">
+      <view class="section-title">示例10: 隐藏缩略图</view>
+      <ImageSwiper :show-thumbnails="false" :border-radius="15" />
+    </view>
+    
+    <!-- 示例11: 动态高度和缩略图控制 -->
+    <view class="demo-section">
+      <view class="section-title">示例11: 动态高度和缩略图控制</view>
+      <view class="control-panel">
+        <text>高度: {{ dynamicHeight }}px</text>
+        <slider 
+          :value="dynamicHeight" 
+          :min="100" 
+          :max="400" 
+          @change="handleHeightChange"
+          activeColor="#007AFF"
+        />
+        <view class="checkbox-wrapper">
+          <checkbox :checked="showThumbnails" @change="handleThumbnailToggle" />
+          <text class="checkbox-label">显示缩略图</text>
+        </view>
+      </view>
+      <ImageSwiper 
+        :height="dynamicHeight" 
+        :show-thumbnails="showThumbnails" 
+        :border-radius="10" 
+      />
+    </view>
+    
+    <!-- 示例12: 字符串高度 -->
+    <view class="demo-section">
+      <view class="section-title">示例12: 字符串高度 (50vh)</view>
+      <ImageSwiper height="50vh" :border-radius="20" :show-thumbnails="false" />
+    </view>
  </view>
 </template>

@@ -63,6 +111,12 @@ import ImageSwiper from './index.vue'
 // 动态圆角控制
 const dynamicRadius = ref(8)

+// 动态高度控制
+const dynamicHeight = ref(200)
+
+// 缩略图显示控制
+const showThumbnails = ref(true)
+
 // 自定义图片数据
 const customImages = ref([
  {
@@ -97,6 +151,16 @@ const manyImages = ref([
 const handleRadiusChange = (e) => {
  dynamicRadius.value = e.detail.value
 }
+
+// 处理高度变化
+const handleHeightChange = (e) => {
+  dynamicHeight.value = e.detail.value
+}
+
+// 处理缩略图显示切换
+const handleThumbnailToggle = (e) => {
+  showThumbnails.value = e.detail.value
+}
 </script>

 <style scoped lang="scss">
@@ -148,4 +212,16 @@ const handleRadiusChange = (e) => {
 slider {
  width: 100%;
 }
+
+.checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  margin-top: 20rpx;
+}
+
+.checkbox-label {
+  margin-left: 16rpx;
+  font-size: 24rpx;
+  color: #666;
+}
 </style>
--- a/components/ImageSwiper/index.vue
+++ b/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 = [
  {
--- a/components/ImageSwiper/styles/index.scss
+++ b/components/ImageSwiper/styles/index.scss
@@ -4,9 +4,8 @@
 }

 .swiper-box {
-  height: 200px;
  overflow: hidden;
-  // 圆角通过内联样式动态设置
+  // 高度和圆角通过内联样式动态设置
 }

 .swiper-item image {