From 87cee60b4a1fae1ad7d16bd1803f23bcaf674116 Mon Sep 17 00:00:00 2001
From: Zachary <zlj19971222@outlook.com>
Date: Wed, 24 Feb 2021 03:04:38 +0800
Subject: [PATCH] feat: Add comments to all pages that need comments

* modify style
* remove useless code
---
 src/api/toplist.js                        | 30 ++++++++
 src/assets/css/fakeqqmusic.scss           | 15 ++++
 src/components/common/DetailInfoCard.vue  | 11 ++-
 src/components/common/DetailSonglist.vue  |  9 ---
 src/components/common/LoginOpt.vue        |  1 -
 src/components/common/RecommendedBar.vue  | 40 +----------
 src/views/musicLibrary/AlbumDetail.vue    | 48 +++++++++++--
 src/views/musicLibrary/PlaylistDetail.vue | 51 +++++++++++++-
 src/views/musicLibrary/Ranking.vue        | 59 +++++-----------
 src/views/musicLibrary/SongDetail.vue     | 86 +++++++++++++++--------
 10 files changed, 222 insertions(+), 128 deletions(-)

diff --git a/src/api/toplist.js b/src/api/toplist.js
index 8d59ab4..990dadc 100644
--- a/src/api/toplist.js
+++ b/src/api/toplist.js
@@ -11,3 +11,33 @@ export const toplistTypes = {
 
 export const getTopList = toplistType =>
   requset.get(`/top/list?id=${toplistType}`);
+
+export const topRankingtype = [
+  { name: "飙升榜", dataId: "19723756" },
+  { name: "新歌榜", dataId: "3779629" },
+  { name: "热歌榜", dataId: "3778678" },
+  { name: "原创榜", dataId: "2884035" }
+];
+export const aereRankingtype = [
+  { name: "欧美榜", dataId: "2809513713" },
+  { name: "韩语榜", dataId: "745956260" },
+  { name: "日语榜", dataId: "5059644681" }
+];
+export const specialRankingtype = [
+  { name: "古典榜", dataId: "71384707" },
+  { name: "说唱榜", dataId: "99131959" },
+  { name: "电子榜", dataId: "1978921795" },
+  { name: "ACG榜", dataId: "71385702" },
+  { name: "乡村榜", dataId: "3112516681" },
+  { name: "摇滚榜", dataId: "5059633707" },
+  { name: "古风榜", dataId: "5059642708" },
+  { name: "民谣榜", dataId: "5059661515" }
+];
+export const globalRankingtype = [
+  { name: "UK排行周榜", dataId: "180106" },
+  { name: "美国Billboard榜", dataId: "60198" },
+  { name: "Beatport全球电子舞曲榜", dataId: "3812895" },
+  { name: "iTuness榜", dataId: "11641012" },
+  { name: "日本Oricon", dataId: "60131" },
+  { name: "法国 NRJ Vos Hits 周榜", dataId: "27135204" }
+];
diff --git a/src/assets/css/fakeqqmusic.scss b/src/assets/css/fakeqqmusic.scss
index 857ccff..a2bef0a 100644
--- a/src/assets/css/fakeqqmusic.scss
+++ b/src/assets/css/fakeqqmusic.scss
@@ -319,6 +319,21 @@ $black: #000;
   background: rgba(0, 0, 0, 0.1);
 }
 
