YuHuaTai-Pc/SWKK/src/components/Rbottom.vue

<template>
  <div class="Rbottom" :style="`${leftList[1].done ? 'bottom:0px' : ''}`">
    <!--热点列表div -->
    <div class="hotBox" :class="{ activeHotBox: hotListShow }">
      <div class="hot_main">
        <!-- 关闭按钮 -->
        <div class="hot_close" @click="hotListShow = false"></div>
        <!-- 标题 -->
        <div class="hot_title">热点列表</div>
        <!-- 输入框 -->
        <div class="hot_search" @keyup.enter="mySearch">
          <!-- <input type="text" v-model="hotTxt"> -->
          <el-input
            type="text"
            placeholder="请输关键字"
            v-model="hotTxt"
            maxlength="30"
            show-word-limit
          >
          </el-input>
          <div class="hot_btn" @click="mySearch">搜索</div>
        </div>
        <!-- 历史记录 -->
        <div class="hot_his" v-show="hotHisList.length > 0">
          <div
            class="hot_hisRow"
            @click="selectHis(item)"
            v-for="(item, index) in hotHisList"
            :key="index"
          >
            {{ item }}
          </div>
          <!-- 清除 -->
          <div class="hot_clearHis" @click="clearHotHis">清除历史记录</div>
        </div>
        <!-- 热点列表 -->

        <div class="hot_listNone" v-show="hotListShowData.length === 0">
          暂无内容
        </div>

        <div
          v-show="hotListShowData.length !== 0"
          class="hot_list"
          :style="`height:${hotHisList.length === 0 ? '540px' : '450px'}`"
        >
          <div
            class="hot_listRow"
            @click="openHot(item)"
            v-for="item in hotListShowData"
            :key="item.sid"
          >
            {{ item.title?.split("&")[0] }}
          </div>
        </div>
      </div>
    </div>

    <audio src="@/assets/media/bacMusic.mp3" loop id="bacMusic"></audio>

    <div class="box1">
      <div class="mainll mainrr">
        <div
          v-show="list.length !== 0 || item.type > 2"
          @click="leftCutClick(item.type)"
          class="row"
          :class="{ active2: item.done }"
          v-for="item in leftList"
          :key="item.type"
        >
          <img
            :src="
              require(`@/assets/img/LeftTop/inco${item.type}${
                item.done ? 'Ac' : ''
              }.png`)
            "
            alt=""
          />
          <p>{{ item.name }}</p>
        </div>

        <!-- 热点列表 -->
        <div
          class="row"
          :class="{ active2: hotListShow }"
          @click="hotListShow = true"
        >
          <img
            :src="
              require(`@/assets/img/LeftTop/incoHot${
                hotListShow ? 'Ac' : ''
              }.png`)
            "
            alt=""
          />
          <p>热点列表</p>
        </div>
      </div>

      <div class="mainrr">
        <div
          class="row"
          @click="rightClisk(item.type)"
          v-for="item in rightList"
          :key="item.type"
          :class="{
            active2:
              (music && item.type === 2) ||
              (like && item.type === 3) ||
              (share && item.type === 4) ||
              (isFullscreen && item.type === 5),
          }"
        >
          <img
            :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
            alt=""
            v-if="music && item.type === 2"
          />
          <img
            :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
            alt=""
            v-else-if="like && item.type === 3"
          />
          <img
            :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
            alt=""
            v-else-if="share && item.type === 4"
          />
          <img
            :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
            alt=""
            v-else-if="isFullscreen && item.type === 5"
          />
          <img
            :src="require(`@/assets/img/Goods/inco${item.type}.png`)"
            alt=""
            v-else
          />
          <transition name="likeAddAnimate">
            <div class="likeMove" v-show="like && item.type === 3">+ 1</div>
          </transition>
          <p>
            {{ item.name }}
          </p>
        </div>
      </div>
    </div>

    <div
      class="box2"
      :style="`${leftList[1].done ? '' : 'height:0px;padding:0;opacity:0'}`"
    >
      <div class="swiper-container">
        <div class="swiper-wrapper" v-if="list.length">
          <div
            @click="cutGoods(index)"
            class="swiper-slide"
            v-for="(item, index) in list"
            :class="{
              active:
                (acList === index && playing) ||
                (clickBottomAc && acList === index),
            }"
            :key="index"
          >
            <img :src="item.list[0].enter.cover" alt="" />
            <div
              class="plan"
              v-show="
                (acList === index && playing) ||
                (clickBottomAc && acList === index)
              "
              :style="{ width: progressPart + '%' }"
            ></div>
            <p
              :class="{
                txtActive:
                  (acList === index && playing) ||
                  (clickBottomAc && acList === index),
              }"
            >
              {{ item.name }}
            </p>
          </div>
          <div class="swiper-slide" style="pointer-events: none"></div>
        </div>
        <div class="swiper-scrollbar"></div>
      </div>
    </div>

    <!-- 分享页面 -->
    <div class="shareBox" :class="{ shareBoxShow: share }">
      <div class="shareMain">
        <div class="close" @click="share = false"></div>
        <h3>分享</h3>
        <p>
          请使用手机扫描二维码或
          <br />
          复制分享链接
        </p>
        <img src="@/assets/img/Goods/Rcode.jpg" alt="" />
        <div class="btnn" @click="copyPcTxt">复制分享链接</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getHotHis, setHotHis, clearHotHis } from "../utils/storage";
