菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 梁洁---20230106---vue项目第六天 [打印本页]

作者: 梁杰，你好 时间: 2023-1-9 23:38
标题: 梁洁---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>

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)