+/* 超长滑动条（home）*/
+.mod_slide {
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+.slide__list {
+  position: relative;
+  font-size: 0;
+  width: 1250%;
+  transition-duration: 1s;
+}
+.slide__item {
+  width: 2%;
+}
+
 /* 切换小圆点 */
 .mod_slide_switch {
   width: 100%;
diff --git a/src/components/common/DetailInfoCard.vue b/src/components/common/DetailInfoCard.vue
index 71672d5..155ba5b 100644
--- a/src/components/common/DetailInfoCard.vue
+++ b/src/components/common/DetailInfoCard.vue
@@ -117,7 +117,7 @@
           href="#comment_box"
           @click="btnClick('comment')"
         >
-          <i class="mod_btn__icon_comment"></i>评论()
+          <i class="mod_btn__icon_comment"></i>评论({{ commentCount }})
         </a>
         <a
           href="javascript:;"
@@ -147,6 +147,9 @@ export default {
       type: String,
       default: "song",
     },
+    commentCount: {
+      default: 0,
+    },
   },
   methods: {
     btnClick(v) {
@@ -160,12 +163,6 @@ export default {
 </script>
 
 <style scoped>
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
 li,
 ul {
   margin: 0;
diff --git a/src/components/common/DetailSonglist.vue b/src/components/common/DetailSonglist.vue
index 6fcda79..e514fca 100644
--- a/src/components/common/DetailSonglist.vue
+++ b/src/components/common/DetailSonglist.vue
@@ -87,19 +87,10 @@ export default {
 </script>
 
 <style scoped>
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
 li,
 ol,
 p,
-pre,
 td,
-textarea,
 th,
 ul {
   margin: 0;
diff --git a/src/components/common/LoginOpt.vue b/src/components/common/LoginOpt.vue
index e537a46..0c948d1 100644
--- a/src/components/common/LoginOpt.vue
+++ b/src/components/common/LoginOpt.vue
@@ -17,7 +17,6 @@
       <!-- 未登录 -->
       <a
         class="top_login__link js_login"
-        href="javascript:;"
         :style="{ display: isLogged ? 'none' : '' }"
         @click="showLoginPopup"
       >
diff --git a/src/components/common/RecommendedBar.vue b/src/components/common/RecommendedBar.vue
index d4041ce..e91c9b1 100644
--- a/src/components/common/RecommendedBar.vue
+++ b/src/components/common/RecommendedBar.vue
@@ -183,31 +183,15 @@ export default {
   color: #31c27c;
 }
 
+.mod_playlist .playlist__list {
+  padding: 0;
+}
 /* list */
 .mod_playlist {
   overflow: hidden;
   font-size: 0;
-}
-.mod_slide {
-  overflow: hidden;
-  margin-bottom: 20px;
-}
-.mod_playlist {
   margin-right: -20px;
 }
-.slide__list {
-  position: relative;
-  font-size: 0;
-  width: 1250%;
-  transition-duration: 1s;
-}
-.slide__item {
-  width: 2%;
-}
-.mod_playlist .playlist__list {
-  margin-right: -20px;
-  padding: 0;
-}
 .playlist__item {
   display: inline-block;
   /*width: 18%;*/
@@ -223,30 +207,12 @@ export default {
   width: 1.6%;
   padding-bottom: 0;
 }
-.mod_playlist .playlist__item_box {
-  position: relative;
-  margin-right: 20px;
-}
 .mod_index--hot .playlist__item_box {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
 }
-.mod_playlist .playlist__cover {
-  position: relative;
-  display: block;
-  overflow: hidden;
-  padding-top: 100%;
-  margin-bottom: 15px;
-}
-.mod_playlist .playlist__pic {
-  height: 100%;
-  object-fit: cover;
-}
-.mod_playlist .playlist__title {
-  overflow: hidden;
-}
 
 a:hover {
   color: #31c27c;
diff --git a/src/views/musicLibrary/AlbumDetail.vue b/src/views/musicLibrary/AlbumDetail.vue
index 29ea282..ea63b97 100644
--- a/src/views/musicLibrary/AlbumDetail.vue
+++ b/src/views/musicLibrary/AlbumDetail.vue
@@ -1,10 +1,23 @@
 <template>
   <div class="main">
-    <detail-info-card :obj="album" :cardType="'album'" @btnClick="cardClick" />
+    <detail-info-card
+      :obj="album"
+      :cardType="'album'"
+      :commentCount="commentCount"
+      @btnClick="cardClick"
+    />
 
     <div class="detail_layout">
       <div class="detail_layout__main">
         <detail-songlist :songs="songs" :listType="'album'" />
+        <!-- comment -->
+        <commont-box
+          :comments="comments"
+          :limit="pageSize"
+          :currentPage="commentPage"
+          :total="commentCount"
+          @current-change="currentChange"
+        />
       </div>
 
       <div class="detail_layout__other">
@@ -40,8 +53,8 @@
 <script>
 import DetailInfoCard from "components/common/DetailInfoCard";
 import DetailSonglist from "components/common/DetailSonglist";
-import ModListMenu from "components/common/ModListMenu";
-import { getAlbum } from "api";
+import CommontBox from "components/common/CommontBox";
+import { getAlbum, getCommentsNew } from "api";
 import { createSong, playSonglist, formatDate } from "common/utils";
 
 export default {
@@ -51,6 +64,10 @@ export default {
       id: this.$route.query.id,
       album: {},
       songs: [],
+      pageSize: 20,
+      commentPage: 1,
+      commentCount: 0,
+      comments: [],
     };
   },
   mounted() {
@@ -88,6 +105,7 @@ export default {
           }
         );
         console.log(this.songs);
+        this.getComment();
       });
     },
     toggleShowMoreInfo() {
@@ -98,11 +116,33 @@ export default {
         playSonglist(this.songs);
       }
     },
+    getComment() {
+      let params = {
+        type: 3,
+        pageSize: this.pageSize,
+        pageNo: this.commentPage,
+        id: this.album.id,
+        sortType: 2,
+      };
+      getCommentsNew(params).then((res) => {
+        this.commentCount =
+          res.data.data.totalCount > 5000 ? 5000 : res.data.data.totalCount;
+        this.comments = res.data.data.comments;
+      });
+    },
+    currentChange(v) {
+      this.commentPage = v;
+    },
+  },
+  watch: {
+    commentPage() {
+      this.getComment();
+    },
   },
   components: {
     DetailInfoCard,
     DetailSonglist,
-    ModListMenu,
+    CommontBox,
   },
 };
 </script>
diff --git a/src/views/musicLibrary/PlaylistDetail.vue b/src/views/musicLibrary/PlaylistDetail.vue
index 4ee9189..b9b8c85 100644
--- a/src/views/musicLibrary/PlaylistDetail.vue
+++ b/src/views/musicLibrary/PlaylistDetail.vue
@@ -1,10 +1,23 @@
 <template>
   <div class="main">
-    <detail-info-card :obj="playlist" :cardType="'pl'" @btnClick="cardClick" />
+    <detail-info-card
+      :obj="playlist"
+      :cardType="'pl'"
+      :commentCount="commentCount"
+      @btnClick="cardClick"
+    />
 
     <div class="detail_layout">
       <div class="detail_layout__main">
         <detail-songlist :songs="songs" :listType="'playlist'" />
+        <!-- comment -->
+        <commont-box
+          :comments="comments"
+          :limit="pageSize"
+          :currentPage="commentPage"
+          :total="commentCount"
+          @current-change="currentChange"
+        />
       </div>
 
       <div class="detail_layout__other">
@@ -44,7 +57,13 @@
 <script>
 import DetailInfoCard from "components/common/DetailInfoCard";
 import DetailSonglist from "components/common/DetailSonglist";
-import { getPlayList, getPlaylistDetial, getSongDetail } from "api";
+import CommontBox from "components/common/CommontBox";
+import {
+  getPlayList,
+  getPlaylistDetial,
+  getSongDetail,
+  getCommentsNew,
+} from "api";
 import { processCount, createSong, playSonglist } from "common/utils";
 
 export default {
@@ -53,6 +72,10 @@ export default {
       id: this.$route.query.id,
       playlist: {},
       songs: [],
+      pageSize: 20,
+      commentPage: 1,
+      commentCount: 0,
+      comments: [],
     };
   },
   created() {
@@ -94,15 +117,39 @@ export default {
           });
           this.songs = songs;
         });
+        this.getComment();
       });
     },
     cardClick(v) {
       if (v == "all") playSonglist(this.songs);
     },
