meida_front/pages/uploadClothes/index.vue

<template>
  <s-layout :bgStyle="{ color: '#FFF' }" title="服饰上传">
    <view class="container-box">
      <SelectPic v-if="!imageUrl" @onChange="onChange" />
      <template v-if="imageUrl">
        <view class="clothes-box">
          <image :src="imageUrl" class="clothes" mode="aspectFill" @click="uploadFile"></image>
        </view>

        <view class="warp">
          <view class="container">
            <view class="title">分类：</view>
            <uv-radio-group v-model="fittingRoomStore.selectClothesType">
              <template v-for="(item, index) in fittingRoomStore.tabs">
                <uv-radio
                  v-if="index !== 0 && index !== 6"
                  :key="fittingRoomStore.tabsMap[index]"
                  :customStyle="{ margin: '12rpx' }"
                  :label="item"
                  :name="fittingRoomStore.tabsMap[index]"
                  activeColor="#606060"
                  iconSize="20rpx"
                  shape="square"
                  size="26rpx"
                >
                </uv-radio>
              </template>
            </uv-radio-group>
          </view>
        </view>
        <view class="warp">
          <view class="container">
            <view class="title">长度：</view>
            <uv-radio-group v-model="fittingRoomStore.selectPattern">
              <uv-radio
                v-for="(item, index) in pattern"
                :key="index"
                :customStyle="{ margin: '12rpx' }"
                :label="item.label"
                :name="item.value"
                activeColor="#606060"
                iconSize="20rpx"
                shape="square"
                size="26rpx"
              >
              </uv-radio>
            </uv-radio-group>
          </view>
        </view>
        <view class="operating">
          <view class="delete" @click="deleteClothes">删除</view>
          <view class="delete" @click="confirmClothes">确认</view>
        </view>
      </template>
    </view>
  </s-layout>
</template>

<script setup>
  import { computed, ref, onMounted } from 'vue';
  import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import SelectPic from '@/pages/uploadClothes/SelectPic.vue';
  import { pattern } from '@/sheep/store/fittingRoom';
  import FittingRoomApi from '../../sheep/api/fittingRoom';
  import { getAccessToken } from '@/sheep/request';

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

  const imageUrl = ref('');
  const clothesId = ref('');
  const isEdit = ref(false);
  onMounted(() => {
    const header = document.querySelector('.uni-page-head-hd');
    if (header) header.style.display = 'none';
  });

  function confirmClothes() {
    fittingRoomStore
      .uploadAndEditCloth({
        clothFileList: [clothesId.value],
        isUpdate: isEdit ? true : undefined,
      })
      .then((res) => {
        // sheep.$router.redirect('/pages/fittingRoom/index');
        sheep.$router.redirect(`/pages/fittingRoom/index?token=${getAccessToken()}`);
      });
  }

  function deleteClothes() {
    FittingRoomApi.deleteCloth({ id: clothesId.value }).then((res) => {
      fittingRoomStore.currentClothes = [];
      // sheep.$router.redirect('/pages/fittingRoom/index');
      sheep.$router.redirect(`/pages/fittingRoom/index?token=${getAccessToken()}`);
    });
  }

  // 隐藏原生tabBar
  uni.hideTabBar({
    fail: () => {},
  });

  function onChange(e) {
    console.log(e, 12345);
    FittingRoomApi.uploadCloth(e[0].tempFiles[0].path).then((res) => {
      console.log('🚀 ~  🐶97 ~ res: ', res.result.thumbnailFileUrl);
      imageUrl.value = res.result.thumbnailFileUrl;
      clothesId.value = res.result.id;
    });
  }

  const template = computed(() => sheep.$store('app').template?.home);

  onLoad((options) => {
    console.log('🚀 ~  🐶106 ~ options: ', options);
    if (options?.fileUrl) {
      isEdit.value = true;
    }
    // const data = JSON.parse(options.data);
    imageUrl.value = options?.fileUrl ?? '';
    clothesId.value = options?.clothId ?? '';
    // #ifdef MP
    // 小程序识别二维码
    if (options.scene) {
      const sceneParams = decodeURIComponent(options.scene).split('=');
      console.log('sceneParams=>', sceneParams);
      options[sceneParams[0]] = sceneParams[1];
    }
    // #endif

    // 预览模板
    if (options.templateId) {
      sheep.$store('app').init(options.templateId);
    }

    // 解析分享信息
    if (options.spm) {
      $share.decryptSpm(options.spm);
    }

    // 进入指定页面(完整页面路径)
    if (options.page) {
      sheep.$router.go(decodeURIComponent(options.page));
    }
  });

  // 下拉刷新
  onPullDownRefresh(() => {
    sheep.$store('app').init();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 800);
  });

  onPageScroll(() => {});
</script>

<style lang="scss" scoped>
  .container-box {
    padding-bottom: 200rpx;
  }
  .operating {
    display: flex;
    justify-content: space-around;
    margin-top: 200rpx;
    padding: 0 20rpx;
    margin-bottom: 200rpx;
  }
  .delete {
    width: 250rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    color: #ffffff;
    background: #000;
    font-size: 28rpx;
    letter-spacing: 10rpx;
  }
  .warp {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .title {
    font-size: 28rpx;
  }
  .container {
    width: 323 * 2rpx;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  .selectCheckbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .clothes-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 60rpx;
  }
  .clothes {
    width: 480rpx;
    height: 700rpx;
    background: #000;
    border: 0.5px solid #000;
    margin-top: 50rpx;
  }
</style>