qjkankan_v1.1.1/packages/qjkankan-view/src/components/UIGather/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"
      :style="`width:${
        Math.max(scenesListW, secondaryW) > 1150
          ? '100%'
          : Math.max(scenesListW, secondaryW) + 120 + 'px'
      }`"
    >
      <div
        class="swiper-container"
        :style="`width:${scenesListW > 1150 ? '100%' : scenesListW + 'px'}`"
        id="swScenes"
        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:${secondaryW}px`"
        v-if="secondaryList.length > 1"
      >
        <ul class="swiper-wrapper">
          <li
            class="swiper-slide"
            @click="tabSecondary(item)"
            :class="{
              active: currentSecondary.id == item.id,
              loopspan:
                fixTitle(item.name).length > spanlength &&
                currentSecondary.id == item.id,
            }"
            v-for="(item, i) in secondaryList"
            :key="i"
          >
            <span v-if="currentSecondary.id == item.id">{{
              fixTitle(item.name)
            }}</span>
            <span v-else>{{
              fixTitle(item.name).length > spanlength
                ? fixTitle(item.name).slice(0, spanlength)
                : fixTitle(item.name)
            }}</span>
          </li>
        </ul>
      </div>
    </div>

    <div
      class="swiper-container"
      id="swcatalogRoot"
      :style="`width:${catalogRootW > innerW ? '100%' : catalogRootW + 'px'}`"
      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:
              fixTitle(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">{{
            fixTitle(item.name)
          }}</span>
          <span v-else>{{
            fixTitle(item.name).length > spanlength
              ? fixTitle(item.name).slice(0, spanlength)
              : fixTitle(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";

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 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);

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

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 innerW = computed(() => 1150);

const tabCurrentScene = (data) => {
  console.log("tabCurrentScene", data.id, currentScene.value.id);
  if (data.id !== currentScene.value.id) {
    store.commit("scene/setCurrentScene", data);
  } else {
    console.log("重复点击当前导航");
    // window.alert("alert-test-->重复点击当前导航");
  }
};

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

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

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 loadList = () => {
  nextTick(() => {
    let t = setTimeout(() => {
      clearTimeout(t);
      ["#swcatalogRoot", "#swSecondary", "#swScenes"].forEach((item) => {
        new Swiper(item, {
          slidesPerView: "auto",
          centeredSlides: true,
          spaceBetween: 10,
          centerInsufficientSlides: true,
          centeredSlidesBounds: true,
          freeMode: true,
          // slidesPerView : 6,
          slidesPerGroup: 10,
          // resistanceRatio: 0,
        });
      });
    }, 100);
  });
};

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

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

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

<style lang="scss" scoped>
$width: 1150px;

.bar-list {
  position: absolute;
  bottom: 68px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  max-width: $width;
  overflow: hidden;
  max-height: 0;
  transition: 0.3s all ease;
  z-index: 9;

  .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: 0 auto 10px;
    padding: 10px 0;
    background: linear-gradient(
      268deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.4) 25%,
      rgba(0, 0, 0, 0.4) 75%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  #swcatalogRoot {
    > 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;

    > 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 {
    > 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>