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

<!--
 * @Author: liguigong liguigong@shopline.com
 * @Date: 2025-09-19 16:26:36
 * @LastEditors: liguigong liguigong@shopline.com
 * @LastEditTime: 2025-10-13 15:22:56
 * @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 fittingRoomStore.clothes" :key="index" :index="item">
        <view class="grid-item-box" style="background-color: #fff">
          <view
            v-if="
              fittingRoomStore.currentClothes.some((v) => v.clothId === item.clothId) &&
              fittingRoomStore.tab !== 6
            "
            class="inUse"
          >
            <view class="edit" @click="goEdit(item)">编辑</view>
          </view>

          <template v-if="fittingRoomStore.canUpload && index === 0">
            <image
              :src="`/static/uploads/${fittingRoomStore.tab}.png`"
              class="clothes"
              mode="aspectFill"
              @click="uploadFile"
            ></image>
          </template>
          <image v-else :src="item.thumbnailFileUrl" class="clothes" mode="aspectFill"></image>
        </view>
      </uni-grid-item>
    </uni-grid>
  </view>
</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 🐶43 ~ data: ', data);
  }

  function uploadFile() {
    sheep.$router.go('/pages/uploadClothes/index', {});
  }

  const sizeType = ['original'];
  const imageStyle = {
    width: 200,
    height: 200,
  };

  function goEdit(item) {
    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) {
    if (e.detail.index?.clothId) {
      fittingRoomStore.changeClothes(e.detail.index);
      console.log('🚀 ~ change 🐶63 ~ 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>