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

<template>
  <div class="bar-list" v-if="metadata?.navigationTrees?.length">
    <div class="top-con" v-show="currentScenesList.length">
      <div v-if="currentScenesList.length" class="scene-list swiper-container" ref="scene-swiper" :style="`width:${scenesListW > 1150 ? '100%' : scenesListW + 'px'}`">
        <!-- <div class="scene-list swiper-container" ref="scene-swiper"> -->
        <div class="swiper-wrapper scene-wrapper">
          <!-- <div
            class="swiper-slide scene-slide"
            :class="{
              active: currentScene.id == item.id ||currentScene.id == item.sid  ,
              disabled: isLockV4Scene,
              // loopspan:
              //   item.sceneTitle.length > spanlength &&
              //   currentScene.id == item.id,
            }"
            v-for="(item, index) in currentScenesList"
          > -->
          <div
            class="swiper-slide scene-slide"
            :class="{
              active: currentScene.id == item.id || (currentScene.sid && currentScene.sid == item.sid),

              // loopspan:
              //   item.sceneTitle.length > spanlength &&
              //   currentScene.id == item.id,
            }"
            v-for="(item, index) in currentScenesList"
          >
            <div @click="tabCurrentScene(item, index)" class="scene-content" :style="`background-image:url(${item.icon});`">
              <!-- <img :src="i.icon" alt="" /> -->

              <i class="iconfont" :class="item.type == '4dkk' ? 'icon-editor_3d' : 'icon-editor_panoramic'"></i>
              <div class="marquee">
                <marquee-text :repeat="1" :duration="Math.ceil(item.name.length / 10) * 5" :key="item.id" v-if="item.name.length > spanlength && currentScene.id == item.id">
                  {{ item.name }}
                </marquee-text>
                <span v-else>
                  {{ item.name }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="second-group-box" v-if="metadata?.navigationTrees[rootTabIndex]">
        <div v-if="metadata?.navigationTrees[rootTabIndex]?.children[0]?.type == 'group' && showSecondTab" class="second-group-list swiper-container" ref="second-group-swiper">
          <div class="swiper-wrapper second-group-wrapper">
            <template v-for="(item, index) in metadata?.navigationTrees[rootTabIndex]?.children">
              <div
                class="swiper-slide second-group-slide"
                @click="tabSecond(item)"
                v-if="item.children.length"
                :class="{ active: currentSecondId == item.id, loopspan: fixTitle(item.name).length > spanlength && currentSecondId == item.id }"
              >
                <div class="second-group-content">
                  <marquee-text :duration="Math.ceil(fixTitle(item.name).length / 10) * 5" :key="item.id" :repeat="1" v-if="fixTitle(item.name).length > spanlength && currentSecondId == item.id">
                    {{ fixTitle(item.name) }}
                  </marquee-text>
                  <span v-else>
                    {{ fixTitle(item.name) }}
                  </span>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-com">
      <div v-if="metadata?.navigationTrees?.length > 1" :style="`width:${catalogRootW}px;`" class="root-group-list swiper-container" ref="root-group">
        <div class="swiper-wrapper root-group-wrapper">
          <div
            class="swiper-slide root-group-slide"
            :class="{
              active: currentRootId == item.id,

              loopspan: fixTitle(item.name).length > spanlength && currentRootId.id == item.id,
            }"
            v-for="(item, index) in metadata?.navigationTrees"
            @click="tabRoot(item)"
          >
            <div class="root-group-content">
              <marquee-text :duration="Math.ceil(fixTitle(item.name).length / 10) * 5" :key="item.id" :repeat="1" v-if="fixTitle(item.name).length > spanlength && currentRootId == item.id">
                {{ fixTitle(item.name) }}
              </marquee-text>
              <span v-else>
                {{ fixTitle(item.name) }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed, onMounted, nextTick, unref, watchEffect } from "vue";
import { useStore } from "vuex";
import { useApp } from "@/app";
import MarqueeText from "vue-marquee-text-component";
import { useI18n, getLocale } from "@/i18n";
const { t } = useI18n({ useScope: "global" });

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 currentSecondId = computed(() => store.getters["scene/currentSecondId"]);
const currentRootId = computed(() => store.getters["scene/currentRootId"]);

const clamp = computed(() => (num, min, max) => Math.min(Math.max(num, min), max));

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 show = ref(false);

