From b137ee2f721b3e24b01c8e86c40d6bfe714fb0eb Mon Sep 17 00:00:00 2001
From: qier222 <qier222@outlook.com>
Date: Wed, 16 Dec 2020 22:11:57 +0800
Subject: [PATCH] feat: add new playlist function

---
 src/api/playlist.js      |  35 +++++++
 src/components/Modal.vue | 157 ++++++++++++++++++++++++-------
 src/views/library.vue    | 198 ++++++++++++++++++++++++++++++++-------
 3 files changed, 325 insertions(+), 65 deletions(-)

diff --git a/src/api/playlist.js b/src/api/playlist.js
index 6c761da..e6a2208 100644
--- a/src/api/playlist.js
+++ b/src/api/playlist.js
@@ -102,6 +102,7 @@ export function playlistCatlist() {
     method: "get",
   });
 }
+
 /**
  * 所有榜单
  * 说明 : 调用此接口,可获取所有榜单 接口地址 : /toplist
@@ -112,6 +113,7 @@ export function toplists() {
     method: "get",
   });
 }
+
 /**
  * 收藏/取消收藏歌单
  * 说明 : 调用此接口, 传入类型和歌单 id 可收藏歌单或者取消收藏歌单
@@ -128,3 +130,36 @@ export function subscribePlaylist(params) {
     params,
   });
 }
+
+/**
+ * 删除歌单
+ * 说明 : 调用此接口 , 传入歌单id可删除歌单
+ * - id : 歌单id,可多个,用逗号隔开
+ *  * @param {number} id
+ */
+export function deletePlaylist(id) {
+  return request({
+    url: "/playlist/delete",
+    method: "post",
+    params: { id },
+  });
+}
+
+/**
+ * 新建歌单
+ * 说明 : 调用此接口 , 传入歌单名字可新建歌单
+ * - name : 歌单名
+ * - privacy : 是否设置为隐私歌单，默认否，传'10'则设置成隐私歌单
+ * - type : 歌单类型,默认'NORMAL',传 'VIDEO'则为视频歌单
+ * @param {Object} params
+ * @param {string} params.name
+ * @param {number} params.privacy
+ * @param {string} params.type
+ */
+export function createPlaylist(params) {
+  return request({
+    url: "/playlist/create",
+    method: "post",
+    params,
+  });
+}
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index dfacdde..31961ba 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -1,11 +1,19 @@
 <template>
-  <div>
-    <div class="shade" @click="close" v-show="show">
-      <div class="description-full" @click.stop>
-        <span>{{ text }}</span>
-        <span class="close" @click="close">
-          {{ $t("modal.close") }}
-        </span>
+  <div class="shade" @click="clickOutside" v-show="show">
+    <div class="modal" @click.stop :style="modalStyles">
+      <div class="header">
+        <div class="title">{{ title }}</div>
+        <button class="close" @click="close"
+          ><svg-icon icon-class="x"
+        /></button>
+      </div>
+      <div class="content">
+        <slot></slot>
+      </div>
+      <div class="footer" v-if="showFooter">
+        <!-- <button>取消</button>
+        <button class="primary">确定</button> -->
+        <slot name="footer"></slot>
       </div>
     </div>
   </div>
