qjkankan_v1.1.1/packages/qjkankan-view/src/components/UIGather/mobile/list.vue

<template>
  <div class="bar-list"
    v-if="show && !((metadata.catalogRoot && metadata.catalogRoot.length == 1) && scenes.length == 1 && secondaryList.length == 1)"
    :class="{ barshow: isShowScenesList }">
    <div class="top-con">
      <div class="swiper-container" id="swScenes" :style="`width:${Math.min(scenesListW, innerW)}px;
      padding:${scenesListW > innerW ? '0 15px' : '0'}`" v-if="currentScenesList.length > 0">
        <ul class="swiper-wrapper">
          <li @click="tabCurrentScene(item)" class="swiper-slide" :class="{
            active: currentScene.sceneCode == item.sceneCode,
            loopspan: item.sceneTitle.length > spanlength && currentScene.id == item.id,
          }" :style="{ backgroundImage: `url(${item.icon})` }" v-for="(item, i) in currentScenesList" :key="i">
            <i class="iconfont " :class="item.type == '4dkk' ? 'icon-editor_3d' : 'icon-editor_panoramic'"></i>
            <div>
              <span v-if="currentScene.id == item.id">{{ item.sceneTitle }}</span>
              <span v-else>{{ item.sceneTitle.length > spanlength ? item.sceneTitle.slice(0, spanlength) :
                  item.sceneTitle
              }}</span>
            </div>
          </li>
        </ul>
      </div>

      <div class="swiper-container" id="swSecondary" :style="`width:${Math.min(secondaryW, innerW)}px;
      padding:${secondaryW > innerW ? '0 15px' : '0'}`" v-if="secondaryList.length > 1">
        <ul class="swiper-wrapper">
          <li class="swiper-slide" @click="tabSecondary(item)" :class="{
            active: currentSecondary.id == item.id,
            loopspan: item.name.length > spanlength && currentSecondary.id == item.id,
          }" v-for="(item, i) in secondaryList" :key="i">
            <span v-if="currentSecondary.id == item.id">{{ item.name }}</span>
            <span v-else>{{ item.name.length > spanlength ? item.name.slice(0, spanlength) : item.name }}</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="swiper-container" id="swcatalogRoot" :style="`width:${Math.min(catalogRootW, innerW)}px;
    padding:${catalogRootW > innerW ? '0 15px' : '0'}`"
      v-if="metadata.catalogRoot.length > 0 && metadata.catalogs.length > 1">
      <ul class="swiper-wrapper" v-if="metadata.catalogRoot.length > 1">
        <li class="swiper-slide" :class="{
          active: currentCatalogRoot.id == item.id,
          loopspan: item.name.length > spanlength && currentCatalogRoot.id == item.id,
        }" @click="tabRoot(item)" v-for="(item, i) in metadata.catalogRoot" :key="i">
          <span v-if="currentCatalogRoot.id == item.id">{{ item.name }}</span>
          <span v-else>{{ item.name.length > spanlength ? item.name.slice(0, spanlength) : item.name }}</span>

        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed, onMounted, nextTick } from "vue";
import { useStore } from "vuex";
import { useApp } from "@/app";
const store = useStore();

const spanlength = ref(5);

const metadata = computed(() => store.getters["scene/metadata"]);
const scenes = computed(() => store.getters["scene/list"]);
const currentScene = computed(() => store.getters["scene/currentScene"]);

const currentCatalogRoot = computed(() => store.getters["scene/currentCatalogRoot"]);
const currentSecondary = computed(() => store.getters["scene/currentSecondary"]);

const secondaryList = computed(() => store.getters["scene/secondaryList"]);

const isShowScenesList = computed(() => store.getters["functions/isShowScenesList"]);

const currentScenesList = computed(() => store.getters["scene/currentScenesList"]);


const swidth = ref({
  "swcatalogRoot": 104,
  "swSecondary": 84,
  "swScenes": 72,
})

const innerW = computed(() => window.innerWidth)

const scenesListW = computed(() => currentScenesList.value.length * (swidth.value['swScenes'] + 10) - 10)
const secondaryW = computed(() => secondaryList.value.length * (swidth.value['swSecondary'] + 10) - 10)
const catalogRootW = computed(() => metadata.value.catalogRoot.length * (swidth.value['swcatalogRoot'] + 10) - 10)



const show = ref(false);

const tabCurrentScene = (data) => {
  store.commit("scene/setCurrentScene", data);
};

const tabSecondary = (data) => {
  store.commit("scene/setCurrentSecondary", data);
};

const tabRoot = (data) => {
  store.commit("scene/setCurrentCatalogRoot", data);
};

const loadList = () => {
  nextTick(() => {
    let t = setTimeout(() => {
      clearTimeout(t);
      ["#swcatalogRoot", "#swSecondary", "#swScenes"].forEach((item) => {
        let tmp = new Swiper(item, {
          slidesPerView: "auto",
          centeredSlides: true,
          spaceBetween: 10,
          centerInsufficientSlides: true,
          centeredSlidesBounds: true,
          freeMode: true,
          observer: true,
          observeParents:true
        });
        if (item == '#swScenes') {
          setTimeout(() => {
            tmp && tmp.slideTo(0, 50, false)
          }, 0);
        }

        // console.log(tmp.slideTo);
      });
    }, 100);
  });
};

watch(currentSecondary, () => {
  loadList();
});

watch(currentScenesList, () => {
  loadList();
});

onMounted(() => {
  useApp().then(async (app) => {
    show.value = true;
    loadList();
  });
});
</script>

<style lang="scss" scoped>
.bar-list {
  position: absolute;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  overflow: hidden;
  max-height: 0;
  transition: .3s all ease;
  z-index: 9;
  width: 100%;

  .swiper-container {
    width: 100%;
    position: relative;
    margin: 0 auto;

    >ul {
      >li {
        white-space: nowrap;

        >span,
        >div>span {
          cursor: pointer;
          display: inline-block;
          color: rgba(255, 255, 255, 0.6);
        }

        &.loopspan {

          >span,
          >div>span {
            animation: 5s wordsLoop linear infinite normal;
          }
        }

        &.active {

          >span,
          >div>span {
            color: rgba(255, 255, 255, 1);
          }
        }
      }
    }
  }

  .top-con {
    margin-bottom: 10px;
    padding: 10px 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
  }

  #swcatalogRoot {
    padding: 0 15px;

    >ul {
      >li {
        width: 104px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 4px;
        padding: 4px 10px;
        border: 1px solid rgba(255, 255, 255, 0.5);
        box-sizing: border-box;
        overflow: hidden;

        >span {
          width: 100%;
          word-break: keep-all;
        }

        &.active {
          border: 1px solid rgba(255, 255, 255, 1);
        }
      }
    }
  }

  #swSecondary {
    margin: 20px auto 10px;
    padding: 0 15px;

    >ul {
      >li {
        width: 84px;
        box-sizing: border-box;
        overflow: hidden;
        padding-bottom: 6px;

        >span {
          width: 100%;
          word-break: keep-all;
        }

        &.active {
          position: relative;

          &::before {
            content: "";
            display: inline-block;
            position: absolute;
            bottom: 0;
            width: 20px;
            height: 2px;
            z-index: 9999;
            left: 50%;
            transform: translateX(-50%);
            background: var(--colors-primary-base);
          }
        }
      }
    }
  }

  #swScenes {

    // padding: 0 15px;
    >ul {
      >li {
        cursor: pointer;
        width: 72px;
        height: 72px;
        border-radius: 6px;
        border: 1px solid #ffffff;
        background-size: cover;
        position: relative;
        overflow: hidden;

        .iconfont {
          position: absolute;
          left: 4px;
          top: 4px;
          z-index: 99;

          &::after {
            background: rgba(0, 0, 0, 0.3);
            content: "";
            width: 14px;
            height: 14px;
            display: inline-block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: -1;
            filter: blur(4px);
          }
        }

        >div {
          position: absolute;
          bottom: 0;
          left: 0;
          height: 20px;
          background: rgba(0, 0, 0, 0.5);
          width: 100%;
          overflow: hidden;

          >span {
            width: 100%;
            line-height: 20px;
            word-break: keep-all;
          }
        }

        &.active {
          border: 1px solid var(--colors-primary-base);

          >div {
            >span {}
          }
        }
      }
    }
  }
}

.barshow {
  max-height: 190px;
}

@keyframes wordsLoop {
  0% {
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}
</style>