|
|
|
|
<!--
|
|
|
|
|
* @Author: ch
|
|
|
|
|
* @Date: 2022-06-24 11:43:04
|
|
|
|
|
* @LastEditors: ch
|
|
|
|
|
* @LastEditTime: 2022-06-27 10:35:22
|
|
|
|
|
* @Description: file content
|
|
|
|
|
-->
|
|
|
|
|
<template>
|
|
|
|
|
<div class="comment-info">
|
|
|
|
|
<div class="side">
|
|
|
|
|
<el-avatar :size="55" :src="commentDetail.userAvatar" />
|
|
|
|
|
<p>{{commentDetail.userName}}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<main>
|
|
|
|
|
<div class="top">
|
|
|
|
|
<el-rate :value="commentDetail.commentScore" disabled/>
|
|
|
|
|
<span class="time">{{commentDetail.createTime}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="sku">已购买:{{commentDetail.skuName}}</p>
|
|
|
|
|
<div class="ctx">{{commentDetail.commentContent}}</div>
|
|
|
|
|
<UiImgs v-if="imgs.length" :list="imgs" class="imgs" />
|
|
|
|
|
<BsCommentFollowInfo v-if="commentDetail.followComment" :followComment="commentDetail.followComment" :commentTime="commentDetail.commentTime"/>
|
|
|
|
|
<div class="operation">
|
|
|
|
|
<div>
|
|
|
|
|
<span class="operation--chat" @click="answerVisible = !answerVisible">
|
|
|
|
|
<template v-if="answerCommentList.length">{{answerCount}}条</template>评论
|
|
|
|
|
</span>
|
|
|
|
|
<span class="operation--show" v-if="answerCommentList.length" @click="answerVisible = !answerVisible">
|
|
|
|
|
{{answerVisible ? '收起' : '展开'}}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="operation--thumb" :class="{'operation--thumb__active':isLike}" @click="handleUseful">{{usefulCount || '有用'}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="answer" v-if="showAnswerBox">
|
|
|
|
|
<b class="answer--title">全部评论({{answerCount}})</b>
|
|
|
|
|
<ul>
|
|
|
|
|
<li class="answer--item" v-if="commentDetail.merchantComment">
|
|
|
|
|
<div class="answer--name"><b>{{commentDetail.merchantComment.userName}}:</b><span>{{commentDetail.merchantComment.createTime}}</span></div>
|
|
|
|
|
<p class="answer--ctx">{{commentDetail.merchantComment.commentContent}}</p>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="answer--item" v-for="(item, idx) in answerCommentList" :key="idx">
|
|
|
|
|
<div class="answer--name">
|
|
|
|
|
<b>{{item.userName}} {{item.parentId !== commentDetail.id ? ` 回复 ${item.parentUserName}` : ''}}:</b>
|
|
|
|
|
<span>{{item.createTime}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="answer--ctx">{{item.commentContent}}</p>
|
|
|
|
|
<span class="answer--answer" @click="handleAnswer(item)">回复</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<div v-if="answerVisible" class="answer--form">
|
|
|
|
|
<input v-model="answerContent" class="answer--input" @keydown="handleClearAnswer" :placeholder="answerPlaceholder"/>
|
|
|
|
|
<UiButton :disabled="!answerContent" @click="handleSubmit"
|
|
|
|
|
radius="4px" class="answer--btn" type="red_panel">发表</UiButton>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<BsCommentSubmit v-if="!commentDetail.id" :commentDetail="commentDetail"/>
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import BsCommentFollowInfo from './BsCommentFollowInfo.vue';
|
|
|
|
|
import {ApiPostComment, ApiPutCommentUseful} from '@/plugins/api/comment';
|
|
|
|
|
import {Debounce } from '@/plugins/utils';
|
|
|
|
|
import UiImgs from './UiImgs.vue';
|
|
|
|
|
import UiButton from './UiButton.vue';
|
|
|
|
|
import BsCommentSubmit from './BsCommentSubmit.vue';
|
|
|
|
|
export default {
|
|
|
|
|
components: { BsCommentFollowInfo, UiImgs, UiButton, BsCommentSubmit },
|
|
|
|
|
props:{
|
|
|
|
|
type:{
|
|
|
|
|
type : String,
|
|
|
|
|
default : 'detail' //edit 可编辑 detail 查看
|
|
|
|
|
},
|
|
|
|
|
commentDetail : {
|
|
|
|
|
type : Object,
|
|
|
|
|
default : () => ({})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data(){
|
|
|
|
|
return {
|
|
|
|
|
answerCommentList : [],
|
|
|
|
|
answerVisible : false,
|
|
|
|
|
answerContent : '',
|
|
|
|
|
answer : null,
|
|
|
|
|
isLike : false,
|
|
|
|
|
usefulCount : 0
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed:{
|
|
|
|
|
showAnswerBox(){
|
|
|
|
|
return (this.commentDetail.merchantComment || this.answerVisible) ? true : false
|
|
|
|
|
},
|
|
|
|
|
answerCount(){
|
|
|
|
|
let count = this.answerCommentList.length;
|
|
|
|
|
if(this.commentDetail.merchantComment){
|
|
|
|
|
count += 1;
|
|
|
|
|
}
|
|
|
|
|
return count
|
|
|
|
|
},
|
|
|
|
|
answerPlaceholder (){
|
|
|
|
|
return this.answer ? `回复:${this.answer.userName}` : '说点什么吧?'
|
|
|
|
|
},
|
|
|
|
|
imgs (){
|
|
|
|
|
let imgs = this.commentDetail.pictureUrl;
|
|
|
|
|
return imgs ? imgs.split(',') : [];
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
watch:{
|
|
|
|
|
commentDetail(){
|
|
|
|
|
this.answerCommentList = this.commentDetail.answerCommentList || [];
|
|
|
|
|
this.isLike = this.commentDetail.isLike;
|
|
|
|
|
this.usefulCount = this.commentDetail.usefulCount;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted(){
|
|
|
|
|
this.answerCommentList = this.commentDetail.answerCommentList || [];
|
|
|
|
|
},
|
|
|
|
|
methods : {
|
|
|
|
|
handleAnswer (item){
|
|
|
|
|
this.answer = item;
|
|
|
|
|
},
|
|
|
|
|
handleClearAnswer(e){
|
|
|
|
|
if(e.code === 'Backspace' && !this.answerContent && this.answer){
|
|
|
|
|
this.answer = null;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async handleSubmit(){
|
|
|
|
|
let data = {
|
|
|
|
|
commentContent : this.answerContent,
|
|
|
|
|
commentType : 3,
|
|
|
|
|
originId : this.commentDetail.id,
|
|
|
|
|
parentId : this.answer ? this.answer.id : this.commentDetail.id
|
|
|
|
|
}
|
|
|
|
|
const {error, result} = await ApiPostComment(data);
|
|
|
|
|
if(error){
|
|
|
|
|
this.$message.error(error.message);
|
|
|
|
|
return false
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
this.answerCommentList.push({
|
|
|
|
|
...result,
|
|
|
|
|
userName : this.$store.state.userInfo.nickname,
|
|
|
|
|
parentName: this.answer ? this.answer.userName : ''
|
|
|
|
|
});
|
|
|
|
|
this.answerContent = '';
|
|
|
|
|
this.$message.success('评论成功!');
|
|
|
|
|
},
|
|
|
|
|
handleUseful(){
|
|
|
|
|
this.isLike = !this.isLike
|
|
|
|
|
if(this.isLike){
|
|
|
|
|
this.usefulCount++;
|
|
|
|
|
}else{
|
|
|
|
|
this.usefulCount--;
|
|
|
|
|
}
|
|
|
|
|
if(!this.debounce){
|
|
|
|
|
this.debounce = Debounce(this.updateUseFul, 500);
|
|
|
|
|
}
|
|
|
|
|
this.debounce();
|
|
|
|
|
},
|
|
|
|
|
async updateUseFul(){
|
|
|
|
|
if(this.isLike === this.commentDetail.isLike){
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
const {error, result} = await ApiPutCommentUseful({
|
|
|
|
|
commentId : this.commentDetail.id,
|
|
|
|
|
isLike : this.isLike
|
|
|
|
|
});
|
|
|
|
|
this.commentDetail.isLike = this.isLike;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.comment-info{
|
|
|
|
|
display: flex;
|
|
|
|
|
border-top: 1px solid #f2f2f2;
|
|
|
|
|
padding: 35px 20px 50px 0;
|
|
|
|
|
main{
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.side{
|
|
|
|
|
width: 170px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.top{
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
.time, .sku{
|
|
|
|
|
color: #999;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
.ctx{
|
|
|
|
|
word-break: break-all;
|
|
|
|
|
line-height: 24px;
|
|
|
|
|
margin-top: 8px;
|
|
|
|
|
}
|
|
|
|
|
.imgs{
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
.follow{
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
&--title{
|
|
|
|
|
color: #FF6A19;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.operation{
|
|
|
|
|
color: #999;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
&--show{
|
|
|
|
|
color: #3083FF;
|
|
|
|
|
margin-left: 28px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
&--chat,&--thumb{
|
|
|
|
|
background: url('@/assets/img/comment/chat.png') no-repeat left center;
|
|
|
|
|
background-size: 16px;
|
|
|
|
|
padding-left: 24px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
&__active,&:hover{
|
|
|
|
|
background-image: url('@/assets/img/comment/chat_active.png');
|
|
|
|
|
color: #FF6A19;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&--thumb{
|
|
|
|
|
background-image: url('@/assets/img/comment/thumb.png');
|
|
|
|
|
&__active,&:hover{
|
|
|
|
|
background-image: url('@/assets/img/comment/thumb_active.png');
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.answer{
|
|
|
|
|
background: #F8F8F8;
|
|
|
|
|
margin-top: 14px;
|
|
|
|
|
padding: 0 24px 20px;
|
|
|
|
|
&--item{
|
|
|
|
|
border-top: 1px solid #eee;
|
|
|
|
|
padding: 20px 0;
|
|
|
|
|
}
|
|
|
|
|
&--title{
|
|
|
|
|
height: 54px;
|
|
|
|
|
line-height: 54px;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
&--name{
|
|
|
|
|
color: #999;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
&--ctx{
|
|
|
|
|
color: #666;
|
|
|
|
|
margin: 15px 0 0;
|
|
|
|
|
}
|
|
|
|
|
&--answer{
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #666;
|
|
|
|
|
text-align: right;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
display: block;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
&--form{
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
&--input{
|
|
|
|
|
flex: 1;
|
|
|
|
|
height: 40px;
|
|
|
|
|
border: 1px solid #eee;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
margin-right: 15px;
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
}
|
|
|
|
|
&--btn{
|
|
|
|
|
height: 40px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|