feat: playlist add collection func

* remove some debug info
* add style

src/api/base.js

 import axios from "axios";
 
-//const BASIC_URL = "http://zacharyzlj.cn:3000/";
-const BASIC_URL = "http://192.168.31.152:3000/";
+const BASIC_URL = "http://zacharyzlj.cn:3000/";
+//const BASIC_URL = "http://192.168.31.152:3000/";
 
 function createBaseInstance() {
   const instance = axios.create({ baseURL: BASIC_URL, withCredentials: true });

src/api/playlist.js

@@ -24,3 +24,9 @@ export const getCatList = () => requset.get("/playlist/catlist");
 
 /* 登陆后使用 */
 export const getUserPlaylists = id => requset.get(`/user/playlist?uid=${id}`);
+
+/* 收藏/取消收藏歌单
+ * 登陆后使用
+ * t : 类型,1:收藏,2:取消收藏 id : 歌单 id */
+export const toggleLikePlaylist = params =>
+  requset.get("/playlist/subscribe", { params: params });

src/assets/css/fakeqqmusic.scss

@@ -118,6 +118,10 @@ $black: #000;
   background-position: -40px -100px;
   vertical-align: -2px;
 }
+.mod_btn__icon_like--like,
+.mod_btn_green__icon_like--like {
+  background-position: 0 -80px;
+}
 .mod_btn__icon_add,
 .mod_btn__icon_batch,
 .mod_btn__icon_comment,
@@ -1304,6 +1308,14 @@ img .playlist__pic {
   background-position: 0 -150px;
   margin: 0 auto 16px;
 }
+.popup_tips__icon_warn {
+  display: block;
+  width: 46px;
+  height: 46px;
+  margin: 0 auto 16px;
+  background-position: 0 -220px;
+  background-image: url(../img/icon_popup.png);
+}
 .popup_tips__tit {
   font-size: 14px;
   color: $white;

src/components/common/BlackTip.vue

@@ -5,7 +5,7 @@
     style="z-index: 2147483647; left: 646px; top: 326px"
     :style="{ display: ifShow ? '' : 'none' }"
   >
-    <i class="popup_tips__icon"></i>
+    <i :class="processIcon()"></i>
     <h2 class="popup_tips__tit">{{ tip }}</h2>
   </div>
 </template>
@@ -20,6 +20,22 @@ export default {
       type: String,
       default: "",
     },
+    // 0: tip, 1: warn
+    iconType: { default: 0 },
+  },
+  methods: {
+    processIcon() {
+      switch (this.iconType) {
+        case 0:
+          return "popup_tips__icon";
+          break;
+        case 1:
+          return "popup_tips__icon_warn";
+          break;
+        default:
+          return "";
+      }
+    },
   },
 };
 </script>

src/components/common/DetailInfoCard.vue

@@ -35,7 +35,7 @@
         <div class="data__desc_txt" id="short_desc">
           {{ obj.desc }}
         </div>
-        <a href="javascript:;" class="js_desc" @click="moreClick">[更多]</a>
+        <a class="js_desc" @click="moreClick">[更多]</a>
       </div>
       <!-- Info -->
       <ul class="data__info" v-if="cardType != 'songer'">
@@ -110,7 +110,11 @@
           {{ cardType == "song" ? "播放" : "播放全部" }}
         </a>
         <a class="mod_btn js_fav_taoge" @click="btnClick('collection')">
-          <i class="mod_btn__icon_like"></i>收藏
+          <i
+            class="mod_btn__icon_like"
+            :class="obj.subscribed ? 'mod_btn__icon_like--like' : ''"
+          ></i
+          >收藏
         </a>
         <a
           class="mod_btn js_into_comment"
@@ -120,9 +124,9 @@
           <i class="mod_btn__icon_comment"></i>评论({{ commentCount }})
         </a>
         <a
-          href="javascript:;"
           class="mod_btn js_more"
           @click="btnClick('more')"
+          style="display: none"
         >
           <i class="mod_btn__icon_menu"></i>更多
         </a>

src/components/common/HomeTop.vue

@@ -79,7 +79,6 @@ export default {
         let trackIds = res.data.playlist.trackIds.map(({ id }) => id);
         getSongDetail(trackIds).then((res) => {
           let songs = createSongs(res.data.songs);
-          console.log(songs);
           this.toplists.push(songs);
         });
       });

src/views/musicLibrary/MvDetail.vue

