YuHuaTai-Pc/QJKK/src/framework/show/list.vue

<template>
  <div class="list" :class="{ listHide: incoShow }">
    <div class="incoShow" @click="incoShow = !incoShow">
      <img src="../../assets/img/menu2.png" alt="" v-if="incoShow" />
      <img src="../../assets/img/menu.png" alt="" v-else />
    </div>
    <!-- 收起之后展开 -->

    <div class="topTitBox">
      <div
        class="oneLi"
        @click="handleTabone({ children: [1], id: 100, name: '航拍' }, 0)"
        :class="{ activeOne: 100 == taboneActive.id }"
      >
        航拍全景
      </div>

      <div
        class="clip-scroller topTit"
        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 row"
            @click="handleTabone(item, i)"
            :class="{ active: item.id == taboneActive.id }"
            v-show="i !== 0"
            v-for="(item, i) in showInfo.catalogRoot"
            :key="i"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
    <div class="listBac">
      <!-- 左右箭头 -->
      <div
        class="swiper-button-prev"
        slot="button-prev"
        v-show="scenes.length > 11"
      ></div>
      <div
        class="swiper-button-next"
        slot="button-next"
        v-show="scenes.length > 11"
      ></div>

      <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="swiperOptions2"
            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
                  :data-value="i"
                  :class="{
                    active: selected.sceneCode == item.sceneCode && !MapShow,
                  }"
                >
                  <img :src="handleImg(item) + `?${Math.random()}`" alt="" />

                  <RollName
                    :offset="20"
                    :active="selected.sceneCode == item.sceneCode && !MapShow"
                    class="dWenZi"
                    :myref="'subw' + item.id"
                    :name="item.sceneTitle"
                  />
                </div>
              </li>
            </ul>
            <div class="swiper-scrollbar"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右下角的几个按钮 -->
    <div class="txtShowBtn2" @click="fullShow">
      <img
        :src="require(`@/assets/img/Goods/full${isFullscreen ? 'Ac' : ''}.png`)"
        alt=""
      />
      <p :class="{ acFull: isFullscreen }">全屏</p>
    </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;
