feat(fittingRoom):优化试衣间轮播图逻辑与加载状态检测 swiper

- 新增CurrentIndex 状态管理当前轮播索引
- 移除数组反转逻辑，调整模特展示顺序
- 添加 generatingLoading 计算属性检测试穿结果生成状态
- 更新轮播图组件绑定状态为 store 中的 swiperCurrentIndex
- 修复轮播切换事件更新 store 状态的逻辑
- 调整定时任务检测条件为 generatingLoading 状态- 微调轮播图片样式位置

pages/fittingRoom/index.vue

@@ -1,47 +1,48 @@
-<template
+<template>
-  ><view>
+  <uv-sticky :customNavHeight="0" :offset-top="0">
-    <uv-sticky :customNavHeight="0" :offset-top="0">
+    <view class="uni-margin-wrap">
-      <view class="uni-margin-wrap">
+      <uni-swiper-dot
-        <uni-swiper-dot
+        :current="fittingRoomStore.swiperCurrentIndex"
-          :current="currentIndex"
+        :dots-styles="dotsStyles"
-          :dots-styles="dotsStyles"
+        :info="fittingRoomStore.testResults"
-          :info="fittingRoomStore.testResults"
+        :mode="'default'"
-          :mode="'default'"
+        field="content"
-          field="content"
+      >
+        <swiper
+          :autoplay="false"
+          :duration="500"
+          :interval="5000"
+          :next-margin="'160rpx'"
+          :previous-margin="'160rpx'"
+          circular
+          class="swiper"
+          current="0"
+          @change="swiperChange"
         >
-          <swiper
+          <swiper-item v-for="(item, index) in fittingRoomStore.testResults" :key="index">
-            :autoplay="false"
+            <view class="swiper-item">
-            :duration="500"
+              <image
-            :interval="5000"
+                :class="[
-            :next-margin="'160rpx'"
+                  'swiper-image',
-            :previous-margin="'160rpx'"
+                  fittingRoomStore.swiperCurrentIndex === index ? 'active' : '',
-            circular
+                ]"
-            class="swiper"
+                :src="item.tryOnResultUrl || '/static/uploads/loading12.gif'"
-            current="0"
+                mode="aspectFill"
-            @change="swiperChange"
+              ></image>
-          >
+            </view>
-            <swiper-item v-for="(item, index) in fittingRoomStore.testResults" :key="index">
+          </swiper-item>
-              <view class="swiper-item">
+        </swiper>
-                <image
+      </uni-swiper-dot>
-                  :class="['swiper-image', currentIndex === index ? 'active' : '']"
+      <s-select-mote />
-                  :src="item.tryOnResultUrl || '/static/uploads/loading12.gif'"
+      <Clothespic />
-                  mode="aspectFill"
-                ></image>
-              </view>
-            </swiper-item>
-          </swiper>
-        </uni-swiper-dot>
-        <s-select-mote />
-        <Clothespic />
-      </view>
-
-      <s-tabs />
-    </uv-sticky>
-    <view class="scroll">
-      <s-grid-clothes />
-      <view class="height1"></view>
     </view>
-  </view>
+
+    <s-tabs />
+  </uv-sticky>
+  <scroll-view class="scroll" scroll-y="true">
+    <s-grid-clothes />
+    <view class="height1"></view>
+  </scroll-view>
 </template>
 
 <script setup>
@@ -62,8 +63,6 @@
     selectedBorder: '0px rgba(83, 200, 249,0.9) solid',
   };
 
-  const currentIndex = ref(0);
-
   // sheep.$helper.toast('请选择是否同意协议');
   // 隐藏原生tabBar
   uni.hideTabBar({
@@ -71,7 +70,8 @@
   });
 
   function swiperChange(event) {
-    currentIndex.value = event.detail.current;
+    console.log('🚀 ~ swiperChange 🐶75 ~ event: ', event);
+    fittingRoomStore.swiperCurrentIndex = event.detail.current;
   }
 
   onMounted(() => {
@@ -80,8 +80,8 @@
     fittingRoomStore.getModelList();
     timer = setInterval(() => {
       // TODO: 检测到还有没生成图的, 获取最新数据
-      // fittingRoomStore.currentModel?.id &&
+      fittingRoomStore.generatingLoading &&
-      // fittingRoomStore.getTestResults(fittingRoomStore.currentModel?.id);
+        fittingRoomStore.getTestResults(fittingRoomStore.currentModel?.id);
     }, 6000);
   });
   onUnload(() => {
@@ -119,7 +119,7 @@
     // sheep.$store('app').init();
     if (fittingRoomStore.currentModel?.id) {
       fittingRoomStore.getTestResults(fittingRoomStore.currentModel?.id).then(() => {
-        console.log('➤➤➤ ~ index.vue ~ L100');
+        console.log('➤➤➤ ~ index.vue ~ L124');
         uni.stopPullDownRefresh();
       });
     } else {
@@ -158,7 +158,7 @@
     width: 430rpx;
     height: 680rpx;
     box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2);
-    transform: scale(0.9) translate(0, 18px);
+    transform: scale(0.9) translate(0, 20px);
     opacity: 0.3;
     transition: all 0.2s ease-in 0.1s;
   }

sheep/store/fittingRoom.js

@@ -21,6 +21,7 @@ export const pattern = [
 const fittingRoom = defineStore({
   id: 'fittingRoom',
   state: () => ({
+    swiperCurrentIndex: 0,
     visable: false, // 上传模特, 选模特的
     modelList: [], // 模特列表
     currentModel: {},
@@ -39,10 +40,13 @@ const fittingRoom = defineStore({
   getters: {
     // 能上传图片的场景
     canUpload(state) {
-      console.log(this.type, this.tab, state.type, '123');
       // 除了发型其他都能上传
       return this.type && !this.disableTabs.includes(this.tab);
     },
+    // 有没有试穿结果没生成的
+    generatingLoading(state) {
+      return this.testResults.some((item) => !item.tryOnResultUrl);
+    },
   },
   actions: {
     // 获取衣服分类
@@ -61,7 +65,7 @@ const fittingRoom = defineStore({
         pageSize: '30',
       });
       const result = httpResponse.data?.list ?? [];
-      result.reverse();
+      // result.reverse();
       // 将模特放到最后一张
       result.push({
         id: 100000,
@@ -120,6 +124,7 @@ const fittingRoom = defineStore({
         return;
       }
       this.getTestResults(this.currentModel.id);
+      this.swiperCurrentIndex = 0;
     },
     // 切换模特
     switchModels(item) {