import { addNumAPI } from "@/utils/api";
import Swiper from "./swiper.js";
export default {
  name: "Rbottom",
  components: {},
  props: ["acList", "progressPart", "playing", "clickBottomAc"],
  data() {
    //这里存放数据
    return {
      rightList: [
        { name: "首页", type: 1 },
        { name: "声音", type: 2 },
        { name: "点赞", type: 3 },
        { name: "分享", type: 4 },
        { name: "全屏", type: 5 },
      ],
      rightType: "",
      music: false,
      like: false,
      share: false,
      isFullscreen: false,
      // --------------
      hotList: [],
      hotListShowData: [],
      hotHisList: [],
      hotTxt: "",
      hotListShow: false,
      leftList: [
        { name: "自动漫游", type: 1, done: false },
        { name: "场景导览", type: 2, done: false },
        { name: "全景漫游", type: 3, done: true },
        { name: "迷你模型", type: 4, done: false },
        { name: "顶部俯视", type: 5, done: false },
      ],
      list: [],
      Swiper: null,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    hotListShow(val) {
      if (val) {
        if (this.leftList[0].done) {
          this.$emit("stopPlay", true);
          this.leftList[0].done = false;
          if (window.bacMusic) {
            setTimeout(() => {
              this.music = true;
            }, 100);
          }
        }
      } else {
        this.hotListShowData = [...this.hotList];
        this.hotTxt = "";
        let dom = document.querySelector(".hot_list");
        if (dom) dom.scrollTop = 0;
      }
    },
    acList(val) {
      let temp = val - 2;
      if (temp < 0) temp = 0;

      this.Swiper.slideTo(temp);
    },
    music(val) {
      let dom = document.querySelector("#bacMusic");
      if (val) {
        // 如果有对应的点位音频，删除
        const dotAudioDomId = document.querySelector("#dotAudioDomId");
        if (dotAudioDomId) document.body.removeChild(dotAudioDomId);

        dom.play();
      } else dom.pause();
    },
  },
  //方法集合
  methods: {
    // 给父组件调用，拿到热点数据
    getHotListToFather(data) {
      const tempArr = data.filter(
        (v) => v.title.split("&")[2] || !v.title.includes("&")
      );

      tempArr.forEach((v, i) => {
        const bs = v.title.split("&")[1];
        if (bs) v.myBs = Number(bs);
        else v.myBs = -i;
      });

      this.hotList = tempArr.sort((a, b) => a.myBs - b.myBs);

      this.hotListShowData = [...this.hotList];
    },

    openHot(item) {
      this.$emit("openHot", item);
    },

    selectHis(val) {
      this.hotHisList = this.hotHisList.filter((v) => v !== val);
      this.hotTxt = val;
      this.hotHisList.unshift(val);
      setHotHis(this.hotHisList);
      this.hotListShowData = this.hotList.filter((v) =>
        v.title.split("&")[0].includes(this.hotTxt)
      );
      this.$nextTick(() => {
        setTimeout(() => {
          let dom = document.querySelector(".hot_list");
          if (dom) dom.scrollTop = 0;
        }, 20);
      });
    },

    clearHotHis() {
      clearHotHis();
      this.hotHisList = [];
    },

    mySearch() {
      if (this.hotTxt.trim() === "") {
        this.hotListShowData = [...this.hotList];
      } else {
        this.hotListShowData = this.hotList.filter((v) =>
          v.title.split("&")[0].includes(this.hotTxt)
        );
        this.hotHisList = this.hotHisList.filter((v) => v !== this.hotTxt);
        this.hotHisList.unshift(this.hotTxt);
        if (this.hotHisList.length > 14) this.hotHisList.length = 14;
        setHotHis(this.hotHisList);
      }

      this.$nextTick(() => {
        setTimeout(() => {
          let dom = document.querySelector(".hot_list");
          if (dom) dom.scrollTop = 0;
        }, 20);
      });
    },
    cutGoods(index) {
      this.$emit("update:clickBottomAc", false);

      this.$emit("daoLanCut", index);
      this.leftList[0].done = false;
      if (window.bacMusic) {
        setTimeout(() => {
          this.music = true;
        }, 100);
      }
    },

    leftCutClick(type) {
      this.$emit("cutKankan", type - 1);

      if (type === 1) {
        let dom = document.querySelector("#bacMusic");
        if (!this.leftList[0].done) {
          // 防止多次点击自动漫游
          let mainApp = document.querySelector("#app");
          mainApp.style.pointerEvents = "none";

          // 自动漫游开始的时候的音乐播放状态
          window.bacMusic = !dom.paused;
          setTimeout(() => {
            this.music = false;
          }, 200);
        } else {
          if (window.bacMusic) {
            setTimeout(() => {
              this.music = true;
            }, 100);
          }
        }
        this.leftList[1].done = true;
        this.leftList[0].done = !this.leftList[0].done;
      } else if (type === 2) {
        this.leftList[1].done = !this.leftList[1].done;
      } else if (type >= 4) {
        this.$emit("stopPlay", true);
      }
    },

    // 给父组件调用的控制音乐播放的方法
    opMusic(val) {
      this.music = val;
    },

    // 给父组件操作控制左边按钮的方法
    leftCut(index) {
      if (index > 2) {
        if (window.bacMusic) {
          setTimeout(() => {
            this.music = true;
          }, 100);
        }
        this.leftList.forEach((v, i) => {
          if (i === index) v.done = true;
          else v.done = false;
        });
      } else if (index === -1) {
        if (window.bacMusic) {
          setTimeout(() => {
            this.music = true;
          }, 100);
        }
        this.leftList[0].done = false;
      } else if (index === 2) {
        this.leftList[2].done = true;
        this.leftList[3].done = this.leftList[4].done = false;
      }
    },

    // 点击全屏
    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;
    },
    rightClisk(type) {
      if (type === 1) window.location.replace("/YHT/index.html#/Home");
      else if (type === 2) {
        let dom = document.querySelector("#bacMusic");
        window.bacMusic = dom.paused;
        this.music = !this.music;

        this.$emit("stopPlay");
      } else if (type === 3) {
        if (this.like) return;
        this.like = true;
        setTimeout(() => {
          this.like = false;
        }, 2000);
        addNumAPI("star");
      } else if (type === 4) {
        this.$emit("stopPlay");
        this.share = true;
      } else this.fullShow();
    },
    //点击复制链接
    copyPcTxt() {
      // 存储传递过来的数据
      let OrderNumber = window.location.origin + "/YHT/index.html";
      // 创建一个input 元素
      // createElement() 方法通过指定名称创建一个元素
      let newInput = document.createElement("input");
      // 讲存储的数据赋值给input的value值
      newInput.value = OrderNumber;
      // appendChild() 方法向节点添加最后一个子节点。
      document.body.appendChild(newInput);
      // 选中input元素中的文本
      // select() 方法用于选择该元素中的文本。
      newInput.select();
      // 执行浏览器复制命令
      //  execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令
      document.execCommand("Copy");
      // 清空输入框
      newInput.remove();
      alert("复制成功");
    },
    // 初始化轮播图
    baseSw(data) {
      this.list = data;
      this.$nextTick(() => {
        this.Swiper = new Swiper(".Rbottom .swiper-container", {
          slidesPerView: 9,
          spaceBetween: 25,
          scrollbar: {
            el: ".swiper-scrollbar",
          },
        });
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.hotHisList = getHotHis();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  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;
    });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.swiper-scrollbar {
  height: 4px;
  background-color: #fff;
  overflow: hidden;
}

/deep/.swiper-scrollbar-drag {
  background-color: #930909;
}

@import "./swiper.css";

.likeAddAnimate-enter-active,
.likeAddAnimate-leave-active {
  transition: all 2s ease;
}

.likeAddAnimate-enter,
.likeAddAnimate-leave {
  transform: translateY(0) scale(0);
  opacity: 0;
}

.likeAddAnimate-enter-to,
.likeAddAnimate-leave-to {
  transform: translateY(-50px) scale(1.2);
  opacity: 1;
}

.Rbottom {
  transition: all 0.5s;
  z-index: 11;
  position: absolute;
  bottom: 24px;
  right: 0px;
  width: 100%;

  // 热点列表页面
  .hotBox {
    transition: opacity 0.3s;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(4px);

    .hot_main {
      padding: 25px 50px 15px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 1100px;
      height: 700px;
      background-image: url("../assets/img/LeftTop/hotBox.png");
      background-size: 100% 100%;

      .hot_close {
        cursor: pointer;
        position: absolute;
        background-image: url("../assets/img/Goods/shareClose.png");
        background-size: 100% 100%;
        right: -20px;
        top: -20px;
        z-index: 11;
        width: 48px;
        height: 48px;
      }

      .hot_title {
        font-size: 24px;
        color: #d8b275;
        margin-bottom: 15px;
      }

      .hot_search {
        display: flex;
        height: 40px;
        justify-content: space-between;

        .el-input {
          width: 860px;

          /deep/input {
            background-color: transparent;
            border-radius: 20px;
            border: 1px solid #d8b275;
            color: #fff;
          }

          /deep/.el-input__count-inner {
            background-color: transparent;
            color: #fff;
          }
        }

        .hot_btn {
          width: 100px;
          height: 40px;
          background-color: #d8b275;
          border-radius: 20px;
          cursor: pointer;
          text-align: center;
          line-height: 40px;
          color: #930909;
          font-size: 14px;
        }
      }

      .hot_his {
        display: flex;
        flex-wrap: wrap;
        position: relative;
        padding-right: 120px;

        .hot_clearHis {
          position: absolute;
          bottom: 0;
          right: 0;
          cursor: pointer;
          padding-left: 20px;
          background: url("../assets/img/LeftTop/delete.png") left center
            no-repeat;
          background-size: 17px 17px;
          color: #fff;
          font-size: 14px;
        }

        .hot_hisRow {
          height: 30px;
          line-height: 30px;
          padding: 0 8px;
          background-color: #eeeeee;
          margin-right: 15px;
          margin-top: 15px;
          cursor: pointer;
          border-radius: 15px;
          max-width: 110px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .hot_list::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 5px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
      }

      .hot_list::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 1px;
        -webkit-box-shadow: inset 0 0 5px transparent;
        background: #d8b275;
      }

      .hot_list::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px transparent;
        border-radius: 10px;
        background: transparent;
      }

      .hot_listNone {
        width: 100%;
        height: 450px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: #fff;
      }

      .hot_list {
        padding-right: 15px;
        margin-top: 28px;
        height: 450px;
        overflow-y: auto;

        .hot_listRow {
          cursor: pointer;
          border-bottom: 1px solid #fff;
          height: 50px;
          line-height: 48px;
          color: #fff;
          font-size: 16px;

          &:nth-of-type(1) {
            border-top: 1px solid #fff;
          }

          &:hover {
            color: #d8b275;
            border-bottom: 1px solid #d8b275;
            position: relative;

            &::before {
              content: "";
              position: absolute;
              top: -1px;
              left: 0;
              width: 100%;
              height: 1px;
              background-color: #d8b275;
            }
          }
        }
      }
    }
  }

  .activeHotBox {
    opacity: 1;
    pointer-events: auto;
  }

  .box1 {
    padding: 0 25px;
    width: 100%;
    display: flex;
    justify-content: space-between;

    .mainrr {
      display: flex;

      .row {
        position: relative;
        cursor: pointer;
        width: 50px;
        text-align: center;
        margin-left: 18px;
        color: #fff;

        & > img {
          width: 50px;
        }

        p {
          font-size: 12px;
        }

        .likeMove {
          color: #930909;
          position: absolute;
          top: 10px;
          width: 100%;
          text-align: center;
        }
      }

      .active2 {
        color: #930909;
        font-weight: 700;

        p {
          font-size: 12px;
        }
      }
    }

    .mainll {
      .row {
        width: 80px;
        margin-left: 0;
      }
    }
  }

  .box2 {
    overflow: hidden;
    transition: height 0.5s;
    margin-top: 5px;
    width: 100%;
    height: 170px;
    background-color: #d8b275;
    padding: 15px 25px 0;

    .swiper-container {
      cursor: grab;
      height: 100%;

      .swiper-slide {
        cursor: pointer;
        height: 120px;

        img {
          width: 100%;
          height: 110px;
          object-fit: cover;
        }

        p {
          text-align: center;
          height: 30px;
          line-height: 30px;
          color: #ffffff;
          font-size: 14px;
        }

        .plan {
          height: 4px;
          background-color: #930909;
        }

        .txtActive {
          color: #930909;
        }
      }

      .active {
        img {
          border: 3px solid #930909;
        }
      }
    }
  }
}

.shareBox {
  z-index: 11;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(4px);
  transition: opacity 0.5s;

  .shareMain {
    padding: 40px 30px 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    height: 650px;
    background-image: url("../assets/img/Goods/shareBac.png");
    background-size: 100% 100%;
    text-align: center;

    .close {
      width: 48px;
      height: 48px;
      cursor: pointer;
      position: absolute;
      right: -24px;
      top: -24px;
      background-image: url("../assets/img/Goods/shareClose.png");
      background-size: 100% 100%;
    }

    h3 {
      text-align: left;
      color: #d8b275;
      font-size: 24px;
      margin-bottom: 50px;
    }

    p {
      font-size: 20px;
      color: #ffffff;
      margin-bottom: 40px;
    }

    img {
      width: 240px;
      margin-bottom: 50px;
    }

    .btnn {
      cursor: pointer;
      width: 280px;
      margin: 0 auto;
      height: 60px;
      border-radius: 30px;
      border: 2px solid #d8b275;
      line-height: 58px;
      font-size: 20px;
      color: #ffffff;
    }
  }
}

.shareBoxShow {
  opacity: 1;
  pointer-events: auto;
}
</style>