meida_front/pages/fittingRoom/index.vue

<template>
  <view v-if="template">
    <uni-swiper-dot :current="state.current" :info="state.info" :mode="'default'" field="content">
      <view class="uni-margin-wrap">
        <swiper
          :autoplay="true"
          :duration="500"
          :interval="5000"
          circular
          class="swiper"
          @change="swiperChange"
        >
          <swiper-item v-for="(item, index) in state.info" :key="index">
            <view class="swiper-item uni-bg-red">
              <image class="swiper-image" mode="heightFix" src="/static/mote.png"></image>
            </view>
          </swiper-item>
        </swiper>
        <s-select-mote />
      </view>
    </uni-swiper-dot>
    <uv-sticky :customNavHeight="0" :offset-top="0">
      <s-tabs />
    </uv-sticky>
    <s-grid-clothes />
    <view class="height1"></view>
  </view>
</template>

<script setup>
  import { computed, reactive, ref } from 'vue';
  import { onLoad, onPageScroll, onPullDownRefresh } 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'; // 隐藏原生tabBar

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

  const state = reactive({
    info: [
      {
        content: '内容 A',
      },
      {
        content: '内容 B',
      },
      {
        content: '内容 C',
      },
    ],
    current: 0,
  });
  const swiperChange = (e) => {
    state.current = e.detail.current;
  };

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

  onLoad((options) => {
    // #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>
  .uni-margin-wrap {
    width: 100%;
  }

  .swiper {
    height: 680rpx;
  }

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

  .swiper-image {
    width: 100%;
    height: 100%;
  }

  .height1 {
    height: 2000px;
  }

  .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;
  }
</style>