+    getComment() {
+      let params = {
+        type: 2,
+        pageSize: this.pageSize,
+        pageNo: this.commentPage,
+        id: this.playlist.id,
+        sortType: 2,
+      };
+      getCommentsNew(params).then((res) => {
+        this.commentCount =
+          res.data.data.totalCount > 5000 ? 5000 : res.data.data.totalCount;
+        this.comments = res.data.data.comments;
+      });
+    },
+    currentChange(v) {
+      this.commentPage = v;
+    },
+  },
+  watch: {
+    commentPage() {
+      this.getComment();
+    },
   },
   components: {
     DetailInfoCard,
     DetailSonglist,
+    CommontBox,
   },
 };
 </script>
diff --git a/src/views/musicLibrary/Ranking.vue b/src/views/musicLibrary/Ranking.vue
index b10825d..f3524b6 100644
--- a/src/views/musicLibrary/Ranking.vue
+++ b/src/views/musicLibrary/Ranking.vue
@@ -3,7 +3,6 @@
     <div class="toplist_nav">
       <dl class="toplist_nav__list">
         <dt class="toplist_nav__tit">巅峰榜</dt>
-
         <dd class="toplist_nav__item">
           <a
             class="toplist_nav__link"
@@ -20,7 +19,6 @@
 
       <dl class="toplist_nav__list">
         <dt class="toplist_nav__tit">地区榜</dt>
