refactor(fittingRoom): 替换轮播组件并优化样式

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

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-->
+        <uni-swiper-dot
-        <hbxw-stack-carousel
+          :current="currentIndex"
-          :key="fittingRoomStore.testResults"
+          :dots-styles="dotsStyles"
-          :autoplay="false"
+          :info="fittingRoomStore.testResults"
-          :height="680"
+          :mode="'default'"
-          :interval="15000"
+          field="content"
-          :list="fittingRoomStore.testResults"
-          :width="430"
-          indicatorStyle="line"
-          loop
-          @change="handleChange"
-          @click="handleItemClick"
         >
-          <template #default="{ item, index }">
+          <swiper
-            <view class="custom-item">
+            :autoplay="false"
-              <image
+            :duration="500"
-                :src="item.tryOnResultUrl || '/static/uploads/loading12.gif'"
+            :interval="5000"
-                class="swiper-image"
+            :next-margin="'160rpx'"
-                mode="aspectFill"
+            :previous-margin="'160rpx'"
-              />
+            circular
-            </view>
+            class="swiper"
-          </template>
+            current="0"
-          <template #indicator="{ currentIndex, total, handleClick }">
+            @change="swiperChange"
-            <view class="custom-indicators">
+          >
-              <view
+            <swiper-item v-for="(item, index) in fittingRoomStore.testResults" :key="index">
-                v-for="i in total"
+              <view class="swiper-item">
-                :key="i"
+                <image
-                :class="{ active: currentIndex === i - 1 }"
+                  :class="['swiper-image', currentIndex === index ? 'active' : '']"
-                class="custom-indicator"
+                  :src="item.tryOnResultUrl || '/static/uploads/loading12.gif'"
-                @click="handleClick(i - 1)"
+                  mode="aspectFill"
-              ></view>
+                ></image>
-            </view>
+              </view>
-          </template>
+            </swiper-item>
-        </hbxw-stack-carousel>
+          </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) {
+  function swiperChange(event) {
-    console.log(index, item, '12');
+    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 {