watch(
  () => currentScenesList.value,
  () => {
    nextTick(() => {
      initSceneSwiper();
      initRootGroupSwiper();
      if (metadata.value.navigationTrees[currentRootId.value]?.children[currentSecondId.value]?.type == "group") {
        initSecondGroupSwiper();
      }
    });
  }
);
const swidth = ref({
  swcatalogRoot: 104,
  swSecondary: 84,
  swScenes: 72,
});

const SceneSwiper = ref(null);
const SecondGroupSwiper = ref(null);
const rootGroupSwiper = ref(null);

const rootTabIndex = computed(() => {
  console.error(currentRootId.value);
  return metadata.value && metadata.value?.navigationTrees ? metadata.value?.navigationTrees.findIndex((item) => item.id == currentRootId.value) : 0;
});

const secondTabIndex = computed(() => {
  return metadata.value && metadata.value?.navigationTrees ? metadata.value.navigationTrees[rootTabIndex.value]?.children.findIndex((item) => item.id == currentSecondId.value) : 0;
});

const showSecondTab = computed(() => {
  return metadata.value && metadata.value?.navigationTrees ? metadata.value?.navigationTrees[rootTabIndex.value].children.some((item) => item.id != currentSecondId.value) : false;
});

const scenesListW = computed(() => currentScenesList.value.length * (swidth.value["swScenes"] + 10));
const secondaryW = computed(() => metadata.value.navigationTrees[secondTabIndex.value].length * (swidth.value["swSecondary"] + 10));
const catalogRootW = computed(() => metadata.value.navigationTrees.length * (swidth.value["swcatalogRoot"] + 10));

const innerW = computed(() => 1150);

const fixTitle = (name) => {
  if (name == "默认二级分组") {
    name = t("navigation.default_group_two");
  } else if (name == "一级分组") {
    name = t("navigation.group_one");
  } else {
    name = name;
  }
  return name;
};
const swiperOptions = {
  slidesPerView: "auto",
  centeredSlides: true,
  spaceBetween: 10,
  centerInsufficientSlides: true,
  centeredSlidesBounds: true,
  freeMode: {
    enabled: true,
    sticky: false,
    momentumBounce: false,
    // momentumVelocityRatio: 0.5,
  },
};

const tabRoot = (item) => {
  store.commit("scene/setData", { currentRootId: item.id });
  // changeSceneList();
};
const tabSecond = (item) => {
  store.commit("scene/setData", { currentSecondId: item.id });
  let sceneList = metadata.value.navigationTrees[rootTabIndex.value].children[secondTabIndex.value].children;
  store.commit("scene/setCurrentScenesList", sceneList);
  // this.changeSceneList();
};
const changeSceneList = () => {
  let currentList = null;

  if (metadata.value.navigationTrees[rootTabIndex.value].children.length && metadata.value.navigationTrees[rootTabIndex.value].children[0].type == "group") {
    store.commit("scene/setData", { currentSecondId: metadata.value.navigationTrees[rootTabIndex.value].children[0].id });
    currentList = metadata.value.navigationTrees[rootTabIndex.value].children[secondTabIndex.value].children;
    store.commit("scene/setCurrentScenesList", currentList);
  }

  if (secondTabIndex.value == -1) {
    console.error("没有二级目录");
    let rootList = metadata.value.navigationTrees.find((item) => item.id == currentRootId.value);
    store.commit("scene/setCurrentScenesList", rootList.children);
  }
  nextTick(() => {
    initSceneSwiper();
    initRootGroupSwiper();
    if (metadata.value.navigationTrees[currentRootId.value]?.children[currentSecondId.value]?.type == "group") {
      initSecondGroupSwiper();
    }
  });
};
const initSceneSwiper = () => {
  if (SceneSwiper.value) {
    SceneSwiper.value.destroy();
    SceneSwiper.value = null;
  }
  if (!currentScenesList.value.length) {
    return;
  }

  nextTick(() => {
    SceneSwiper.value = new Swiper(".scene-list", swiperOptions);
  });
};
const tabCurrentScene = (data, index) => {
  store.commit("scene/setCurrentScene", data);

  SceneSwiper.value.slideTo(index);
};
const initSecondGroupSwiper = () => {
  if (SecondGroupSwiper.value) {
    SecondGroupSwiper.value.destroy();
    SecondGroupSwiper.value = null;
  }

  nextTick(() => {
    SecondGroupSwiper.value = new Swiper(".second-group-list", swiperOptions);
  });
};

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

  SecondGroupSwiper.value.slideTo(index);
};

