feat: create/delete playlist, add/remove track from playlist

src/components/ModalAddTrackToPlaylist.vue

@@ -0,0 +1,181 @@
+<template>
+  <Modal
+    class="add-track-to-playlist-modal"
+    :show="show"
+    :close="close"
+    :showFooter="false"
+    title="添加到歌单"
+    width="25vw"
+  >
+    <template slot="default">
+      <div class="new-playlist-button" @click="newPlaylist"
+        ><svg-icon icon-class="plus" />新建歌单</div
+      >
+      <div
+        class="playlist"
+        v-for="playlist in ownPlaylists"
+        :key="playlist.id"
+        @click="addTrackToPlaylist(playlist.id)"
+      >
+        <img :src="playlist.coverImgUrl | resizeImage(224)" />
+        <div class="info">
+          <div class="title">{{ playlist.name }}</div>
+          <div class="track-count">{{ playlist.trackCount }} 首</div>
+        </div>
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<script>
+import { mapActions, mapMutations, mapState } from "vuex";
+import Modal from "@/components/Modal.vue";
+import { userPlaylist } from "@/api/user";
+import { addOrRemoveTrackFromPlaylist } from "@/api/playlist";
+
+export default {
+  name: "ModalAddTrackToPlaylist",
+  components: {
+    Modal,
+  },
+  data() {
+    return {
+      playlists: [],
+    };
+  },
+  computed: {
+    ...mapState(["modals", "data"]),
+    show: {
+      get() {
+        return this.modals.addTrackToPlaylistModal.show;
+      },
+      set(value) {
+        this.updateModal({
+          modalName: "addTrackToPlaylistModal",
+          key: "show",
+          value,
+        });
+      },
+    },
+    ownPlaylists() {
+      return this.playlists.filter(
+        (p) =>
+          p.creator.userId === this.data.user.userId &&
+          p.id !== this.data.likedSongPlaylistID
+      );
+    },
+  },
+  created() {
+    this.getUserPlaylists();
+  },
+  methods: {
+    ...mapMutations(["updateModal"]),
+    ...mapActions(["showToast"]),
+    close() {
+      this.show = false;
+    },
+    getUserPlaylists() {
+      userPlaylist({
+        timestamp: new Date().getTime(),
+        limit: 1000,
+        uid: this.data.user.userId,
+      }).then((data) => {
+        this.playlists = data.playlist;
+      });
+    },
+    addTrackToPlaylist(playlistID) {
+      addOrRemoveTrackFromPlaylist({
+        op: "add",
+        pid: playlistID,
+        tracks: this.modals.addTrackToPlaylistModal.selectedTrackID,
+      }).then((data) => {
+        if (data.body.code === 200) {
+          this.show = false;
+          this.showToast("已添加到歌单");
+        } else {
+          this.showToast(data.body.message);
+        }
+      });
+    },
+    newPlaylist() {
+      this.updateModal({
+        modalName: "newPlaylistModal",
+        key: "afterCreateAddTrackID",
+        value: this.modals.addTrackToPlaylistModal.selectedTrackID,
+      });
+      this.close();
+      this.updateModal({
+        modalName: "newPlaylistModal",
+        key: "show",
+        value: true,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.new-playlist-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--color-text);
+  background: var(--color-secondary-bg-for-transparent);
+  border-radius: 8px;
+  height: 48px;
+  margin-bottom: 16px;
+  margin-right: 6px;
+  margin-left: 6px;
+  cursor: pointer;
+  transition: 0.2s;
+  .svg-icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
+  }
+  &:hover {
+    color: var(--color-primary);
+    background: var(--color-primary-bg-for-transparent);
+  }
+}
+.playlist {
+  display: flex;
+  padding: 6px;
+  border-radius: 8px;
+  cursor: pointer;
+  &:hover {
+    background: var(--color-secondary-bg-for-transparent);
+  }
+  img {
+    border-radius: 8px;
+    height: 42px;
+    width: 42px;
+    margin-right: 12px;
+    border: 1px solid rgba(0, 0, 0, 0.04);
+  }
+  .info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .title {
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--color-text);
+    padding-right: 16px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    word-break: break-all;
+  }
+  .track-count {
+    margin-top: 2px;
+    font-size: 13px;
+    opacity: 0.68;
+    color: var(--color-text);
+  }
+}
+</style>