diff --git a/src/api/comment.js b/src/api/comment.js
new file mode 100644
index 0000000000000000000000000000000000000000..b7ecbd024b3b0482f540d330f8e0fd4a9803e5ac
--- /dev/null
+++ b/src/api/comment.js
@@ -0,0 +1,26 @@
+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 });
diff --git a/src/api/index.js b/src/api/index.js
index e633408b2c9c38b2f719d99c290f14ea235d2717..b54c9a48df5405fb59377d406c82dd92d1969542 100644
--- a/src/api/index.js
+++ b/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";
diff --git a/src/assets/css/fakeqqmusic.scss b/src/assets/css/fakeqqmusic.scss
index c550d3943758512567650a82d6073fd8026fc1a3..857ccff91cdadf8f6c22ad9e8517b6c8678c9626 100644
--- a/src/assets/css/fakeqqmusic.scss
+++ b/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;
}
diff --git a/src/assets/img/comment.png b/src/assets/img/comment.png
new file mode 100644
index 0000000000000000000000000000000000000000..8cf8dab24c6d0b3af151a17a594c76be2e63a906
Binary files /dev/null and b/src/assets/img/comment.png differ
diff --git a/src/common/apiHelper.js b/src/common/apiHelper.js
index cbb7a9ff9629c73083113e26e93b451e328afcdf..43f03ee0e9776592d6f497177a68118eee821469 100644
--- a/src/common/apiHelper.js
+++ b/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;
}
diff --git a/src/components/common/CommontBox.vue b/src/components/common/CommontBox.vue
new file mode 100644
index 0000000000000000000000000000000000000000..80d0f9dbaf6f45db80f2c1cadd8f474191248764
--- /dev/null
+++ b/src/components/common/CommontBox.vue
@@ -0,0 +1,151 @@
+
+
+
+
+
+
+
diff --git a/src/views/musicLibrary/Ranking.vue b/src/views/musicLibrary/Ranking.vue
index 45b7242c096a035fdf1246de8ae49e5e9aea580a..b10825d2b30a34286c69bfb9b5cc25d2a01d4ae6 100644
--- a/src/views/musicLibrary/Ranking.vue
+++ b/src/views/musicLibrary/Ranking.vue
@@ -113,7 +113,9 @@
>批量操作
评论({{
+ processCount(commentCount)
+ }})
@@ -209,14 +211,30 @@
+
+
+
+ 评论共{{ total }}条评论 +
+最热评论({{ total }})
++-
+
+
+
+
+
+
+ {{
+ formatDate(comment.time)
+ }}
+ 举报
+ {{ comment.likedCount }}
+ 回复
+
+
+
+
++ {{ comment.user.nickname }} +
+ ++ 回复 + {{ comment.beReplied[0].user.nickname }}: {{ comment.content }} +
++ {{ comment.beReplied[0].content }} +
++ {{ comment.content }} +
+ +