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/demo.vue
+++ b/components/ImageSwiper/demo.vue
@@ -0,0 +1,151 @@
+<template>
+  <view class="demo-container">
+    <view class="demo-title">ImageSwiper 轮播图组件演示</view>
+    
+    <!-- 示例1: 默认圆角 -->
+    <view class="demo-section">
+      <view class="section-title">示例1: 默认圆角 (8px)</view>
+      <ImageSwiper />
+    </view>
+    
+    <!-- 示例2: 无圆角 -->
+    <view class="demo-section">
+      <view class="section-title">示例2: 无圆角 (0px)</view>
+      <ImageSwiper :border-radius="0" />
+    </view>
+    
+    <!-- 示例3: 大圆角 -->
+    <view class="demo-section">
+      <view class="section-title">示例3: 大圆角 (20px)</view>
+      <ImageSwiper :border-radius="20" />
+    </view>
+    
+    <!-- 示例4: 字符串圆角 -->
+    <view class="demo-section">
+      <view class="section-title">示例4: 字符串圆角 (1rem)</view>
+      <ImageSwiper border-radius="1rem" />
+    </view>
+    
+    <!-- 示例5: 自定义图片数据 -->
+    <view class="demo-section">
+      <view class="section-title">示例5: 自定义图片数据 + 圆角15px</view>
+      <ImageSwiper :border-radius="15" :images="customImages" />
+    </view>
+    
+    <!-- 示例7: 多图片测试滑动 -->
+    <view class="demo-section">
+      <view class="section-title">示例7: 多图片测试缩略图滑动</view>
+      <ImageSwiper :border-radius="10" :images="manyImages" />
+    </view>
+    
+    <!-- 示例6: 动态圆角控制 -->
+    <view class="demo-section">
+      <view class="section-title">示例6: 动态圆角控制</view>
+      <view class="control-panel">
+        <text>圆角大小: {{ dynamicRadius }}px</text>
+        <slider 
+          :value="dynamicRadius" 
+          :min="0" 
+          :max="50" 
+          @change="handleRadiusChange"
+          activeColor="#007AFF"
+        />
+      </view>
+      <ImageSwiper :border-radius="dynamicRadius" />
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import ImageSwiper from './index.vue'
+
+// 动态圆角控制
+const dynamicRadius = ref(8)
+
+// 自定义图片数据
+const customImages = ref([
+  {
+    photoUrl: "https://fastly.picsum.photos/id/100/654/400.jpg?hmac=lYhMw5jKKjJJKjJKjJKjJKjJKjJKjJKjJKjJKjJKjJK",
+    photoName: "自定义图片1",
+  },
+  {
+    photoUrl: "https://fastly.picsum.photos/id/200/654/400.jpg?hmac=lYhMw5jKKjJJKjJKjJKjJKjJKjJKjJKjJKjJKjJKjJK",
+    photoName: "自定义图片2",
+  },
+  {
+    photoUrl: "https://fastly.picsum.photos/id/300/654/400.jpg?hmac=lYhMw5jKKjJJKjJKjJKjJKjJKjJKjJKjJKjJKjJKjJK",
+    photoName: "自定义图片3",
+  }
+])
+
+// 多图片数据，用于测试缩略图滑动
+const manyImages = ref([
+  { photoUrl: "https://fastly.picsum.photos/id/10/654/400.jpg", photoName: "风景1" },
+  { photoUrl: "https://fastly.picsum.photos/id/20/654/400.jpg", photoName: "风景2" },
+  { photoUrl: "https://fastly.picsum.photos/id/30/654/400.jpg", photoName: "风景3" },
+  { photoUrl: "https://fastly.picsum.photos/id/40/654/400.jpg", photoName: "风景4" },
+  { photoUrl: "https://fastly.picsum.photos/id/50/654/400.jpg", photoName: "风景5" },
+  { photoUrl: "https://fastly.picsum.photos/id/60/654/400.jpg", photoName: "风景6" },
+  { photoUrl: "https://fastly.picsum.photos/id/70/654/400.jpg", photoName: "风景7" },
+  { photoUrl: "https://fastly.picsum.photos/id/80/654/400.jpg", photoName: "风景8" },
+  { photoUrl: "https://fastly.picsum.photos/id/90/654/400.jpg", photoName: "风景9" },
+  { photoUrl: "https://fastly.picsum.photos/id/110/654/400.jpg", photoName: "风景10" }
+])
+
+// 处理圆角变化
+const handleRadiusChange = (e) => {
+  dynamicRadius.value = e.detail.value
+}
+</script>
+
+<style scoped lang="scss">
+.demo-container {
+  padding: 20rpx;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+}
+
+.demo-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 40rpx;
+  color: #333;
+}
+
+.demo-section {
+  margin-bottom: 60rpx;
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+}
+
+.section-title {
+  font-size: 28rpx;
+  font-weight: 600;
+  margin-bottom: 20rpx;
+  color: #333;
+  border-left: 6rpx solid #007AFF;
+  padding-left: 16rpx;
+}
+
+.control-panel {
+  margin-bottom: 30rpx;
+  padding: 20rpx;
+  background: #f8f9fa;
+  border-radius: 12rpx;
+}
+
+.control-panel text {
+  display: block;
+  font-size: 24rpx;
+  color: #666;
+  margin-bottom: 16rpx;
+}
+
+slider {
+  width: 100%;
+}
+</style>