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

<template>
  <div class="Rbottom" :style="`${leftList[1].done ? 'bottom:0px' : ''}`">
    <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>

      <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 { 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,
      // --------------
      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: {
    acList(val) {
      let temp = val - 2;
      if (temp < 0) temp = 0;

      this.Swiper.slideTo(temp);
    },
    music(val) {
      let dom = document.querySelector("#bacMusic");
      if (val) dom.play();
      else dom.pause();
    },
  },
  //方法集合
  methods: {
    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");
      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() {},
  //生命周期 - 挂载完成（可以访问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: 10;
  position: absolute;
  bottom: 24px;
  right: 0px;
  width: 100%;
  .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>