meida_front/pages/fittingRoom/index.vue

<template>
  <view class="container">
    <!--    <uv-sticky :customNavHeight="0" :offset-top="0">-->
    <view class="uni-margin-wrap">
      <uni-swiper-dot
        :current="fittingRoomStore.swiperCurrentIndex"
        :dots-styles="dotsStyles"
        :info="fittingRoomStore.testResults"
        :mode="'default'"
        field="content"
      >
        <swiper
          :autoplay="false"
          :current="fittingRoomStore.swiperCurrentIndex"
          :duration="500"
          :interval="5000"
          :next-margin="'160rpx'"
          :previous-margin="'160rpx'"
          circular
          class="swiper"
          @change="swiperChange"
        >
          <swiper-item v-for="(item, index) in fittingRoomStore.testResults" :key="index">
            <view class="swiper-item">
              <image
                :class="[
                  'swiper-image',
                  fittingRoomStore.swiperCurrentIndex === index ? 'active' : '',
                ]"
                :src="item.tryOnResultUrl || '/static/uploads/loading12.gif'"
                mode="aspectFill"
              ></image>
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
      <s-select-mote />
      <Clothespic />
    </view>

    <s-tabs />
    <!--    </uv-sticky>-->
    <scroll-view class="scroll" scroll-y="true">
      <s-grid-clothes />
      <view class="height1"></view>
    </scroll-view>
  </view>
</template>

<script setup>
  import { onMounted, reactive, ref } from 'vue';
  import { onLoad, onPullDownRefresh, onUnload } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import SSelectMote from './components/s-select-mote.vue';
  import STabs from './components/STabs.vue';
  import SGridClothes from './components/s-grid-clothes.vue';
  import Clothespic from './components/Clothespic.vue'; // 隐藏原生tabBar
  import ReportApi from '@/sheep/api/report';

  const { getToken } = ReportApi;

  const fittingRoomStore = sheep.$store('fittingRoom');
  let timer = null;
  const dotsStyles = {
    backgroundColor: 'rgba(255, 255, 255)',
    border: '0px rgba(83, 200, 249,0.3) solid',
    selectedBackgroundColor: 'rgba(23, 23, 23)',
    selectedBorder: '0px rgba(83, 200, 249,0.9) solid',
  };

  // sheep.$helper.toast('请选择是否同意协议');
  // 隐藏原生tabBar
  uni.hideTabBar({
    fail: () => {},
  });

  function swiperChange(event) {
    console.log('🚀 ~ swiperChange 🐶75 ~ event: ', event);
    fittingRoomStore.swiperCurrentIndex = event.detail.current;
  }

  onMounted(() => {});
  onUnload(() => {
    // 移除全局监听
    clearInterval(timer);
  });
  const state = reactive({
    info: [
      {
        image: 'https://picsum.photos/600/300?random=1',
      },
      {
        image: 'https://picsum.photos/600/300?random=2',
      },
      {
        image: 'https://picsum.photos/600/300?random=3',
      },
    ],
    current: 0,
  });
  function handleChange(index, oldIndex) {
    // state.current = index;
    console.log('---- change ----', index, oldIndex);
  }

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

  onLoad(async (options) => {
    const queryObj = Object.assign({}, options);

    if (options.token) {
      // queryObj.open = queryObj.open || 0;

      if(!queryObj.open) {
        queryObj.open = 0;
        const queryStr= Object.entries(queryObj).map(([k,v]) => `${k}=${v}`).join('&')
        window.location.href = `${window.location.href.replace(/\?.*$/g, '')}?${queryStr}`
        return
      }
    } else {
      const res = await getToken();
      queryObj.open = queryObj.open || 1;
      queryObj.token = res.data.accessToken;
      const queryStr= Object.entries(queryObj).map(([k,v]) => `${k}=${v}`).join('&')
      window.location.href = `${window.location.href.replace(/\?.*$/g, '')}?${queryStr}`
      return
    }

    uni.setStorageSync('token', options?.token ?? 'a2ae4e11fb8f4393aafcce7de467d2e2');
    console.log('🚀 ~ URL上的token  ~ options?.token: ', options?.token);
    fittingRoomStore.getCategory();
    fittingRoomStore.getCloths();
    timer = setInterval(() => {
      // TODO: 检测到还有没生成图的, 获取最新数据
      fittingRoomStore.generatingLoading &&
        fittingRoomStore.getTestResults(fittingRoomStore.currentModel?.id);
    }, 6000);
    if (options?.modelId && options?.id) {
      fittingRoomStore.getModelList(options?.modelId);
      fittingRoomStore.getTestResults(options?.modelId).then((res) => {
        console.log('🚀 ~ index.vue ~ L118');
        fittingRoomStore.swiperCurrentIndex = res.findIndex((res) => res.id === options?.id);
      });
    } else {
      fittingRoomStore.getModelList();
    }
  });

  // 下拉刷新
  onPullDownRefresh(() => {
    // sheep.$store('app').init();
    if (fittingRoomStore.currentModel?.id) {
      fittingRoomStore.getTestResults(fittingRoomStore.currentModel?.id).then(() => {
        console.log('➤➤➤ ~ index.vue ~ L127');
        uni.stopPullDownRefresh();
      });
    } else {
      uni.stopPullDownRefresh();
    }
  });

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

<style lang="scss" scoped>
  .container {
    position: relative;
    height: 100%;
  }
  .uni-margin-wrap {
    width: 100%;
    position: relative;
    background: #ffffff;
  }

  .swiper {
    height: 680rpx;
  }

  .swiper-item {
    display: block;
    height: 680rpx;
    line-height: 300rpx;
    text-align: center;
    background: #ffffff;
  }

  .custom-item {
    width: 100%;
    height: 100%;
  }

  .swiper-image {
    width: 430rpx;
    height: 680rpx;
    box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2);
    transform: scale(0.9) translate(0, 20px);
    opacity: 0.3;
    transition: all 0.2s ease-in 0.1s;
  }
  .active {
    transform: scale(1) translate(0, 0);
    z-index: 20;
    opacity: 1;
  }
  :deep() {
    .uni-swiper__dots-item {
      height: 1px !important;
    }
  }

  .swiper-item-card {
    //width: 92% !important;
    height: 100%;
    margin: 0 4%;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .swiper-item-card-margin {
    padding: 4% 0;
  }

  .height1 {
    height: 400rpx;
  }

  .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;
  }
  .custom-indicators {
    display: flex;
    justify-content: center;
    align-items: center;
    .custom-indicator {
      width: 10rpx;
      height: 1px;
      opacity: 0.5;
      background: #fff;
      margin: 0 5rpx;
    }
    .active {
      width: 30rpx;
      height: 1px;
      background: #171717;
    }
  }
  .scroll {
    height: calc(100% - 850rpx);
  }
</style>