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,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>