fix: 解决点赞和取消收藏的bug

Author: Yin-Hongwei

music-client/src/api/index.ts

@@ -1,4 +1,4 @@
-import { getBaseURL, get, post } from "./request";
+import { getBaseURL, get, post, deletes } from "./request";
 
 const HttpManager = {
   // 获取图片信息
@@ -40,7 +40,7 @@ const HttpManager = {
   // 添加收藏的歌曲 type: 0 代表歌曲， 1 代表歌单
   setCollection: (params) => post(`collection/add`, params),
 
-  deleteCollection: (params) => post(`collection/delete`, params),
+  deleteCollection: (userId, songId) => deletes(`collection/delete?userId=${userId}&&songId=${songId}`),
 
   isCollection: (params) => post(`collection/status`, params),
 

music-client/src/components/Comment.vue

@@ -17,7 +17,7 @@
           <li class="content">{{ item.content }}</li>
         </ul>
       </div>
-      <div class="comment-ctr" @click="setSupport(item.id, item.up, index)">
+      <div ref="up" class="comment-ctr" @click="setSupport(item.id, item.up, index)">
         <div><yin-icon :icon="iconList.Support"></yin-icon> {{ item.up }}</div>
         <el-icon v-if="item.userId === userId" @click="deleteComment(item.id, index)"><delete /></el-icon>
       </div>
@@ -125,7 +125,7 @@ export default defineComponent({
 
       const result = (await HttpManager.setSupport(params)) as ResponseBody;
       if (result.success) {
-        proxy.$refs.up[index].children[0].style.color = "#2796dd";
+        // proxy.$refs.up[index].children[0].style.color = "#2796dd";
         await getComment();
       }
     }

music-client/src/components/SongList.vue

@@ -17,9 +17,7 @@
                       songUrl: scope.row.url,
                       songName: scope.row.name,
                     })
-                  "
-                  >下载</el-dropdown-item
-                >
+                  ">下载</el-dropdown-item>
                 <el-dropdown-item :icon="Delete" v-if="show" @click="deleteCollection({ id: scope.row.id })">删除</el-dropdown-item>
               </el-dropdown-menu>
             </template>
@@ -96,12 +94,7 @@ export default defineComponent({
     async function deleteCollection({ id }) {
       if (!checkStatus()) return;
 
-      const params = new URLSearchParams();
-      params.append("userId", userId.value);
-      params.append("type", "0"); // 0 代表歌曲， 1 代表歌单
-      params.append("songId", id);
-
-      const result = (await HttpManager.deleteCollection(params)) as ResponseBody;
+      const result = (await HttpManager.deleteCollection(userId.value, id)) as ResponseBody;
       (proxy as any).$message({
         message: result.message,
         type: result.type,

music-client/src/components/layouts/YinPlayBar.vue

@@ -110,7 +110,7 @@ export default defineComponent({
       params.append("songId", songId.value);
 
       const result = isCollection.value
-        ? ((await HttpManager.deleteCollection(params)) as ResponseBody)
+        ? ((await HttpManager.deleteCollection(userId.value, songId.value)) as ResponseBody)
         : ((await HttpManager.setCollection(params)) as ResponseBody);
       (proxy as any).$message({
         message: result.message,
@@ -121,7 +121,7 @@ export default defineComponent({
     }
 
     onMounted(() => {
-      initCollection();
+      if(songId.value) initCollection();
     });
 
     return { isCollection, playMusic, routerManager, checkStatus, attachImageUrl: HttpManager.attachImageUrl, changeCollection, downloadMusic };