构建 - playlist 组件 模式切换、展示/消失逻辑

Author: lbwa

src/base/base-confirm.vue

@@ -1,6 +1,6 @@
 <template>
  <transition name="confirm-fade">
- <div class="confirm" v-show="showFlag">
+ <div class="confirm" v-show="showFlag" @click.self="chooseCancel">
  <div class="confirm-wrapper">
  <div class="confirm-content">
  <p class="text">{{ title }}</p>

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

@@ -1,7 +1,7 @@
 <template>
  <transition name="list-fade">
- <div class="playlist" v-show="hasShowPlaylist" @click="closePlaylist">
- <div class="list-wrapper" @click.stop>
+ <div class="playlist" v-show="hasShowPlaylist" @click.self="closePlaylist">
+ <div class="list-wrapper">
 
  <div class="list-header">
  <h1 class="title">
@@ -13,12 +13,13 @@
  </h1>
  </div>
 
- <BaseScroll class="list-content" :data="playlist">
+ <BaseScroll class="list-content" :data="sequenceList">
  <ul>
  <li
  class="content-item"
- v-for="(song, index) of playlist"
+ v-for="(song, index) of sequenceList"
  :key="index"
+ @click="selectItem(song, index)"
  >
  <i class="current"></i>
  <span class="item-text">{{ song.name }}</span>
@@ -58,7 +59,7 @@
 <script>
 import BaseScroll from 'base/base-scroll'
 import BaseConfirm from 'base/base-confirm'
-import { mapGetters, mapMutations, mapActions } from 'vuex'
+import { mapGetters, mapMutations } from 'vuex'
 import { shuffle } from 'common/js/util'
 import { playMode } from 'common/js/config'
 
@@ -70,9 +71,18 @@ export default {
  },
 
  methods: {
+ selectItem (song, index) {
+ if (this.mode === playMode.random) {
+ index = this.playlist.findIndex(item => {
+ return song.id === item.id
+ })
+ }
+ this.setCurrentIndex(index)
+ this.setPlayingState(true)
+ },
+
  cleanPlaylist () {
  // TODO:
- // this.resetPlayStatus()
  },
 
  showConfirm () {
@@ -113,12 +123,9 @@ export default {
  ...mapMutations({
  setPlayMode: 'SET_PLAY_MODE',
  setCurrentIndex: 'SET_CURRENT_INDEX',
- setPlaylist: 'SET_PLAYLIST'
- }),
-
- ...mapActions([
- 'resetPlayStatus'
- ])
+ setPlaylist: 'SET_PLAYLIST',
+ setPlayingState: 'SET_PLAYING_STATE'
+ })
  },
 
  computed: {

src/store/actions.js

@@ -108,12 +108,3 @@ export const deleteSearchHistory = function ({ commit }, query) {
 export const clearAllHistory = function ({ commit }) {
  commit(types.SET_SEARCH_HISTORY, deleteAllSearchItem())
 }
-
-export const resetPlayStatus = function ({ commit }) {
- commit(types.SET_PLAY_MODE, playMode.sequence)
- commit(types.SET_SEQUENCE_LIST, [])
- commit(types.SET_PLAYLIST, [])
- commit(types.SET_CURRENT_INDEX, 0)
- commit(types.SET_FULL_SCREEN, false)
- commit(types.SET_PLAYING_STATE, false)
-}

src/store/state.js

@@ -5,8 +5,8 @@ const state = { // 只保留最基础的数据，由基础数据可计算得到
  artist: {},
  playing: false, // 播放/暂停
  fullScreen: false, // 全屏
- playlist: [], // 当前播放列表，其中顺序是 sequenceList 属性设置
- sequenceList: [], // 播放列表的播放顺序列表
+ playlist: [], // 当前播放列表，其中的顺序即是播放顺序
+ sequenceList: [], // 展示性播放列表
  mode: playMode.sequence, // 语义化值，而不是直接写属性值
  currentIndex: -1, // 当前播放歌曲的索引，驱动歌曲的播放行为
  recommendItem: [], // 用户点击的推荐歌单项