feat(fittingRoom): 实现衣服数据获取与tab切换功能

新增 fittingRoom 接口调用逻辑，支持根据 tab 类型加载对应衣服列表。在 store 中增加 `clothes` 数据字段，并通过 `getCloths` 方法请求数据。页面组件中更新 tab 切换逻辑以触发数据刷新，并调整模板绑定方式。添加 `tabsMap` 映射表用于匹配接口所需 clothType 参数。
2025-09-23 09:41:34 +08:00
parent 8f68f9b0c8
commit dc2426936c
7 changed files with 142 additions and 56 deletions
@@ -32,3 +32,6 @@ https://www.kdocs.cn/l/cdrvvpi9CKNe?f=301
 https://puton.huimeimeta.com

 Authorization：94b8abbcb37c44f6aa74ec7678da8c2a
+
+
+https://puton.meidaojia.com/
@@ -2,7 +2,7 @@
 * @Author: liguigong liguigong@shopline.com
 * @Date: 2025-09-19 16:26:36
 * @LastEditors: liguigong liguigong@shopline.com
- * @LastEditTime: 2025-09-19 17:56:16
+ * @LastEditTime: 2025-09-22 19:17:46
 * @FilePath: pages/fittingRoom/components/STabs.vue
 * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
 -->
@@ -43,6 +43,7 @@

  function changeTab(index) {
    console.log('当前选中的项：' + index);
+    fittingRoom.changeTab(index);
  }
 </script>
 <style lang="scss" scoped>
@@ -1,21 +1,25 @@
 <!--
 * @Author: liguigong liguigong@shopline.com
 * @Date: 2025-09-19 16:26:36
- * @LastEditors:
- * @LastEditTime: 2025-09-19 22:34:40
+ * @LastEditors: liguigong liguigong@shopline.com
+ * @LastEditTime: 2025-09-22 19:35:35
 * @FilePath: pages/fittingRoom/components/s-grid-clothes.vue
 * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
 -->
 <template>
  <view class="tabContainer">
    <uni-grid :column="4" :highlight="true" :square="false" borderColor="#000" @change="change">
-      <uni-grid-item v-for="(item, index) in 7" :key="index" :index="index + 100">
+      <uni-grid-item
+        v-for="(item, index) in fittingRoomStore.clothes"
+        :key="index"
+        :index="index + 100"
+      >
        <view class="grid-item-box" style="background-color: #fff">
          <view v-if="index == 3" class="inUse">
            <view class="edit" @click="goEdit">编辑</view>
          </view>

-          <template v-if="fittingRoom.canUpload && index === 0">
+          <template v-if="fittingRoomStore.canUpload && index === 0">
            <image
              class="clothes"
              mode="aspectFill"
@@ -44,10 +48,10 @@
 <script setup>
  import sheep from '@/sheep';

-  const fittingRoom = sheep.$store('fittingRoom');
+  const fittingRoomStore = sheep.$store('fittingRoom');

  function selectPic(...data) {
-    console.log(fittingRoom.tab);
+    console.log(fittingRoomStore.tab);
    console.log('🚀 ~ selectPic 🐶47 ~ data: ', data);
  }

@@ -64,7 +68,7 @@
  }

  function change(e) {
-    fittingRoom.changeClothes();
+    fittingRoomStore.changeClothes();
    console.log('🚀 ~ change 🐶25 ~ index: ', e.detail.index);
  }
 </script>
@@ -3,19 +3,19 @@
    <view class="uni-margin-wrap">
      <!--    https://ext.dcloud.net.cn/plugin?id=22930-->
      <hbxw-stack-carousel
-        @click="handleItemClick"
+        :key="state.info"
+        :height="680"
        :interval="15000"
        :list="state.info"
        :width="430"
-        :height="680"
-        loop
-        :key="state.info"
        indicatorStyle="line"
+        loop
        @change="handleChange"
+        @click="handleItemClick"
      >
        <template #default="{ item, index }">
          <view class="custom-item">
