梁洁----20230105--vue项目第五天

<template>
  <div class="player-middle">
    <swiper ptions="opt" class="playerBanners">
      <!-- f封面 -->
      <swiper-slide class="player-cd">
        <div class="cd-wrapper" ref="cd">
          <img v-lazy="currentSong.picUrl" alt="" ref="ppic" />
        </div>
        <p>{{ currentLy }}</p>
      </swiper-slide>
      <swiperSlide class="lylist">
        <ScrollView ref="scrollView">
          <ul class="lyriclist">
            <li
              v-for="(val, aa, index) in getCurrrentLyric"
              :key="index"
              :class="{ active: aa == currentLineNo }"
            >
              {{ val }}
            </li>
          </ul>
        </ScrollView>
      </swiperSlide>

      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import ScrollView from "../ScrollView.vue";
import "swiper/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { mapGetters, mapActions } from "vuex";
export default {
  name: "playerMiddle",
  components: {
    swiper,
    swiperSlide,
    ScrollView,
  },
  data() {
    return {
      opt: {
        pagination: {
          el: ".swiper-pagination",
          bulletClass: "my-bullet",
          bulletActiveClass: "my-bullet-active",
        },
        observer: true, //开启动态检查器，监测swiper和slide
        observeParents: true, //监测Swiper 的祖/父元素
        observeSlideChildren: true, //监测Swiper的子元素wrapper、pagination、navigation、scrollbar或其他一级子元素
      },
      currentLineNo: 0,
      currentLy: "",
      clys: {},
    };
  },
  created() {
    // console.log(this.getCurrrentLyric);
  },
  mounted() {},
  methods: {
    ...mapActions(["setCurrentLyric"]),
    getcl(newT) {
      let num = Math.floor(newT);
      let res = this.clys[num];
      if (newT >= 0) {
        if (!!res) {
          /*  this.currentLy = res;
        this.currentLineNo = num; */
          return num;
        } else {
          return this.getcl(--num);
        }
      } else {
        return 0;
      }
    },
  },
  props: {
    currentSong: {
      type: Object,
    },
    currentTime: {
      type: Number,
    },
  },
  computed: {
    ...mapGetters(["getIsPlay", "getCurrrentLyric"]),
  },
  watch: {
    getIsPlay(newV) {
      if (newV) {
        this.$refs.ppic.classList.remove("active");
      } else {
        this.$refs.ppic.classList.add("active");
      }
    },
    currentSong(newS) {
      this.setCurrentLyric(newS.id);
    },
    currentTime(newT) {
      // console.log(this.getcl(newT));
      /*  if (newT > this.currentLineNo) {
        this.currentLineNo = this.getcl(newT);
      } else {

      } */
      this.currentLineNo = this.getcl(newT);

      this.currentLy = this.clys[this.currentLineNo];
      // 判断是否需要滚动歌词
      let atop;

      if (document.querySelector("li.active") != null) {
        atop = document.querySelector("li.active").offsetTop;
      } else {
        atop = 0;
      }

      let ltop = this.$refs.scrollView.$el.offsetHeight;

      if (atop > ltop / 2) {
        this.$refs.scrollView.scrollTo(0, ltop / 2 - atop, 200);
      } else {
        this.$refs.scrollView.scrollTo(0, 0, 200);
      }
    },
    getCurrrentLyric(newL) {
      let str = JSON.stringify(newL);
      this.clys = JSON.parse(str);
      for (let key in this.clys) {
        if (!!this.clys[key]) {
          // this.currentLineNo = key;
          this.clys[0] = this.clys[key];
          delete this.clys[key];

          return;
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
@keyframes sport {
  from {
    transform: rotate(0deg);
    transform-origin: center center;
  }
  to {
    transform: rotate(360deg);
    transform-origin: center center;
  }
}
@import "../../assets/css/mixin.scss";
.player-middle {
  position: fixed;
  top: 100px;
  bottom: 250px;
  left: 0;
  right: 0;
  z-index: 1000;
  overflow: hidden;
  .lylist {
    width: 100%;
    height: 100%;
    // height: 600px;
    text-align: center;

    .lyriclist {
      overflow: hidden;
      box-sizing: border-box;
      padding-bottom: 400px;
      li {
        font-size: 30px;
        margin-top: 10px;
        color: #fff;
        &.active {
          // font-size: 45px;
          transform: scale(1.2);
          // box-shadow: ;
          color: gold;
        }
      }
      li:last-child {
        // height: 60%;
        padding-bottom: 20%;
      }
    }
  }
  .playerBanners {
    margin-top: 10%;
    width: 100%;
    height: 90%;
    .player-cd {
      width: 100%;
      .cd-wrapper {
        width: 100%;
        border-radius: 50%;
        text-align: center;
        img {
          width: 600px;
          height: 600px;
          border-radius: 50%;
          border: 30px solid #fff;
          box-sizing: border-box;
          animation: sport 10s linear infinite;
          &.active {
            animation-play-state: paused;
          }
        }
      }
      p {
        margin-top: 50px;
        text-align: center;
        font-size: 40px;
        color: #fff;
      }
    }
  }
}
</style>
<style lang="scss">
@import "../../assets/css/mixin.scss";
// 小圆点样式
.my-bullet {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 10px;
  margin-left: 20px;
  margin-bottom: 30px;
}
// 被选中分页原点的
.my-bullet-active {
  @include bgColor();
  width: 40px;
  border-radius: 20px;
}
</style>