export default {
  props: ["select", "hanpaiID", "MapShow"],
  components: { RollName },

  directives: {
    swiper: directive,
  },

  data() {
    return {
      isFullscreen: false,
      incoShow: false,

      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",
        centeredSlides: true,
        centerInsufficientSlides: true,
        centeredSlidesBounds: true,
        freeMode: true,
      };
    },
    swiperOptions2() {
      return {
        slidesPerView: "auto",
        centeredSlides: true,
        centerInsufficientSlides: true,
        centeredSlidesBounds: true,
        freeMode: true,
        navigation: {
          prevEl: ".swiper-button-prev",
          nextEl: ".swiper-button-next",
        },
        scrollbar: {
          el: ".swiper-scrollbar",
        },
      };
    },
  },

  methods: {
    // 从倾斜摄影进来
    incoShowClose() {
      this.incoShow = true;
    },

    // 点击全屏
    fullShow() {
      let element = document.documentElement;
      if (this.isFullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
      }
      // 改变当前全屏状态
      this.isFullscreen = !this.isFullscreen;
    },
    handleImg(item) {
      let url = "";
      if (item.type == "4dkk") {
        url = `local/4dkk/${item.sceneCode}/wwwroot/images/images${item.sceneCode}/thumbSmallImg.jpg`;
      } else {
        if (item.icon.indexOf("preview.jpg") > -1) {
          url = item.icon.replace(
            "https://4dkk.4dage.com/720yun_fd_manage/image/",
            `${this.$cdn}local/pano/${item.sceneCode}/`
          );
        } else {
          url = item.icon.replace(
            "https://4dkk.4dage.com/720yun_fd_manage/image/",
            `${this.$cdn}local/pano/images/`
          );
        }
      }
      return url || item.icon;
    },

    // 给父组件调用控制轮播图的位置
    changeSwInd(index) {
      this.$refs.sw.swiper.slideTo(index);
    },

    handleTabone(item, i = null) {
      this.taboneActive = item;
      // 把底部轮播图回到起点
      this.$refs.sw.swiper.slideTo(0);
      // 让自己保持居中
      this.$refs.sw2.swiper.slideTo(i);
    },

    handleVR(item, i = null) {
      if (i !== null) {
        this.$refs.sw.swiper.slideTo(i);
        this.$emit("mapClose");
      }

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

  mounted() {
    // 监听esc事件
    document.addEventListener("webkitfullscreenchange", (e) => {
      if (!e.currentTarget.webkitIsFullScreen) this.isFullscreen = false;
    });

    document.addEventListener("fullscreenchange", (e) => {
      if (!document.fullscreenElement) this.isFullscreen = false;
    });

    document.addEventListener("MSFullscreenChange", (e) => {
      if (!document.msFullscreenElement) this.isFullscreen = false;
    });
    document.addEventListener("mozfullscreenchange", (e) => {
      if (!document.mozFullScreenElement) this.isFullscreen = false;
    });
  },

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

<style lang="less" scoped>
.txtShowBtn2 {
  position: fixed;
  z-index: 15;
  top: 35px;
  right: 30px;

  color: #333333;
  width: 50px;
  cursor: pointer;
  background-size: 100% 100%;
  & > img {
    width: 100%;
  }
  .acFull {
    color: #930909;
  }
}

.list {
  transition: bottom 0.5s;
  position: absolute;
  bottom: 0px;
  left: 0;
  z-index: 99;
  text-align: center;
  width: 100%;
  height: 200px;
  background-color: rgba(234, 229, 211, 0.9);
  &::before {
    content: "";
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 40px;
    border-radius: 40px 40px 0 0;
    line-height: 40px;
    background-color: rgba(234, 229, 211, 0.9);
  }

  .incoShow {
    cursor: pointer;
    z-index: 20;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    top: -36px;
    display: flex;
    justify-content: center;
    align-items: center;
    & > img {
      width: 20px;
      height: 18px;
    }
  }

  .topTitBox {
    color: #333333;
    max-width: 1000px;
    z-index: 10;
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    height: 54px;
    padding: 0 0px 0 85px;
    .oneLi {
      padding: 0 8px;
      position: absolute;
      z-index: 20;
      height: 30px;
      top: 3px;
      left: 5px;
      cursor: pointer;
      line-height: 30px;
    }
    .activeOne {
      color: #d00724;
      pointer-events: none;
      opacity: 1;
      margin-right: 15px;
    }
  }
  .topTit {
    .row {
      cursor: pointer;
      margin: 3px 10px 0;
      padding: 0 10px;
      height: 30px;
      line-height: 30px;
      width: auto;
    }
    .active {
      color: #d00724;
      pointer-events: none;
      opacity: 1;
    }
  }
  .listBac {
    width: 100%;
    height: 140px;
    position: absolute;
    bottom: 10px;
    left: 0;
    .swiper-scrollbar {
      background-color: #d8b275;
    }
    /deep/.swiper-scrollbar-drag {
      background-color: #930909;
    }
    .swiper-button-prev {
      position: absolute;
      left: 30px;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 30px;
      background: url("../../assets/img/left.png") no-repeat;
      background-size: 100% 100%;
      &::after {
        color: transparent;
      }
    }
    .swiper-button-next {
      position: absolute;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 30px;
      background: url("../../assets/img/right.png") no-repeat;
      background-size: 100% 100%;
      &::after {
        color: transparent;
      }
    }
  }

  .l-con {
    width: 100%;
    transition: all ease 0.3s;
    overflow: hidden;
    pointer-events: auto;

    .pic-con {
      border-radius: 4px;
      padding: 0 70px;
    }

    .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;
        }
      }
    }
    .pic-list {
      > li {
        cursor: pointer;
        width: 180px;
        height: 140px;
        > div {
          box-sizing: border-box;
          width: 100%;
          height: 140px;
          opacity: 1;
          border-radius: 4px;
          position: relative;
          cursor: pointer;

          .dWenZi {
            color: #333333;
            width: 100%;
            text-align: center;
            position: absolute;
            left: 0;
            bottom: 15px;
            z-index: 10;
            font-size: 14px;
            padding: 0 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          > img {
            width: 100%;
            height: 100px;
            object-fit: cover;
          }
          .iconfont {
            position: absolute;
            left: 4px;
            top: 4px;
            z-index: 99;
          }
          > 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 {
            & > img {
              border: 3px solid #930909;
            }
            .dWenZi {
              color: #930909;
            }
          }
        }
      }
    }

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

    .towcls {
      background: rgba(0, 0, 0, 0.3);
    }
    &.active {
      position: relative;
      top: 0px;
    }
  }
}
.listHide {
  bottom: -200px;
}
</style>