完成 - 添加 / 删除喜欢的歌曲的所有逻辑

Author: lbwa

src/common/js/mixin.js

@@ -36,6 +36,22 @@ export const playlistMixin = {
 
 export const playerMixin = {
  methods: {
+ toggleIsFavorite (song) {
+ if (this.isFavoriteSong(song)) {
+ this.deleteMyFavoriteSong(song)
+ } else {
+ this.saveMyFavoriteSong(song)
+ }
+ },
+
+ getFavoriteIcon (song) {
+ return this.isFavoriteSong(song) ? 'icon-like' : 'icon-not-like'
+ },
+
+ isFavoriteSong (song) {
+ return this.myFavoriteSongs.findIndex(item => item.id === song.id) > -1
+ },
+
  togglePlayMode () {
  const mode = (this.mode + 1) % 3
  this.setPlayMode(mode)
@@ -68,7 +84,12 @@ export const playerMixin = {
  setCurrentIndex: 'SET_CURRENT_INDEX',
  setPlayMode: 'SET_PLAY_MODE',
  setPlaylist: 'SET_PLAYLIST'
- })
+ }),
+
+ ...mapActions([
+ 'saveMyFavoriteSong',
+ 'deleteMyFavoriteSong'
+ ])
  },
 
  computed: {
@@ -80,7 +101,8 @@ export const playerMixin = {
  'playlist',
  'mode',
  'sequenceList',
- 'currentSong'
+ 'currentSong',
+ 'myFavoriteSongs'
  ])
  }
 }

src/components/app-player/app-player.vue

@@ -98,7 +98,7 @@
  <i class="icon-next" @click="nextSong"></i>
  </div>
  <div class="icon icon-right">
- <i :class="['icon', hasFavorite]" @click="toggleFavorite"></i>
+ <i :class="['icon', getFavoriteIcon(currentSong)]" @click="toggleIsFavorite(currentSong)"></i>
  </div>
  </div>
  </div>
@@ -174,8 +174,7 @@ export default {
  currentLyric: null,
  currentLineNum: 0,
  currentShow: 'cd',
- playingLyric: '',
- hasFavoriteSong: false
+ playingLyric: ''
  }
  },
 
@@ -215,16 +214,6 @@ export default {
  this.setFullScreen(true)
  },
 
- toggleFavorite () {
- this.hasFavoriteSong = !this.hasFavoriteSong
-
- if (this.hasFavoriteSong) {
- this.saveMyFavoriteSong(this.currentSong)
- } else {
- this.deleteMyFavoriteSong(this.currentSong)
- }
- },
-
  showPlaylist () {
  this.$refs.playlist.showPlaylist()
  },
@@ -460,9 +449,7 @@ export default {
  }),
 
  ...mapActions([
- 'savePlayedHistory',
- 'saveMyFavoriteSong',
- 'deleteMyFavoriteSong'
+ 'savePlayedHistory'
  ])
  },
 
@@ -501,10 +488,6 @@ export default {
  },
 
  computed: {
- hasFavorite () {
- return this.hasFavoriteSong ? 'icon-like' : 'icon-not-like'
- },
-
  rotateCD () {
  return this.playing ? 'play' : 'play pause'
  },

src/components/parts-playlist/parts-playlist.vue

@@ -30,8 +30,8 @@
  >
  <i :class="['current', getCurrentIcon(song)]"></i>
  <span class="item-text">{{ song.name }}</span>
- <span class="like-btn">
- <i class="icon-not-like"></i>
+ <span class="like-btn" @click.stop="toggleIsFavorite(song)">
+ <i :class="getFavoriteIcon(song)"></i>
  </span>
  <span class="delete-btn" @click.stop="deleteSong(song, index)">
  <i class="icon-close"></i>
@@ -262,6 +262,9 @@ export default {
  }
  .like-btn {
  margin-right: 15px;
+ .icon-like {
+ color: $color-sub-theme;
+ }
  }
  }
  }

src/components/the-user-center/the-user-center.vue

@@ -65,15 +65,19 @@ export default {
 
  methods: {
  addAllSongsToList () {
- if (this.switchIndex === 0) {
+ let list = []
 
+ if (this.switchIndex === 0) {
+ list = this.myFavoriteSongs.map(song => {
+ return new Song(song)
+ })
  } else {
- const list = this.playedHistory.map(song => {
+ list = this.playedHistory.map(song => {
  return new Song(song)
  })
-
- this.randomPlay({ list })
  }
+
+ this.randomPlay({ list })
  },
 
  addSongToList (song, index) {