feat: 商品详情页面交互

components/ImageSwiper/index.vue

@@ -2,17 +2,19 @@
   <view class="image-swiper">
     <swiper
       class="swiper-box"
+      :style="borderRadiusStyle"
       :autoplay="false"
       :interval="3000"
       :duration="1000"
       :current="active"
+      @change="handleSwiperChange"
     >
       <swiper-item
         class="swiper-item"
         v-for="(item, index) in thumbnails"
         :key="index"
       >
-        <image :src="item.url" mode="aspectFill"></image>
+        <image :src="item.photoUrl" mode="aspectFill"></image>
       </swiper-item>
     </swiper>
 
@@ -20,50 +22,122 @@
       图片{{ active + 1 }}/{{ thumbnails.length }}
     </view>
 
+    <!-- 缩略图部分 -->
     <view class="thumbnail-box">
-      <view
-        v-for="(thumb, index) in thumbnails"
-        :key="index"
-        class="thumbnail-item"
-        @click="handleThumbnailClick(index)"
+      <scroll-view
+        class="thumbnail-scroll"
+        scroll-x="true"
+        :scroll-left="scrollLeft"
+        :scroll-with-animation="true"
+        show-scrollbar="false"
       >
-        <image :src="thumb.url" mode="aspectFill"></image>
-        <text>{{ thumb.description }}</text>
-      </view>
+        <view class="thumbnail-list">
+          <view
+            v-for="(thumb, index) in thumbnails"
+            :key="index"
+            :class="['thumbnail-item', { active: index === active }]"
+            :id="`thumbnail-${index}`"
+            @click="handleThumbnailClick(index)"
+          >
+            <image :src="thumb.photoUrl" mode="aspectFill"></image>
+            <text>{{ thumb.photoName }}</text>
+          </view>
+        </view>
+      </scroll-view>
     </view>
   </view>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, computed, nextTick } from "vue";
+
+// Props定义
+const props = defineProps({
+  // 轮播图圆角大小，支持数字(px)或字符串
+  borderRadius: {
+    type: [Number, String],
+    default: 8,
+  },
+  // 轮播图数据
+  images: {
+    type: Array,
+    default: () => [],
+  },
+});
 
 const active = ref(0);
+const scrollLeft = ref(0);
 
-const thumbnails = ref([
+// 计算圆角样式
+const borderRadiusStyle = computed(() => {
+  const radius =
+    typeof props.borderRadius === "number"
+      ? `${props.borderRadius}px`
+      : props.borderRadius;
+  return {
+    borderRadius: radius,
+  };
+});
+
+// 默认图片数据
+const defaultImages = [
   {
-    url: "https://fastly.picsum.photos/id/866/654/400.jpg?hmac=z3vI4CYrpnXEgimSlJCDwXRxEa-UDHiRwzGEyB8V-po",
-    description: "瑶山古寨",
+    photoUrl:
+      "https://fastly.picsum.photos/id/866/654/400.jpg?hmac=z3vI4CYrpnXEgimSlJCDwXRxEa-UDHiRwzGEyB8V-po",
+    photoName: "瑶山古寨",
   },
   {
-    url: "https://fastly.picsum.photos/id/284/654/400.jpg?hmac=89XRCJxYTblKIFGLOp6hJ9U0GC8BQrcnJwE5pG21NAk",
-    description: "民俗表演",
+    photoUrl:
+      "https://fastly.picsum.photos/id/284/654/400.jpg?hmac=89XRCJxYTblKIFGLOp6hJ9U0GC8BQrcnJwE5pG21NAk",
+    photoName: "民俗表演",
   },
   {
-    url: "https://fastly.picsum.photos/id/281/654/400.jpg?hmac=hcAJB7y2Xz3DVuz6S4XeQZgzaTJ_QWnxtbnaagZL6Fs",
-    description: "特色美食",
+    photoUrl:
+      "https://fastly.picsum.photos/id/281/654/400.jpg?hmac=hcAJB7y2Xz3DVuz6S4XeQZgzaTJ_QWnxtbnaagZL6Fs",
+    photoName: "特色美食",
   },
   {
-    url: "https://fastly.picsum.photos/id/435/654/400.jpg?hmac=TSVDxfo-zXbunxNQK0erSG_nmKcS20xfhbQsCAXLlHo",
-    description: "传统服饰",
+    photoUrl:
+      "https://fastly.picsum.photos/id/435/654/400.jpg?hmac=TSVDxfo-zXbunxNQK0erSG_nmKcS20xfhbQsCAXLlHo",
+    photoName: "传统服饰",
   },
   {
-    url: "https://fastly.picsum.photos/id/737/654/400.jpg?hmac=VED05oEK3XB0Aa_DUVoZjTAf0bHjAmNYyJky4lq5vVo",
-    description: "其他",
+    photoUrl:
+      "https://fastly.picsum.photos/id/737/654/400.jpg?hmac=VED05oEK3XB0Aa_DUVoZjTAf0bHjAmNYyJky4lq5vVo",
+    photoName: "其他",
   },
-]);
+];
+
+// 使用传入的图片数据或默认数据
+const thumbnails = computed(() => {
+  return props.images.length ? props.images : defaultImages;
+});
 
 const handleThumbnailClick = (index) => {
   active.value = index;
+  scrollToActiveItem(index);
+};
+
+// 滚动到选中项
+const scrollToActiveItem = async (index) => {
+  await nextTick();
+
+  // 计算每个缩略图项的宽度（包括间距）
+  const itemWidth = 58; // 48px宽度 + 10px间距
+  const containerWidth = 300; // 大概的容器宽度
+  const targetScrollLeft = Math.max(
+    0,
+    index * itemWidth - containerWidth / 2 + itemWidth / 2
+  );
+
+  scrollLeft.value = targetScrollLeft;
+};
+
+// 监听主轮播图变化，同步缩略图滚动
+const handleSwiperChange = (e) => {
+  const currentIndex = e.detail.current;
+  active.value = currentIndex;
+  scrollToActiveItem(currentIndex);
 };
 </script>