feat: 商品详情页面交互

2025-08-02 17:35:57 +08:00
parent 9d6abe3e2a
commit ea5841d594
28 changed files with 1967 additions and 268 deletions
--- a/components/ImageSwiper/README.md
+++ b/components/ImageSwiper/README.md
@@ -0,0 +1,239 @@
+# ImageSwiper 轮播图组件
+
+一个功能丰富的轮播图组件，支持自定义圆角、缩略图导航和图片描述。
+
+## 功能特性
+
+- 🎨 **可配置圆角**：支持数字(px)或字符串形式的圆角设置
+- 🖼️ **缩略图导航**：底部缩略图快速切换，支持左右滑动
+- 📱 **响应式设计**：适配不同屏幕尺寸
+- 🎯 **自定义数据**：支持传入自定义图片数据
+- 📊 **进度指示器**：显示当前图片位置
+- 🎭 **选中状态**：缩略图选中时高亮显示，带缩放动画
+- 🔄 **自动滚动**：缩略图自动滚动到可视区域
+- ⚡ **性能优化**：使用计算属性优化渲染
+
+## 基础用法
+
+### 默认使用
+
+```vue
+<template>
+  <ImageSwiper />
+</template>
+
+<script setup>
+import ImageSwiper from '@/components/ImageSwiper/index.vue'
+</script>
+```
+
+### 自定义圆角
+
+```vue
+<template>
+  <!-- 数字形式 (px) -->
+  <ImageSwiper :border-radius="12" />
+  
+  <!-- 字符串形式 -->
+  <ImageSwiper border-radius="1rem" />
+  
+  <!-- 无圆角 -->
+  <ImageSwiper :border-radius="0" />
+</template>
+```
+
+### 自定义图片数据
+
+```vue
+<template>
+  <ImageSwiper 
+    :border-radius="15" 
+    :images="customImages" 
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import ImageSwiper from '@/components/ImageSwiper/index.vue'
+
+const customImages = ref([
+  {
+    photoUrl: "https://example.com/image1.jpg",
+    photoName: "图片描述1"
+  },
+  {
+    photoUrl: "https://example.com/image2.jpg",
+    photoName: "图片描述2"
+  }
+])
+</script>
+```
+
+### 缩略图滑动功能
+
+组件支持缩略图左右滑动，当图片数量较多时，缩略图会自动滚动到可视区域：
+
+```vue
+<template>
+  <!-- 多图片展示，缩略图支持滑动 -->
+  <ImageSwiper :images="manyImages" />
+</template>
+
+<script setup>
+const manyImages = ref([
+  { photoUrl: "https://example.com/1.jpg", photoName: "图片1" },
+  { photoUrl: "https://example.com/2.jpg", photoName: "图片2" },
+  { photoUrl: "https://example.com/3.jpg", photoName: "图片3" },
+  // ... 更多图片
+  { photoUrl: "https://example.com/10.jpg", photoName: "图片10" }
+])
+</script>
+```
+
+## API 文档
+
+### Props
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| borderRadius | Number \| String | 8 | 轮播图圆角大小，数字时单位为px |
+| images | Array | [] | 图片数据数组，为空时使用默认数据 |
+
+### images 数组结构
+
+```typescript
+interface ImageItem {
+  photoUrl: string;   // 图片URL
+  photoName: string;  // 图片名称/描述
+}
+```
+
+## 样式定制
+
+### 圆角配置示例
+
+```vue
+<!-- 小圆角 -->
+<ImageSwiper :border-radius="4" />
+
+<!-- 中等圆角 -->
+<ImageSwiper :border-radius="12" />
+
+<!-- 大圆角 -->
+<ImageSwiper :border-radius="24" />
+
+<!-- 使用rem单位 -->
+<ImageSwiper border-radius="0.5rem" />
+
+<!-- 使用百分比 -->
+<ImageSwiper border-radius="10%" />
+```
+
+### 动态圆角控制
+
+```vue
+<template>
+  <view>
+    <slider 
+      :value="radius" 
+      :min="0" 
+      :max="50" 
+      @change="handleChange"
+    />
+    <ImageSwiper :border-radius="radius" />
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const radius = ref(8)
+
+const handleChange = (e) => {
+  radius.value = e.detail.value
+}
+</script>
+```
+
+## 高级用法
+
+### 响应式圆角
+
+```vue
+<template>
+  <ImageSwiper :border-radius="responsiveRadius" />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+// 根据屏幕宽度动态调整圆角
+const responsiveRadius = computed(() => {
+  const screenWidth = uni.getSystemInfoSync().screenWidth
+  return screenWidth > 750 ? 16 : 8
+})
+</script>
+```
+
+### 主题适配
+
+```vue
+<template>
+  <ImageSwiper :border-radius="themeRadius" />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+// 根据主题调整圆角
+const isDarkMode = ref(false)
+const themeRadius = computed(() => {
+  return isDarkMode.value ? 12 : 8
+})
+</script>
+```
+
+## 注意事项
+
+1. **圆角单位**：数字类型自动添加px单位，字符串类型直接使用
+2. **图片比例**：建议使用相同比例的图片以获得最佳显示效果
+3. **性能优化**：大量图片时建议使用懒加载
+4. **兼容性**：支持微信小程序、H5、App等平台
+
+## 更新日志
+
+### v1.2.0
+- ✨ 新增缩略图左右滑动功能
+- ✨ 新增缩略图选中状态高亮显示
+- ✨ 新增缩略图自动滚动到可视区域
+- 🎨 优化缩略图动画效果和交互体验
+- 🔧 改进主轮播图与缩略图的联动机制
+- 📝 更新文档和演示示例
+
+### v1.1.0
+- ✨ 新增 `borderRadius` 属性，支持自定义圆角
+- ✨ 新增 `images` 属性，支持自定义图片数据
+- 🔧 优化组件结构，使用计算属性提升性能
+- 📝 完善文档和示例
+
+### v1.0.0
+- 🎉 初始版本发布
+- ✨ 基础轮播图功能
+- ✨ 缩略图导航
+- ✨ 进度指示器
+
+## 技术栈
+
+- Vue 3 Composition API
+- SCSS
+- uni-app
+
+## 浏览器支持
+
+- 微信小程序
+- H5 (Chrome, Firefox, Safari, Edge)
+- App (iOS, Android)
+
+## 许可证
+
+MIT License