-
         <dd class="toplist_nav__item">
           <a
             class="toplist_nav__link"
@@ -37,7 +35,6 @@
 
       <dl class="toplist_nav__list">
         <dt class="toplist_nav__tit">特色榜</dt>
-
         <dd class="toplist_nav__item">
           <a
             class="toplist_nav__link"
@@ -54,7 +51,6 @@
 
       <dl class="toplist_nav__list">
         <dt class="toplist_nav__tit">全球榜</dt>
-
         <dd class="toplist_nav__item">
           <a
             class="toplist_nav__link"
@@ -103,19 +99,19 @@
         <a class="mod_btn_green js_all_play" @click="playSonglist(listDatas)"
           ><i class="mod_btn_green__icon_play"></i>播放全部</a
         >
-        <a href="javascript:;" class="mod_btn js_all_fav"
+        <a class="mod_btn js_all_fav"
           ><i class="mod_btn__icon_add"></i>添加到</a
         >
-        <a href="javascript:;" class="mod_btn js_all_down"
+        <a class="mod_btn js_all_down"
           ><i class="mod_btn__icon_down"></i>下载</a
         >
-        <a href="javascript:;" class="mod_btn js_batch"
+        <a class="mod_btn js_batch"
           ><i class="mod_btn__icon_batch"></i>批量操作</a
         >
         <a class="mod_btn js_into_comment" href="#comment_box"
-          ><i class="mod_btn__icon_comment"></i>评论({{
-            processCount(commentCount)
-          }})</a
+          ><i class="mod_btn__icon_comment"></i>评论{{
+            "(" + processCount(commentCount) + ")"
+          }}</a
         >
       </div>
 
@@ -227,7 +223,15 @@
 <script>
 import ModListMenu from "components/common/ModListMenu";
 import CommontBox from "components/common/CommontBox";
