vite-zmusic/src/views/common/ZPlayingList.vue

<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>