@@ -81,7 +81,7 @@ export default {
     this.id = this.$route.query.id;
     getMvDetail(this.id).then((res) => {
       this.mv = createMv(res.data.data);
-      console.log(this.mv);
+      //console.log(this.mv);
     });
     this.updateMv();
     this.getComment();

src/views/musicLibrary/NewDisc.vue

@@ -147,7 +147,6 @@ export default {
           );
         }
       }
-      console.log(this.currentAlbums);
     },
     selectArea(n) {
       this.updateAlbum();

src/views/musicLibrary/PlaylistDetail.vue

@@ -52,17 +52,20 @@
       </div>
     </div>
   </div>
+  <black-tip :ifShow="ifShowTip" :iconType="tipType" :tip="tip" />
 </template>
 
 <script>
 import DetailInfoCard from "components/common/DetailInfoCard";
 import DetailSonglist from "components/common/DetailSonglist";
 import CommontBox from "components/common/CommontBox";
+import BlackTip from "components/common/BlackTip";
 import {
   getPlayList,
   getPlaylistDetial,
   getSongDetail,
   getCommentsNew,
+  toggleLikePlaylist,
 } from "api";
 import { processCount, createSong, playSonglist } from "common/utils";
 
@@ -76,6 +79,9 @@ export default {
       commentPage: 1,
       commentCount: 0,
       comments: [],
+      ifShowTip: false,
+      tip: "",
+      tipType: 1,
     };
   },
   created() {
@@ -84,7 +90,6 @@ export default {
   methods: {
     init() {
       getPlaylistDetial(this.id).then((res) => {
-        console.log(res);
         let d = res.data.playlist;
         this.playlist = {
           id: d.id,
@@ -97,12 +102,11 @@ export default {
           playCount: processCount(d.playCount),
           subscribedCount: processCount(d.subscribedCount),
           shareCount: processCount(d.shareCount),
+          subscribed: d.subscribed,
         };
-        console.log(this.playlist);
 
         let trackIds = res.data.playlist.trackIds.map(({ id }) => id);
         let songDetails = getSongDetail(trackIds.slice(0, 500)).then((res) => {
-          console.log(res.data.songs);
           let songs = res.data.songs.map(({ id, name, al, ar, mv, dt }) => {
             return createSong({
               id,
@@ -122,6 +126,30 @@ export default {
     },
     cardClick(v) {
       if (v == "all") playSonglist(this.songs);
+      else if (v == "collection") {
+        if (this.$store.state.user.isLogged) {
+          if (!this.playlist.subscribed) {
+            toggleLikePlaylist({ t: 1, id: this.playlist.id }).then((res) => {
+              this.playlist.subscribed = true;
+              this.showTip("收藏成功，已添加到收藏歌单", 0);
+            });
+          } else {
+            toggleLikePlaylist({ t: 2, id: this.playlist.id }).then((res) => {
+              this.playlist.subscribed = false;
+              this.showTip("取消收藏成功", 0);
+            });
+          }
+        } else this.showTip("请先登陆", 1);
+      }
+    },
+    showTip(tip, type) {
+      this.tipType = type;
+      this.tip = tip;
+      this.ifShowTip = true;
+      if (this.tipTimer) clearTimeout(this.tipTimer);
+      setTimeout(() => {
+        this.ifShowTip = false;
+      }, 1300);
     },
     getComment() {
       let params = {
@@ -150,6 +178,7 @@ export default {
     DetailInfoCard,
     DetailSonglist,
     CommontBox,
+    BlackTip,
   },
 };
 </script>

src/views/musicLibrary/SongDetail.vue

@@ -159,7 +159,7 @@ export default {
       // 获取歌曲信息
       getSongDetail(this.songId).then((res) => {
         let d = res.data.songs[0];
-        //console.log(d);
+        //console.log(res);
         this.song = createSong({
           id: d.id,
           name: d.name,

src/views/musicLibrary/SongerDetail.vue

@@ -228,9 +228,7 @@ export default {
 
       // Get songer album
       const res4 = await getSongerAlbums({ id: this.id, limit: 5, offset: 0 });
-      console.log(res4);
       this.albums = createAlbums(res4.data.hotAlbums);
-      console.log(this.albums);
 
       // Get songer mv
       const res5 = await getSongerMvs(this.id);

src/views/musicLibrary/Songers.vue

@@ -68,7 +68,6 @@ export default {
     updateArtists() {
       getSongers(this.initial, this.type, this.area, this.page)
         .then((res) => {
-          console.log(res);
           this.artists = res.data.artists;
           this.more = res.data.more;
           this.loading = false;