播放详情页新增歌曲评论加载显示
lyswhut
parent
8d8cabd5b3
commit
8c76c3d81c
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "lx-music-desktop",
|
||||
"version": "1.2.2",
|
||||
"version": "1.3.0",
|
||||
"description": "一个免费的音乐下载助手",
|
||||
"main": "./dist/electron/main.js",
|
||||
"productName": "lx-music-desktop",
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
### 新增
|
||||
|
||||
- 播放详情页新增歌曲评论加载显示（某些平台暂不支持显示子评论）
|
||||
|
||||
### 优化
|
||||
|
||||
- 修改播放详情页的歌曲图片的显示效果
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@
|
|||
@color-green-theme_2-font-label: fadeout(@color-green-theme_2-font, 50%);
|
||||
// @color-green-theme_2-line: transparent;
|
||||
@color-green-theme_2-line: lighten(@color-green-theme, 45%);
|
||||
@color-green-reply-floor: lighten(@color-green-theme, 45%);
|
||||
@color-green-reply-floor: fadeout(@color-green-theme, 95%);
|
||||
@color-green-theme-sidebar: @color-green-theme;
|
||||
@color-green-btn: lighten(@color-green-theme, 5%);
|
||||
@color-green-btn-background: fadeout(lighten(@color-green-theme, 35%), 70%);
|
||||
|
|
@ -150,7 +150,7 @@
|
|||
@color-yellow-theme_2-font-label: fadeout(@color-yellow-theme_2-font, 50%);
|
||||
// @color-yellow-theme_2-line: transparent;
|
||||
@color-yellow-theme_2-line: lighten(@color-yellow-theme, 28%);
|
||||
@color-yellow-reply-floor: lighten(@color-yellow-theme, 28%);
|
||||
@color-yellow-reply-floor: fadeout(@color-yellow-theme, 94%);
|
||||
@color-yellow-theme-sidebar: @color-yellow-theme;
|
||||
@color-yellow-btn: darken(@color-yellow-theme, 5%);
|
||||
@color-yellow-btn-background: fadeout(lighten(@color-yellow-theme, 25%), 60%);
|
||||
|
|
@ -207,7 +207,7 @@
|
|||
@color-orange-theme_2-font-label: fadeout(@color-orange-theme_2-font, 50%);
|
||||
// @color-orange-theme_2-line: transparent;
|
||||
@color-orange-theme_2-line: lighten(@color-orange-theme, 36%);
|
||||
@color-orange-reply-floor: lighten(@color-orange-theme, 36%);
|
||||
@color-orange-reply-floor: fadeout(@color-orange-theme, 95%);
|
||||
@color-orange-theme-sidebar: @color-orange-theme;
|
||||
@color-orange-btn: lighten(@color-orange-theme, 5%);
|
||||
@color-orange-btn-background: fadeout(lighten(@color-orange-theme, 25%), 60%);
|
||||
|
|
@ -264,7 +264,7 @@
|
|||
@color-blue-theme_2-font-label: fadeout(@color-blue-theme_2-font, 50%);
|
||||
// @color-blue-theme_2-line: transparent;
|
||||
@color-blue-theme_2-line: lighten(@color-blue-theme, 42%);
|
||||
@color-blue-reply-floor: lighten(@color-blue-theme, 42%);
|
||||
@color-blue-reply-floor: fadeout(@color-blue-theme, 95%);
|
||||
@color-blue-theme-sidebar: @color-blue-theme;
|
||||
@color-blue-btn: lighten(@color-blue-theme, 5%);
|
||||
@color-blue-btn-background: fadeout(lighten(@color-blue-theme, 35%), 50%);
|
||||
|
|
@ -321,7 +321,7 @@
|
|||
@color-red-theme_2-font-label: fadeout(@color-red-theme_2-font, 50%);
|
||||
// @color-red-theme_2-line: transparent;
|
||||
@color-red-theme_2-line: lighten(@color-red-theme, 42%);
|
||||
@color-red-reply-floor: lighten(@color-red-theme, 42%);
|
||||
@color-red-reply-floor: fadeout(@color-red-theme, 95%);
|
||||
@color-red-theme-sidebar: @color-red-theme;
|
||||
@color-red-btn: lighten(@color-red-theme, 5%);
|
||||
@color-red-btn-background: fadeout(lighten(@color-red-theme, 35%), 70%);
|
||||
|
|
@ -380,7 +380,7 @@
|
|||
@color-pink-theme_2-font-label: fadeout(@color-pink-theme_2-font, 50%);
|
||||
// @color-pink-theme_2-line: transparent;
|
||||
@color-pink-theme_2-line: lighten(@color-pink-theme, 25%);
|
||||
@color-pink-reply-floor: lighten(@color-pink-theme, 25%);
|
||||
@color-pink-reply-floor: fadeout(@color-pink-theme, 93%);
|
||||
@color-pink-theme-sidebar: @color-pink-theme;
|
||||
@color-pink-btn: darken(@color-pink-theme, 3%);
|
||||
@color-pink-btn-background: fadeout(lighten(@color-pink-theme, 20%), 50%);
|
||||
|
|
@ -437,7 +437,7 @@
|
|||
@color-purple-theme_2-font-label: fadeout(@color-purple-theme_2-font, 50%);
|
||||
// @color-purple-theme_2-line: transparent;
|
||||
@color-purple-theme_2-line: lighten(@color-purple-theme, 43%);
|
||||
@color-purple-reply-floor: lighten(@color-purple-theme, 43%);
|
||||
@color-purple-reply-floor: fadeout(@color-purple-theme, 95%);
|
||||
@color-purple-theme-sidebar: @color-purple-theme;
|
||||
@color-purple-btn: lighten(@color-purple-theme, 5%);
|
||||
@color-purple-btn-background: fadeout(lighten(@color-purple-theme, 35%), 70%);
|
||||
|
|
@ -494,7 +494,7 @@
|
|||
@color-grey-theme_2-font-label: fadeout(@color-grey-theme_2-font, 50%);
|
||||
// @color-grey-theme_2-line: transparent;
|
||||
@color-grey-theme_2-line: lighten(@color-grey-theme, 47%);
|
||||
@color-grey-reply-floor: lighten(@color-grey-theme, 47%);
|
||||
@color-grey-reply-floor: fadeout(@color-grey-theme, 95%);
|
||||
@color-grey-theme-sidebar: @color-grey-theme;
|
||||
@color-grey-btn: lighten(@color-grey-theme, 5%);
|
||||
@color-grey-btn-background: fadeout(lighten(@color-grey-theme, 35%), 70%);
|
||||
|
|
@ -552,7 +552,7 @@
|
|||
@color-ming-theme_2-font-label: fadeout(@color-ming-theme_2-font, 50%);
|
||||
// @color-ming-theme_2-line: transparent;
|
||||
@color-ming-theme_2-line: lighten(@color-ming-theme, 60%);
|
||||
@color-ming-reply-floor: lighten(@color-ming-theme, 60%);
|
||||
@color-ming-reply-floor: fadeout(@color-ming-theme, 95%);
|
||||
@color-ming-theme-sidebar: @color-ming-theme;
|
||||
@color-ming-btn: lighten(@color-ming-theme, 5%);
|
||||
@color-ming-btn-background: fadeout(lighten(@color-ming-theme, 35%), 75%);
|
||||
|
|
@ -612,7 +612,7 @@
|
|||
@color-blue2-theme_2-font-label: fadeout(@color-blue2-theme_2-font, 50%);
|
||||
// @color-blue2-theme_2-line: transparent;
|
||||
@color-blue2-theme_2-line: lighten(@color-blue2-theme, 41%);
|
||||
@color-blue2-reply-floor: lighten(@color-blue2-theme, 41%);
|
||||
@color-blue2-reply-floor: fadeout(@color-blue2-theme, 95%);
|
||||
@color-blue2-theme-sidebar: @color-blue2-theme;
|
||||
@color-blue2-btn: lighten(@color-blue2-theme, 5%);
|
||||
@color-blue2-btn-background: fadeout(lighten(@color-blue2-theme, 30%), 70%);
|
||||
|
|
@ -662,7 +662,7 @@
|
|||
@color-mid_autumn-theme-font: rgba(246, 233, 255, 0.9);
|
||||
@color-mid_autumn-theme-font-label: fadeout(lighten(@color-mid_autumn-theme, 20%), 20%);
|
||||
@color-mid_autumn-theme_2: rgba(255, 255, 255, .9);
|
||||
@color-mid_autumn-theme_2-background_1: #e7e7e9;
|
||||
@color-mid_autumn-theme_2-background_1: #ececec;
|
||||
@color-mid_autumn-theme_2-background_2: fadeout(@color-mid_autumn-theme_2-background_1, 2%);
|
||||
@color-mid_autumn-theme_2-hover: fadeout(lighten(@color-mid_autumn-theme, 15%), 80%);
|
||||
@color-mid_autumn-theme_2-active: fadeout(lighten(@color-mid_autumn-theme, 15%), 70%);
|
||||
|
|
@ -670,7 +670,7 @@
|
|||
@color-mid_autumn-theme_2-font-label: desaturate(lighten(@color-mid_autumn-theme, 30%), 45%);
|
||||
// @color-mid_autumn-theme_2-line: transparent;
|
||||
@color-mid_autumn-theme_2-line: lighten(@color-mid_autumn-theme, 61%);
|
||||
@color-mid_autumn-reply-floor: lighten(@color-mid_autumn-theme, 61%);
|
||||
@color-mid_autumn-reply-floor: fadeout(@color-mid_autumn-theme, 95%);
|
||||
@color-mid_autumn-theme-sidebar: rgba(255, 255, 255, 0);
|
||||
@color-mid_autumn-btn: lighten(@color-mid_autumn-theme, 10%);
|
||||
@color-mid_autumn-btn-background: fadeout(lighten(@color-mid_autumn-theme, 35%), 70%);
|
||||
|
|
@ -728,7 +728,7 @@
|
|||
@color-mid_autumn-theme_2-font-label: desaturate(lighten(@color-mid_autumn-theme, 30%), 45%);
|
||||
// @color-mid_autumn-theme_2-line: transparent;
|
||||
@color-mid_autumn-theme_2-line: darken(@color-mid_autumn-theme, 18%);
|
||||
@color-mid_autumn-reply-floor: darken(@color-mid_autumn-theme, 18%);
|
||||
@color-mid_autumn-reply-floor: fadeout(@color-mid_autumn-theme, 95%);
|
||||
@color-mid_autumn-theme-sidebar: rgba(255, 255, 255, 0);
|
||||
@color-mid_autumn-btn: darken(@color-mid_autumn-theme, 10%);
|
||||
@color-mid_autumn-btn-background: fadeout(lighten(@color-mid_autumn-theme, 35%), 70%);
|
||||
|
|
@ -785,7 +785,7 @@
|
|||
@color-naruto-theme_2-font-label: desaturate(lighten(@color-naruto-theme, 10%), 45%);
|
||||
// @color-naruto-theme_2-line: transparent;
|
||||
@color-naruto-theme_2-line: fadeout(lighten(@color-naruto-theme, 36%), 70%);
|
||||
@color-naruto-reply-floor: fadeout(lighten(@color-naruto-theme, 36%), 70%);
|
||||
@color-naruto-reply-floor: fadeout(lighten(@color-naruto-theme, 12%), 90%);
|
||||
@color-naruto-theme-sidebar: rgba(255, 255, 255, .3);
|
||||
@color-naruto-btn: lighten(@color-naruto-theme, 2%);
|
||||
@color-naruto-btn-background: fadeout(lighten(@color-naruto-theme, 35%), 70%);
|
||||
|
|
@ -842,7 +842,7 @@
|
|||
@color-happy_new_year-theme_2-font-label: desaturate(darken(@color-happy_new_year-theme, 5%), 50%);
|
||||
// @color-happy_new_year-theme_2-line: transparent;
|
||||
@color-happy_new_year-theme_2-line: fadeout(lighten(@color-happy_new_year-theme, 16%), 70%);
|
||||
@color-happy_new_year-reply-floor: fadeout(lighten(@color-happy_new_year-theme, 16%), 70%);
|
||||
@color-happy_new_year-reply-floor: fadeout(lighten(@color-happy_new_year-theme, 12%), 85%);
|
||||
@color-happy_new_year-theme-sidebar: rgba(119, 37, 18, 0.1);
|
||||
@color-happy_new_year-btn: desaturate(@color-happy_new_year-theme, 10%);
|
||||
@color-happy_new_year-btn-background: fadeout(lighten(@color-happy_new_year-theme, 15%), 60%);
|
||||
|
|
|
|||
|
|
@ -75,8 +75,8 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
|
|||
// 0 0 512 512
|
||||
path(d='M511.563,434.259c-1.728-142.329-124.42-258.242-277.087-263.419V95.999c0-17.645-14.342-31.999-31.974-31.999 c-7.931,0-15.591,3.042-21.524,8.562c0,0-134.828,124.829-173.609,163.755C2.623,241.109,0,248.088,0,255.994 c0,7.906,2.623,14.885,7.369,19.687c38.781,38.915,173.609,163.745,173.609,163.745c5.933,5.521,13.593,8.562,21.524,8.562 c17.631,0,31.974-14.354,31.974-31.999v-74.591c153.479,2.156,255.792,50.603,255.792,95.924c0,5.896,4.767,10.666,10.658,10.666 c0.167,0.021,0.333,0.01,0.416,0c5.891,0,10.658-4.771,10.658-10.666C512,436.259,511.854,435.228,511.563,434.259z')
|
||||
g#icon-refresh(fill='currentColor')
|
||||
// 0 0 512 512
|
||||
path(d='M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z')
|
||||
// 0 0 24 24
|
||||
path(d='M12,6V9L16,5L12,1V4A8,8 0 0,0 4,12C4,13.57 4.46,15.03 5.24,16.26L6.7,14.8C6.25,13.97 6,13 6,12A6,6 0 0,1 12,6M18.76,7.74L17.3,9.2C17.74,10.04 18,11 18,12A6,6 0 0,1 12,18V15L8,19L12,23V20A8,8 0 0,0 20,12C20,10.43 19.54,8.97 18.76,7.74Z')
|
||||
g#icon-eraser(fill='currentColor')
|
||||
// 0 0 512 512
|
||||
path(d='M497.941 273.941c18.745-18.745 18.745-49.137 0-67.882l-160-160c-18.745-18.745-49.136-18.746-67.883 0l-256 256c-18.745 18.745-18.745 49.137 0 67.882l96 96A48.004 48.004 0 0 0 144 480h356c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12H355.883l142.058-142.059zm-302.627-62.627l137.373 137.373L265.373 416H150.628l-80-80 124.686-124.686z')
|
||||
|
|
@ -209,5 +209,13 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
|
|||
g#icon-thumbs-up(fill='currentColor')
|
||||
// 0 0 512 512
|
||||
path(d='M466.27 286.69C475.04 271.84 480 256 480 236.85c0-44.015-37.218-85.58-85.82-85.58H357.7c4.92-12.81 8.85-28.13 8.85-46.54C366.55 31.936 328.86 0 271.28 0c-61.607 0-58.093 94.933-71.76 108.6-22.747 22.747-49.615 66.447-68.76 83.4H32c-17.673 0-32 14.327-32 32v240c0 17.673 14.327 32 32 32h64c14.893 0 27.408-10.174 30.978-23.95 44.509 1.001 75.06 39.94 177.802 39.94 7.22 0 15.22.01 22.22.01 77.117 0 111.986-39.423 112.94-95.33 13.319-18.425 20.299-43.122 17.34-66.99 9.854-18.452 13.664-40.343 8.99-62.99zm-61.75 53.83c12.56 21.13 1.26 49.41-13.94 57.57 7.7 48.78-17.608 65.9-53.12 65.9h-37.82c-71.639 0-118.029-37.82-171.64-37.82V240h10.92c28.36 0 67.98-70.89 94.54-97.46 28.36-28.36 18.91-75.63 37.82-94.54 47.27 0 47.27 32.98 47.27 56.73 0 39.17-28.36 56.72-28.36 94.54h103.99c21.11 0 37.73 18.91 37.82 37.82.09 18.9-12.82 37.81-22.27 37.81 13.489 14.555 16.371 45.236-5.21 65.62zM88 432c0 13.255-10.745 24-24 24s-24-10.745-24-24 10.745-24 24-24 24 10.745 24 24z')
|
||||
|
||||
g#icon-close(fill='currentColor')
|
||||
// 0 0 24 24
|
||||
path(d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z')
|
||||
|
||||
g#icon-comment(fill='currentColor')
|
||||
// 0 0 24 24
|
||||
path(d='M16 11H8V9H16V11M22 4V16C22 17.11 21.11 18 20 18H13.9L10.2 21.71C10 21.9 9.75 22 9.5 22H9C8.45 22 8 21.55 8 21V18H4C2.9 18 2 17.11 2 16V4C2 2.89 2.9 2 4 2H20C21.11 2 22 2.9 22 4M20 4H4V16H10V19.08L13.08 16H20V4')
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -66,7 +66,9 @@ div(:class="$style.player")
|
|||
core-player-detail(v-if="isShowPlayerDetail" :musicInfo="listId == 'download' ? targetSong.musicInfo : targetSong"
|
||||
:lyric="lyric" :list="list" :listId="listId"
|
||||
:playInfo="{ nowPlayTimeStr, maxPlayTimeStr, progress, nowPlayTime, status }"
|
||||
:isPlay="isPlay" @action="handlePlayDetailAction")
|
||||
:isPlay="isPlay" @action="handlePlayDetailAction"
|
||||
:nextTogglePlayName="nextTogglePlayName"
|
||||
@toggle-next-play-mode="toggleNextPlayMode" @add-music-to="addMusicTo")
|
||||
|
||||
material-list-add-modal(:show="isShowAddMusicTo" :musicInfo="listId == 'download' ? targetSong.musicInfo : targetSong" @close="isShowAddMusicTo = false")
|
||||
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' style="display: none;")
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
//- div(:class="$style.info")
|
||||
div(:class="$style.info")
|
||||
img(:class="$style.img" :src="musicInfo.img" v-if="musicInfo.img")
|
||||
div(:class="$style.description" @click="handleShowComment")
|
||||
div(:class="$style.description")
|
||||
p {{$t('core.player.name')}}{{musicInfo.name}}
|
||||
p {{$t('core.player.singer')}}{{musicInfo.singer}}
|
||||
p(v-if="musicInfo.album") {{$t('core.player.album')}}{{musicInfo.album}}
|
||||
|
|
@ -32,21 +32,28 @@
|
|||
p(v-for="(info, index) in lyricLines" :key="index" :class="lyric.line == index ? $style.lrcActive : null") {{info.text}}
|
||||
div(:class="$style.lyricSpace")
|
||||
|
||||
div(:class="$style.comment")
|
||||
div(:class="$style.commentHeader" @click="isShowComment = false")
|
||||
h3 {{title}}
|
||||
div.scroll(:class="$style.commentMain" ref="dom_comment")
|
||||
div(v-if="comment.page == 1")
|
||||
h2(:class="$style.commentType") 热门评论
|
||||
material-comment-floor(v-if="comment.hotComments.length" :class="$style.reply_floor" :comments="comment.hotComments")
|
||||
div
|
||||
h2(:class="$style.commentType") 最新评论
|
||||
material-comment-floor(v-if="comment.comments.length" :class="$style.reply_floor" :comments="comment.comments")
|
||||
div(:class="$style.pagination")
|
||||
material-pagination(:count="comment.total" :btnLength="5" :limit="comment.limit" :page="comment.page" @btn-click="handleToggleCommentPage")
|
||||
material-music-comment(:class="$style.comment" :titleFormat="this.setting.download.fileName" :musicInfo="musicInfo" v-model="isShowComment")
|
||||
|
||||
div(:class="$style.footer")
|
||||
div(:class="$style.left")
|
||||
div(:class="$style.footerLeft")
|
||||
div(:class="$style.footerLeftControlBtns")
|
||||
div(:class="[$style.footerLeftControlBtn, isShowComment ? $style.active : null]" @click="isShowComment = !isShowComment" :tips="$t('core.player.comment_show')")
|
||||
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='95%' viewBox='0 0 24 24' space='preserve')
|
||||
use(xlink:href='#icon-comment')
|
||||
div(:class="$style.footerLeftControlBtn" @click="$emit('toggle-next-play-mode')" :tips="nextTogglePlayName")
|
||||
svg(v-if="setting.player.togglePlayMethod == 'listLoop'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' space='preserve')
|
||||
use(xlink:href='#icon-list-loop')
|
||||
svg(v-else-if="setting.player.togglePlayMethod == 'random'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' space='preserve')
|
||||
use(xlink:href='#icon-list-random')
|
||||
svg(v-else-if="setting.player.togglePlayMethod == 'list'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='120%' viewBox='0 0 24 24' space='preserve')
|
||||
use(xlink:href='#icon-list-order')
|
||||
svg(v-else-if="setting.player.togglePlayMethod == 'singleLoop'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='110%' viewBox='0 0 24 24' space='preserve')
|
||||
use(xlink:href='#icon-single-loop')
|
||||
svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='120%' viewBox='0 0 24 24' space='preserve')
|
||||
use(xlink:href='#icon-single')
|
||||
div(:class="$style.footerLeftControlBtn" @click="$emit('add-music-to', musicInfo)" :tips="$t('core.player.add_music_to')")
|
||||
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' space='preserve')
|
||||
use(xlink:href='#icon-add-2')
|
||||
div(:class="$style.progressContainer")
|
||||
div(:class="$style.progressContent")
|
||||
div(:class="$style.progress")
|
||||
|
|
@ -80,7 +87,6 @@
|
|||
import { mapGetters, mapMutations } from 'vuex'
|
||||
import { base as eventBaseName } from '../../event/names'
|
||||
import { scrollTo } from '../../utils'
|
||||
import music from '../../utils/music'
|
||||
|
||||
let cancelScrollFn = null
|
||||
|
||||
|
|
@ -137,6 +143,7 @@ export default {
|
|||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
nextTogglePlayName: String,
|
||||
},
|
||||
watch: {
|
||||
// 'musicInfo.img': {
|
||||
|
|
@ -219,47 +226,6 @@ export default {
|
|||
lyricLines: [],
|
||||
isSetedLines: false,
|
||||
isShowComment: false,
|
||||
comment: {
|
||||
musicInfo: {
|
||||
name: '',
|
||||
singer: '',
|
||||
},
|
||||
page: 1,
|
||||
total: 10,
|
||||
maxPage: 1,
|
||||
limit: 20,
|
||||
comments: [
|
||||
// {
|
||||
// text: ['123123hhh'],
|
||||
// userName: 'dsads',
|
||||
// avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg',
|
||||
// time: '2020-10-22 22:14:17',
|
||||
// timeStr: '2020-10-22 22:14:17',
|
||||
// likedCount: 100,
|
||||
// reply: [],
|
||||
// },
|
||||
],
|
||||
hotComments: [
|
||||
// {
|
||||
// text: ['123123hhh'],
|
||||
// userName: 'dsads',
|
||||
// avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg',
|
||||
// time: '2020-10-22 22:14:17',
|
||||
// timeStr: '2020-10-22 22:14:17',
|
||||
// likedCount: 100,
|
||||
// reply: [
|
||||
// {
|
||||
// text: ['123123hhh'],
|
||||
// userName: 'dsads',
|
||||
// avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg',
|
||||
// time: '2020-10-22 22:14:17',
|
||||
// timeStr: '2020-10-22 22:14:17',
|
||||
// likedCount: 100,
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -279,11 +245,6 @@ export default {
|
|||
computed: {
|
||||
...mapGetters(['setting']),
|
||||
...mapGetters('player', ['isShowPlayerDetail']),
|
||||
title() {
|
||||
return this.comment.musicInfo.name
|
||||
? this.setting.download.fileName.replace('歌名', this.comment.musicInfo.name).replace('歌手', this.comment.musicInfo.singer)
|
||||
: '^-^'
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapMutations('player', [
|
||||
|
|
@ -385,41 +346,6 @@ export default {
|
|||
close() {
|
||||
window.eventHub.$emit(eventBaseName.close)
|
||||
},
|
||||
handleShowComment() {
|
||||
if (!this.musicInfo.songmid || !music[this.musicInfo.source].comment) return
|
||||
if (this.musicInfo.songmid != this.comment.musicInfo.songmid) {
|
||||
this.comment.page = 1
|
||||
this.comment.total = 0
|
||||
this.comment.maxPage = 1
|
||||
}
|
||||
this.isShowComment = true
|
||||
this.comment.musicInfo = this.musicInfo
|
||||
music[this.comment.musicInfo.source].comment.getComment(this.comment.musicInfo, this.comment.page, this.comment.limit).then(comment => {
|
||||
this.comment.comments = comment.comments
|
||||
this.comment.total = comment.total
|
||||
this.comment.maxPage = comment.maxPage
|
||||
this.$nextTick(() => {
|
||||
scrollTo(this.$refs.dom_comment, 0, 300, () => {
|
||||
this.comment.comments = comment.comments
|
||||
})
|
||||
})
|
||||
})
|
||||
music[this.comment.musicInfo.source].comment.getHotComment(this.comment.musicInfo, this.comment.page, this.comment.limit).then(hotComment => {
|
||||
this.comment.hotComments = hotComment.comments
|
||||
})
|
||||
},
|
||||
handleToggleCommentPage(page) {
|
||||
music[this.comment.musicInfo.source].comment.getComment(this.comment.musicInfo, page, this.comment.limit).then(comment => {
|
||||
this.comment.page = page
|
||||
this.comment.total = comment.total
|
||||
this.comment.maxPage = comment.maxPage
|
||||
this.$nextTick(() => {
|
||||
scrollTo(this.$refs.dom_comment, 0, 300, () => {
|
||||
this.comment.comments = comment.comments
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -660,36 +586,8 @@ export default {
|
|||
|
||||
.comment {
|
||||
flex: 0 0 0;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
transition: @transition-theme;
|
||||
transition-property: flex-basis opacity;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
|
||||
}
|
||||
.commentHeader {
|
||||
flex: none;
|
||||
padding-bottom: 10px;
|
||||
// border-bottom: 1px solid #eee;
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.commentMain {
|
||||
flex: auto;
|
||||
padding-left: 15px;
|
||||
padding-right: 10px;
|
||||
background-color: @color-reply-floor;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.commentType {
|
||||
padding: 10px 0;
|
||||
font-size: 13px;
|
||||
color: @color-theme_2-font;
|
||||
}
|
||||
.pagination {
|
||||
padding: 10px 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
|
|
@ -698,7 +596,39 @@ export default {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.footerLeft {
|
||||
flex: auto;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
padding: 13px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.footerLeftControlBtns {
|
||||
color: @color-theme_2-font;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.footerLeftControlBtn {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
opacity: .5;
|
||||
cursor: pointer;
|
||||
transition: opacity @transition-theme;
|
||||
|
||||
&:hover {
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
+.footerLeftControlBtn {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: @color-theme;
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
.progress-container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
|
@ -757,6 +687,7 @@ export default {
|
|||
}
|
||||
.time-label {
|
||||
width: 100%;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span {
|
||||
|
|
@ -806,6 +737,9 @@ each(@themes, {
|
|||
border-left-color: ~'@{color-@{value}-theme}';
|
||||
background-color: ~'@{color-@{value}-theme_2-background_1}';
|
||||
}
|
||||
.leftControlBtns {
|
||||
color: ~'@{color-@{value}-theme_2-font}';
|
||||
}
|
||||
.right {
|
||||
&:before {
|
||||
background-image: linear-gradient(0deg,rgba(255,255,255,0) 0%,~'@{color-@{value}-theme_2-background_1}' 95%);
|
||||
|
|
|
|||
|
|
@ -85,6 +85,7 @@ export default {
|
|||
flex-flow: row nowrap;
|
||||
align-items: flex-end;
|
||||
min-width: 0;
|
||||
color: @color-theme_2-font-label;
|
||||
}
|
||||
.name {
|
||||
flex: 0 1 auto;
|
||||
|
|
@ -93,14 +94,12 @@ export default {
|
|||
}
|
||||
.time {
|
||||
flex: none;
|
||||
color: @color-theme_2-font-label;
|
||||
font-size: 11px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.likes {
|
||||
flex: 1 0 auto;
|
||||
margin-left: 10px;
|
||||
color: @color-theme_2-font-label;
|
||||
font-size: 11px;
|
||||
align-self: flex-end;
|
||||
text-align: right;
|
||||
|
|
@ -138,4 +137,25 @@ export default {
|
|||
background-color: @color-reply-floor;
|
||||
}
|
||||
|
||||
|
||||
each(@themes, {
|
||||
:global(#container.@{value}) {
|
||||
.listItem {
|
||||
border-bottom-color: ~'@{color-@{value}-theme_2-active}';
|
||||
}
|
||||
.content {
|
||||
color: ~'@{color-@{value}-theme_2-font}';
|
||||
}
|
||||
.info {
|
||||
color: ~'@{color-@{value}-theme_2-font-label}';
|
||||
}
|
||||
.likesIcon {
|
||||
color: ~'@{color-@{value}-theme-active}';
|
||||
}
|
||||
.reply_floor {
|
||||
background-color: ~'@{color-@{value}-reply-floor}';
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,268 @@
|
|||
<template lang="pug">
|
||||
div(:class="$style.comment")
|
||||
div(:class="$style.commentHeader")
|
||||
h3 {{$t('core.player.comment_title', { name: title })}}
|
||||
div(:class="$style.commentHeaderBtns")
|
||||
div(:class="$style.commentHeaderBtn" @click="handleShowComment" :tips="$t('core.player.comment_refresh')")
|
||||
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' style='transform: rotate(45deg);' viewBox='0 0 24 24' space='preserve')
|
||||
use(xlink:href='#icon-refresh')
|
||||
div(:class="$style.commentHeaderBtn" @click="$emit('input', false)")
|
||||
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' space='preserve')
|
||||
use(xlink:href='#icon-close')
|
||||
|
||||
div.scroll(:class="$style.commentMain" ref="dom_comment")
|
||||
div(v-if="page == 1")
|
||||
h2(:class="$style.commentType") {{$t('core.player.comment_hot_title')}}
|
||||
p(:class="$style.commentLabel" style="cursor: pointer;" v-if="isHotLoadError" @click="handleGetHotComment(currentMusicInfo)") {{$t('core.player.comment_hot_load_error')}}
|
||||
p(:class="$style.commentLabel" v-else-if="isHotLoading && !hotComments.length") {{$t('core.player.comment_hot_loading')}}
|
||||
material-comment-floor(v-if="!isHotLoadError && hotComments.length" :class="[$style.commentFloor, isHotLoading ? $style.loading : null]" :comments="hotComments")
|
||||
p(:class="$style.commentLabel" v-else-if="!isHotLoadError && !isHotLoading") {{$t('core.player.comment_no_content')}}
|
||||
div
|
||||
h2(:class="$style.commentType") {{$t('core.player.comment_new_title')}}
|
||||
p(:class="$style.commentLabel" style="cursor: pointer;" v-if="isNewLoadError" @click="handleGetNewComment(currentMusicInfo, nextPage, limit)") {{$t('core.player.comment_new_load_error')}}
|
||||
p(:class="$style.commentLabel" v-else-if="isNewLoading && !newComments.length") {{$t('core.player.comment_new_loading')}}
|
||||
material-comment-floor(v-if="!isNewLoadError && newComments.length" :class="[$style.commentFloor, isNewLoading ? $style.loading : null]" :comments="newComments")
|
||||
p(:class="$style.commentLabel" v-else-if="!isNewLoadError && !isNewLoading") {{$t('core.player.comment_no_content')}}
|
||||
div(:class="$style.pagination")
|
||||
material-pagination(:count="total" :btnLength="5" :limit="limit" :page="page" @btn-click="handleToggleCommentPage")
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { scrollTo } from '../../utils'
|
||||
import music from '../../utils/music'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: Boolean,
|
||||
titleFormat: {
|
||||
type: String,
|
||||
default: '歌名 - 歌手',
|
||||
},
|
||||
musicInfo: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentMusicInfo: {
|
||||
name: '',
|
||||
singer: '',
|
||||
},
|
||||
page: 1,
|
||||
total: 10,
|
||||
maxPage: 1,
|
||||
limit: 20,
|
||||
isHotLoading: true,
|
||||
isNewLoading: false,
|
||||
isHotLoadError: true,
|
||||
isNewLoadError: false,
|
||||
nextPage: 1,
|
||||
newComments: [
|
||||
// {
|
||||
// text: ['123123hhh'],
|
||||
// userName: 'dsads',
|
||||
// avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg',
|
||||
// time: '2020-10-22 22:14:17',
|
||||
// timeStr: '2020-10-22 22:14:17',
|
||||
// likedCount: 100,
|
||||
// reply: [],
|
||||
// },
|
||||
],
|
||||
hotComments: [
|
||||
// {
|
||||
// text: ['123123hhh'],
|
||||
// userName: 'dsads',
|
||||
// avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg',
|
||||
// time: '2020-10-22 22:14:17',
|
||||
// timeStr: '2020-10-22 22:14:17',
|
||||
// likedCount: 100,
|
||||
// reply: [
|
||||
// {
|
||||
// text: ['123123hhh'],
|
||||
// userName: 'dsads',
|
||||
// avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg',
|
||||
// time: '2020-10-22 22:14:17',
|
||||
// timeStr: '2020-10-22 22:14:17',
|
||||
// likedCount: 100,
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
return this.currentMusicInfo.name
|
||||
? this.titleFormat.replace('歌名', this.currentMusicInfo.name).replace('歌手', this.currentMusicInfo.singer)
|
||||
: '^-^'
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value(n) {
|
||||
if (n) this.handleShowComment()
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async getComment(musicInfo, page, limit, retryNum = 0) {
|
||||
let resp
|
||||
try {
|
||||
resp = await music[musicInfo.source].comment.getComment(musicInfo, page, limit)
|
||||
} catch (error) {
|
||||
if (error.message == '取消请求' || ++retryNum > 2) throw error
|
||||
resp = await this.getComment(musicInfo, page, limit, retryNum)
|
||||
}
|
||||
return resp
|
||||
},
|
||||
async getHotComment(musicInfo, retryNum = 0) {
|
||||
let resp
|
||||
try {
|
||||
resp = await music[musicInfo.source].comment.getHotComment(musicInfo)
|
||||
} catch (error) {
|
||||
if (error.message == '取消请求' || ++retryNum > 2) throw error
|
||||
resp = await this.getHotComment(musicInfo, retryNum)
|
||||
}
|
||||
return resp
|
||||
},
|
||||
handleGetNewComment(musicInfo, page, limit) {
|
||||
this.isNewLoadError = false
|
||||
this.isNewLoading = true
|
||||
this.getComment(musicInfo, page, limit).then(comment => {
|
||||
this.isNewLoading = false
|
||||
this.total = comment.total
|
||||
this.maxPage = comment.maxPage
|
||||
this.page = page
|
||||
this.newComments = comment.comments
|
||||
this.$nextTick(() => {
|
||||
scrollTo(this.$refs.dom_comment, 0, 300)
|
||||
})
|
||||
}).catch(err => {
|
||||
if (err.message == '取消请求') return
|
||||
this.isNewLoadError = true
|
||||
this.isNewLoading = false
|
||||
})
|
||||
},
|
||||
handleGetHotComment(musicInfo) {
|
||||
this.isHotLoadError = false
|
||||
this.isHotLoading = true
|
||||
this.getHotComment(musicInfo).then(hotComment => {
|
||||
this.isHotLoading = false
|
||||
this.hotComments = hotComment.comments
|
||||
}).catch(err => {
|
||||
if (err.message == '取消请求') return
|
||||
this.isHotLoadError = true
|
||||
this.isHotLoading = false
|
||||
})
|
||||
},
|
||||
handleShowComment() {
|
||||
if (!this.musicInfo.songmid || !music[this.musicInfo.source].comment) return
|
||||
if (this.musicInfo.songmid != this.currentMusicInfo.songmid) {
|
||||
this.page = 1
|
||||
this.total = 0
|
||||
this.maxPage = 1
|
||||
this.nextPage = 1
|
||||
}
|
||||
this.isShowComment = true
|
||||
this.currentMusicInfo = this.musicInfo
|
||||
|
||||
this.handleGetNewComment(this.currentMusicInfo, this.page, this.limit)
|
||||
this.handleGetHotComment(this.currentMusicInfo)
|
||||
},
|
||||
handleToggleCommentPage(page) {
|
||||
this.nextPage = page
|
||||
this.handleGetNewComment(this.currentMusicInfo, page, this.limit)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" module>
|
||||
@import '../../assets/styles/layout.less';
|
||||
|
||||
.comment {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
transition: @transition-theme;
|
||||
transition-property: flex-basis opacity;
|
||||
overflow: hidden;
|
||||
}
|
||||
.commentHeader {
|
||||
flex: none;
|
||||
padding-bottom: 5px;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
// border-bottom: 1px solid #eee;
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
.mixin-ellipsis-1;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
.commentHeaderBtns {
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-end;
|
||||
color: @color-theme;
|
||||
}
|
||||
.commentHeaderBtn {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
cursor: pointer;
|
||||
transition: opacity @transition-theme;
|
||||
|
||||
+.commentHeaderBtn {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
.commentMain {
|
||||
flex: auto;
|
||||
padding-left: 15px;
|
||||
padding-right: 10px;
|
||||
background-color: @color-reply-floor;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.commentLabel {
|
||||
padding: 15px;
|
||||
color: @color-theme_2-font-label;
|
||||
font-size: 14px;
|
||||
}
|
||||
.commentType {
|
||||
padding: 10px 0;
|
||||
font-size: 13px;
|
||||
color: @color-theme_2-font;
|
||||
}
|
||||
.commentFloor {
|
||||
opacity: 1;
|
||||
transition: opacity @transition-theme;
|
||||
|
||||
&.loading {
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
.pagination {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
each(@themes, {
|
||||
:global(#container.@{value}) {
|
||||
.commentHeaderBtns {
|
||||
color: ~'@{color-@{value}-theme}';
|
||||
}
|
||||
.commentMain {
|
||||
background-color: ~'@{color-@{value}-reply-floor}';
|
||||
}
|
||||
.commentLabel {
|
||||
color: ~'@{color-@{value}-theme_2-font-label}';
|
||||
}
|
||||
.commentType {
|
||||
color: ~'@{color-@{value}-theme_2-font}';
|
||||
}
|
||||
}
|
||||
})
|
||||
</style>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"date_format_second": "{num} seconds ago",
|
||||
"date_format_minute": "{num} minutes ago",
|
||||
"date_format_hour": "{num} hours ago"
|
||||
}
|
||||
|
|
@ -27,5 +27,16 @@
|
|||
"play_toggle_mode_random": "List Random",
|
||||
"play_toggle_mode_list": "Play in order",
|
||||
"play_toggle_mode_single_loop": "Single Loop",
|
||||
"play_toggle_mode_off": "Disable"
|
||||
"play_toggle_mode_off": "Disable",
|
||||
|
||||
"comment_show": "Show song comments",
|
||||
"comment_hot_loading": "Hot comments are loading",
|
||||
"comment_new_loading": "Latest comments are loading",
|
||||
"comment_hot_load_error": "Hot comments failed to load, click to try to reload",
|
||||
"comment_new_load_error": "The latest comment failed to load, click to try to reload",
|
||||
"comment_refresh": "Refresh comments",
|
||||
"comment_no_content": "No comments yet",
|
||||
"comment_hot_title": "Hot Comment",
|
||||
"comment_new_title": "Latest comment",
|
||||
"comment_title": "{name} comment"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"date_format_second": "{num}秒前",
|
||||
"date_format_minute": "{num}分钟前",
|
||||
"date_format_hour": "{num}小时前"
|
||||
}
|
||||
|
|
@ -27,5 +27,16 @@
|
|||
"play_toggle_mode_random": "列表随机",
|
||||
"play_toggle_mode_list": "顺序播放",
|
||||
"play_toggle_mode_single_loop": "单曲循环",
|
||||
"play_toggle_mode_off": "禁用"
|
||||
"play_toggle_mode_off": "禁用",
|
||||
|
||||
"comment_show": "显示歌曲评论",
|
||||
"comment_hot_loading": "热门评论加载中",
|
||||
"comment_new_loading": "最新评论加载中",
|
||||
"comment_hot_load_error": "热门评论加载失败，点击尝试重新加载",
|
||||
"comment_new_load_error": "最新评论加载失败，点击尝试重新加载",
|
||||
"comment_refresh": "刷新评论",
|
||||
"comment_no_content": "暂无评论",
|
||||
"comment_hot_title": "热门评论",
|
||||
"comment_new_title": "最新评论",
|
||||
"comment_title": "{name} 的评论"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"date_format_second": "{num}秒前",
|
||||
"date_format_minute": "{num}分鐘前",
|
||||
"date_format_hour": "{num}小時前"
|
||||
}
|
||||
|
|
@ -27,5 +27,16 @@
|
|||
"play_toggle_mode_random": "列表隨機",
|
||||
"play_toggle_mode_list": "順序播放",
|
||||
"play_toggle_mode_single_loop": "單曲循環",
|
||||
"play_toggle_mode_off": "禁用"
|
||||
"play_toggle_mode_off": "禁用",
|
||||
|
||||
"comment_show": "顯示歌曲評論",
|
||||
"comment_hot_loading": "熱門評論加載中",
|
||||
"comment_new_loading": "最新評論加載中",
|
||||
"comment_hot_load_error": "熱門評論加載失敗，點擊嘗試重新加載",
|
||||
"comment_new_load_error": "最新評論加載失敗，點擊嘗試重新加載",
|
||||
"comment_refresh": "刷新評論",
|
||||
"comment_no_content": "暫無評論",
|
||||
"comment_hot_title": "熱門評論",
|
||||
"comment_new_title": "最新評論",
|
||||
"comment_title": "{name} 的評論"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,11 +43,11 @@ export const dateFormat = (date = new Date(), format = 'YYYY-MM-DD hh:mm:ss') =>
|
|||
export const dateFormat2 = time => {
|
||||
let differ = parseInt((Date.now() - time) / 1000)
|
||||
if (differ < 60) {
|
||||
return differ + '秒前'
|
||||
return window.i18n.t('base.date_format_second', { num: differ })
|
||||
} else if (differ < 3600) {
|
||||
return parseInt(differ / 60) + '分钟前'
|
||||
return window.i18n.t('base.date_format_minute', { num: parseInt(differ / 60) })
|
||||
} else if (differ < 86400) {
|
||||
return parseInt(differ / 3600) + '小时前'
|
||||
return window.i18n.t('base.date_format_hour', { num: parseInt(differ / 3600) })
|
||||
} else {
|
||||
return dateFormat(time)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,10 +15,10 @@ export default {
|
|||
const { body, statusCode } = await _requestObj.promise
|
||||
// console.log(body)
|
||||
if (statusCode != 200 || body.err_code !== 0) throw new Error('获取评论失败')
|
||||
return { source: 'kg', comments: this.filterComment(body.list), total: body.count, page, limit, maxPage: Math.ceil(body.count / limit) || 1 }
|
||||
return { source: 'kg', comments: this.filterComment(body.list || []), total: body.count, page, limit, maxPage: Math.ceil(body.count / limit) || 1 }
|
||||
},
|
||||
async getHotComment({ hash, songmid }, page = 1, limit = 100) {
|
||||
console.log(songmid)
|
||||
// console.log(songmid)
|
||||
if (this._requestObj2) this._requestObj2.cancelHttp()
|
||||
|
||||
const _requestObj2 = httpFetch(`http://comment.service.kugou.com/index.php?r=commentsv2/getCommentWithLike&code=fc4be23b4e972707f36b8a828a93ba8a&extdata=${hash}&p=${page}&pagesize=${limit}&ver=1.01&clientver=8373&appid=1001&kugouid=687373022`, {
|
||||
|
|
@ -29,7 +29,7 @@ export default {
|
|||
const { body, statusCode } = await _requestObj2.promise
|
||||
// console.log(body)
|
||||
if (statusCode != 200 || body.err_code !== 0) throw new Error('获取热门评论失败')
|
||||
return { source: 'kg', comments: this.filterComment(body.weightList) }
|
||||
return { source: 'kg', comments: this.filterComment(body.weightList || []) }
|
||||
},
|
||||
async getReplyComment({ songmid }, replyId, page = 1, limit = 100) {
|
||||
if (this._requestObj2) this._requestObj2.cancelHttp()
|
||||
|
|
@ -42,7 +42,7 @@ export default {
|
|||
const { body, statusCode } = await _requestObj2.promise
|
||||
// console.log(body)
|
||||
if (statusCode != 200 || body.err_code !== 0) throw new Error('获取回复评论失败')
|
||||
return { source: 'kg', comments: this.filterComment(body.list) }
|
||||
return { source: 'kg', comments: this.filterComment(body.list || []) }
|
||||
},
|
||||
filterComment(rawList) {
|
||||
return rawList.map(item => {
|
||||
|
|
|
|||
|
|
@ -161,7 +161,7 @@ export default {
|
|||
return {
|
||||
id: item.subcommentid,
|
||||
rootId: item.rootcommentid,
|
||||
text: item.rootcommentcontent ? this.replaceEmoji(item.rootcommentcontent).split('\n') : [],
|
||||
text: item.rootcommentcontent ? this.replaceEmoji(item.rootcommentcontent).replace(/\\\n/g, '\n').split('\n') : [],
|
||||
time,
|
||||
timeStr: time ? dateFormat2(time) : null,
|
||||
userName: item.rootcommentnick ? item.rootcommentnick.substring(1) : '',
|
||||
|
|
@ -172,7 +172,7 @@ export default {
|
|||
let index = c.subcommentid.lastIndexOf('_')
|
||||
return {
|
||||
id: c.subcommentid,
|
||||
text: this.replaceEmoji(c.subcommentcontent).split('\n'),
|
||||
text: this.replaceEmoji(c.subcommentcontent).replace(/\\\n/g, '\n').split('\n'),
|
||||
time: parseInt(c.subcommentid.substring(index + 1) + '000'),
|
||||
timeStr: dateFormat2(parseInt(c.subcommentid.substring(index + 1) + '000')),
|
||||
userName: c.replynick.substring(1),
|
||||
|
|
|
|||
Loading…
Reference in New Issue