梁洁---20230106---vue项目第六天

<template>
  <transition>
    <div class="player" v-show="getShow">
      <playerHearder :currentSong="getcurrentSong"></playerHearder>
      <playerMiddle
        :currentSong="getcurrentSong"
        :currentTime="currentTime"
      ></playerMiddle>
      <playerBottom
        :currentSong="getcurrentSong"
        :totalt="totalTime"
        :currentTime="currentTime"
      ></playerBottom>
      <div class="playerbg">
        <img :src="getcurrentSong.picUrl" alt="" />
      </div>
      <audio
        autoplay
        :src="getcurrentSong.musicUrl"
        ref="playaudio"
        id="paudio"
        @timeupdate="timeupdate"
        @ended="endit"
      ></audio>
      <h1>{{ getcurrentSong.musicUrl }}</h1>
    </div>
  </transition>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import playerHearder from "../components/player/playerHearder.vue";
import playerMiddle from "../components/player/playerMiddle.vue";
import playerBottom from "../components/player/playerBottom.vue";

export default {
  name: "myPlayer",
  components: {
    playerHearder,
    playerMiddle,
    playerBottom,
  },
  data() {
    return {
      totalTime: 0,
      currentTime: 0,
      currentLy: "",
    };
  },
  created() {},
  mounted() {
    console.log(this.getcurrentSong);
    this.$refs.playaudio.oncanplay = () => {
      this.totalTime = Math.ceil(this.$refs.playaudio.duration);
    };
  },
  methods: {
    ...mapActions(["setCurrentIndex", " setModeType", "setCurrentTime"]),
    timeupdate() {
      this.currentTime = this.$refs.playaudio.currentTime;
    },
    endit() {
      if (this.getModeType == 0) {
        // this.$refs.playaudio.loop = false;
        // 向前播放
        if (this.getCurrentIndex < this.getSongs.length - 1) {
          this.setCurrentIndex(this.getCurrentIndex + 1);
        } else {
          this.setCurrentIndex(0);
        }
      } else if (this.getModeType == 1) {
        // 单曲循
        this.$refs.playaudio.play();
        this.setCurrentIndex(this.getCurrentIndex);
      } else if (this.getModeType == 2) {
        // this.$refs.playaudio.loop = false;
        this.setCurrentIndex(Math.floor(Math.random() * this.getSongs.length));
      }
    },
  },
  computed: {
    ...mapGetters([
      "getShow",
      "getcurrentSong",
      "getIsPlay",
      "getCurrentIndex",
      "getModeType",
      "setSongsDeatil",
      "getSongs",
      "getCurrentTime",
      "getCurrrentLyric",
    ]),
  },
  watch: {
    getIsPlay(newV) {
      if (newV) {
        this.$refs.playaudio.play();
      } else {
        this.$refs.playaudio.pause();
      }
    },
    getCurrentTime(newV) {
      // console.log(newV);
      this.$refs.playaudio.currentTime = newV;
    },
    getcurrentSong(newV) {
      let historyList = JSON.parse(localStorage.getItem("historyList")) || [];
      let flag = false;
      console.log(newV);
      if (newV.id != "") {
        if (historyList.length == 0) {
          historyList.push(newV);
        } else {
          historyList.forEach((v) => {
            if (v.id == newV.id) {
              flag = true;
            }
          });
          if (!flag) {
            historyList.push(newV);
          }
        }
      }

      // console.log("zuizhong", history_list);
      localStorage.setItem("historyList", JSON.stringify(historyList));
    },
  },
};
</script>

<style scoped lang="scss">
.player {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 1000;
  .playerbg {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: -100;
    img {
      height: 130%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      filter: blur(100px);
    }
  }
}

.v-enter {
  transform: translateX(100%);
}
.v-enter-to {
  transform: translateX(0);
}
.v-enter-active {
  transition: all 1s;
}
.v-leave {
  transform: translateX(0);
}
.v-leave-to {
  transform: translateX(100%);
}
.v-leave-active {
  transition: all 1s;
}
</style>