-import { getPlaylistDetial, getSongDetail, getCommentsNew } from "api";
+import {
+  topRankingtype,
+  aereRankingtype,
+  specialRankingtype,
+  globalRankingtype,
+  getPlaylistDetial,
+  getSongDetail,
+  getCommentsNew,
+} from "api";
 import {
   isDef,
   createSong,
@@ -240,35 +244,10 @@ export default {
   data() {
     return {
       loading: true,
-      topRankingtype: [
-        { name: "飙升榜", dataId: "19723756" },
-        { name: "新歌榜", dataId: "3779629" },
-        { name: "热歌榜", dataId: "3778678" },
-        { name: "原创榜", dataId: "2884035" },
-      ],
-      aereRankingtype: [
-        { name: "欧美榜", dataId: "2809513713" },
-        { name: "韩语榜", dataId: "745956260" },
-        { name: "日语榜", dataId: "5059644681" },
-      ],
-      specialRankingtype: [
-        { name: "古典榜", dataId: "71384707" },
-        { name: "说唱榜", dataId: "99131959" },
-        { name: "电子榜", dataId: "1978921795" },
-        { name: "ACG榜", dataId: "71385702" },
-        { name: "乡村榜", dataId: "3112516681" },
-        { name: "摇滚榜", dataId: "5059633707" },
-        { name: "古风榜", dataId: "5059642708" },
-        { name: "民谣榜", dataId: "5059661515" },
-      ],
-      globalRankingtype: [
-        { name: "UK排行周榜", dataId: "180106" },
-        { name: "美国Billboard榜", dataId: "60198" },
-        { name: "Beatport全球电子舞曲榜", dataId: "3812895" },
-        { name: "iTuness榜", dataId: "11641012" },
-        { name: "日本Oricon", dataId: "60131" },
-        { name: "法国 NRJ Vos Hits 周榜", dataId: "27135204" },
-      ],
+      topRankingtype,
+      aereRankingtype,
+      specialRankingtype,
+      globalRankingtype,
       seletedTypeName: "飙升榜",
       seletedType: "19723756",
       listDatas: [],
diff --git a/src/views/musicLibrary/SongDetail.vue b/src/views/musicLibrary/SongDetail.vue
index 059e170..5a78e00 100644
--- a/src/views/musicLibrary/SongDetail.vue
+++ b/src/views/musicLibrary/SongDetail.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="main">
-    <detail-info-card :obj="song" @btnClick="cardClick" />
+    <detail-info-card
+      :obj="song"
+      :commentCount="commentCount"
+      @btnClick="cardClick"
+    />
 
     <div class="detail_layout">
       <div class="detail_layout__main">
@@ -30,6 +34,15 @@
           </div>
         </div>
         <!--歌词 end-->
+
+        <!-- comment -->
+        <commont-box
+          :comments="comments"
+          :limit="pageSize"
+          :currentPage="commentPage"
+          :total="commentCount"
+          @current-change="currentChange"
+        />
       </div>
       <!--相似歌曲-->
       <div class="detail_layout__other">
@@ -105,8 +118,21 @@
 <script>
 import DetailInfoCard from "components/common/DetailInfoCard";
 import BlackTip from "components/common/BlackTip";
-import { getSongDetail, getSongLiyric, getSimiSong, getMvDetail } from "api";
-import { createSong, formatDate, playTheSong, copyText } from "common/utils";
+import CommontBox from "components/common/CommontBox";
+import {
+  getSongDetail,
+  getSongLiyric,
+  getSimiSong,
+  getMvDetail,
+  getCommentsNew,
+} from "api";
+import {
+  createSong,
+  formatDate,
+  playTheSong,
+  copyText,
+  gotoSongDetail,
+} from "common/utils";
 
 export default {
   data() {
@@ -118,6 +144,10 @@ export default {
       lyric: [],
       simiSongs: null,
       mv: null,
+      pageSize: 20,
+      commentPage: 1,
+      commentCount: 0,
+      comments: [],
     };
   },
   created() {
@@ -144,10 +174,9 @@ export default {
               : formatDate(d.publishTime, "yyyy-MM-dd"),
         });
         // 如果有mv， 获取mv信息
-        console.log(d.mv);
         if (d.mv != 0) {
           getMvDetail(d.mv).then((res) => {
-            console.log(res);
+            //console.log(res);
             let d = res.data.data;
             this.mv = {
               id: d.id,
@@ -157,6 +186,7 @@ export default {
             };
           });
         }
+        this.getComment();
       });
       // 获取歌词
       getSongLiyric(this.songId).then((res) => {
@@ -197,33 +227,42 @@ export default {
         this.ifShowTip = false;
       }, 1000);
     },
-    gotoSongDetail(id) {
-      this.$router.push({
-        path: "/musicLibrary/songDetail",
-        query: { id: id },
+    gotoSongDetail,
+    cardClick(v) {
+      if (v == "all") playTheSong(this.song);
+    },
+    getComment() {
+      let params = {
+        type: 0,
+        pageSize: this.pageSize,
+        pageNo: this.commentPage,
+        id: this.song.id,
+        sortType: 2,
+      };
+      getCommentsNew(params).then((res) => {
+        this.commentCount =
+          res.data.data.totalCount > 5000 ? 5000 : res.data.data.totalCount;
+        this.comments = res.data.data.comments;
       });
     },
-    play() {
-      playTheSong(this.song);
+    currentChange(v) {
+      this.commentPage = v;
     },
-    cardClick(v) {
-      if (v == "all") this.play();
+  },
+  watch: {
+    commentPage() {
+      this.getComment();
     },
   },
   components: {
     DetailInfoCard,
     BlackTip,
+    CommontBox,
   },
 };
 </script>
 
 <style scoped>
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
 li,
 ol,
 p,
@@ -261,13 +300,4 @@ ul {
   max-height: 390px;
   overflow: hidden;
 }
-.lyric__cont {
-  font-size: 14px;
-  color: #000;
-  line-height: 26px;
-}
-.c_tx_current,
-.c_tx_highlight {
-  color: #31c27c;
-}
 </style>
-- 
GitLab