|
|
|
|
@ -4,7 +4,7 @@ |
|
|
|
|
class="m-b-20"> |
|
|
|
|
<div class="flex-between"> |
|
|
|
|
<el-page-header @back="goBack" |
|
|
|
|
:content="curriculumName"></el-page-header> |
|
|
|
|
:content="courseName"></el-page-header> |
|
|
|
|
</div> |
|
|
|
|
</el-card> |
|
|
|
|
<el-card shadow="hover" |
|
|
|
|
@ -223,30 +223,46 @@ |
|
|
|
|
<div class="page"> |
|
|
|
|
<quill ref="quill" |
|
|
|
|
:border="true" |
|
|
|
|
v-model="msg" |
|
|
|
|
v-model="comment" |
|
|
|
|
:height="150" |
|
|
|
|
:toTop="false" /> |
|
|
|
|
<div class="m-t-10 text-right"> |
|
|
|
|
<el-button type="primary" |
|
|
|
|
size="mini" |
|
|
|
|
@click="submitComment(0)">提交</el-button> |
|
|
|
|
</div> |
|
|
|
|
<ul class="msg"> |
|
|
|
|
<li v-for="(item, i) in msgs" |
|
|
|
|
:key="i"> |
|
|
|
|
<li v-for="(item, i) in comments" |
|
|
|
|
:key="i" |
|
|
|
|
:id="'comment' + item.commentId"> |
|
|
|
|
<div class="li-wrap"> |
|
|
|
|
<img :src="item.avatar" |
|
|
|
|
<img :src="item.createUserAvatars" |
|
|
|
|
alt="" |
|
|
|
|
class="avatar"> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<h6> |
|
|
|
|
<span class="name">{{ item.userName }}</span> |
|
|
|
|
发表于 {{ item.createDate }} |
|
|
|
|
<span class="name">{{ item.createUsername }}</span> |
|
|
|
|
发表于 {{ item.createTime }} |
|
|
|
|
</h6> |
|
|
|
|
<div class="des" |
|
|
|
|
v-html="item.content"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="action"> |
|
|
|
|
<i class="icon el-icon-chat-dot-square"></i> |
|
|
|
|
<i class="icon el-icon-delete"></i> |
|
|
|
|
<img class="icon" |
|
|
|
|
<i class="icon el-icon-chat-dot-square" |
|
|
|
|
@click="showReplay(item)"></i> |
|
|
|
|
<i v-if="deleteIdentity || item.currentAccountId == item.createAccountId" |
|
|
|
|
class="icon el-icon-delete" |
|
|
|
|
@click="delComment(item)"></i> |
|
|
|
|
<img v-if="item.isLike" |
|
|
|
|
class="icon" |
|
|
|
|
src="@/assets/img/like-up.png" |
|
|
|
|
alt="" |
|
|
|
|
@click="like(item)"> |
|
|
|
|
<img v-else |
|
|
|
|
class="icon" |
|
|
|
|
src="@/assets/img/like.png" |
|
|
|
|
alt=""> |
|
|
|
|
alt="" |
|
|
|
|
@click="like(item)"> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="reply" |
|
|
|
|
@ -257,29 +273,41 @@ |
|
|
|
|
:height="150" /> |
|
|
|
|
<div class="m-t-10 text-right"> |
|
|
|
|
<el-button type="primary" |
|
|
|
|
size="mini">提交</el-button> |
|
|
|
|
size="mini" |
|
|
|
|
@click="submitComment(item)">提交</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<ul class="msg children" |
|
|
|
|
v-if="item.showChildren"> |
|
|
|
|
<li v-for="(reply,i) in item.children" |
|
|
|
|
:key="i"> |
|
|
|
|
:key="i" |
|
|
|
|
:id="'comment' + reply.commentId"> |
|
|
|
|
<div class="li-wrap"> |
|
|
|
|
<img class="avatar" |
|
|
|
|
:src="reply.avatar" |
|
|
|
|
:src="reply.createUserAvatars" |
|
|
|
|
alt=""> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<div class="name">{{reply.userName}}</div> |
|
|
|
|
<div class="name">{{reply.createUsername}}</div> |
|
|
|
|
<div class="des" |
|
|
|
|
v-html="reply.content"></div> |
|
|
|
|
<div class="date">{{reply.createDate}}</div> |
|
|
|
|
<div class="date">{{reply.createTime}}</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="action"> |
|
|
|
|
<i class="icon el-icon-chat-dot-square"></i> |
|
|
|
|
<i class="icon el-icon-delete"></i> |
|
|
|
|
<img class="icon" |
|
|
|
|
<i class="icon el-icon-chat-dot-square" |
|
|
|
|
@click="showReplay(reply)"></i> |
|
|
|
|
<i v-if="deleteIdentity || reply.currentAccountId == reply.createAccountId" |
|
|
|
|
class="icon el-icon-delete" |
|
|
|
|
@click="delComment(reply)"></i> |
|
|
|
|
<img v-if="reply.isLike" |
|
|
|
|
class="icon" |
|
|
|
|
src="@/assets/img/like-up.png" |
|
|
|
|
alt="" |
|
|
|
|
@click="like(reply)"> |
|
|
|
|
<img v-else |
|
|
|
|
class="icon" |
|
|
|
|
src="@/assets/img/like.png" |
|
|
|
|
alt=""> |
|
|
|
|
alt="" |
|
|
|
|
@click="like(reply)"> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="reply" |
|
|
|
|
@ -290,7 +318,8 @@ |
|
|
|
|
:height="150" /> |
|
|
|
|
<div class="m-t-10 text-right"> |
|
|
|
|
<el-button type="primary" |
|
|
|
|
size="mini">提交</el-button> |
|
|
|
|
size="mini" |
|
|
|
|
@click="submitComment(item, reply)">提交</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
@ -366,6 +395,8 @@ export default { |
|
|
|
|
courseId: this.$route.query.courseId, |
|
|
|
|
mallId: this.$route.query.mallId || '', |
|
|
|
|
curriculumName: this.$route.query.curriculumName, |
|
|
|
|
commentId: this.$route.query.commentId, // 从右上角消息通知点进来用来定位评论的 |
|
|
|
|
notifyId: this.$route.query.notifyId, |
|
|
|
|
chapter: this.$route.query.chapter, |
|
|
|
|
section: this.$route.query.section, |
|
|
|
|
fromAdmin: this.$route.query.admin, // 是否从产品中心or实验台进来 |
|
|
|
|
@ -415,10 +446,10 @@ export default { |
|
|
|
|
id: 2, |
|
|
|
|
name: '课程笔记' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 3, |
|
|
|
|
name: '全国排行榜' |
|
|
|
|
}, |
|
|
|
|
// { |
|
|
|
|
// id: 3, |
|
|
|
|
// name: '全国排行榜' |
|
|
|
|
// }, |
|
|
|
|
{ |
|
|
|
|
id: 4, |
|
|
|
|
name: '教学互动' |
|
|
|
|
@ -436,27 +467,10 @@ export default { |
|
|
|
|
noteContent: '', |
|
|
|
|
noteName: '', |
|
|
|
|
}, |
|
|
|
|
msg: '', |
|
|
|
|
msgs: [ |
|
|
|
|
{ |
|
|
|
|
avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png', |
|
|
|
|
createDate: '2023-04-28 12:41:10', |
|
|
|
|
userName: '刘恒', |
|
|
|
|
content: '基础、个人、增值', |
|
|
|
|
showReply: false, |
|
|
|
|
getCommentReplyNum: 1, |
|
|
|
|
showChildren: false, |
|
|
|
|
children: [ |
|
|
|
|
{ |
|
|
|
|
avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png', |
|
|
|
|
createDate: '2023-04-29 09:22:13', |
|
|
|
|
userName: '公瑾', |
|
|
|
|
content: '基础、个人、增值', |
|
|
|
|
showReply: false, |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
comments: [], |
|
|
|
|
comment: '', |
|
|
|
|
deleteIdentity: false, |
|
|
|
|
archProject: '' |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
computed: { |
|
|
|
|
@ -477,6 +491,7 @@ export default { |
|
|
|
|
this.getData(); |
|
|
|
|
this.addRecord() |
|
|
|
|
this.getNote() |
|
|
|
|
this.getComment() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
goBack () { |
|
|
|
|
@ -517,7 +532,7 @@ export default { |
|
|
|
|
const chapter = this.chapter === undefined ? 0 : +this.chapter |
|
|
|
|
const section = this.section === undefined ? 0 : +this.section |
|
|
|
|
const clist = this.chapterList[chapter] |
|
|
|
|
if (this.chapterList.length && clist.subsectionList && clist.subsectionList.length) { |
|
|
|
|
if (this.chapterList.length && clist.subsectionList && clist.subsectionList.length && !this.commentId) { |
|
|
|
|
this.preview(clist.subsectionList[section], clist.name, 1); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
@ -583,6 +598,75 @@ export default { |
|
|
|
|
this.noteForm = JSON.parse(JSON.stringify(row)) |
|
|
|
|
this.showNoteAdd = true |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 教学互动列表 |
|
|
|
|
getComment () { |
|
|
|
|
this.$get(this.api.commentTreeList, { |
|
|
|
|
cid: this.courseId, |
|
|
|
|
}).then(res => { |
|
|
|
|
this.deleteIdentity = res.deleteIdentity |
|
|
|
|
const list = res.rootComments |
|
|
|
|
this.handleComments(list) |
|
|
|
|
this.comments = list |
|
|
|
|
if (this.commentId) { |
|
|
|
|
this.active = 4 |
|
|
|
|
this.$nextTick(async () => { |
|
|
|
|
document.getElementById('comment' + this.commentId).scrollIntoView(false) |
|
|
|
|
await this.$post(`${this.api.noticeRead}?isRead=1¬ifyId=${this.notifyId}`) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}, |
|
|
|
|
// 递归处理评论参数 |
|
|
|
|
handleComments (list, parent = {}) { |
|
|
|
|
list.forEach(e => { |
|
|
|
|
if (!e.createUserAvatars) e.createUserAvatars = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' |
|
|
|
|
e.getCommentReplyNum = e.children && e.children.length |
|
|
|
|
e.showChildren = false |
|
|
|
|
if (e.commentId == this.commentId) parent.showChildren = true |
|
|
|
|
e.showReply = false |
|
|
|
|
e.replyContent = '' |
|
|
|
|
e.children && this.handleComments(e.children, e) |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 回复 |
|
|
|
|
showReplay (row) { |
|
|
|
|
row.showReply = !row.showReply |
|
|
|
|
}, |
|
|
|
|
// 删除评论 |
|
|
|
|
delComment (row) { |
|
|
|
|
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", { |
|
|
|
|
type: "warning" |
|
|
|
|
}).then(() => { |
|
|
|
|
this.$post(`${this.api.deleteAComment}?commentId=${row.commentId}`).then(res => { |
|
|
|
|
util.successMsg("删除成功"); |
|
|
|
|
this.getComment(); |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}).catch(() => { }) |
|
|
|
|
}, |
|
|
|
|
// 保存评论 |
|
|
|
|
submitComment (row, reply) { |
|
|
|
|
const content = reply ? reply.replyContent : row ? row.replyContent : this.comment |
|
|
|
|
if (!content) return util.errorMsg('请输入内容！') |
|
|
|
|
this.$post(this.api.addCommentStation, { |
|
|
|
|
cid: this.courseId, |
|
|
|
|
content, |
|
|
|
|
pid: row ? row.commentId : 0, |
|
|
|
|
replyAccountId: row.createAccountId || '', |
|
|
|
|
status: reply ? 2 : 1 |
|
|
|
|
}).then(res => { |
|
|
|
|
this.comment = '' |
|
|
|
|
this.getComment() |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}, |
|
|
|
|
// 评论点赞 |
|
|
|
|
like (row) { |
|
|
|
|
this.$post(`${this.api[row.isLike ? 'unlike' : 'commentAndLike']}?commentId=${row.commentId}`).then(res => { |
|
|
|
|
row.isLike = row.isLike ? 0 : 1 |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 插入阿里云播放器脚本 |
|
|
|
|
insertScript () { |
|
|
|
|
const linkTag = document.createElement("link"); |
|
|
|
|
@ -1165,4 +1249,29 @@ $height: 700px; |
|
|
|
|
color: #333; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.rank { |
|
|
|
|
width: 296px; |
|
|
|
|
padding: 20px; |
|
|
|
|
margin: 12px 0 0 12px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
.arches { |
|
|
|
|
margin-top: 20px; |
|
|
|
|
} |
|
|
|
|
.line { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
align-items: center; |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
} |
|
|
|
|
.avatar { |
|
|
|
|
width: 35px; |
|
|
|
|
height: 35px; |
|
|
|
|
margin-right: 10px; |
|
|
|
|
} |
|
|
|
|
.point { |
|
|
|
|
font-weight: 600; |
|
|
|
|
color: #007eff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