@@ -17,14 +25,43 @@ export default {
   props: {
     show: Boolean,
     close: Function,
-    text: String,
+    title: {
+      type: String,
+      default: "Title",
+    },
+    showFooter: {
+      type: Boolean,
+      default: true,
+    },
+    width: {
+      type: String,
+      default: "50vw",
+    },
+    clickOutsideHide: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    modalStyles() {
+      return {
+        width: this.width,
+      };
+    },
+  },
+  methods: {
+    clickOutside() {
+      if (this.clickOutsideHide) {
+        this.close();
+      }
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
 .shade {
-  background: rgba(255, 255, 255, 0.38);
+  background: rgba(255, 255, 255, 0.58);
   position: fixed;
   top: 0;
   bottom: 0;
@@ -33,27 +70,82 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  .description-full {
-    background: rgba(255, 255, 255, 0.78);
-    box-shadow: 0 12px 16px -8px rgba(0, 0, 0, 0.1);
-    border: 1px solid rgba(0, 0, 0, 0.08);
-    backdrop-filter: blur(12px) opacity(1);
-    padding: 32px;
-    border-radius: 12px;
-    width: 50vw;
-    margin: auto 0;
-    font-size: 14px;
-    z-index: 100;
+}
+
+.modal {
+  background: rgba(255, 255, 255, 0.78);
+  box-shadow: 0 12px 16px -8px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  backdrop-filter: blur(12px) opacity(1);
+  padding: 20px 24px 24px 24px;
+  border-radius: 12px;
+  width: 50vw;
+  margin: auto 0;
+  font-size: 14px;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  .title {
+    font-weight: 600;
+    font-size: 20px;
+  }
+  button {
+    color: var(--color-text);
+    border-radius: 50%;
+    height: 32px;
+    width: 32px;
     display: flex;
-    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    opacity: 0.68;
+    transition: 0.2s;
+    &:hover {
+      opacity: 1;
+      background: var(--color-secondary-bg-for-transparent);
+    }
+  }
+  .svg-icon {
+    height: 18px;
+    width: 18px;
+  }
+}
 
-    .close {
-      display: flex;
-      justify-content: flex-end;
-      font-size: 16px;
-      margin-top: 20px;
-      color: var(--color-primary);
-      cursor: pointer;
+.footer {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid rgba(128, 128, 128, 0.18);
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: -8px;
+  button {
+    color: var(--color-text);
+    background: var(--color-secondary-bg-for-transparent);
+    border-radius: 8px;
+    padding: 6px 16px;
+    font-size: 14px;
+    margin-left: 12px;
+    transition: 0.2s;
+    &:active {
+      transform: scale(0.94);
+    }
+  }
+  button.primary {
+    color: var(--color-primary-bg);
+    background: var(--color-primary);
+    font-weight: 500;
+  }
+  button.block {
+    width: 100%;
+    margin-left: 0;
+    &:active {
+      transform: scale(0.98);
     }
   }
 }
@@ -62,10 +154,11 @@ export default {
   .shade {
     background: rgba(0, 0, 0, 0.38);
     color: var(--color-text);
-    .description-full {
-      background: rgba(46, 46, 46, 0.68);
-      border: 1px solid rgba(255, 255, 255, 0.08);
-    }
+  }
+
+  .modal {
+    background: rgba(46, 46, 46, 0.68);
+    border: 1px solid rgba(255, 255, 255, 0.08);
   }
 }
 </style>
diff --git a/src/views/library.vue b/src/views/library.vue
index e05fc94..3379de4 100644
--- a/src/views/library.vue
+++ b/src/views/library.vue
@@ -41,35 +41,44 @@
     </div>
 
     <div class="section-two" id="liked">
-      <div class="tabs">
-        <div
-          class="tab"
-          :class="{ active: currentTab === 'playlists' }"
-          @click="updateCurrentTab('playlists')"
-        >
-          Playlists
-        </div>
-        <div
-          class="tab"
-          :class="{ active: currentTab === 'albums' }"
-          @click="updateCurrentTab('albums')"
-        >
-          Albums
-        </div>
-        <div
-          class="tab"
-          :class="{ active: currentTab === 'artists' }"
-          @click="updateCurrentTab('artists')"
-        >
-          Artists
+      <div class="tabs-row">
+        <div class="tabs">
+          <div
+            class="tab"
+            :class="{ active: currentTab === 'playlists' }"
+            @click="updateCurrentTab('playlists')"
+          >
+            Playlists
+          </div>
+          <div
+            class="tab"
+            :class="{ active: currentTab === 'albums' }"
+            @click="updateCurrentTab('albums')"
+          >
+            Albums
+          </div>
+          <div
+            class="tab"
+            :class="{ active: currentTab === 'artists' }"
+            @click="updateCurrentTab('artists')"
+          >
+            Artists
+          </div>
+          <div
+            class="tab"
+            :class="{ active: currentTab === 'mvs' }"
+            @click="updateCurrentTab('mvs')"
+          >
+            MVs
+          </div>
         </div>
-        <div
-          class="tab"
-          :class="{ active: currentTab === 'mvs' }"
-          @click="updateCurrentTab('mvs')"
+        <button
+          class="add-playlist"
+          icon="plus"
+          v-show="currentTab === 'playlists'"
+          @click="showAddPlaylistModal = true"
+          ><svg-icon icon-class="plus" />新建歌单</button
         >
-          MVs
-        </div>
       </div>
 
       <div v-show="currentTab === 'playlists'">
@@ -100,11 +109,39 @@
         <MvRow :mvs="mvs" />
       </div>
     </div>
+
+    <Modal
+      class="add-playlist-modal"
+      :show="showAddPlaylistModal"
+      :close="closeAddPlaylistModal"
+      title="新建歌单"
+      width="25vw"
+    >
+      <template slot="default">
+        <input
+          type="text"
+          placeholder="歌单标题"
+          maxlength="40"
+          v-model="newPlaylist.title"
+        />
+        <div class="checkbox">
+          <input
+            type="checkbox"
+            id="checkbox-private"
+            v-model="newPlaylist.private"
+          />
+          <label for="checkbox-private">设置为隐私歌单</label>
+        </div>
+      </template>
+      <template slot="footer">
+        <button class="primary block" @click="createPlaylist">创建</button>
+      </template>
+    </Modal>
   </div>
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapActions, mapState } from "vuex";
 import { getTrackDetail, getLyric } from "@/api/track";
 import {
   userDetail,
@@ -114,18 +151,19 @@ import {
   likedMVs,
 } from "@/api/user";
 import { randomNum, dailyTask } from "@/utils/common";
-import { getPlaylistDetail } from "@/api/playlist";
+import { getPlaylistDetail, createPlaylist } from "@/api/playlist";
 import { playPlaylistByID } from "@/utils/play";
 import NProgress from "nprogress";
 
 import TrackList from "@/components/TrackList.vue";
 import CoverRow from "@/components/CoverRow.vue";
-import MvRow from "@/components/MvRow.vue";
 import SvgIcon from "@/components/SvgIcon.vue";
+import MvRow from "@/components/MvRow.vue";
+import Modal from "@/components/Modal.vue";
 
 export default {
   name: "Library",
-  components: { SvgIcon, CoverRow, TrackList, MvRow },
+  components: { SvgIcon, CoverRow, TrackList, MvRow, Modal },
   data() {
     return {
       show: false,
@@ -142,6 +180,11 @@ export default {
       albums: [],
       artists: [],
       mvs: [],
+      showAddPlaylistModal: false,
+      newPlaylist: {
+        title: "",
+        private: false,
+      },
     };
   },
   created() {
@@ -180,6 +223,7 @@ export default {
     },
   },
   methods: {
+    ...mapActions(["showToast"]),
     playLikedSongs() {
       playPlaylistByID(this.playlists[0].id, "first", true);
     },
@@ -267,6 +311,25 @@ export default {
         NProgress.done();
       });
     },
+    createPlaylist() {
+      let params = { name: this.newPlaylist.title };
+      if (this.newPlaylist.private) params.type = 10;
+      createPlaylist(params).then((data) => {
+        if (data.code === 200) {
+          this.closeAddPlaylistModal();
+          this.showToast("成功创建歌单");
+          this.playlists = [];
+          this.getUserPlaylists(true);
+        }
+      });
+    },
+    closeAddPlaylistModal() {
+      this.showAddPlaylistModal = false;
+      this.newPlaylist = {
+        title: "",
+        private: false,
+      };
+    },
   },
   watch: {
     likedSongsInState() {
@@ -381,16 +444,21 @@ h1 {
   min-height: calc(100vh - 182px);
 }
 
+.tabs-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
 .tabs {
   display: flex;
   flex-wrap: wrap;
   font-size: 18px;
   color: var(--color-text);
-  margin-bottom: 6px;
   .tab {
     font-weight: 600;
     padding: 8px 14px;
-    margin: 10px 14px 6px 0;
+    margin-right: 14px;
     border-radius: 8px;
     cursor: pointer;
     user-select: none;
@@ -406,4 +474,68 @@ h1 {
     background-color: var(--color-secondary-bg);
   }
 }
+
+button.add-playlist {
+  color: var(--color-text);
+  border-radius: 8px;
+  padding: 0 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: 0.2s;
+  opacity: 0.68;
+  font-weight: 500;
+  .svg-icon {
+    width: 14px;
+    height: 14px;
+    margin-right: 8px;
+  }
+  &:hover {
+    opacity: 1;
+    background: var(--color-secondary-bg);
+  }
+  &:active {
+    opacity: 1;
+    transform: scale(0.92);
+  }
+}
+
+.add-playlist-modal {
+  .content {
+    display: flex;
+    flex-direction: column;
+    input {
+      margin-bottom: 12px;
+    }
+    input[type="text"] {
+      width: calc(100% - 24px);
+      flex: 1;
+      background: var(--color-secondary-bg-for-transparent);
+      font-size: 16px;
+      border: none;
+      font-weight: 600;
+      padding: 8px 12px;
+      border-radius: 8px;
+      margin-top: -1px;
+      color: var(--color-text);
+      &:focus {
+        background: var(--color-primary-bg-for-transparent);
+        opacity: 1;
+        [data-theme="light"] {
+          color: var(--color-primary);
+        }
+      }
+    }
+    .checkbox {
+      input[type="checkbox" i] {
+        margin: 3px 3px 3px 4px;
+      }
+      display: flex;
+      align-items: center;
+      label {
+        font-size: 12px;
+      }
+    }
+  }
+}
 </style>