const initRootGroupSwiper = () => {
  // if (rootGroupSwiper.value) {
  //   rootGroupSwiper.value.destroy();
  //   rootGroupSwiper.value = null;
  // }
  // nextTick(() => {
  //   rootGroupSwiper.value = new Swiper(".root-group-list", swiperOptions);
  // });

  if (!rootGroupSwiper.value) {
    rootGroupSwiper.value = new Swiper(".root-group-list", swiperOptions);
  }
};

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

  SecondGroupSwiper.value.slideTo(index);
};

onMounted(() => {
  useApp().then(async (app) => {
    show.value = true;
    console.error("app", show.value);
  });
});
</script>

<style lang="less" scoped>
@width: 1150px;
.swiper-slide {
  cursor: pointer;
  &.loopspan {
    > span,
    > div > span {
      animation: 5s wordsLoop linear infinite normal;
    }
  }
}

.bar-list {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  max-width: @width;
  overflow: hidden;
  transition: 0.3s all ease;
  .top-con {
    display: inline-block;
    margin: 0 auto 10px;
    padding: 10px 6px;
    overflow: hidden;
    background: linear-gradient(268deg, transparent, rgba(0, 0, 0, 0.4) 25%, rgba(0, 0, 0, 0.4) 75%, transparent);
    .scene-list {
      max-width: @width;
      margin: 0 auto;
      // display: inline-block;

      .scene-wrapper {
        .scene-slide {
          margin: 0 5px;
          // white-space: nowrap;
          cursor: pointer;
          width: 72px;
          height: 72px;
          border-radius: 6px;
          border: 1px solid #fff;
          background-size: cover;
          position: relative;
          overflow: hidden;
          &.active {
            border: 1px solid #0076f6;
            .marquee {
              color: #fff !important;
            }
          }
          .scene-content {
            width: 100%;
            height: 100%;
            background-size: cover;
            position: relative;

            img {
              width: 100%;
              height: 100%;
              pointer-events: none;
              object-fit: cover;
            }
            > .iconfont {
              position: absolute;
              left: 4px;
              top: 4px;
              z-index: 99;
              text-shadow: 0px 0px 4px rgb(0, 0, 0, 0.3);
            }
            .marquee {
              position: absolute;
              bottom: 0;
              left: 0;
              height: 20px;
              background: rgba(0, 0, 0, 0.5);
              width: 100%;
              overflow: hidden;
              color: rgba(255, 255, 255, 0.6);
              > span {
                width: 100%;
                line-height: 20px;
                word-break: keep-all;
                display: inline-block;
              }
            }
          }
        }
      }
    }

    .second-group-box {
      .second-group-list {
        max-width: @width;
        margin: 0 auto;
        display: inline-block;

        .second-group-wrapper {
          .second-group-slide {
            width: 84px;
            box-sizing: border-box;
            overflow: hidden;
            padding-bottom: 6px;
            cursor: pointer;
            margin: 0 5px;
            white-space: nowrap;
            color: hsla(0, 0%, 100%, 0.6);
            margin: 20px auto 10px;
            &.active {
              color: #fff;

              &::before {
                content: "";
                display: inline-block;
                position: absolute;
                bottom: 0;
                width: 20px;
                height: 2px;
                z-index: 9999;
                left: 50%;
                transform: translateX(-50%);
                background: #0076f6;
              }
            }
            .second-group-content {
              // width: 100%;
              // height: 100%;
              // background-size: cover;
              // position: relative;
            }
          }
        }
      }
    }
  }
  .bottom-com {
    .root-group-list {
      max-width: @width;
      margin: 0 auto;
      .swiper-wrapper {
      }
      .root-group-wrapper {
        .root-group-slide {
          width: 104px;
          background: rgba(0, 0, 0, 0.5);
          border-radius: 4px;
          padding: 4px 10px;
          border: 1px solid hsla(0, 0%, 100%, 0.5);
          box-sizing: border-box;
          overflow: hidden;
          margin: 0 5px;
          white-space: nowrap;
          color: hsla(0, 0%, 100%, 0.6);

          &.active {
            border: 1px solid #fff;
            color: #fff;
          }
          .root-group-content {
            width: 100%;
            word-break: keep-all;
          }
        }
      }
    }
  }
}
</style>