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

<template>
  <div class="bar-list" v-if="info" :class="{ disable: isEditing }">
    <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),
              disabled: isLockV4Scene,
              // 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">
        <div v-if="info.navigationTrees[rootTabIndex]?.children[0]?.type == 'group' && showSecondTab" class="second-group-list swiper-container" ref="second-group-swiper">
          <div class="swiper-wrapper second-group-wrapper">
            <div
              class="swiper-slide second-group-slide"
              @click="tabSecond(item)"
              v-if="item.children.length"
              v-for="(item, index) in info.navigationTrees[rootTabIndex].children"
              :class="{ active: currentSecondId == item.id, disabled: isLockV4Scene, 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>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-com">
      <div v-if="info.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,
              disabled: isLockV4Scene,
              loopspan: fixTitle(item.name).length > spanlength && currentRootId.id == item.id,
            }"
            v-for="(item, index) in info.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>
import { mapGetters, mapState } from "vuex";
import MarqueeText from "vue-marquee-text-component";
export default {
  components: { MarqueeText },
  data() {
    return {
      spanlength: 6,
      swidth: {
        swcatalogRoot: 104,
        swSecondary: 84,
        swScenes: 72,
      },
      SceneSwiper: null,
      SecondGroupSwiper: null,
      rootGroupSwiper: null,
      swiperOptions: {
        slidesPerView: "auto",
        centeredSlides: true,
        centerInsufficientSlides: true,
        centeredSlidesBounds: true,
        freeMode: {
          enabled: true,
          sticky: false,
        },
      },
    };
  },

  watch: {
    currentScenesList(val) {
      this.$nextTick(() => {
        this.initSceneSwiper();
        this.initRootGroupSwiper();
        if (this.info.navigationTrees[this.currentRootId]?.children[this.currentSecondId]?.type == "group") {
          this.initSecondGroupSwiper();
        }
      });
    },
    "info.navigationTrees": {
      // immediate: true,
      handler: function (newVal, oldVal) {
        if (newVal) {
          this.$nextTick(() => {
            // this.changeSceneList();
          });
        }
      },
      deep: true,
    },
  },

  computed: {
    ...mapState({
      isLockV4Scene: "isLockV4Scene",
    }),
    ...mapGetters({
      info: "base/baseInfo",
      currentScene: "scene/currentScene",
      currentScenesList: "scene/currentScenesList",
      currentSecondId: "navigation/currentSecondId",
      currentRootId: "navigation/currentRootId",
      isEditing: "isEditing",
    }),
    scenesListW() {
      return this?.currentScenesList?.length * (this.swidth["swScenes"] + 10) || 0;
    },
    secondaryW() {
      return this.info.navigationTrees[0].length * (this.swidth["swSecondary"] + 10);
    },
    catalogRootW() {
      // return this.info.navigationTrees.length * (this.swidth["swcatalogRoot"] + 10);

      return this.info.navigationTrees.length * (this.swidth["swcatalogRoot"] + 10);
    },
    rootTabIndex() {
      return this.info.navigationTrees.findIndex((item) => item.id == this.currentRootId);
    },
    secondTabIndex() {
      return this.info.navigationTrees[this.rootTabIndex].children.findIndex((item) => item.id == this.currentSecondId);
    },
    showSecondTab() {
      return this.info.navigationTrees[this.rootTabIndex].children.some((item) => item.id != this.currentSecondId);
    },
  },
  methods: {
    fixTitle(name) {
      if (name == "默认二级分组") {
        name = this.$i18n.t("navigation.default_group_two");
      } else if (name == "一级分组") {
        name = this.$i18n.t("navigation.group_one");
      } else {
        // eslint-disable-next-line no-self-assign
        name = name;
      }
      return name;
    },
    tabRoot(item) {
      this.$store.commit("navigation/setData", { currentRootId: item.id });
      this.changeSceneList();
    },
    tabSecond(item) {
      this.$store.commit("navigation/setData", { currentSecondId: item.id });
      let sceneList = this.info.navigationTrees[this.rootTabIndex].children[this.secondTabIndex].children;
      this.$store.commit("scene/setCurrentScenesList", sceneList);
      // this.changeSceneList();
    },
    changeSceneList() {
      let currentList = null;

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

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

    tabCurrentScene(data, index) {
      this.$store.commit("scene/setCurrentScene", data);

      this.SceneSwiper.slideTo(index);
    },
    initSecondGroupSwiper() {
      if (this.SecondGroupSwiper) {
        this.SecondGroupSwiper.destroy();
        this.SecondGroupSwiper = null;
      }
      this.SecondGroupSwiper = new Swiper(".second-group-list", this.swiperOptions);
    },

    tabCurrentSecondGroup(data, index) {
      // this.$store.commit("scene/setCurrentScene", data);

      this.SecondGroupSwiper.slideTo(index);
    },

    initRootGroupSwiper() {
      if (this.rootGroupSwiper) {
        this.rootGroupSwiper.destroy();
        this.rootGroupSwiper = null;
      }
      this.rootGroupSwiper = new Swiper(".root-group-list", this.swiperOptions);
    },

    tabCurrentRootGroup(data, index) {
      // this.$store.commit("scene/setCurrentScene", data);

      this.SecondGroupSwiper.slideTo(index);
    },
  },

  mounted() {},
};
</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>