FD_Pano/src/framework/show/list.vue

<template>
  <div class="list" :style="{'max-width':isW ? '1396px':'100%'}">
    <div class="l-con" :class="showList ? 'active' : ''" v-if="!(showInfo.catalogRoot.length == 1 && scenes.length == 1 && showInfo.catalogs.length == 1)">
      <div class="pic-con">
        <div class="clip-scroller" ref="sw" v-swiper:mySwiper="swiperOptions" v-if="scenes.length > 0">
          <ul class="pic-list swiper-wrapper">
            <li class="swiper-slide" :title="item.sceneTitle" @click="handleVR(item,i)" v-for="(item, i) in scenes" :key="i">
              <div :class="{ active: selected.sceneCode == item.sceneCode }">
                <img :src="item.icon + `?${Math.random()}`" alt="" />
                <i class="iconfont iconedit_type_3d" :class="{ iconedit_type_panorama: item.type !== '4dkk' }"></i>
                <rollName :offset="20" :active="selected.sceneCode == item.sceneCode" class="pic-name" :myref="'subw' + item.id" :name="item.sceneTitle" />
              </div>
            </li>
          </ul>
        </div>

        <div class="clip-scroller"  ref="sw1"  v-swiper:mySwipera="swiperOptions" v-if="childTab.length > 1">
          <ul class="pp-tap swiper-wrapper">
            <li class="swiper-slide" @click="handleTabtow(item,i)" v-for="(item, i) in childTab" :key="i">
              <rollName
                :offset="30"
                :mgin="20"
                :active="item.id == tabtowActive.id"
                class="btn pic-rect"
                :class="{ active: item.id == tabtowActive.id }"
                :myref="'ww' + item.id"
                :name="item.name"
              />
            </li>
          </ul>
        </div>
      </div>

      <div class="clip-scroller" ref="sw2" v-swiper:mySwiperb="swiperOptions" v-if="showInfo.catalogRoot.length > 0 && showInfo.catalogs.length > 1">
        <ul class="tap  swiper-wrapper" v-if="showInfo.catalogRoot.length > 1">
          <li  class="swiper-slide" @click="handleTabone(item,i)" :class="{ active: item.id == taboneActive.id }" v-for="(item, i) in showInfo.catalogRoot" :key="i">
            <rollName
              :offset="30"
              :mgin="20"
              :active="item.id == taboneActive.id"
              class="btn"
              :class="{ active: item.id == taboneActive.id }"
              :myref="'zw' + item.id"
              :name="item.name"
            />
          </li>
        </ul>
      </div>
    </div>
    <div class="btn dl" :class="{deepbg:showList}" v-if="!(showInfo.catalogRoot.length == 1 && scenes.length == 1 && showInfo.catalogs.length == 1)" @click="showList = !showList"><i class="iconfont " :class="showList ? 'iconnav_scene_down' : 'iconnav_scene_up'"></i>场景导航</div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import config from "@/config";
import rollName from "@/components/rollName";

import { directive } from "vue-awesome-swiper";
// import style (<= Swiper 5.x)
import "swiper/css/swiper.css";


let isW = window.innerWidth > 1400;

