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

- 添加 fittingRoom 存储模块，用于管理试衣间状态和数据 - 实现试衣间页面布局和基础功能，包括轮播图、标签页、衣服网格等组件 - 开发选择模特和上传衣服功能 - 优化页面样式和交互
2025-09-19 19:27:22 +08:00
parent cb434a532c
commit 4ea873c1bd
74 changed files with 7963 additions and 321 deletions
@@ -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>