feat(fittingRoom): 实现试穿结果展示与衣服上传编辑功能

- 新增试穿结果获取与展示逻辑，支持模特切换
- 实现衣服上传和编辑功能，包括分类和长度选择
- 优化上传页面UI布局，增加确认和删除操作按钮- 调整轮播组件数据源，使用试穿结果列表
- 修复上传接口调用逻辑，支持文件上传与数据提交
- 更新请求超时时间，提升接口稳定性
- 优化分类标签显示逻辑，修复索引映射问题
- 支持从衣橱进入编辑模式，传递文件URL和ID参数
- 移除旧版图片选择器，统一使用新上传逻辑
- 修复组件间数据传递与事件绑定问题

pages/fittingRoom/components/s-grid-clothes.vue

@@ -2,7 +2,7 @@
  * @Author: liguigong liguigong@shopline.com
  * @Date: 2025-09-19 16:26:36
  * @LastEditors: liguigong liguigong@shopline.com
- * @LastEditTime: 2025-09-22 19:35:35
+ * @LastEditTime: 2025-09-26 18:21:04
  * @FilePath: pages/fittingRoom/components/s-grid-clothes.vue
  * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
  -->
@@ -16,7 +16,7 @@
       >
         <view class="grid-item-box" style="background-color: #fff">
           <view v-if="index == 3" class="inUse">
-            <view class="edit" @click="goEdit">编辑</view>
+            <view class="edit" @click="goEdit(item)">编辑</view>
           </view>
 
           <template v-if="fittingRoomStore.canUpload && index === 0">
@@ -26,20 +26,8 @@
               src="/static/uploads/1.png"
               @click="uploadFile"
             ></image>
-            <uni-file-picker
-              :auto-upload="false"
-              :del-icon="false"
-              :disable-preview="true"
-              :image-styles="imageStyle"
-              :sizeType="sizeType"
-              class="upload"
-              limit="1"
-              mode="grid"
-              @select="selectPic"
-              >选择
-            </uni-file-picker>
           </template>
-          <image v-else class="clothes" mode="aspectFill" src="/static/yifu1.png"></image>
+          <image v-else :src="item.thumbnailFileUrl" class="clothes" mode="aspectFill"></image>
         </view>
       </uni-grid-item>
     </uni-grid>
@@ -47,15 +35,18 @@
 </template>
 <script setup>
   import sheep from '@/sheep';
+  import { pattern } from '../../../sheep/store/fittingRoom';
 
   const fittingRoomStore = sheep.$store('fittingRoom');
 
   function selectPic(...data) {
     console.log(fittingRoomStore.tab);
-    console.log('🚀 ~ selectPic 🐶47 ~ data: ', data);
+    console.log('🚀 ~ selectPic 🐶43 ~ data: ', data);
   }
 
-  function uploadFile() {}
+  function uploadFile() {
+    sheep.$router.go('/pages/uploadClothes/index', {});
+  }
 
   const sizeType = ['original'];
   const imageStyle = {
@@ -63,13 +54,25 @@
     height: 200,
   };
 
