From a8f749925337ac6b0f11b5d96ad384f9b4aac44a Mon Sep 17 00:00:00 2001
From: liguigong <liguigong@shopline.com>
Date: Fri, 10 Oct 2025 11:55:45 +0800
Subject: [PATCH] =?UTF-8?q?refactor(fittingRoom):=20=E6=9B=BF=E6=8D=A2?=
 =?UTF-8?q?=E8=BD=AE=E6=92=AD=E7=BB=84=E4=BB=B6=E5=B9=B6=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用 uni-swiper-dot 和 swiper 替换原有的 hbxw-stack-carousel 组件- 新增 dotsStyles 配置项来自定义指示器样式
- 添加 currentIndex 响应式变量以跟踪当前轮播索引
- 实现 swiperChange 方法来同步当前选中项
-为图片添加过渡动画和阴影效果提升视觉体验
- 调整 CSS 样式使当前展示项更加突出
- 移除旧组件相关代码及事件处理逻辑
---
 pages/fittingRoom/index.vue | 89 ++++++++++++++++++++++---------------
 1 file changed, 53 insertions(+), 36 deletions(-)

diff --git a/pages/fittingRoom/index.vue b/pages/fittingRoom/index.vue
index d9c2734..b9af8ba 100644
--- a/pages/fittingRoom/index.vue
+++ b/pages/fittingRoom/index.vue
@@ -2,40 +2,35 @@
   ><view>
     <uv-sticky :customNavHeight="0" :offset-top="0">
       <view class="uni-margin-wrap">
-        <!--    https://ext.dcloud.net.cn/plugin?id=22930-->
-        <hbxw-stack-carousel
-          :key="fittingRoomStore.testResults"
-          :autoplay="false"
-          :height="680"
-          :interval="15000"
-          :list="fittingRoomStore.testResults"
-          :width="430"
-          indicatorStyle="line"
-          loop
-          @change="handleChange"
-          @click="handleItemClick"
+        <uni-swiper-dot
+          :current="currentIndex"
+          :dots-styles="dotsStyles"
+          :info="fittingRoomStore.testResults"
+          :mode="'default'"
+          field="content"
         >
-          <template #default="{ item, index }">
-            <view class="custom-item">
-              <image
-                :src="item.tryOnResultUrl || '/static/uploads/loading12.gif'"
-                class="swiper-image"
-                mode="aspectFill"
-              />
-            </view>
-          </template>
-          <template #indicator="{ currentIndex, total, handleClick }">
-            <view class="custom-indicators">
-              <view
-                v-for="i in total"
-                :key="i"
-                :class="{ active: currentIndex === i - 1 }"
-                class="custom-indicator"
-                @click="handleClick(i - 1)"
-              ></view>
-            </view>
-          </template>
-        </hbxw-stack-carousel>
+          <swiper
+            :autoplay="false"
+            :duration="500"
+            :interval="5000"
+            :next-margin="'160rpx'"
+            :previous-margin="'160rpx'"
+            circular
+            class="swiper"
+            current="0"
+            @change="swiperChange"
+          >
+            <swiper-item v-for="(item, index) in fittingRoomStore.testResults" :key="index">
+              <view class="swiper-item">
+                <image
+                  :class="['swiper-image', currentIndex === index ? 'active' : '']"
+                  :src="item.tryOnResultUrl || '/static/uploads/loading12.gif'"
+                  mode="aspectFill"
+                ></image>
+              </view>
+            </swiper-item>
+          </swiper>
+        </uni-swiper-dot>
         <s-select-mote />
         <Clothespic />
       </view>
@@ -50,7 +45,7 @@
 </template>
 
 <script setup>
-  import { onMounted, reactive } from 'vue';
+  import { onMounted, reactive, ref } from 'vue';
   import { onLoad, onPullDownRefresh, onUnload } from '@dcloudio/uni-app';
   import sheep from '@/sheep';
   import SSelectMote from './components/s-select-mote.vue';
@@ -60,6 +55,14 @@
 
   const fittingRoomStore = sheep.$store('fittingRoom');
   let timer = null;
+  const dotsStyles = {
+    backgroundColor: 'rgba(255, 255, 255)',
+    border: '0px rgba(83, 200, 249,0.3) solid',
+    selectedBackgroundColor: 'rgba(23, 23, 23)',
+    selectedBorder: '0px rgba(83, 200, 249,0.9) solid',
+  };
+
+  const currentIndex = ref(0);
 
   // sheep.$helper.toast('请选择是否同意协议');
   // 隐藏原生tabBar
@@ -67,8 +70,8 @@
     fail: () => {},
   });
 
-  function handleItemClick(index, item) {
-    console.log(index, item, '12');
+  function swiperChange(event) {
+    currentIndex.value = event.detail.current;
   }
 
   onMounted(() => {
@@ -154,6 +157,20 @@
   .swiper-image {
     width: 430rpx;
     height: 680rpx;
+    box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2);
+    transform: scale(0.9) translate(0, 18px);
+    opacity: 0.3;
+    transition: all 0.2s ease-in 0.1s;
+  }
+  .active {
+    transform: scale(1) translate(0, 0);
+    z-index: 20;
+    opacity: 1;
+  }
+  :deep() {
+    .uni-swiper__dots-item {
+      height: 1px !important;
+    }
   }
 
   .swiper-item-card {