ion/Melo
1
0
Fork 0
Code Issues Pull Requests Actions 11 Packages Projects Releases Wiki Activity

完善评论功能

Browse Source
This commit is contained in:
lyswhut
2020-10-24 02:08:31 +08:00
parent aa948b0149
commit 8d8cabd5b3
22 changed files with 753 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/core/Icons.vue
+3
View File
@@ -206,5 +206,8 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
path(d='M256,170s-62.469-76.808-141-24C44.762,222.824,84.909,325.08,256,415c21.339-8.361,44-17,44-17,19-6.392,28.155,20.742,16,26-27.589,11.935,5.974-4.141-60,28C-35.524,313.85,43.993,149.031,95,117c86.8-65.89,162,10,162,10s58.158-60.523,140-23c104.032,58.528,64,161.9,45,196-9.152,15.154-39.559-4.159-32-16,20.34-37.888,45.522-107.349-25-150C314.919,103.92,256,170,256,170Z')
path(d='M383,368c-8.1.01-24.77-.155-40,0-15.713.16-15.282,34.964,0,35,15.1,0.035,40,0,40,0s-0.068,42.8,0,48c0.208,15.961,32.261,15.791,32-1-0.072-4.649,0-47,0-47s38.008-.031,43,0c15.732,0.046,14.947-33.98-1-34-4.884.093-42,0-42,0s-0.053-28.341,0-46c0.046-15.189-32.028-15.512-32,0C383.027,337.74,382.782,365.139,383,368Z')
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')
</template>
src/renderer/components/core/Player.vue
+2 -1
View File
@@ -63,7 +63,7 @@ div(:class="$style.player")
//- transition(enter-active-class="animated lightSpeedIn"
transition(enter-active-class="animated lightSpeedIn"
leave-active-class="animated slideOutDown")
core-player-detail(v-if="isShowPlayerDetail" :musicInfo="musicInfo"
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")
@@ -767,6 +767,7 @@ export default {
})
},
showPlayerDetail() {
if (!this.targetSong) return
this.visiblePlayerDetail(true)
},
handleTransitionEnd(e) {
src/renderer/components/core/PlayerDetail.vue
+77 -105
View File
@@ -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="isShowComment = true")
div(:class="$style.description" @click="handleShowComment")
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}}
@@ -35,15 +35,15 @@
div(:class="$style.comment")
div(:class="$style.commentHeader" @click="isShowComment = false")
h3 {{title}}
div.scroll(:class="$style.commentMain")
div
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" :limit="comment.limit" :page="comment.page" @btn-click="handleToggleCommentPage")
material-pagination(:count="comment.total" :btnLength="5" :limit="comment.limit" :page="comment.page" @btn-click="handleToggleCommentPage")
div(:class="$style.footer")
div(:class="$style.left")
@@ -80,6 +80,7 @@
import { mapGetters, mapMutations } from 'vuex'
import { base as eventBaseName } from '../../event/names'
import { scrollTo } from '../../utils'
import music from '../../utils/music'
let cancelScrollFn = null
@@ -219,106 +220,45 @@ export default {
isSetedLines: false,
isShowComment: false,
comment: {
musicInfo: {
name: '',
singer: '',
},
page: 1,
total: 10,
maxPage: 1,
limit: 5,
comments: [{
text: ['123123hhh'],
userName: 'dsads',
avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg',
time: '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',
likedCount: 100,
},
],
}, {
text: ['123123hhh'],
userName: 'dsads',
avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg',
time: '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',
likedCount: 100,
},
{
text: ['123123hhh'],
userName: 'dsads',
avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg',
time: '2020-10-22 22:14:17',
likedCount: 100,
},
],
}, {
text: ['123123hhh'],
userName: 'dsads',
avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg',
time: '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',
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',
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',
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',
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',
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',
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',
likedCount: 100,
},
],
}],
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,
// },
// ],
// },
],
},
}
},
@@ -340,8 +280,8 @@ export default {
...mapGetters(['setting']),
...mapGetters('player', ['isShowPlayerDetail']),
title() {
return this.musicInfo.name
? this.setting.download.fileName.replace('歌名', this.musicInfo.name).replace('歌手', this.musicInfo.singer)
return this.comment.musicInfo.name
? this.setting.download.fileName.replace('歌名', this.comment.musicInfo.name).replace('歌手', this.comment.musicInfo.singer)
: '^-^'
},
},
@@ -445,8 +385,40 @@ 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
})
})
})
},
},
}
@@ -596,7 +568,7 @@ export default {
}
}
.left {
flex: auto;
flex: 40%;
display: flex;
flex-flow: column nowrap;
align-items: center;
src/renderer/components/material/CommentFloor.vue
+19 -8
View File
@@ -7,10 +7,13 @@
img( :class="$style.avatar" :src="item.avatar || commentDefImg" @error="handleUserImg")
div(:class="$style.right")
div(:class="$style.info")
div(:class="$style.name") {{item.userName}}
time(:class="$style.time") {{timeFormat(item.time)}}
div(:class="$style.likes") {{item.likedCount}}
div(:class="$style.comment_text")
div.select(:class="$style.name") {{item.userName}}
time(:class="$style.time" v-if="item.timeStr") {{timeFormat(item.timeStr)}}
div(:class="$style.likes" v-if="item.likedCount != null")
svg(:class="$style.likesIcon" 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-thumbs-up')
| {{item.likedCount}}
div.select(:class="$style.comment_text")
p(v-for="text in item.text") {{text}}
material-comment-floor(v-if="item.reply && item.reply.length" :class="$style.reply_floor" :comments="item.reply")
</template>
@@ -84,7 +87,7 @@ export default {
min-width: 0;
}
.name {
flex: auto;
flex: 0 1 auto;
min-width: 0;
.mixin-ellipsis-1;
}
@@ -92,21 +95,29 @@ export default {
flex: none;
color: @color-theme_2-font-label;
font-size: 11px;
margin-left: 10px;
margin-left: 5px;
}
.likes {
flex: none;
flex: 1 0 auto;
margin-left: 10px;
color: @color-theme_2-font-label;
font-size: 11px;
align-self: flex-end;
text-align: right;
}
.likesIcon {
width: 12px;
height: 12px;
margin-right: 3px;
color: @color-theme-active;
}
.comment_text {
text-align: justify;
font-size: 14px;
padding-top: 8px;
p {
line-height: 1.5;
margin-top: 8px;
word-break: break-all;
}
}