重开一个组件再写当前播放...

src/views/common/ZPlayingList.vue

@@ -0,0 +1,231 @@
+<script setup>
+import {
+  ref,
+  reactive,
+  h,
+  watch,
+  toRaw,
+  onMounted,
+  onUnmounted,
+  nextTick,
+} from "vue";
+import { RouterLink, useRoute, useRouter } from "vue-router";
+import { useStore } from "vuex";
+import {
+  NButton,
+  NButtonGroup,
+  NSpace,
+  NIcon,
+  NMenu,
+  NLayout,
+  NLayoutHeader,
+  NLayoutFooter,
+  NLayoutContent,
+  NLayoutSider,
+  NTag,
+  NDataTable,
+  useMessage,
+} from "naive-ui";
+import Play from "@/assets/svgs/Play_.svg";
+import Pause from "@/assets/svgs/Pause.svg";
+import dayjs from "dayjs";
+import "dayjs/locale/zh-cn";
+import duration from "dayjs/plugin/duration";
+import pubsub from "pubsub-js";
+import ArtistsSpan from '@/components/ArtistsSpan.vue';
+
+const store = useStore();
+const router = useRouter();
+dayjs.extend(duration);
+const playingList = ref([]);
+const wpTable = ref("");
+const listHeight = ref(0);
+
+// playingList.value = toRaw(store.state.settings.playingList);
+
+const token = pubsub.subscribe("zp", (msg, data) => {
+  switch (msg) {
+    case "zp.togglePlaying":
+      break;
+  }
+});
+
+//卸载组件
+onUnmounted(() => {
+  pubsub.unsubscribe(token);
+});
+
+watch(
+  () => store.state.settings.playingList,
+  (val, oldVal) => {
+    playingList.value = toRaw(store.state.settings.playingList);
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+
+let dragIdx = -1
+const dragstart = (idx) => {
+  // console.log('start ',idx);
+  dragIdx=idx
+}
+const dragenter = (e, idx) => {
+  // console.log('enter ',idx);
+  e.preventDefault();
+  if(dragIdx !== idx){
+    let dragItem = toRaw(playingList.value)[dragIdx]
+    let item = toRaw(playingList.value)[idx]
+    // console.log(playingList,dragItem);
+    playingList.value.splice(dragIdx,1)
+    playingList.value.splice(idx, 0, dragItem)
+    dragIdx=idx
+    store.commit('saveSettings', {
+      playingList: playingList.value
+    })
+  }
+  
+}
+const dragover = (e, idx) => {
+  // console.log('over ',idx);
+  e.preventDefault();
+}
+const drop = (e, idx) => {
+  // console.log('drop ',idx);
+  e.preventDefault();
+}
+</script>
+
+<template>
+  <!-- <n-layout>
+    <n-layout-header
+      style="padding: 10px 12px 0px 12px; font-size: 24px"
+      >当前播放
+    </n-layout-header>
+    <n-layout has-sider>
+      <n-layout-content style="padding: 6px 12px; font-size: 12px">
+        共{{ playingList.length }}首
+      </n-layout-content>
+      <n-layout-sider width="100" style="padding: 0 12px 6px 12px">
+        <n-button size="tiny">清除列表</n-button>
+      </n-layout-sider>
+    </n-layout>
+  </n-layout> -->
+  <div class="title">当前播放</div>
+  <div class="tools">
+    <div class="count">共{{ playingList.length }}首</div>
+    <div class="btns"><n-button size="tiny">清除列表</n-button></div>
+  </div>
+  <div class="wp-list" ref="wpTable">
+    <div class="tr" v-for="(p, idx) in playingList" :key="idx"
+     draggable="true"
+     @dragstart="dragstart(idx)"
+     @dragenter="dragenter($event, idx)"
+     @dragover="dragover($event, idx)"
+     @drop="drop($event, idx)"
+     >
+      <div class="icon">
+        <NButton
+          v-show="p.id === store.state.settings.songId"
+          text
+          type="primary"
+          circle
+          size="tiny"
+        >
+          <NIcon style="bottom: -1px;left:-2px;position: absolute;">
+            <Play v-if="store.state.settings.playing"></Play>
+            <Pause v-else></Pause>
+          </NIcon>
+        </NButton>
+      </div>
+      <div class="name">{{ p.name }}</div>
+      <div class="ar">
+        <ArtistsSpan :artists="p.artists" />
+      </div>
+      <div class="al">{{p.album.name}}</div>
+      <div class="dt">
+        {{dayjs.duration(p.duration).format("mm:ss")}}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+@import "@/assets/css/common.less";
+.title {
+  padding: 10px 12px 0px 12px;
+  font-size: 24px;
+}
+.tools {
+  display: flex;
+  align-content: center;
+  .count {
+    flex: 1;
+    padding: 2px 24px;
+    font-size: 12px;
+  }
+  .btns {
+    margin-right: 10px;
+  }
+}
+.wp-list {
+  position: absolute;
+  bottom: 0px;
+  top: 76px;
+  right: 0;
+  left: 0;
+  overflow-y: auto;
+
+  .tr{
+    display: flex;
+    font-size: 14px;
+    border-top: 1px #ddd solid;
+    border-bottom: 1px #ddd solid;
+    margin-bottom: -1px;
+
+    >*{
+      padding: 4px 6px;
+    }
+
+    .icon{
+      padding-left: 10px;
+      width: 20px;
+    }
+    .name{
+      flex: 1;
+      .text-el-line-normal()
+    }
+    .ar{
+      width: 120px;
+      .text-el-line-normal()
+    }
+    .al{
+      width: 100px;
+      margin-top: 1px;
+      color: #999;
+      font-size: 12px;
+      .text-el-line-normal()
+    }
+    .dt{
+      margin-top: 1px;
+      color: #999;
+      font-size: 12px;
+    }
+  }
+}
+
+thead {
+  display: none;
+}
+
+.n-layout-header,
+.n-layout-content,
+.n-layout-side {
+  // background-color: #eee;
+}
+</style>