|
|
|
|
@ -1,6 +1,7 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="wrap"> |
|
|
|
|
<breadcrumb :data="'实验台/' + curriculumName"></breadcrumb> |
|
|
|
|
<breadcrumb ref="breadcrumb" |
|
|
|
|
:data="'实验台/' + courseName"></breadcrumb> |
|
|
|
|
<div class="flex"> |
|
|
|
|
<div class="cover" |
|
|
|
|
:class="{'is-word': showMask1}"> |
|
|
|
|
@ -152,15 +153,15 @@ |
|
|
|
|
:class="{active: item.id == active}" |
|
|
|
|
@click="tabChange(item)">{{ item.name }}</a> |
|
|
|
|
</div> |
|
|
|
|
<div class="tab-content"> |
|
|
|
|
<template v-if="active === 1"> |
|
|
|
|
<div class="page"> |
|
|
|
|
<div class="flex"> |
|
|
|
|
<div class="tab-content"> |
|
|
|
|
<div v-if="active === 1" |
|
|
|
|
class="page"> |
|
|
|
|
<p class="intro" |
|
|
|
|
v-html="briefIntroduction"></p> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<template v-if="active === 2"> |
|
|
|
|
<div class="page"> |
|
|
|
|
<div v-if="active === 2" |
|
|
|
|
class="page"> |
|
|
|
|
<template v-if="showNoteAdd"> |
|
|
|
|
<el-form class="form" |
|
|
|
|
ref="form" |
|
|
|
|
@ -223,9 +224,8 @@ |
|
|
|
|
</el-timeline> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<template v-if="active === 4"> |
|
|
|
|
<div class="page"> |
|
|
|
|
<div v-if="active === 4" |
|
|
|
|
class="page"> |
|
|
|
|
<quill ref="quill" |
|
|
|
|
:border="true" |
|
|
|
|
v-model="comment" |
|
|
|
|
@ -238,9 +238,10 @@ |
|
|
|
|
</div> |
|
|
|
|
<ul class="msg"> |
|
|
|
|
<li v-for="(item, i) in comments" |
|
|
|
|
:key="i"> |
|
|
|
|
:key="i" |
|
|
|
|
:id="'comment' + item.commentId"> |
|
|
|
|
<div class="li-wrap"> |
|
|
|
|
<img :src="item.avatar" |
|
|
|
|
<img :src="item.createUserAvatars" |
|
|
|
|
alt="" |
|
|
|
|
class="avatar"> |
|
|
|
|
<div class="texts"> |
|
|
|
|
@ -248,13 +249,14 @@ |
|
|
|
|
<span class="name">{{ item.createUsername }}</span> |
|
|
|
|
发表于 {{ item.createTime }} |
|
|
|
|
</h6> |
|
|
|
|
<div class="des" |
|
|
|
|
<div class="m-t-8" |
|
|
|
|
v-html="item.content"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="action"> |
|
|
|
|
<i class="icon el-icon-chat-dot-square" |
|
|
|
|
@click="showReplay(item)"></i> |
|
|
|
|
<i class="icon el-icon-delete" |
|
|
|
|
<i v-if="deleteIdentity || item.currentAccountId == item.createAccountId" |
|
|
|
|
class="icon el-icon-delete" |
|
|
|
|
@click="delComment(item)"></i> |
|
|
|
|
<img v-if="item.isLike" |
|
|
|
|
class="icon" |
|
|
|
|
@ -266,6 +268,7 @@ |
|
|
|
|
src="@/assets/img/like.png" |
|
|
|
|
alt="" |
|
|
|
|
@click="like(item)"> |
|
|
|
|
{{ item.likeCount || '' }} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="reply" |
|
|
|
|
@ -283,32 +286,42 @@ |
|
|
|
|
<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.createUsername}}</div> |
|
|
|
|
<div class="des" |
|
|
|
|
v-html="reply.content"></div> |
|
|
|
|
<div class="flex m-v-8"> |
|
|
|
|
<template v-if="reply.showReplyName"> |
|
|
|
|
回复 |
|
|
|
|
<span class="reply-name">@{{ reply.replyUsername }}：</span> |
|
|
|
|
</template> |
|
|
|
|
<div class="des" |
|
|
|
|
v-html="reply.content"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="date">{{reply.createTime}}</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="action"> |
|
|
|
|
<i class="icon el-icon-chat-dot-square" |
|
|
|
|
@click="showReplay(reply)"></i> |
|
|
|
|
<i class="icon el-icon-delete" |
|
|
|
|
<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)"> |
|
|
|
|
<template v-if="reply.isLike"> |
|
|
|
|
<img class="icon" |
|
|
|
|
src="@/assets/img/like-up.png" |
|
|
|
|
alt="" |
|
|
|
|
@click="like(item, reply)"> |
|
|
|
|
{{ reply.likeCount }} |
|
|
|
|
</template> |
|
|
|
|
<img v-else |
|
|
|
|
class="icon" |
|
|
|
|
src="@/assets/img/like.png" |
|
|
|
|
alt="" |
|
|
|
|
@click="like(reply)"> |
|
|
|
|
@click="like(item, reply)"> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="reply" |
|
|
|
|
@ -325,12 +338,37 @@ |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
<div v-if="item.getCommentReplyNum" |
|
|
|
|
class="toggle"><span @click="item.showChildren = !item.showChildren">{{item.showChildren ? '收起所有回复' : `查看所有${item.getCommentReplyNum}条回复`}} <i class="el-icon-arrow-down"></i></span></div> |
|
|
|
|
<div v-if="item.children" |
|
|
|
|
class="toggle"><span @click="item.showChildren = !item.showChildren">{{item.showChildren ? '收起所有回复' : `查看所有${item.children.length}条回复`}} <i class="el-icon-arrow-down"></i></span></div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
<div class="rank"> |
|
|
|
|
<el-select style="width: 100%" |
|
|
|
|
v-model="archProject" |
|
|
|
|
placeholder="请选择" |
|
|
|
|
@change="getMaximumScore"> |
|
|
|
|
<el-option v-for="(item, i) in progressList" |
|
|
|
|
:key="i" |
|
|
|
|
:label="item.projectName" |
|
|
|
|
:value="item.projectId"></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
<div v-if="maximumScores.length" |
|
|
|
|
class="arches"> |
|
|
|
|
<div v-for="(item, i) in maximumScores" |
|
|
|
|
:key="i" |
|
|
|
|
class="line"> |
|
|
|
|
<div> |
|
|
|
|
<img :src="item.userAvatars" |
|
|
|
|
alt="" |
|
|
|
|
class="avatar"> |
|
|
|
|
<span class="name">{{ item.userName }}</span> |
|
|
|
|
</div> |
|
|
|
|
<span class="point">{{ item.highestScore }}分</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<el-dialog title="请选择项目" |
|
|
|
|
@ -391,12 +429,14 @@ export default { |
|
|
|
|
components: { pdf, breadcrumb, pdfDia, quill, Editor }, |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
mallId: this.$route.query.mallId || '', |
|
|
|
|
mallId: '', |
|
|
|
|
courseId: '', |
|
|
|
|
curriculumName: '', |
|
|
|
|
commentId: '', // 从右上角消息通知点进来用来定位评论的 |
|
|
|
|
notifyId: '', |
|
|
|
|
editorConfig, |
|
|
|
|
startTime: Date.now(), // 页面进来的时间 |
|
|
|
|
systemIds: '', |
|
|
|
|
courseId: +this.$route.query.courseId, |
|
|
|
|
curriculumName: this.$route.query.curriculumName, |
|
|
|
|
type: 1, |
|
|
|
|
video: "http://liuwanr.oss-cn-shenzhen.aliyuncs.com/mp4/20200519/1589871025648.mp4", |
|
|
|
|
chapterList: [], // 章节列表 |
|
|
|
|
@ -417,10 +457,10 @@ export default { |
|
|
|
|
id: 2, |
|
|
|
|
name: '课程笔记' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 3, |
|
|
|
|
name: '全国排行榜' |
|
|
|
|
}, |
|
|
|
|
// { |
|
|
|
|
// id: 3, |
|
|
|
|
// name: '全国排行榜' |
|
|
|
|
// }, |
|
|
|
|
{ |
|
|
|
|
id: 4, |
|
|
|
|
name: '教学互动' |
|
|
|
|
@ -465,6 +505,10 @@ export default { |
|
|
|
|
}, |
|
|
|
|
comments: [], |
|
|
|
|
comment: '', |
|
|
|
|
deleteIdentity: false, |
|
|
|
|
archProject: '', |
|
|
|
|
curReplyId: '', |
|
|
|
|
maximumScores: [] |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
computed: { |
|
|
|
|
@ -473,6 +517,17 @@ export default { |
|
|
|
|
]) |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
'$route': { |
|
|
|
|
handler () { |
|
|
|
|
this.mallId = this.$route.query.mallId || '' |
|
|
|
|
this.courseId = +this.$route.query.courseId |
|
|
|
|
this.curriculumName = this.$route.query.curriculumName |
|
|
|
|
this.commentId = this.$route.query.commentId // 从右上角消息通知点进来用来定位评论的 |
|
|
|
|
this.notifyId = this.$route.query.notifyId |
|
|
|
|
this.init() |
|
|
|
|
}, |
|
|
|
|
immediate: true |
|
|
|
|
}, |
|
|
|
|
noteKeyword: function (val) { |
|
|
|
|
clearTimeout(this.searchTimer); |
|
|
|
|
this.searchTimer = setTimeout(() => { |
|
|
|
|
@ -481,24 +536,7 @@ export default { |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted () { |
|
|
|
|
this.insertScript(); |
|
|
|
|
this.getData(); |
|
|
|
|
this.addRecord() |
|
|
|
|
this.getNote() |
|
|
|
|
this.getComment() |
|
|
|
|
var arr6 = [1, 2, [3, 4, [5, 6]]]; |
|
|
|
|
function flatten (arr) { |
|
|
|
|
var result = []; |
|
|
|
|
for (var i = 0; i < arr.length; i++) { |
|
|
|
|
if (Array.isArray(arr[i])) { |
|
|
|
|
result = result.concat(flatten(arr[i])) |
|
|
|
|
} else { |
|
|
|
|
result.push(arr[i]); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
return result; |
|
|
|
|
} |
|
|
|
|
console.log(11, flatten(arr6)) |
|
|
|
|
this.init() |
|
|
|
|
}, |
|
|
|
|
destroyed () { |
|
|
|
|
// 记录播放时长 |
|
|
|
|
@ -512,9 +550,17 @@ export default { |
|
|
|
|
goBack () { |
|
|
|
|
this.$router.push('/station') |
|
|
|
|
}, |
|
|
|
|
init () { |
|
|
|
|
this.insertScript(); |
|
|
|
|
this.getData(); |
|
|
|
|
this.addRecord() |
|
|
|
|
this.getNote() |
|
|
|
|
this.getComment() |
|
|
|
|
}, |
|
|
|
|
async getData () { |
|
|
|
|
let { data } = await this.$post(`${this.api.curriculumDetail}?cid=${this.courseId}&mallId=${this.mallId}`); |
|
|
|
|
this.courseName = data.curriculumName; |
|
|
|
|
this.$refs.breadcrumb.update('实验台/' + data.curriculumName) |
|
|
|
|
// this.coverUrl = data.coverUrl; |
|
|
|
|
this.briefIntroduction = data.briefIntroduction; |
|
|
|
|
this.teachingObjectives = data.teachingObjectives; |
|
|
|
|
@ -541,17 +587,29 @@ export default { |
|
|
|
|
async getChapter () { |
|
|
|
|
let res = await this.$get(`${this.api.curriculumChapter}/${this.courseId}`); |
|
|
|
|
this.chapterList = res.chapterList; |
|
|
|
|
if (this.chapterList.length && this.chapterList[0].subsectionList && this.chapterList[0].subsectionList.length) { |
|
|
|
|
this.preview(this.chapterList[0].subsectionList[0], this.chapterList[0].name, 1); |
|
|
|
|
if (this.chapterList.length && this.chapterList[0].subsectionList && this.chapterList[0].subsectionList.length && !this.commentId) { |
|
|
|
|
// this.preview(this.chapterList[0].subsectionList[0], this.chapterList[0].name, 1); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 获取学习进度 |
|
|
|
|
async getProgress () { |
|
|
|
|
let res = await this.$post(`${this.api.courseLearningProgress}?courseId=${this.courseId}&systemId=${this.systemIds}`); |
|
|
|
|
this.progressList = res.list |
|
|
|
|
if (res.list.length) this.archProject = res.list[0].projectId |
|
|
|
|
this.maximumScores.length || this.getMaximumScore() |
|
|
|
|
this.plan = res.plan |
|
|
|
|
this.schedule = +(res.schedule.replace('%', '')) |
|
|
|
|
}, |
|
|
|
|
// 获取最高分列表 |
|
|
|
|
async getMaximumScore () { |
|
|
|
|
let { message } = await this.$post(`${this.api.maximumPracticeScoreList}?projectId=${this.archProject}&pageNum=1&pageSize=1000`); |
|
|
|
|
const list = message.records |
|
|
|
|
list.forEach(e => { |
|
|
|
|
if (!e.userAvatars) e.userAvatars = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' |
|
|
|
|
}) |
|
|
|
|
this.maximumScores = list |
|
|
|
|
console.log("🚀 ~ file: index.vue:604 ~ getMaximumScore ~ this.maximumScores:", this.maximumScores) |
|
|
|
|
}, |
|
|
|
|
// 进度数字自定义 |
|
|
|
|
percentFormat (val) { |
|
|
|
|
return this.plan |
|
|
|
|
@ -612,21 +670,41 @@ export default { |
|
|
|
|
this.$get(this.api.commentTreeList, { |
|
|
|
|
cid: this.courseId, |
|
|
|
|
}).then(res => { |
|
|
|
|
this.deleteIdentity = res.deleteIdentity |
|
|
|
|
const list = res.rootComments |
|
|
|
|
this.handleComments(list) |
|
|
|
|
// console.log("🚀 ~ file: index.vue:590 ~ getComment ~ list:", list, l) |
|
|
|
|
this.comments = list |
|
|
|
|
this.$nextTick(async () => { |
|
|
|
|
if (this.curReplyId) { |
|
|
|
|
const el = document.querySelector('#comment' + this.curReplyId) |
|
|
|
|
el && el.scrollIntoView(false) |
|
|
|
|
} |
|
|
|
|
if (this.commentId) { |
|
|
|
|
this.active = 4 |
|
|
|
|
const el = document.getElementById('comment' + this.commentId) |
|
|
|
|
el && el.scrollIntoView(false) |
|
|
|
|
await this.$post(`${this.api.noticeRead}?isRead=1¬ifyId=${this.notifyId}`) // 从消息通知点进来的则加载完后调已读接口 |
|
|
|
|
this.commentId = '' |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}, |
|
|
|
|
// 递归处理评论参数 |
|
|
|
|
handleComments (list) { |
|
|
|
|
list.forEach(e => { |
|
|
|
|
if (!e.avatar) e.avatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' |
|
|
|
|
e.getCommentReplyNum = e.children && e.children.length |
|
|
|
|
handleComments (list, parent = {}) { |
|
|
|
|
list.forEach((e, i) => { |
|
|
|
|
if (!e.createUserAvatars) e.createUserAvatars = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' |
|
|
|
|
e.showChildren = false |
|
|
|
|
if (e.commentId == this.commentId) parent.showChildren = true |
|
|
|
|
if (e.commentId == this.curReplyId) e.showChildren = true |
|
|
|
|
e.showReply = false |
|
|
|
|
e.replyContent = '' |
|
|
|
|
e.children && this.handleComments(e.children) |
|
|
|
|
if (e.children && e.children.length && parent.children) { |
|
|
|
|
e.children.forEach(n => n.showReplyName = true) |
|
|
|
|
// parent.children.splice(i, 0, ...e.children) |
|
|
|
|
parent.children.push(...e.children) |
|
|
|
|
console.log("🚀 ~ file: index.vue:705 ~ list.forEach ~ parent:", parent, e.children) |
|
|
|
|
} |
|
|
|
|
e.children && this.handleComments(e.children, parent.commentId ? parent : e) |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 回复 |
|
|
|
|
@ -651,16 +729,20 @@ export default { |
|
|
|
|
this.$post(this.api.addComment, { |
|
|
|
|
cid: this.courseId, |
|
|
|
|
content, |
|
|
|
|
pid: row ? row.commentId : 0 |
|
|
|
|
pid: reply ? reply.commentId : row ? row.commentId : 0, |
|
|
|
|
replyAccountId: reply ? reply.createAccountId : row.createAccountId || '', |
|
|
|
|
status: row ? 2 : 1 |
|
|
|
|
}).then(res => { |
|
|
|
|
this.comment = '' |
|
|
|
|
this.curReplyId = row ? row.commentId : '' |
|
|
|
|
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 |
|
|
|
|
like (row, reply) { |
|
|
|
|
this.$post(`${this.api[(reply ? reply.isLike : row.isLike) ? 'unlike' : 'commentAndLike']}?commentId=${reply ? reply.commentId : row.commentId}`).then(res => { |
|
|
|
|
this.curReplyId = row.commentId |
|
|
|
|
this.getComment() |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
@ -897,7 +979,7 @@ export default { |
|
|
|
|
// python系统 |
|
|
|
|
this.toPython(this.curProject) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
@ -913,7 +995,6 @@ $height: 700px; |
|
|
|
|
border: 0; |
|
|
|
|
} |
|
|
|
|
.page { |
|
|
|
|
margin: 12px 0; |
|
|
|
|
.intro { |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #333; |
|
|
|
|
@ -989,7 +1070,7 @@ $height: 700px; |
|
|
|
|
margin-right: 10px; |
|
|
|
|
} |
|
|
|
|
&:hover { |
|
|
|
|
background-color: #528adf; |
|
|
|
|
background-color: #377be3; |
|
|
|
|
} |
|
|
|
|
&.active { |
|
|
|
|
background-color: $main-color; |
|
|
|
|
@ -1260,7 +1341,7 @@ $height: 700px; |
|
|
|
|
.tabs { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
margin-top: 10px; |
|
|
|
|
margin: 10px 0; |
|
|
|
|
.item { |
|
|
|
|
padding: 0 10px; |
|
|
|
|
margin-right: 16px; |
|
|
|
|
@ -1277,7 +1358,31 @@ $height: 700px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.tab-content { |
|
|
|
|
width: 80%; |
|
|
|
|
width: calc(100% - 308px); |
|
|
|
|
} |
|
|
|
|
.rank { |
|
|
|
|
width: 296px; |
|
|
|
|
padding: 20px; |
|
|
|
|
margin-left: 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; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@media (max-width: 1430px) { |
|
|
|
|
.wrap { |
|
|
|
|
|
