historyList.vue 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <template>
  2. <!--我听过的(播放历史)-->
  3. <div class="historyList">
  4. <music-list
  5. :list="historyList"
  6. :list-type="1"
  7. @select="selectItem"
  8. @del="deleteItem"
  9. >
  10. <div slot="listBtn" class="list-btn">
  11. <span @click="$refs.dialog.show()">清空列表</span>
  12. </div>
  13. </music-list>
  14. <mm-dialog
  15. ref="dialog"
  16. body-text="是否清空播放历史列表"
  17. confirm-btn-text="清空"
  18. @confirm="clearList"
  19. />
  20. </div>
  21. </template>
  22. <script>
  23. import { mapGetters, mapMutations, mapActions } from 'vuex'
  24. import MusicList from '@/components/music-list/music-list'
  25. import MmDialog from '@base/mm-dialog/mm-dialog'
  26. export default {
  27. name: 'HistoryList',
  28. components: {
  29. MusicList,
  30. MmDialog
  31. },
  32. computed: {
  33. ...mapGetters(['historyList', 'playing', 'currentMusic'])
  34. },
  35. methods: {
  36. // 清空列表事件
  37. clearList() {
  38. this.clearHistory()
  39. this.$mmToast('列表清空成功')
  40. },
  41. // 播放事件
  42. selectItem(item, index) {
  43. this.selectPlay({
  44. list: this.historyList,
  45. index
  46. })
  47. },
  48. // 删除事件
  49. deleteItem(index) {
  50. let list = [...this.historyList]
  51. list.splice(index, 1)
  52. this.removeHistory(list)
  53. this.$mmToast('删除成功')
  54. },
  55. ...mapMutations({
  56. setPlaying: 'SET_PLAYING'
  57. }),
  58. ...mapActions(['selectPlay', 'clearHistory', 'removeHistory'])
  59. }
  60. }
  61. </script>
  62. <style lang="less" scoped>
  63. .historyList {
  64. width: 100%;
  65. height: 100%;
  66. .musicList {
  67. width: 100%;
  68. height: 100%;
  69. .list-btn {
  70. display: flex;
  71. justify-content: center;
  72. align-items: center;
  73. height: 50px;
  74. span {
  75. padding: 5px 20px;
  76. cursor: pointer;
  77. user-select: none;
  78. &:hover {
  79. color: @text_color_active;
  80. }
  81. }
  82. }
  83. }
  84. }
  85. </style>