-            <image class="swiper-image" :src="item.image" mode="aspectFill" />
+            <image :src="item.image" class="swiper-image" mode="aspectFill" />
          </view>
        </template>
      </hbxw-stack-carousel>
@@ -35,9 +35,10 @@
  import sheep from '@/sheep';
  import SSelectMote from './components/s-select-mote.vue';
  import STabs from './components/STabs.vue';
-  import SGridClothes from './components/s-grid-clothes.vue'; // 隐藏原生tabBar
+  import SGridClothes from './components/s-grid-clothes.vue';
+  import FittingRoomApi from '../../sheep/api/fittingRoom'; // 隐藏原生tabBar

-  const fittingRoom = sheep.$store('fittingRoom');
+  const fittingRoomStore = sheep.$store('fittingRoom');

  sheep.$helper.toast('请选择是否同意协议');
  // 隐藏原生tabBar
@@ -49,23 +50,9 @@
    console.log(index, item, '12');
  }

-  const carouselList = [
-    {
-      image: 'https://picsum.photos/600/300?random=1',
-    },
-    {
-      image: 'https://picsum.photos/600/300?random=2',
-    },
-    {
-      image: 'https://picsum.photos/600/300?random=3',
-    },
-    {
-      image: 'https://picsum.photos/600/300?random=4',
-    },
-    {
-      image: 'https://picsum.photos/600/300?random=5',
-    },
-  ];
+  fittingRoomStore.getCloths().then((res) => {
+    console.log(res, 'res');
+  });

  const state = reactive({
    info: [
@@ -77,14 +64,14 @@
      },
      {
        image: 'https://picsum.photos/600/300?random=3',
-      }
+      },
    ],
    current: 0,
  });
  function handleChange(index, oldIndex) {
    // state.current = index;
-    console.log('---- change ----', index, oldIndex)
-  };
+    console.log('---- change ----', index, oldIndex);
+  }

  function dian() {
    state.info = [
@@ -103,7 +90,7 @@
      {
        image: 'https://picsum.photos/600/300?random=5',
      },
-    ]
+    ];
  }
  const swiperChange = (e) => {
    state.current = e.detail.current;
@@ -0,0 +1,69 @@
+/**
+ * @Author: liguigong liguigong@shopline.com
+ * @Date: 2025-09-23 09:41:10
+ * @LastEditors: liguigong liguigong@shopline.com
+ * @LastEditTime: 2025-09-23 09:41:23
+ * @FilePath: sheep/api/fittingRoom/index.js
+ * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
+ */
+import request from '@/sheep/request';
+
+const FittingRoomApi = {
+  getClothList: (data) => {
+    return request({
+      url: '/api/cloth/list',
+      method: 'POST',
+      data: data,
+    });
+  },
+  addHairApi: (data) => {
+    return request({
+      url: '/userinfo/add_hair_data',
+      method: 'POST',
+      data: data,
+    });
+  },
+  getStyleApi: (data) => {
+    return request({
+      url: '/userinfo/get_user_face_info',
+      method: 'POST',
+      data: data,
+    });
+  },
+  praiseTextApi: (data) => {
+    return request({
+      url: '/ai/praiseTexttwo',
+      method: 'POST',
+      data: data,
+    });
+  },
+  wardrobeListApi: (data) => {
+    return request({
+      url: '/wardrobe/clothes_list',
+      method: 'POST',
+      data: data,
+    });
+  },
+  exchangeHairApi: (data) => {
+    return request({
+      url: '/api/v1/test/exchangeHair',
+      method: 'POST',
+      data: data,
+    });
+  },
+  exchangeHairHistoryByTaskId: (data) => {
+    return request({
+      url: '/api/v1/test/exchangeHairHistoryByTaskId',
+      method: 'POST',
+      data: data,
+    });
+  },
+  hairStyleListApi: (data) => {
+    return request({
+      url: '/api/v1/test/getHairDetails',
+      method: 'POST',
+      data: data,
+    });
+  },
+};
+export default FittingRoomApi;
@@ -122,23 +122,23 @@ http.interceptors.response.use(
    response.config.custom.showLoading && closeLoading();

    // 自定义处理【error 错误提示】：如果需要显示错误提示，则显示错误提示
-    if (response.data.code !== 0) {
-      // 特殊：如果 401 错误码，则跳转到登录页 or 刷新令牌
-      if (response.data.code === 401) {
-        return refreshToken(response.config);
-      }
-      // 特殊：处理分销用户绑定失败的提示
-      if ((response.data.code + '').includes('1011007')) {
-        console.error(`分销用户绑定失败，原因：${response.data.msg}`);
-      } else if (response.config.custom.showError) {
-        // 错误提示
-        uni.showToast({
-          title: response.data.msg || '服务器开小差啦,请稍后再试~',
-          icon: 'none',
-          mask: true,
-        });
-      }
-    }
+    // if (response.data.code !== 0) {
+    //   // 特殊：如果 401 错误码，则跳转到登录页 or 刷新令牌
+    //   if (response.data.code === 401) {
+    //     return refreshToken(response.config);
+    //   }
+    //   // 特殊：处理分销用户绑定失败的提示
+    //   if ((response.data.code + '').includes('1011007')) {
+    //     console.error(`分销用户绑定失败，原因：${response.data.msg}`);
+    //   } else if (response.config.custom.showError) {
+    //     // 错误提示
+    //     uni.showToast({
+    //       title: response.data.msg || '服务器开小差啦,请稍后再试~',
+    //       icon: 'none',
+    //       mask: true,
+    //     });
+    //   }
+    // }

    // 自定义处理【showSuccess 成功提示】：如果需要显示成功提示，则显示成功提示
    if (
@@ -1,5 +1,8 @@
 import { defineStore } from 'pinia';
 import app from './app';
+import FittingRoomApi from '../api/fittingRoom';
+
+const tabsMap = [undefined, 'topCloth', 'bottomCloth', 'dress', 'suit', 'hair'];

 export const pattern = [
  { value: 'body', label: '腰部以上'},
@@ -22,6 +25,7 @@ const fittingRoom = defineStore({
    tab: 0, // 对应下面tabs的序号
    tabs: ['全部', '上衣', '下装', '连衣裙', '外套', '发型'],
    disableTabs: [5], // 不允许上传图的tab索引
+    clothes: [], // 接口返回的衣服数据
    currentClothes: [], // 当前选的衣服
    selectClothesType: 1, // 选中的衣服类型, 默认选中上衣
    selectPattern: pattern[0].value,
@@ -35,13 +39,31 @@ const fittingRoom = defineStore({
    },
  },
  actions: {
+    // 获取衣服类型数据查询
+    async getCloths(templateId = null) {
+      const httpResponse = await FittingRoomApi.getClothList({
+        sex: 'female',
+        isPerson: this.type ? 'yes' : 'no',
+        clothType: tabsMap[this.tab],
+      });
+      console.log('🚀 ~ getCloths 🐶33 ~ httpResponse: ', httpResponse.result);
+      this.clothes = httpResponse.result || [];
+    },
    setVisable(visable) {
-      console.log('🚀 ~ setVisable 🐶15 ~ visable: ', visable);
+      console.log('🚀 ~ setVisable 🐶36 ~ visable: ', visable);
      this.visable = visable ?? !this.visable;
    },
+    // 我的衣服库和衣橱的切换
    changeType(visable) {
-      console.log('🚀 ~ setVisable 🐶15 ~ visable: ', visable);
+      console.log('🚀 ~ setVisable 🐶40 ~ visable: ', visable);
      this.type = visable ?? !this.type;
+      this.getCloths();
+    },
+
+    changeTab(index) {
+      console.log('切换tab');
+      this.tab = index;
+      this.getCloths();
    },
    // 点击衣服
    changeClothes() {