feat: add new components comment box

* add new api port
* add style

src/api/comment.js

+import { requset } from "./base";
+
+export const getPlaylistComments = params =>
+  requset.get(`/comment/playlist`, { params: params });
+
+/*
+新版评论接口
+必选参数 :
+    id : 资源 id, 如歌曲 id,mv id
+    tpye: 数字 , 资源类型 , 对应歌曲 , mv, 专辑 , 歌单 , 电台, 视频对应以下类型
+        0: 歌曲
+        1: mv
+        2: 歌单
+        3: 专辑
+        4: 电台
+        5: 视频
+        6: 动态
+
+可选参数 :
+    pageNo:分页参数,第N页,默认为1
+    pageSize:分页参数,每页多少条数据,默认20
+    sortType: 排序方式,1:按推荐排序,2:按热度排序,3:按时间排序
+    cursor: 当sortType为3时且页数不是第一页时需传入,值为上一条数据的time 
+*/
+export const getCommentsNew = params =>
+  requset.get(`/comment/new`, { params: params });

src/api/index.js

@@ -8,4 +8,5 @@ export * from "./songer";
 export * from "./mv";
 export * from "./album";
 export * from "./search";
+export * from "./comment";
 export * from "./other";

src/assets/css/fakeqqmusic.scss

@@ -375,6 +375,11 @@ $black: #000;
   right: 0;
   font-size: 14px;
 }
+/*commont*/
+.part__tit_desc {
+  font-size: 14px;
+  margin-left: 12px;
+}
 
 /* *****************
  * mv 切换按钮 css */
@@ -1519,6 +1524,175 @@ img .playlist__pic {
   padding: 0 0 20px;
 }
 
