完成 - search page 点击播放和歌手跳转

Author: lbwa

src/components/parts-search-result/parts-search-result.vue

@@ -6,16 +6,22 @@
  @scrollToEnd="searchMore"
  >
  <ul class="result-list">
- <li class="result-item" v-for="(item, index) of searchResult" :key="index">
+ <li
+ class="result-item"
+ v-for="(item, index) of searchResult"
+ :key="index"
+ @click="selectItem(item)"
+ >
  <div class="item-icon">
  <i :class="getIconClass(item)"></i>
  </div>
  <div class="item-name">
  <p class="text" v-html="getDisplayName(item)"></p>
  </div>
  </li>
- <!-- <BaseLoading v-show="hasMore"/> -->
+ <BaseLoading v-show="hasMore" title=""/>
  </ul>
+ <router-view/>
  </BaseScroll>
 </template>
 
@@ -25,6 +31,8 @@ import BaseLoading from 'base/base-loading/base-loading'
 import { searchKey } from 'api/the-search'
 import { ERR_OK } from 'api/config'
 import { createSong } from 'common/js/normalize-song'
+import { mapMutations, mapActions } from 'vuex'
+import Artist from 'common/js/normalize-artist'
 
 const TYPE_SINGER = 'singer'
 const PER_PAGE = 20 // 每一页的结果总数
@@ -33,8 +41,7 @@ export default {
  props: {
  query: {
  type: String,
- default: '',
- hasMore: true // 是否还有数据未请求
+ default: ''
  },
 
  showArtist: {
@@ -47,11 +54,26 @@ export default {
  return {
  page: 1,
  searchResult: [],
+ hasMore: true, // 是否还有数据未请求
  pullUp: true
  }
  },
 
  methods: {
+ selectItem (item) {
+ if (item.type === TYPE_SINGER) {
+ const artist = new Artist({
+ id: item.singermid,
+ name: item.singername
+ })
+
+ this.setArtist(artist)
+ this.$router.push({ path: `/search/${artist.id}` })
+ } else {
+ this.insertSong(item)
+ }
+ },
+
  searchMore () {
  if (!this.hasMore) return
 
@@ -84,7 +106,7 @@ export default {
  },
 
  search () {
- this.page = 1
+ this.page = 1 // 未清空输入框就再次执行搜索
  this.hasMore = true
  this.$refs.scroll.scrollTo(0, 0)
  searchKey(this.query, this.page, this.showArtist, PER_PAGE).then(res => {
@@ -131,7 +153,15 @@ export default {
  })
 
  return ret
- }
+ },
+
+ ...mapMutations({
+ setArtist: 'SET_ARTIST'
+ }),
+
+ ...mapActions([
+ 'insertSong'
+ ])
  },
 
  watch: {

src/components/the-artist/artist.vue

@@ -28,6 +28,19 @@ export default {
  },
 
  methods: {
+ selectArtist (artist) {
+ // path 覆盖 params
+ this.$router.push({ path: `/artist/${artist.id}` })
+ this.setArtist(artist)
+ },
+
+ handlePlaylist (playlist) {
+ const bottom = playlist.length > 0 ? '60px' : ''
+
+ this.$refs.artist.style.bottom = bottom
+ this.$refs.artistList.refresh()
+ },
+
  // handlePlayList (playlist) {
  // const bottom = playlist.length > 0 ? '60px' : ''
  // this.$refs.artist.style.bottom = bottom
@@ -93,19 +106,6 @@ export default {
  return [...hot, ...ret, ...other]
  },
 
- selectArtist (artist) {
- // path 覆盖 params
- this.$router.push({ path: `/artist/${artist.id}` })
- this.setArtist(artist)
- },
-
- handlePlaylist (playlist) {
- const bottom = playlist.length > 0 ? '60px' : ''
-
- this.$refs.artist.style.bottom = bottom
- this.$refs.artistList.refresh()
- },
-
  ...mapMutations({
  setArtist: 'SET_ARTIST' // 将 `this.setArtist()` 映射为 `this.$store.commit('SET_ARTIST')`
  })

src/router/index.js

@@ -48,7 +48,13 @@ export default new Router({
  },
  {
  path: '/search',
- component: Search
+ component: Search,
+ children: [
+ {
+ path: ':id',
+ component: ArtistItem
+ }
+ ]
  }
  ]
 })

src/store/actions.js

@@ -36,3 +36,58 @@ export const randomPlay = ({ commit }, { list }) => {
  commit(types.SET_FULL_SCREEN, true)
  commit(types.SET_PLAYING_STATE, true)
 }
+
+export const insertSong = ({ commit, state }, song) => {
+ /**
+ * 为了在之后使用 Array.prototype.splice() 方法，这里使用拓展运算符浅复制数组
+ * 原因：
+ * 1. 因为在 JavaScript 中操作对象的实质是操作对象指针，那么在不复制数组的情况下使
+ * 用数组 splice() 方法将会修改原数组。
+ * 2. 第一点的这个行为与在 vuex 中必须通过mutation 来修改 state 的原则相悖。继而报
+ * 错 Do not mutate vuex store state outside mutation handlers。
+ */
+
+ let playlist = [...state.playlist]
+ let sequenceList = [...state.sequenceList]
+ let currentIndex = state.currentIndex // 当前在 playlist 中的索引
+
+ // 记录当前歌曲
+ let currentSong = playlist[currentIndex]
+ // 判断当前歌曲是否已存在，若存在则返回索引
+ let fqIndex = findIndex(playlist, song)
+ // 因为是插入歌曲，所以索引 +1
+ currentIndex++
+ // 插入目标歌曲到当前索引位置
+ playlist.splice(currentIndex, 0, song)
+ // 查找结果是存在目标歌曲
+ if (fqIndex > -1) {
+ if (currentIndex > fqIndex) {
+ // 若当前插入索引大于列表中的索引，即在原索引之后
+ playlist.splice(fqIndex, 1)
+ currentIndex-- // 因为原单项已被删除，所以 -1
+ } else {
+ // 若当前插入索引不大于列表中的索引，即在原索引之前
+ playlist.splice(fqIndex + 1, 1)
+ }
+ }
+
+ let sequenceCurrentIndex = findIndex(sequenceList, currentSong) + 1
+
+ let fsIndex = findIndex(sequenceList, song)
+
+ sequenceList.splice(sequenceCurrentIndex, 0, song)
+
+ if (fsIndex > -1) {
+ if (sequenceCurrentIndex > fsIndex) {
+ sequenceList.splice(fsIndex, 1)
+ } else {
+ sequenceList.splice(fsIndex + 1, 1)
+ }
+ }
+
+ commit(types.SET_PLAYLIST, playlist)
+ commit(types.SET_SEQUENCE_LIST, sequenceList)
+ commit(types.SET_CURRENT_INDEX, currentIndex)
+ commit(types.SET_FULL_SCREEN, true)
+ commit(types.SET_PLAYING_STATE, true)
+}