-  function goEdit() {
+  function goEdit(item) {
-    sheep.$router.go('/pages/report/index', {});
+    console.log('🚀 ~ goEdit 🐶57 ~ item: ', item);
+    fittingRoomStore.selectClothesType = fittingRoomStore.tabsMap.includes(Number(item.clothType))
+      ? Number(item.clothType)
+      : fittingRoomStore.selectClothesType;
+    fittingRoomStore.selectPattern = pattern.some((v) => {
+      v.value === item.len;
+    })
+      ? item.len
+      : fittingRoomStore.selectPattern;
+    sheep.$router.go('/pages/uploadClothes/index', {
+      fileUrl: item.fileUrl,
+      clothId: item.clothId,
+    });
   }
 
   function change(e) {
     fittingRoomStore.changeClothes();
-    console.log('🚀 ~ change 🐶25 ~ index: ', e.detail.index);
+    console.log('🚀 ~ change 🐶63 ~ index: ', e.detail.index);
   }
 </script>
 <style lang="scss" scoped>

pages/fittingRoom/index.vue

@@ -3,10 +3,10 @@
     <view class="uni-margin-wrap">
       <!--    https://ext.dcloud.net.cn/plugin?id=22930-->
       <hbxw-stack-carousel
-        :key="state.info"
+        :key="fittingRoomStore.testResults"
         :height="680"
         :interval="15000"
-        :list="state.info"
+        :list="fittingRoomStore.testResults"
         :width="430"
         indicatorStyle="line"
         loop
@@ -15,7 +15,7 @@
       >
         <template #default="{ item, index }">
           <view class="custom-item">
-            <image :src="item.image" class="swiper-image" mode="aspectFill" />
+            <image :src="item.tryOnResultUrl" class="swiper-image" mode="aspectFill" />
           </view>
         </template>
       </hbxw-stack-carousel>

pages/uploadClothes/index.vue

@@ -1,53 +1,56 @@
 <template>
   <view v-if="template">
     <SelectPic v-if="!imageUrl" @onChange="onChange" />
-    <view v-if="imageUrl" class="clothes-box">
+    <template v-if="imageUrl">
-      <image
+      <view class="clothes-box">
-        class="clothes"
+        <image :src="imageUrl" class="clothes" mode="aspectFill" @click="uploadFile"></image>
-        mode="aspectFill"
-        :src="imageUrl"
-        @click="uploadFile"
-      ></image>
-    </view>
-
-    <view class="warp">
-      <view class="container">
-        <view class="title">分类：</view>
-        <uv-radio-group v-model="fittingRoomStore.selectClothesType">
-          <template v-for="(item, index) in fittingRoomStore.tabs">
-            <uv-radio
-              shape="square"
-              :customStyle="{margin: '12rpx'}"
-              v-if="index !== 0 && index !== 5"
-              :key="index"
-              :label="item"
-              size="26rpx"
-              iconSize="20rpx"
-              activeColor="#606060"
-              :name="index">
-            </uv-radio>
-          </template>
-        </uv-radio-group>
       </view>
-    </view>
+
-    <view class="warp">
+      <view class="warp">
-      <view class="container">
+        <view class="container">
-        <view class="title">长度：</view>
+          <view class="title">分类：</view>
-        <uv-radio-group v-model="fittingRoomStore.selectPattern">
+          <uv-radio-group v-model="fittingRoomStore.selectClothesType">
+            <template v-for="(item, index) in fittingRoomStore.tabs">
+              <uv-radio
+                v-if="index !== 0 && index !== 6"
+                :key="fittingRoomStore.tabsMap[index]"
+                :customStyle="{ margin: '12rpx' }"
+                :label="item"
+                :name="fittingRoomStore.tabsMap[index]"
+                activeColor="#606060"
+                iconSize="20rpx"
+                shape="square"
+                size="26rpx"
+              >
+              </uv-radio>
+            </template>
+          </uv-radio-group>
+        </view>
+      </view>
+      <view class="warp">
+        <view class="container">
+          <view class="title">长度：</view>
+          <uv-radio-group v-model="fittingRoomStore.selectPattern">
             <uv-radio
               v-for="(item, index) in pattern"
-              shape="square"
-              :customStyle="{margin: '12rpx'}"
               :key="index"
+              :customStyle="{ margin: '12rpx' }"
               :label="item.label"
-              size="26rpx"
+              :name="item.value"
-              iconSize="20rpx"
               activeColor="#606060"
-              :name="item.value">
+              iconSize="20rpx"
+              shape="square"
+              size="26rpx"
+            >
             </uv-radio>
-        </uv-radio-group>
+          </uv-radio-group>
+        </view>
       </view>
-    </view>
+      <view class="operating">
+        <view class="delete" @click="deleteClothes">删除</view>
+        <view class="delete" @click="confirmClothes">确认</view>
+      </view>
+    </template>
   </view>
 </template>
 
@@ -57,13 +60,31 @@
   import sheep from '@/sheep';
   import SelectPic from '@/pages/uploadClothes/SelectPic.vue';
   import { pattern } from '@/sheep/store/fittingRoom';
+  import FittingRoomApi from '../../sheep/api/fittingRoom';
 
   const fittingRoomStore = sheep.$store('fittingRoom');
 
-  const imageUrl = ref('https://picsum.photos/600/300?random=3')
+  const imageUrl = ref('');
-function selectColthesType(val) {
+  const clothesId = ref('');
-  console.log("🚀 ~ selectColthesType ~ val: ", val);
+  const isEdit = ref(false);
-}
+
+  function confirmClothes() {
+    fittingRoomStore
+      .uploadAndEditCloth({
+        clothFileList: [clothesId.value],
+        isUpdate: isEdit ? true : undefined,
+      })
+      .then((res) => {
+        sheep.$router.go('/pages/fittingRoom/index');
+      });
+  }
+
+  function deleteClothes() {
+    FittingRoomApi.deleteCloth({ id: clothesId.value }).then((res) => {
+      sheep.$router.go('/pages/fittingRoom/index');
+    });
+  }
+
   // 隐藏原生tabBar
   uni.hideTabBar({
     fail: () => {},
@@ -71,12 +92,23 @@ function selectColthesType(val) {
 
   function onChange(e) {
     console.log(e, 12345);
-    imageUrl.value = e[0].tempFilePaths[0]
+    FittingRoomApi.uploadCloth(e[0].tempFiles[0].path).then((res) => {
+      console.log('🚀 ~  🐶97 ~ res: ', res.result.thumbnailFileUrl);
+      imageUrl.value = res.result.thumbnailFileUrl;
+      clothesId.value = res.result.id;
+    });
   }
 
   const template = computed(() => sheep.$store('app').template?.home);
 
   onLoad((options) => {
+    console.log('🚀 ~  🐶106 ~ options: ', options);
+    if (options?.fileUrl) {
+      isEdit.value = true;
+    }
+    // const data = JSON.parse(options.data);
+    imageUrl.value = options?.fileUrl ?? '';
+    clothesId.value = options?.clothId ?? '';
     // #ifdef MP
     // 小程序识别二维码
     if (options.scene) {
@@ -114,6 +146,22 @@ function selectColthesType(val) {
 </script>
 
 <style lang="scss" scoped>
+  .operating {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 200rpx;
+    padding: 0 20rpx;
+  }
+  .delete {
+    width: 250rpx;
+    height: 80rpx;
+    line-height: 80rpx;
+    text-align: center;
+    color: #ffffff;
+    background: #000;
+    font-size: 28rpx;
+    letter-spacing: 10rpx;
+  }
   .warp {
     display: flex;
     justify-content: center;
@@ -123,7 +171,7 @@ function selectColthesType(val) {
     font-size: 28rpx;
   }
   .container {
-    width: 323*2rpx;
+    width: 323 * 2rpx;
     display: flex;
     justify-content: center;
     align-items: flex-start;
@@ -137,12 +185,13 @@ function selectColthesType(val) {
     display: flex;
     justify-content: center;
     align-items: center;
+    margin-bottom: 60rpx;
+  }
+  .clothes {
+    width: 480rpx;
+    height: 700rpx;
+    background: #000;
+    border: 0.5px solid #000;
+    margin-top: 50rpx;
   }
-.clothes {
-  width: 480rpx;
-  height: 700rpx;
-  background: #000;
-  border: 0.5px solid #000;
-  margin-top: 50rpx;
-}
 </style>

sheep/api/fittingRoom/index.js

@@ -2,7 +2,7 @@
  * @Author: liguigong liguigong@shopline.com
  * @Date: 2025-09-23 09:41:10
  * @LastEditors: liguigong liguigong@shopline.com
- * @LastEditTime: 2025-09-25 18:01:03
+ * @LastEditTime: 2025-09-26 17:56:13
  * @FilePath: sheep/api/fittingRoom/index.js
  * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
  */
@@ -54,6 +54,43 @@ const FittingRoomApi = {
       });
     });
   },
+  // 上传模特
+  uploadCloth: (file, formData = {}) => {
+    uni.showLoading({
+      title: '上传中',
+    });
+    return new Promise((resolve, reject) => {
+      uni.uploadFile({
+        url: baseUrl + apiPath + '/cloth/uploadClothFile',
+        filePath: file,
+        name: 'file',
+        header: {
+          Accept: '*/*',
+          Authorization: getAccessToken(),
+        },
+        formData,
+        success: (uploadFileRes) => {
+          console.log('🚀 ~ success 🐶43 ~ uploadFileRes: ', uploadFileRes);
+          let result = JSON.parse(uploadFileRes.data);
+          if (result.error === 1) {
+            uni.showToast({
+              icon: 'none',
+              title: result.msg,
+            });
+          } else {
+            return resolve(result);
+          }
+        },
+        fail: (error) => {
+          console.log('上传失败：', error);
+          return resolve(false);
+        },
+        complete: () => {
+          uni.hideLoading();
+        },
+      });
+    });
+  },
 
   getModelList: (data) => {
     return request({
@@ -69,6 +106,34 @@ const FittingRoomApi = {
       method: 'GET',
     });
   },
+
+  // 获取试穿结果
+  getTestResults: (data) => {
+    return request({
+      url: '/digital/on-record/page',
+      method: 'GET',
+      params: data,
+    });
+  },
+
+  // 上传或者编辑衣服
+  uploadAndEditCloth: (data) => {
+    return request({
+      url: '/cloth/uploadCloth',
+      method: 'POST',
+      data: data,
+    });
+  },
+
+  // 删除衣服
+  deleteCloth: (data) => {
+    return request({
+      url: '/cloth/deleteCloth',
+      method: 'POST',
+      data: data,
+    });
+  },
+
   addHairApi: (data) => {
     return request({
       url: '/userinfo/add_hair_data',

sheep/request/index.js

@@ -50,7 +50,7 @@ function closeLoading() {
  */
 const http = new Request({
   baseURL: baseUrl + apiPath,
-  timeout: 8000,
+  timeout: 30000,
   method: 'GET',
   header: {
     Accept: 'text/json',

sheep/store/fittingRoom.js

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import app from './app';
 import FittingRoomApi from '../api/fittingRoom';
 
-const tabsMap = [undefined, 'topCloth', 'bottomCloth', 'dress', 'suit', 'hair'];
+const _tabsMap = [undefined, 'topCloth', 'bottomCloth', 'dress', 'suit', 'hair'];
 
 export const pattern = [
   { value: 'body', label: '腰部以上' },
@@ -26,12 +26,14 @@ const fittingRoom = defineStore({
     type: true, // true: 我的衣橱, false: 衣服库
     tab: 0, // 对应下面tabs的序号
     tabs: ['全部', '上衣', '下装', '连衣裙', '外套', '套装', '发型'],
+    tabsMap: _tabsMap,
     disableTabs: [6], // 不允许上传图的tab索引
     clothes: [], // 接口返回的衣服数据
     currentClothes: [], // 当前选的衣服
     selectClothesType: 1, // 选中的衣服类型, 默认选中上衣
-    selectPattern: pattern[0].value,
+    selectPattern: pattern[0].value, // 上传或者编辑衣服的时候的长短
     sex: 'female',
+    testResults: [], // 当前模特的试穿结果列表
   }),
   getters: {
     // 能上传图片的场景
@@ -45,16 +47,46 @@ const fittingRoom = defineStore({
     // 获取衣服分类
     async getCategory(templateId = null) {
       const httpResponse = await FittingRoomApi.getCategory();
-      this.clothes = httpResponse.result || [];
+      let result = httpResponse.data[0]?.children;
+      this.tabs = ['全部', ...result?.map((item) => item.name), '发型'];
+      this.tabsMap = [undefined, ...result?.map((item) => item.id), 'hair'];
+      this.selectClothesType = result[0].id;
     },
+
+    async getTestResults(modelId = '') {
+      const httpResponse = await FittingRoomApi.getTestResults({
+        modelId,
+        pageNo: '1',
+        pageSize: '30',
+      });
+      const result = httpResponse.data?.list ?? [];
+      // 将模特放到最后一张
+      result.push({
+        id: 100000,
+        modelId: modelId,
+        modelImageUrl:
+          'https://tupian05.oss-cn-beijing.aliyuncs.com/digital_cloth/1758853865858.png',
+        clothingImageUrl:
+          'https://tupian05.oss-cn-beijing.aliyuncs.com/digital_cloth/1758795488865.jpg',
+        tryOnResultUrl: this.currentModel.thumbnailFileUrl,
+        // "userId": 284,
+        // "createTime": 1758857790000
+      });
+      this.testResults = result;
+      console.log('🚀 ~ getTestResults 🐶76 ~ httpResponse: ', httpResponse.data?.list);
+    },
+
     // 获取衣服类型数据查询
     async getCloths(templateId = null) {
       const httpResponse = await FittingRoomApi.getClothList({
         sex: 'female',
         isPerson: this.type ? 'yes' : 'no',
-        clothType: tabsMap[this.tab],
+        clothType: this.tabsMap[this.tab],
       });
-      this.clothes = httpResponse.result || [];
+      // 如果我的衣橱就往前加个空数组
+      this.clothes = this.canUpload
+        ? [{}, ...(httpResponse.result || [])]
+        : httpResponse.result || [];
     },
     // 获取模特数据查询
     async getModelList(templateId = null) {
@@ -64,27 +96,43 @@ const fittingRoom = defineStore({
       let modelList = (httpResponse.result || []).slice(0, 4);
       this.modelList = modelList;
       this.currentModel = modelList?.[0] ?? {};
+      this.getTestResults(modelList?.[0].id);
     },
     // 切换模特
     switchModels(item) {
       if (item.id === this.currentModel.id) {
         return;
       }
-      // TODO:
+      console.log('🚀 ~ switchModels 🐶106 ~ item: ', item);
-      console.log('🚀 ~ switchModels 🐶70 ~ item: ', item);
       this.currentModel = item;
+      this.getTestResults(item.id);
+    },
+    async uploadAndEditCloth(data = {}) {
+      await FittingRoomApi.uploadAndEditCloth({
+        clothType: this.selectClothesType,
+        isSync: 'yes',
+        sex: this.sex,
+        len: this.selectPattern,
+        ...data,
+      });
     },
     setVisable(visable) {
-      console.log('🚀 ~ setVisable 🐶77 ~ visable: ', visable);
+      console.log('🚀 ~ setVisable ?1207 ~ visable: ', visable);
       this.visable = visable ?? !this.visable;
     },
     // 我的衣服库和衣橱的切换
     changeType(visable) {
-      console.log('🚀 ~ setVisable 🐶82 ~ visable: ', visable);
+      console.log('🚀 ~ setVisable ?1128 ~ visable: ', visable);
       this.type = visable ?? !this.type;
       this.getCloths();
     },
 
+    changeTheSelected(data) {
+      console.log('🚀 ~ changeTheSelected ?1310 ~ data: ', data);
+      this.selectPattern = data.selectPattern;
+      this.selectClothesType = data.selectClothesType;
+    },
+
     changeTab(index) {
       console.log('切换tab');
       this.tab = index;