feat(fittingRoom): 新增试衣间功能

- 添加 fittingRoom 存储模块，用于管理试衣间状态和数据
- 实现试衣间页面布局和基础功能，包括轮播图、标签页、衣服网格等组件
- 开发选择模特和上传衣服功能
- 优化页面样式和交互

pages/fittingRoom/components/STabs.vue

@@ -0,0 +1,95 @@
+<!--
+ * @Author: liguigong liguigong@shopline.com
+ * @Date: 2025-09-19 16:26:36
+ * @LastEditors: liguigong liguigong@shopline.com
+ * @LastEditTime: 2025-09-19 17:56:16
+ * @FilePath: pages/fittingRoom/components/STabs.vue
+ * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
+ -->
+<template>
+  <view class="tabContainer">
+    <view class="tab-top">
+      <view class="parent-tab" @click="() => fittingRoom.changeType()"
+        >{{ !fittingRoom.type ? '我的衣橱' : '衣服库' }}
+      </view>
+      <view class="title">赴宴试衣间</view>
+    </view>
+    <view class="tab-bottom">
+      <view class="mainTitle"
+        >{{ fittingRoom.type ? '我的衣橱' : '衣服库' }}
+        <view class="slash">/</view>
+      </view>
+      <v-tabs
+        v-model="fittingRoom.tab"
+        :lineScale="0.2"
+        :tabs="fittingRoom.tabs"
+        activeColor="#fff"
+        bgColor="#000000"
+        color="#fff"
+        fontSize="24rpx"
+        height="50rpx"
+        lineColor="#fff"
+        lineHeight="2rpx"
+        paddingItem="0 18rpx"
+        @change="changeTab"
+      ></v-tabs>
+    </view>
+  </view>
+</template>
+<script setup>
+  import sheep from '@/sheep';
+
+  const fittingRoom = sheep.$store('fittingRoom');
+
+  function changeTab(index) {
+    console.log('当前选中的项：' + index);
+  }
+</script>
+<style lang="scss" scoped>
+  .tabContainer {
+    height: 130rpx;
+    background: #000;
+    width: 100%;
+
+    .tab-top {
+      margin: 18rpx 0 14rpx;
+      color: rgba(255, 255, 255, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+
+      .parent-tab {
+        position: absolute;
+        font-size: 20rpx;
+        left: 0;
+        top: 0;
+        width: 180rpx;
+        text-align: center;
+      }
+
+      .title {
+        font-size: 24rpx;
+      }
+    }
+
+    .tab-bottom {
+      display: flex;
+      align-items: center;
+
+      .mainTitle {
+        flex: 0 0 180rpx;
+        color: #ffffff;
+        font-size: 26rpx;
+        text-align: center;
+        position: relative;
+
+        .slash {
+          position: absolute;
+          top: 0;
+          right: 0;
+        }
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,104 @@
+<!--
+ * @Author: liguigong liguigong@shopline.com
+ * @Date: 2025-09-19 16:26:36
+ * @LastEditors: liguigong liguigong@shopline.com
+ * @LastEditTime: 2025-09-19 19:17:22
+ * @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">
+        <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">
+            <image
+              class="clothes"
+              mode="aspectFill"
+              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>
+        </view>
+      </uni-grid-item>
+    </uni-grid>
+  </view>
+</template>
+<script setup>
+  import sheep from '@/sheep';
+  const fittingRoom = sheep.$store('fittingRoom');
+
+  function selectPic(...data) {
+    console.log(fittingRoom.tab);
+    console.log('🚀 ~ selectPic 🐶47 ~ data: ', data);
+  }
+
+  function uploadFile() {}
+
+  const sizeType = ['original'];
+  const imageStyle = {
+    width: 200,
+    height: 200,
+  };
+
+  function goEdit() {
+    sheep.$router.go('/pages/report/index', {});
+  }
+
+  function change(e) {
+    fittingRoom.changeClothes();
+    console.log('🚀 ~ change 🐶25 ~ index: ', e.detail.index);
+  }
+</script>
+<style lang="scss" scoped>
+  .grid-item-box {
+    height: 272rpx;
+    overflow: hidden;
+    position: relative;
+  }
+  .clothes {
+    width: 100%;
+    height: 100%;
+  }
+  .upload {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    position: absolute;
+    opacity: 0;
+  }
+  .inUse {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.1);
+    z-index: 3;
+    .edit {
+      color: #000;
+      right: 14rpx;
+      top: 12rpx;
+      font-size: 24rpx;
+      position: absolute;
+    }
+  }
+</style>

pages/fittingRoom/components/s-select-mote.vue

@@ -0,0 +1,79 @@
+<!-- 商品信息：满减送等营销活动的弹窗 -->
+<template>
+  <view :class="['mote', { unfold: fittingRoom.visable }]">
+    <view class="item" @click="expansion">
+      <view class="item-text">模特</view>
+      <image class="item-image" mode="widthFix" src="/static/mote.png"></image>
+    </view>
+    <view class="item">
+      <image class="shangchuan" mode="heightFix" src="/static/shangchuan.png"></image>
+    </view>
+    <view class="item">
+      <view class="item-text"></view>
+      <image class="item-image" mode="widthFix" src="/static/mote.png"></image>
+    </view>
+  </view>
+</template>
+<script setup>
+  import sheep from '../../../sheep';
+
+  const fittingRoom = sheep.$store('fittingRoom');
+
+  console.log('🚀 ~  🐶9 ~ fittingRoom: ', fittingRoom);
+
+  function expansion(e) {
+    fittingRoom.setVisable();
+  }
+</script>
+<style lang="scss" scoped>
+  .mote {
+    position: absolute;
+    top: 50rpx;
+    left: 20rpx;
+    overflow: hidden;
+    height: 76rpx;
+    transition: height 0.3s ease-in-out;
+  }
+  .unfold {
+    height: 700rpx;
+  }
+
+  .item {
+    width: 86rpx;
+    height: 76rpx;
+    margin-bottom: 16rpx;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .item-text {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    color: #fff;
+    text-align: center;
+    //font-family: Molengo;
+    font-size: 20rpx;
+    font-style: normal;
+    font-weight: 400;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 76rpx;
+    text-transform: uppercase;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 3;
+  }
+
+  .shangchuan {
+    width: 86rpx;
+    height: 76rpx;
+  }
+
+  .item-image {
+    width: 100%;
+    height: 100%;
+  }
+</style>

pages/fittingRoom/index.vue

@@ -1,30 +1,42 @@
-<!-- 首页，支持店铺装修 -->
 <template>
   <view v-if="template">
-    <uni-swiper-dot :info="state.info" :current="state.current" field="content" :mode="'default'">
+    <uni-swiper-dot :current="state.current" :info="state.info" :mode="'default'" field="content">
       <view class="uni-margin-wrap">
         <swiper
-          class="swiper"
-          circular
           :autoplay="true"
-          :interval="2000"
           :duration="500"
+          :interval="5000"
+          circular
+          class="swiper"
           @change="swiperChange"
         >
           <swiper-item v-for="(item, index) in state.info" :key="index">
-            <view class="swiper-item uni-bg-red">{{ item.content }}</view>
+            <view class="swiper-item uni-bg-red">
+              <image class="swiper-image" mode="heightFix" src="/static/mote.png"></image>
+            </view>
           </swiper-item>
         </swiper>
+        <s-select-mote />
       </view>
     </uni-swiper-dot>
+    <uv-sticky :customNavHeight="0" :offset-top="0">
+      <s-tabs />
+    </uv-sticky>
+    <s-grid-clothes />
+    <view class="height1"></view>
   </view>
 </template>
 
 <script setup>
-  import { computed, reactive } from 'vue';
+  import { computed, reactive, ref } from 'vue';
   import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
   import sheep from '@/sheep';
-  import $share from '@/sheep/platform/share';
+  import SSelectMote from './components/s-select-mote.vue';
+  import STabs from './components/STabs.vue';
+  import SGridClothes from './components/s-grid-clothes.vue'; // 隐藏原生tabBar
+
+  const fittingRoom = sheep.$store('fittingRoom');
+  sheep.$helper.toast('请选择是否同意协议');
   // 隐藏原生tabBar
   uni.hideTabBar({
     fail: () => {},
@@ -45,32 +57,10 @@
     current: 0,
   });
   const swiperChange = (e) => {
-    console.log('🚀 ~ swiperChange 🐶40 ~ e: ', e);
     state.current = e.detail.current;
   };
 
   const template = computed(() => sheep.$store('app').template?.home);
-  // 在此处拦截改变一下首页轮播图 此处先写死后期复活 放到启动函数里
-  // (async function() {
-  // console.log('原代码首页定制化数据',template)
-  // let {
-  // 	data
-  // } = await index2Api.decorate();
-  // console.log('首页导航配置化过高无法兼容',JSON.parse(data[1].value))
-  // 改变首页底部数据 但是没有通过数组id获取商品数据接口
-  // let {
-  // 	data: datas
-  // } = await index2Api.spids();
-  // template.value.data[9].data.goodsIds = datas.list.map(item => item.id);
-  // template.value.data[0].data.list = JSON.parse(data[0].value).map(item => {
-  // 	return {
-  // 		src: item.picUrl,
-  // 		url: item.url,
-  // 		title: item.name,
-  // 		type: "image"
-  // 	}
-  // })
-  // }())
 
   onLoad((options) => {
     // #ifdef MP
@@ -109,32 +99,47 @@
   onPageScroll(() => {});
 </script>
 
-<style>
+<style lang="scss" scoped>
   .uni-margin-wrap {
     width: 100%;
   }
+
   .swiper {
     height: 680rpx;
   }
+
   .swiper-item {
     display: block;
     height: 680rpx;
     line-height: 300rpx;
     text-align: center;
-    background: green;
+    background: #ffffff;
   }
+
+  .swiper-image {
+    width: 100%;
+    height: 100%;
+  }
+
+  .height1 {
+    height: 2000px;
+  }
+
   .swiper-list {
     margin-top: 40rpx;
     margin-bottom: 0;
   }
+
   .uni-common-mt {
     margin-top: 60rpx;
     position: relative;
   }
+
   .info {
     position: absolute;
     right: 20rpx;
   }
+
   .uni-padding-wrap {
     width: 550rpx;
     padding: 0 100rpx;