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

2021-10-24 20:10:59 +08:00
parent 6a257b9c65
commit 9c7b484b36
9 changed files with 213 additions and 96 deletions
--- a/src/views/common/SongCtrl.vue
+++ b/src/views/common/SongCtrl.vue
@@ -75,7 +75,7 @@ const playNext = async (step) => {
    case 3: //随机
      if (playingList.length <= 1) return; //只有一首歌
      const i = Math.floor(Math.random() * (playingList.length - 1));
-      if (i >= idx) idx = i+1;
+      if (i >= idx) idx = i + 1;
      else idx = i;
      break;
  }
@@ -90,6 +90,18 @@ const forward = async () => {
  playNext(1);
 };

+const stop = async () => {
+  pause();
+  if (store.state.settings.playingList.length < 1) {
+    audioEl.value.src = "";
+    lastPause = 0;
+    store.commit("saveSettings", {
+      songId: null,
+    });
+    pubsub.publish('zp.hideSongInfo')
+  }
+};
+
 const play = async (id, im = true) => {
  console.log(id);
  await getSongUrl(id)
@@ -177,6 +189,12 @@ const psToken = pubsub.subscribe("zp", (msg, data) => {
    case "zp.play":
      play(data.id, data.im);
      break;
+    case "zp.next":
+      forward();
+      break;
+    case "zp.stop":
+      stop();
+      break;
    case "zp.setProgressScale":
      setProgressScale(data.scale);
      break;
@@ -249,13 +267,13 @@ onUnmounted(() => {
        </n-icon>
      </template>
    </n-button>
-    <n-button circle>
+    <!-- <n-button circle>
      <template #icon>
        <n-icon>
          <TrashOutline />
        </n-icon>
      </template>
-    </n-button>
+    </n-button> -->
  </n-space>

  <!-- </div> -->
--- a/src/views/common/SongInfo.vue
+++ b/src/views/common/SongInfo.vue
@@ -20,7 +20,7 @@ const store = useStore()
 const showInfo = ref(false);
 const info = reactive({
  name: "",
-  artists: "",
+  artists: [],
  album: {},
  duration: 0,
  mv: 0,
@@ -44,7 +44,6 @@ const songInfo = (id, im) => {
          date: Date.now(),
        }, ...toRaw(info)}
        store.commit('savePlayed', p)
-        
        store.commit('addToPlayingList', p)
        console.log('savePlayed');
      }
@@ -67,6 +66,9 @@ const psToken = pubsub.subscribe("zp", (msg, data) => {
    case "zp.getSongInfo":
      songInfo(data.id, data.im);
      break;
+    case "zp.hideSongInfo":
+      showInfo.value = false
+      break;
    case "zp.progress":
      totalTime.value = zpTime(data.total * 1000)
      currTime.value = zpTime(data.progress * 1000)
--- a/src/views/common/ZPlayingList.vue
+++ b/src/views/common/ZPlayingList.vue
@@ -16,6 +16,7 @@ import {
  NButtonGroup,
  NSpace,
  NIcon,
+  NDropdown,
  NMenu,
  NLayout,
  NLayoutHeader,
@@ -28,11 +29,12 @@ import {
 } from "naive-ui";
 import Play from "@/assets/svgs/Play_.svg";
 import Pause from "@/assets/svgs/Pause.svg";
+import svgDots from "@/assets/svgs/Dots.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';
+import ArtistsSpan from "@/components/ArtistsSpan.vue";

 const store = useStore();
 const router = useRouter();
@@ -41,8 +43,6 @@ 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":
@@ -66,86 +66,143 @@ watch(
  }
 );

-let dragIdx = -1
+let dragIdx = -1;
 const dragstart = (idx) => {
  // console.log('start ',idx);
-  dragIdx=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]
+  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
-    })
+    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();
+};
+
+//菜单
+const options = [
+  {
+    label: "播放",
+    key: "play",
+  },
+  // {
+  //   label: "下一首播放",
+  //   key: "nextToPlay",
+  // },
+  {
+    type: 'divider',
+    key: ''
+  },
+  {
+    label: "从列表删除",
+    key: "remove",
+  },
+];
+
+// 处理菜单选择
+const handleSelect = (key, id) => {
+  switch(key){
+    case 'play':
+      pubsub.publish('zp.play',{
+        id, im: true,
+      })
+      break;
+    case 'nextToPlay':
+      break;
+    case 'remove':
+      store.commit('removePlayingList', {id})
+      if(playingList.value.length>0)
+        pubsub.publish('zp.next')
+      else
+        pubsub.publish('zp.stop')
+      break;
+  }
+};
+const handleClick = () => {
+  // showDropdownRef.value = !showDropdownRef.value;
+};
+
+const arLeave = ()=>{
+  pubsub.publish('zp.togglePlaying',)
 }
 </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="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)"
+      @dblclick="pubsub.publish('zp.play', {id: p.id,im: true})"
+    >
      <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;">
+          <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 class="name">
+        <span class="ntext">{{ p.name }}</span>
+        <span class="nm">
+          <n-dropdown
+            placement="right-start"
+            @select="handleSelect($event, p.id)"
+            trigger="click"
+            :options="options"
+            :show-arrow="true"
+          >
+            <NButton
+              class="mn"
+              text
+              type="primary"
+              style="font-size: 20px"
+            >
+              <NIcon>
+                <svg-dots />
+              </NIcon>
+            </NButton>
+          </n-dropdown>
+        </span>
      </div>
-      <div class="al">{{p.album.name}}</div>
+      <div class="ar">
+        <ArtistsSpan :artists="p.artists" :onLeave="arLeave"/>
+      </div>
+      <div class="al">{{ p.album.name }}</div>
      <div class="dt">
-        {{dayjs.duration(p.duration).format("mm:ss")}}
+        {{ dayjs.duration(p.duration).format("mm:ss") }}
      </div>
    </div>
  </div>
@@ -163,10 +220,10 @@ export default {};
 }
 .tools {
  display: flex;
-  align-content: center;
+  align-items: center;
  .count {
    flex: 1;
-    padding: 2px 24px;
+    padding: 6px 24px;
    font-size: 12px;
  }
  .btns {
@@ -176,42 +233,64 @@ export default {};
 .wp-list {
  position: absolute;
  bottom: 0px;
-  top: 76px;
+  top: 80px;
  right: 0;
  left: 0;
  overflow-y: auto;

-  .tr{
+  .tr {
    display: flex;
    font-size: 14px;
-    border-top: 1px #ddd solid;
-    border-bottom: 1px #ddd solid;
+    border-top: 1px #eee solid;
+    border-bottom: 1px #eee solid;
    margin-bottom: -1px;

-    >*{
+    > * {
      padding: 4px 6px;
    }

-    .icon{
+    &:nth-child(2n + 1) {
+      background-color: #f6f6f6;
+    }
+
+    &:hover {
+      background-color: #eee;
+
+      .name .mn {
+        display: block;
+      }
+    }
+
+    .icon {
      padding-left: 10px;
      width: 20px;
    }
-    .name{
+    .name {
      flex: 1;
-      .text-el-line-normal()
+      .text-el-line-normal();
+      display: flex;
+      align-items: center;
+      .ntext {
+        .text-el-line-normal();
+      }
+
+      .mn {
+        flex: 1;
+        display: none;
+      }
    }
-    .ar{
+    .ar {
      width: 120px;
-      .text-el-line-normal()
+      .text-el-line-normal();
    }
-    .al{
-      width: 100px;
+    .al {
+      width: 80px;
      margin-top: 1px;
      color: #999;
      font-size: 12px;
-      .text-el-line-normal()
+      .text-el-line-normal();
    }
-    .dt{
+    .dt {
      margin-top: 1px;
      color: #999;
      font-size: 12px;
--- a/src/views/discover/Discover.vue
+++ b/src/views/discover/Discover.vue
@@ -121,9 +121,9 @@ const route = useRoute();
    <!-- <NScrollbar > -->
    <div class="ld-width">
      <router-view v-slot="{ Component }">
-        <keep-alive>
+        <!-- <keep-alive exclude="Recommend"> -->
          <component :is="Component" />
-        </keep-alive>
+        <!-- </keep-alive> -->
      </router-view>
      <!-- <keep-alive>
        <router-view></router-view>
--- a/src/views/discover/Recommend.vue
+++ b/src/views/discover/Recommend.vue
@@ -217,10 +217,10 @@ import {
 import pubsub from "pubsub-js";
 import ArtistsSpan from "@/components/ArtistsSpan.vue";

-console.log("recommend 初始化");
-onUnmounted(() => {
-  console.log('recommend 卸载');
-})
+// console.log("recommend 初始化");
+// onUnmounted(() => {
+//   console.log('recommend 卸载');
+// })
 const store = useStore();

 const play = (id) => {
@@ -237,7 +237,7 @@ getBanner(0)
      banners: { data: banners.value, time: Date.now() },
    });
    // console.log(banners.value);
-    console.log("recommend 轮播图片初始化");
+    // console.log("recommend 轮播图片初始化");
  })
  .catch((err) => {
    console.log("getBanner err", err);
@@ -323,6 +323,7 @@ getPersonalizedMV()

 </script>

+
 <style lang="less" scoped>
@import "@/assets/css/common.less";
 .wp-carousel {