bbh_Yun/mo/src/views/bottom.vue

<template>
  <div
    class="bottom"
    :style="`height:${box3Ac > 2 ? '210' : '170'}px;bottom:${
      !swiShow ? '0' : box3Ac > 2 ? '-210' : '-170'
    }px`"
  >
    <div class="openBox" @click.stop="swiShow = !swiShow">
      <van-icon name="arrow-up" v-if="swiShow" />
      <van-icon name="arrow-down" v-else />
    </div>
    <div class="main">
      <div class="box1">
        <div>
          <div class="swiper-container" :key="box3Ac + box2Ac">
            <div class="swiper-wrapper">
              <div
                class="swiper-slide"
                v-for="(item, index) in swData"
                :key="index"
              >
                <div
                  v-for="(val, ind) in item.son"
                  :key="ind"
                  @click="box1Cut(val)"
                  :class="{
                    active: box1Ac === val.id,
                  }"
                >
                  <img src="../assets/img/demo.png" alt="" />
                  <van-notice-bar
                    speed="30"
                    v-if="box1Ac === val.id"
                    delay="0"
                    :scrollable="true"
                  >
                    {{ val.name }}
                  </van-notice-bar>
                  <p v-else>{{ val.name }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box2" v-if="box3Ac > 2">
        <div class="huadong" :style="`width:${box2Data.length * 80}px`">
          <div class="row" v-for="(item, index) in box2Data" :key="item.id">
            <span
              @click="box2Cut(item, index)"
              :class="{ active: item.id === box2Ac }"
              >{{ item.name }}</span
            >
            <div class="xian" v-if="index < box2Data.length - 1"></div>
          </div>
        </div>
      </div>
      <div class="box3">
        <div class="row" v-for="item in box3Data" :key="item.id">
          <span
            @click="box3Cut(item)"
            :class="{ active: item.id === box3Ac }"
            >{{ item.name }}</span
          >
          <div class="xian" v-if="item.id !== 4"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { exArr1, exArr2, exArr3, exArr4 } from "./zhan.js";
import Swiper from "@/assets/swiper/swiper.js";
export default {
  components: {},
  data() {
    //这里存放数据
    return {
      // 控制底部轮播图的收起展开
      swiShow: false,
      box3Data: [
        { id: 1, name: "航拍", code: "" },
        { id: 2, name: "地面全景", code: "" },
        { id: 3, name: "第一展厅", code: "" },
        { id: 4, name: "第二展厅", code: "" },
      ],
      box3Ac: 1,
      box2Ac: "",
      box1Ac: "",
      box2Data: [],
      // 轮播图数据
      swData: [],
      Swiper: null,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 给父组件调用的收起底部的方法
    openBotton(val){
      this.swiShow=val
    },


    // 封装一个切换最底部的方法
    getBox3Fu(id) {
      if (id === 1) this.box2Data = [...exArr1];
      else if (id === 2) this.box2Data = [...exArr2];
      else if (id === 3) this.box2Data = [...exArr3];
      else if (id === 4) this.box2Data = [...exArr4];
      if (id < 3) return;
      this.box2Ac = this.box2Data[0].id;
      setTimeout(() => {
        let scrolDom = document.querySelector(".box2");
        scrolDom.scrollLeft = 0;
      }, 100);
    },
    box1Cut(val) {
      if (this.box1Ac === val.id) return;
      this.box1Ac = val.id;
      this.$emit("changeVR", val.code);
      // 同步list组件的当前vr选中
      this.$emit('VRActive',val.id)
    },

    box3Cut(item) {
      this.$emit('lishShow')
      if (this.box3Ac === item.id) return;
      this.box3Ac = item.id;

      this.$emit("mengBan", this.box3Ac);

      this.getBox3Fu(item.id);
      this.getSwFu("1", "1_1", true);
    },
    box2Cut(item, index,flag) {
      if (this.box2Ac === item.id) return;
      this.box2Ac = item.id;
      // 设置被选中的元素居中显示
      this.$nextTick(() => {
        let scrolDom = document.querySelector(".box2");
        scrolDom.scrollLeft = (index - 1) * 80;
      });
      if(flag) return
      this.getSwFu(item.id + "", "1_1", true);
      this.$emit('fenQuB_L',item.id)
    },
    // 封装一个重新加载轮播图的方法
    getSwFu(id1, id2, flag) {
      this.$nextTick(() => {
        this.swData = [];
        this.Swiper = null;

        let obj = this.box2Data.find((v) => v.id == id1);
        // this.towAc = obj.id;
        let index = id2.indexOf("_");
        let bs = id2.substr(index + 1, id2.length);
        let num1 = Math.ceil(Number(bs) / 3);
        num1 -= 1;
        if (!flag) {
          this.box1Ac = id2;
        }
        // 获取分区里面数据的长度
        let num = Math.ceil(obj.son.length / 3);
        for (let i = 0; i < num; i++) {
          this.swData.push({
            son: obj.son.slice(i * 3, (i + 1) * 3),
          });
        }

        setTimeout(() => {
          this.Swiper = new Swiper(`.box1 .swiper-container`, {
            slidesPerView: 1.1,
            initialSlide: num1,
            spaceBetween: 0,
          });
        }, 0);
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.box2Data = [...exArr1];
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getSwFu(1, "1_1", true);
    // document.querySelector(".huadong").style.width =
    //   this.box2Data.length * 80 + "px";
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
@import "../assets/swiper/swiper.css";
.bottom {
  position: absolute;
  bottom: 0px;
  left: 0;
  z-index: 10;
  width: 100%;
  padding: 0 8px 5px 8px;
  transition: bottom 0.5s;
  .openBox {
    position: absolute;
    width: 111px;
    height: 21px;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-image: url("../assets/img/bottomOpen.png");
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #f1a588;
  }
  .main {
    width: 100%;
    height: 100%;
    border-radius: 40px 40px 0 0;
    overflow: hidden;
    .box1 {
      position: relative;
      width: 100%;
      height: 110px;
      background-color: rgba(0, 0, 0, 0.5);
      margin-bottom: 5px;
      & > div {
        padding: 8px 20px 5px 20px;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        width: 100%;
        height: 100%;
      }
      .swiper-container {
        width: 100%;
        height: 100%;
        .swiper-slide {
          display: flex;
          justify-content: flex-start;
          & > div {
            border-radius: 10px;
            overflow: hidden;
            position: relative;
            width: 30%;
            height: 100%;
            margin-right: 10px;
            /deep/.van-notice-bar {
              padding: 0;
              opacity: 0.8;
              transition: all 0.3s;
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 30px;
              line-height: 30px;
              background-color: rgba(0, 0, 0, 0.6);
              font-size: 14px;
              color: #fff;
            }
            p {
              opacity: 0.8;
              transition: all 0.3s;
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 30px;
              line-height: 30px;
              text-align: center;
              background-color: rgba(0, 0, 0, 0.6);
              font-size: 14px;
              color: #fff;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              padding: 0 6px;
            }
            // /deep/.van-notice-bar__wrap {
            //   justify-content: center;
            // }
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          .active {
            /deep/.van-notice-bar {
              opacity: 1;
              background-color: rgba(181, 147, 134, 0.8);
            }
          }
        }
      }
    }
    .box2::-webkit-scrollbar {
      width: 0px;
      height: 0px;
    }
    .box2 {
      margin-top: 5px;
      height: 40px;
      width: 100%;
      overflow-x: auto;
      background-color: rgba(0, 0, 0, 0.5);
      .huadong {
        height: 100%;
        display: flex;
        justify-content: space-around;
        padding: 0 10px;
        .row {
          font-size: 14px;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          .xian {
            margin: 0 8px 0 15px;
            width: 1px;
            height: 20px;
            background-image: linear-gradient(
              rgba(255, 255, 255, 0.1),
              rgba(255, 255, 255, 0.6),
              rgba(255, 255, 255, 0.1)
            );
          }
          span {
            display: block;
            position: relative;
          }
          .active {
            color: #c48871;
          }
        }
      }
    }
    .box3 {
      padding: 0 10px 0 15px;
      margin-top: 5px;
      height: 50px;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: space-around;
      .row {
        font-size: 16px;
        color: #fff;
        display: flex;
        align-items: center;
        .xian {
          margin: 0 10px 0 15px;
          width: 2px;
          height: 35px;
          background-image: linear-gradient(
            rgba(255, 255, 255, 0.1),
            rgba(255, 255, 255, 0.6),
            rgba(255, 255, 255, 0.1)
          );
        }
        span {
          display: block;
          position: relative;
        }
        .active {
          color: #c48871;
          &::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -5px;
            width: 100%;
            height: 2px;
            background-color: #c48871;
          }
        }
      }
      @media screen and (max-width: 350px) {
        .row {
          font-size: 14px;
        }
      }
    }
  }
}
</style>