+/*commont*/
+.comment__input {
+  position: relative;
+  padding-bottom: 60px;
+}
+.comment__textarea {
+  position: relative;
+  overflow: hidden;
+  height: 102px;
+  border: solid 1px #ececec;
+  background-color: #f5f5f5;
+}
+.comment__textarea_inner {
+  margin: 10px 14px 0 14px;
+}
+.comment__tips {
+  position: absolute;
+  bottom: 3px;
+  right: 14px;
+  text-align: right;
+}
+.comment__face {
+  position: absolute;
+  right: 90px;
+  bottom: 14px;
+}
+.comment__tool {
+  position: absolute;
+  bottom: 10px;
+  right: -5px;
+  a {
+    margin-right: 5px;
+  }
+}
+.comment__tool_btn {
+  width: 80px;
+  line-height: 27px;
+  height: 27px;
+  text-align: center;
+  padding: 0;
+}
+.mod_all_comment {
+  margin-bottom: 46px;
+}
+.comment_type__title {
+  position: relative;
+  height: 34px;
+  line-height: 34px;
+  padding-bottom: 10px;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-color: #ededed;
+  h2 {
+    font-weight: 400;
+    font-size: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+.comment__list {
+  padding-bottom: 14px;
+}
+.comment__list_item {
+  position: relative;
+  padding: 15px 0 15px 56px;
+  zoom: 1;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-color: #ededed;
+}
+.comment__avatar {
+  position: absolute;
+  left: 0;
+  top: 20px;
+  width: 38px;
+  height: 38px;
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 999px;
+  }
+}
+.comment__title {
+  font-weight: 400;
+  margin-bottom: 6px;
+  overflow: hidden;
+  height: 20px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  a,
+  span {
+    float: left;
+  }
+}
+.comment__text {
+  overflow: hidden;
+  word-break: break-all;
+  word-wrap: break-word;
+  line-height: 24px;
+  text-align: justify;
+}
+.comment__text--history {
+  margin: 5px 0 4px 12px;
+  padding: 0 0 0 10px;
+  border-left-width: 1px;
+  border-left-style: solid;
+}
+.comment__opt {
+  line-height: 24px;
+  text-align: right;
+  overflow: hidden;
+}
+.comment__date {
+  float: left;
+  line-height: 28px;
+}
+.comment__delete,
+.comment__good,
+.comment__link,
+.comment__report,
+.comment__zan {
+  margin-right: 22px;
+}
+.comment__zan {
+  vertical-align: -1px;
+}
+
+.icon_comment {
+  background-image: url(../img/comment.png);
+  background-repeat: no-repeat;
+}
+.icon_comment_face {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background-position: 0 0;
+  vertical-align: -1px;
+}
+.icon_comment_like {
+  background-position: -25px -25px;
+}
+.icon_comment_like,
+.icon_comment_liked {
+  display: inline-block;
+  margin-right: 5px;
+  width: 17px;
+  height: 17px;
+  overflow: hidden;
+  vertical-align: -3px;
+}
+.icon_comment_feedback {
+  display: inline-block;
+  width: 17px;
+  height: 17px;
+  background-position: -25px -50px;
+  font-size: 0;
+  vertical-align: middle;
+}
+
+/*text*/
+.c_tx_current,
+.c_tx_highlight {
+  color: $green;
+}
+.c_tx_normal {
+  color: #333;
+}
 .c_tx_thin {
   color: #999;
 }

src/common/apiHelper.js

@@ -300,8 +300,8 @@ function padLeftZero(str) {
 export function processCount(count) {
   if (count > 10000000) {
     return (count / 10000000).toFixed(2) + "亿";
-  } else if (count > 1000) {
-    return (count / 1000).toFixed(2) + "万";
+  } else if (count > 10000) {
+    return (count / 10000).toFixed(2) + "万";
   }
   return count;
 }

src/components/common/CommontBox.vue

+<template>
+  <div class="mod_comment" id="comment_box">
+    <div class="part__hd">
+      <h2 class="part__tit">
+        评论<span class="c_tx_thin part__tit_desc js_all_comment_num"
+          >共{{ total }}条评论</span
+        >
+      </h2>
+    </div>
+    <div class="mod_comment js_cmt_input">
+      <div class="comment__input" style="display: none">
+        <div class="comment__textarea js_comment__textarea c_bg_normal">
+          <div class="comment__textarea_inner">
+            <!--c_tx_normal-->
+            <!--focus评论框的时候将.comment__textarea_default模块隐藏，同时显示.comment__textarea_input-->
+            <div
+              class="comment__textarea_default c_tx_thin js_reply_text_blur"
+              name=""
+              id="reply_text_blur"
+              contenteditable="true"
+            >
+              期待你的神评论……
+            </div>
+            <div
+              class="js_reply_text comment__textarea_input c_tx_normal"
+              name=""
+              id="reply_text"
+              style="display: none"
+              contenteditable="true"
+            ></div>
+          </div>
+          <!--字数超过后添加comment__tips--warn_tx 去掉c_tx_thin-->
+          <div class="comment__tips js_comment_tips c_tx_thin" data-max="300">
+            剩余<span class="c_tx_highlight">300</span>字
+          </div>
+        </div>
+        <a class="comment__face js_cmt_face" data-type="reply"
+          ><i class="icon_comment icon_comment_face"></i
+        ></a>
+        <div class="comment__tool">
+          <a class="mod_btn_green comment__tool_btn js_send_reply">发表评论</a>
+        </div>
+      </div>
+    </div>
+    <div class="mod_all_comment js_mod_all">
+      <div class="comment_type__title c_b_normal">
+        <h2 class="comment_new_count">最热评论({{ total }})</h2>
+      </div>
+      <ul class="comment__list js_all_list">
+        <li
+          class="comment__list_item c_b_normal js_cmt_li"
+          v-for="comment in comments"
+          :key="comment.commentId"
+        >
+          <a class="comment__avatar js_nick">
+            <img
+              class="js_lazy_comment_pic"
+              src="//y.gtimg.cn/mediastyle/global/img/person_300.png?max_age=2592000"
+              v-lazy="comment.user.avatarUrl"
+              :alt="comment.user.nickname星河"
+              :title="comment.user.nickname星河"
+            />
+          </a>
+          <h4 class="comment__title">
+            <a
+              class="c_tx_thin js_nick js_nick_only"
+              :id="comment.user.userId"
+              >{{ comment.user.nickname }}</a
+            >
+          </h4>
+
+          <div v-if="comment.beReplied && comment.beReplied.length > 0">
+            <p class="c_tx_normal comment__text js_middle js_hot_text">
+              回复
+              <a
+                class="js_nick js_replyed_nick c_tx_current"
+                :id="comment.beReplied[0].user.userId"
+                >{{ comment.beReplied[0].user.nickname }}</a
+              >: <span class="js_subcomment">{{ comment.content }}</span>
+            </p>
+            <p
+              class="c_tx_normal comment__text c_tx_thin comment__text--history js_hot_text"
+            >
+              {{ comment.beReplied[0].content }}
+            </p>
+          </div>
+          <p class="c_tx_normal comment__text js_hot_text" v-else>
+            {{ comment.content }}
+          </p>
+
+          <div class="comment__opt js_comment_opt">
+            <span class="comment__date c_tx_thin">{{
+              formatDate(comment.time)
+            }}</span>
+            <a class="comment__report js_cmt_accusation" style="display: none"
+              >举报</a
+            >
+            <a class="comment__zan js_cmt_praise"
+              ><i class="icon_comment icon_comment_like"></i
+              ><span class="js_praise_num">{{ comment.likedCount }}</span></a
+            >
+            <a
+              class="comment__feedback js_feedback icon_comment icon_comment_feedback"
+              >回复</a
+            >
+          </div>
+          <div class="js_reply_container"></div>
+        </li>
+      </ul>
+    </div>
+    <el-pagination
+      background
+      style="text-align: center; padding-bottom: 20px"
+      layout="prev, pager, next"
+      :page-size="limit"
+      :total="total"
+      :current-page="currentPage"
+      @current-change="currentChange"
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { formatDate } from "common/utils";
+
+export default {
+  props: {
+    comments: {
+      type: Array,
+      default: [],
+    },
+    limit: { default: 10 },
+    currentPage: { default: 0 },
+    total: { default: 0 },
+  },
+  methods: {
+    currentChange(v) {
+      this.$emit("current-change", v);
+    },
+    formatDate,
+  },
+};
+</script>
+
+<style scoped>
+ul {
+  padding: 0;
+  margin: 0;
+}
+</style>

src/views/musicLibrary/Ranking.vue

@@ -113,7 +113,9 @@
           ><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>评论(913)</a
+          ><i class="mod_btn__icon_comment"></i>评论({{
+            processCount(commentCount)
+          }})</a
         >
       </div>
 
@@ -209,14 +211,30 @@
           </li>
         </ul>
       </div>
+
+      <!--commont-->
+      <commont-box
+        :comments="comments"
+        :limit="pageSize"
+        :currentPage="commentPage"
+        :total="commentCount"
+        @current-change="currentChange"
+      />
     </div>
   </div>
 </template>
 
 <script>
 import ModListMenu from "components/common/ModListMenu";
-import { getPlaylistDetial, getSongDetail } from "api";
-import { isDef, createSong, playSonglist, gotoSongDetail } from "common/utils";
+import CommontBox from "components/common/CommontBox";
+import { getPlaylistDetial, getSongDetail, getCommentsNew } from "api";
+import {
+  isDef,
+  createSong,
+  playSonglist,
+  gotoSongDetail,
+  processCount,
+} from "common/utils";
 
 export default {
   data() {
@@ -254,10 +272,15 @@ export default {
       seletedTypeName: "飙升榜",
       seletedType: "19723756",
       listDatas: [],
+      pageSize: 20,
+      commentPage: 1,
+      commentCount: 0,
+      comments: [],
     };
   },
   mounted() {
     this.updatedTopList();
+    this.getComment();
   },
   methods: {
     onSelectType(type) {
@@ -304,16 +327,43 @@ export default {
       else if (data == -9999) return "icon_rank_new";
       else return "icon_rank_down";
     },
+    getComment() {
+      let params = {
+        type: 2,
+        pageSize: this.pageSize,
+        pageNo: this.commentPage,
+        id: this.seletedType,
+        sortType: 2,
+      };
+      getCommentsNew(params).then((res) => {
+        console.log(res.data);
+        this.commentCount =
+          res.data.data.totalCount > 5000 ? 5000 : res.data.data.totalCount;
+        this.comments = res.data.data.comments;
+        console.log(this.commentCount);
+        console.log(this.comments);
+      });
+    },
+    currentChange(v) {
+      this.commentPage = v;
+    },
     playSonglist,
     gotoSongDetail,
+    processCount,
   },
   watch: {
     seletedType(newType) {
       this.updatedTopList();
+      this.commentPage = 1;
+      this.getComment();
+    },
+    commentPage() {
+      this.getComment();
     },
   },
   components: {
     ModListMenu,
+    CommontBox,
   },
 };
 </script>