console.log(window.innerWidth);
export default {
  props: ["select"],
  components: { rollName },

  directives: {
    swiper: directive,
  },

  data() {
    return {
      taboneActive: { children: [] },
      tabtowActive: "",
      childTab: [],
      scenes: [],
      showList: true,
      isW,
      loadFirst: true,
      menuWidth: 0,
      sceneNum: config.sceneNum,
      SlyArr:[]
    };
  },
  computed: {
    ...mapGetters({
      showInfo: "showInfo",
    }),
    selected() {
      return { ...this.select };
    },
    swiperOptions() {
      return {
        slidesPerView: "auto",
        // initialSlide:0,
        // observer:true,
        // observeParents: true,
        centeredSlides : true,
        centerInsufficientSlides: true,
        centeredSlidesBounds: true,
        freeMode:true
      };
    },
  },

  methods: {
    getCWidth(ref) {
      if (this.$refs[ref]) {
        return this.$refs[ref][0].clientWidth;
      }
    },

    fixPosit(ref,i,prenum,nexnum){
         if (i!==null) {
        let acidx = this.$refs[ref].swiper.activeIndex


        if (i - acidx > nexnum ) {
          this.$refs[ref].swiper.slideNext()
        }

        if (acidx - i > prenum ) {
          this.$refs[ref].swiper.slidePrev()
        }
      }
    },

    handleTabtow(item,i=null){
      this.tabtowActive = item
      this.fixPosit('sw1',i,3,3)
    },

    handleTabone(item,i=null){
      this.taboneActive = item
      let pp = this.isW ? 5 : 4
      let nn = this.isW ? 5 : 4


      this.fixPosit('sw2',i,pp,nn)
    },

    handleVR(item,i=null) {
      history.replaceState(null, null, "".concat(window.location.pathname, "?").concat(`id=${this.showInfo.id}&vr=${item.sceneCode}`));
      this.sceneNum = item.sceneCode;

      let pp = this.isW ? 7 : 5
      let nn = this.isW ? 7 : 5


      this.fixPosit('sw',i,pp,nn)
     
    },
   
  },

  mounted() {
    
  },

  watch: {
    taboneActive: {
      handler: function(newVal) {
        let temp = [];
        newVal.children &&
          newVal.children.forEach((item) => {
            this.showInfo.catalogs.forEach((sub) => {
              if (item == sub.id) {
                temp.push(sub);
              }
            });
          });
        this.childTab = temp;
        if (!this.loadFirst) {
          this.tabtowActive = "";
        }
      },
    },
    tabtowActive: {
      deep: true,
      handler: function(newVal) {
        if (!newVal) {
          this.tabtowActive = this.childTab[0];
        } else {
          let arr = this.showInfo.scenes.filter((item) => {
            return newVal.id == item.category;
          });
          this.scenes = arr.sort((a, b) => a.weight - b.weight);
        }
      },
    },

    sceneNum: {
      deep: true,
      immediate: true,
      handler: function(newVal) {
        if (!newVal) {
          let tmp = this.showInfo.firstScene || this.showInfo.scenes[0];
          this.handleVR(tmp);
          return;
        }
        let val = this.showInfo.scenes.find((item) => item.sceneCode == newVal);
        let tmp = this.showInfo.catalogs.find((item) => item.id == val.category);
        let rootTmp = this.showInfo.catalogRoot.find((item) => {
          return item.children.indexOf(tmp.id) > -1;
        });
        this.taboneActive = rootTmp;
        this.tabtowActive = tmp;

        setTimeout(() => {
          this.$emit("select", val);
          this.loadFirst = false;
        });
      },
    },

    selected: {
      handler: function(newVal) {
        this.handleVR(newVal);
        if (newVal.type == "4dkk") {
          this.showList = false;
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
.btn {
  display: inline-block;
  margin: 0 auto;
  padding: 0 20px;
  height: 26px;
  line-height: 26px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  cursor: pointer;
  word-break: keep-all;
  max-width: 150px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  &.active {
    border: 1px solid rgba(255, 255, 255, 1);
    color: rgba(255, 255, 255, 1);
  }
}

.pic-rect {
  border-radius: 4px;
  height: 24px;
  line-height: 24px;
  padding: 0;
  padding-bottom: 10px;
  background: none;
  border: none;
  &.active {
    border: none;
    color: rgba(255, 255, 255, 1);
    position: relative;
    &::before {
      content: "";
      display: inline-block;
      position: absolute;
      bottom: 0;
      width: 20px;
      height: 2px;
      z-index: 9999;
      left: 50%;
      transform: translateX(-50%);
      background: #0076f6;
    }
  }
}

.line {
  background: #0076f6;
  width: 100%;
  height: 0.1px;
  opacity: 0.5;
}

.list {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  text-align: center;
  // width: 100%;
  max-width: 1396px;
  pointer-events: none;
  .dl {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    pointer-events: auto;
    margin-top: 18px;
    height: 38px;
    line-height: 38px;
    color: #fff;

    > i {
      margin-right: 8px;
      vertical-align: bottom;
      font-size: 18px;
    }
  }

  .deepbg{
    background: rgba(0, 0, 0, 0.5);
  }
  .l-con {
    width: 100%;
    transition: all ease 0.3s;
    max-height: 0px;
    overflow: hidden;
    pointer-events: auto;

    .pic-con {
      background: rgba(0, 0, 0, 0.5);
      border-radius: 4px;
      padding: 0 20px;
    }

    .clip-scroller{
      position: relative;
      border-radius: 4px;
    }
    ul {
      // display: inline-block;
      white-space: nowrap;
      position: relative;
      li {
        margin: 0 5px;
        display: inline-block;
      }
    }

    .pp-tap {
      padding: 8px 0 18px;
      > li {
        width: 84px;
        margin: 0 10px;

      }
    }
    .tap {
      padding: 10px 0 0;

      > li {
        position: relative;
        width: 104px;
        .btn{
          width: 100%;
          padding: 0;
        }

        // &.active {
        //   @size:5px;
        //   &::before {
        //     content: "";
        //     display: inline-block;
        //     width: 0;
        //     height: 0;
        //     border-left:  @size * 1.5 solid transparent;
        //     border-right:  @size * 1.5 solid transparent;
        //     border-top:  @size*2 solid rgba(0, 0, 0, 0.5);
        //     position: absolute;
        //     top: -20px;
        //     left: 50%;
        //     transform: translateX(-50%);
        //   }
        // }
      }
    }
    .pic-list {
      padding: 10px 0;
      > li {
        cursor: pointer;
        width: 72px;
        height: 72px;
        > div {
          width: 100%;
          height: 100%;
          border: 2px solid #ffffff;
          opacity: 1;
          border-radius: 4px;
          overflow: hidden;
          position: relative;
          cursor: pointer;
          .pic-name {
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            left: 0;
            bottom: 0;
          }
          > img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: -1;
          }
          .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);
            }
          }
          > span {
            display: inline-block;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            left: 0;
            bottom: 0;
            width: 100%;
          }
          &.active {
            border: 2px solid #0076f6;
          }
        }
      }
    }

    .onecls {
      background: rgba(0, 0, 0, 0.3);
      display: inline-block;
      width: 100%;
    }

    .towcls {
      background: rgba(0, 0, 0, 0.3);
    }
    &.active {
      max-height: 250px;
    }
  }
}
</style>