|
|
|
|
@ -80,9 +80,9 @@ |
|
|
|
|
</template> |
|
|
|
|
</template> |
|
|
|
|
<div v-else class="section"> |
|
|
|
|
<p class="sectionName" v-for="(item, i) in progressList" :key="i"> |
|
|
|
|
<p class="sectionName" v-for="(item, i) in progressList" :key="i" :title="item.projectName"> |
|
|
|
|
{{ i + 1 }}. |
|
|
|
|
{{ item.name }} |
|
|
|
|
{{ item.projectName }} |
|
|
|
|
<i :class="['icon', item.whetherToStudyOrNot ? 'el-icon-success' : 'circle']" @click.stop="studySection(item)"></i> |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
@ -94,121 +94,123 @@ |
|
|
|
|
<div class="tabs"> |
|
|
|
|
<a class="item" v-for="(item, i) in tabs" :key="i" :class="{active: item.id == active}" @click="tabChange(item)">{{ item.name }}</a> |
|
|
|
|
</div> |
|
|
|
|
<template v-if="active === 1"> |
|
|
|
|
<div class="page"> |
|
|
|
|
<h6 class="l-title"> |
|
|
|
|
<img src="@/assets/img/course1.png" alt=""> |
|
|
|
|
课程简介 |
|
|
|
|
</h6> |
|
|
|
|
<p class="intro">{{ briefIntroduction }}</p> |
|
|
|
|
</div> |
|
|
|
|
<div class="page"> |
|
|
|
|
<h6 class="l-title"> |
|
|
|
|
<img src="@/assets/img/course2.png" alt=""> |
|
|
|
|
课程目标 |
|
|
|
|
</h6> |
|
|
|
|
<p class="intro">{{ teachingObjectives }}</p> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<template v-if="active === 2"> |
|
|
|
|
<div class="page"> |
|
|
|
|
<template v-if="showNoteAdd"> |
|
|
|
|
<el-form class="form" ref="form" label-width="120px" center> |
|
|
|
|
<el-form-item class="required" label="笔记标题"> |
|
|
|
|
<el-input placeholder="请输入笔记标题" v-model="noteForm.noteName" maxlength="30" style="width: 400px"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item class="required" label="笔记内容"> |
|
|
|
|
<Editor api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' v-model="noteForm.noteContent" :init="editorConfig" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
<div class="text-right"> |
|
|
|
|
<el-button type="primary" @click="submitNote">保存</el-button> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<template v-else> |
|
|
|
|
<div class="tool"> |
|
|
|
|
<ul class="filter"> |
|
|
|
|
<li> |
|
|
|
|
<label>搜索：</label> |
|
|
|
|
<el-input placeholder="请输入标题" v-model="noteKeyword" clearable></el-input> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
<div> |
|
|
|
|
<el-button type="primary" @click="addNote">新增笔记</el-button> |
|
|
|
|
<div class="tab-content"> |
|
|
|
|
<template v-if="active === 1"> |
|
|
|
|
<div class="page"> |
|
|
|
|
<h6 class="l-title"> |
|
|
|
|
<img src="@/assets/img/course1.png" alt=""> |
|
|
|
|
课程简介 |
|
|
|
|
</h6> |
|
|
|
|
<p class="intro">{{ briefIntroduction }}</p> |
|
|
|
|
</div> |
|
|
|
|
<div class="page"> |
|
|
|
|
<h6 class="l-title"> |
|
|
|
|
<img src="@/assets/img/course2.png" alt=""> |
|
|
|
|
课程目标 |
|
|
|
|
</h6> |
|
|
|
|
<p class="intro">{{ teachingObjectives }}</p> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<template v-if="active === 2"> |
|
|
|
|
<div class="page"> |
|
|
|
|
<template v-if="showNoteAdd"> |
|
|
|
|
<el-form class="form" ref="form" label-width="120px" center> |
|
|
|
|
<el-form-item class="required" label="笔记标题"> |
|
|
|
|
<el-input placeholder="请输入笔记标题" v-model="noteForm.noteName" maxlength="30" style="width: 400px"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item class="required" label="笔记内容"> |
|
|
|
|
<Editor api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' v-model="noteForm.noteContent" :init="editorConfig" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
<div class="text-right"> |
|
|
|
|
<el-button type="primary" @click="submitNote">保存</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<el-timeline class="timeline"> |
|
|
|
|
<el-timeline-item placement="top" v-for="(item, i) in notes" :key="i"> |
|
|
|
|
<p class="sign">{{ item.createTime }}</p> |
|
|
|
|
<div class="ver"> |
|
|
|
|
<div> |
|
|
|
|
{{ item.noteName }} |
|
|
|
|
<span class="action"> |
|
|
|
|
<i class="el-icon-edit-outline" @click="editNote(item)"></i> |
|
|
|
|
<i class="el-icon-delete" @click="delNote(item)"></i> |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="des" v-html="item.noteContent"></div> |
|
|
|
|
</el-timeline-item> |
|
|
|
|
</el-timeline> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<template v-if="active === 4"> |
|
|
|
|
<div class="page"> |
|
|
|
|
<quill ref="quill" :border="true" v-model="msg" :height="150" :toTop="false" /> |
|
|
|
|
<ul class="msg"> |
|
|
|
|
<li v-for="(item, i) in msgs" :key="i"> |
|
|
|
|
<div class="li-wrap"> |
|
|
|
|
<img :src="item.avatar" alt="" class="avatar"> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<h6> |
|
|
|
|
<span class="name">{{ item.userName }}</span> |
|
|
|
|
发表于 {{ item.createDate }} |
|
|
|
|
</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" src="@/assets/img/like.png" alt=""> |
|
|
|
|
</template> |
|
|
|
|
<template v-else> |
|
|
|
|
<div class="tool"> |
|
|
|
|
<ul class="filter"> |
|
|
|
|
<li> |
|
|
|
|
<label>搜索：</label> |
|
|
|
|
<el-input placeholder="请输入标题" v-model="noteKeyword" clearable></el-input> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
<div> |
|
|
|
|
<el-button type="primary" @click="addNote">新增笔记</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="reply" v-if="item.showReply"> |
|
|
|
|
<quill :border="true" v-model="item.replyContent" :toTop="false" :height="150" /> |
|
|
|
|
<div class="m-t-10 text-right"> |
|
|
|
|
<el-button type="primary" size="mini">提交</el-button> |
|
|
|
|
<el-timeline class="timeline"> |
|
|
|
|
<el-timeline-item placement="top" v-for="(item, i) in notes" :key="i"> |
|
|
|
|
<p class="sign">{{ item.createTime }}</p> |
|
|
|
|
<div class="ver"> |
|
|
|
|
<div> |
|
|
|
|
{{ item.noteName }} |
|
|
|
|
<span class="action"> |
|
|
|
|
<i class="el-icon-edit-outline" @click="editNote(item)"></i> |
|
|
|
|
<i class="el-icon-delete" @click="delNote(item)"></i> |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="des" v-html="item.noteContent"></div> |
|
|
|
|
</el-timeline-item> |
|
|
|
|
</el-timeline> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<template v-if="active === 4"> |
|
|
|
|
<div class="page"> |
|
|
|
|
<quill ref="quill" :border="true" v-model="msg" :height="150" :toTop="false" /> |
|
|
|
|
<ul class="msg"> |
|
|
|
|
<li v-for="(item, i) in msgs" :key="i"> |
|
|
|
|
<div class="li-wrap"> |
|
|
|
|
<img :src="item.avatar" alt="" class="avatar"> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<h6> |
|
|
|
|
<span class="name">{{ item.userName }}</span> |
|
|
|
|
发表于 {{ item.createDate }} |
|
|
|
|
</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" src="@/assets/img/like.png" alt=""> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<ul class="msg children" v-if="item.showChildren"> |
|
|
|
|
<li v-for="(reply,i) in item.children" :key="i"> |
|
|
|
|
<div class="li-wrap"> |
|
|
|
|
<img class="avatar" :src="reply.avatar" alt=""> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<div class="name">{{reply.userName}}</div> |
|
|
|
|
<div class="des" v-html="reply.content"></div> |
|
|
|
|
<div class="date">{{reply.createDate}}</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="action"> |
|
|
|
|
<i class="icon el-icon-chat-dot-square"></i> |
|
|
|
|
<i class="icon el-icon-delete"></i> |
|
|
|
|
<img class="icon" src="@/assets/img/like.png" alt=""> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="reply" v-if="reply.showReply"> |
|
|
|
|
<quill :border="true" v-model="reply.replyContent" :toTop="false" :height="150" /> |
|
|
|
|
<div class="m-t-10 text-right"> |
|
|
|
|
<el-button type="primary" size="mini">提交</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
<div class="reply" v-if="item.showReply"> |
|
|
|
|
<quill :border="true" v-model="item.replyContent" :toTop="false" :height="150" /> |
|
|
|
|
<div class="m-t-10 text-right"> |
|
|
|
|
<el-button type="primary" size="mini">提交</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<ul class="msg children" v-if="item.showChildren"> |
|
|
|
|
<li v-for="(reply,i) in item.children" :key="i"> |
|
|
|
|
<div class="li-wrap"> |
|
|
|
|
<img class="avatar" :src="reply.avatar" alt=""> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<div class="name">{{reply.userName}}</div> |
|
|
|
|
<div class="des" v-html="reply.content"></div> |
|
|
|
|
<div class="date">{{reply.createDate}}</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="action"> |
|
|
|
|
<i class="icon el-icon-chat-dot-square"></i> |
|
|
|
|
<i class="icon el-icon-delete"></i> |
|
|
|
|
<img class="icon" src="@/assets/img/like.png" alt=""> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="reply" v-if="reply.showReply"> |
|
|
|
|
<quill :border="true" v-model="reply.replyContent" :toTop="false" :height="150" /> |
|
|
|
|
<div class="m-t-10 text-right"> |
|
|
|
|
<el-button type="primary" size="mini">提交</el-button> |
|
|
|
|
</div> |
|
|
|
|
</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> |
|
|
|
|
</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> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<el-dialog title="请选择项目" v-loading="loading" :visible.sync="projectVisible" width="828px" custom-class="project-dia" :close-on-click-modal="false"> |
|
|
|
|
@ -396,25 +398,23 @@ export default { |
|
|
|
|
// 1正常显示资源，0显示续费 |
|
|
|
|
this.overdue = isRenew |
|
|
|
|
this.getChapter(1) |
|
|
|
|
this.getProgress() |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}, |
|
|
|
|
// 获取章节小节 |
|
|
|
|
async getChapter(first) { |
|
|
|
|
let res = await this.$post(`${this.api.courseLearningProgress}?courseId=${this.courseId}`); |
|
|
|
|
async getChapter() { |
|
|
|
|
let res = await this.$get(`${this.api.curriculumChapter}/${this.courseId}`); |
|
|
|
|
this.chapterList = res.chapterList; |
|
|
|
|
const list = [] |
|
|
|
|
res.chapterList.forEach(e => { |
|
|
|
|
e.subsectionList.forEach(n => { |
|
|
|
|
n.chapterId = e.id |
|
|
|
|
list.push(n) |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
this.progressList = list |
|
|
|
|
this.schedule = +(res.schedule.replace('%', '')) |
|
|
|
|
if (first && this.chapterList.length && this.chapterList[0].subsectionList && this.chapterList[0].subsectionList.length) { |
|
|
|
|
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); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 获取学习进度 |
|
|
|
|
async getProgress() { |
|
|
|
|
let res = await this.$post(`${this.api.courseLearningProgress}?courseId=${this.courseId}`); |
|
|
|
|
this.progressList = res.list |
|
|
|
|
this.schedule = +(res.schedule.replace('%', '')) |
|
|
|
|
}, |
|
|
|
|
// 目录和进度切换 |
|
|
|
|
typeChange(id) { |
|
|
|
|
this.getChapter() |
|
|
|
|
@ -502,14 +502,13 @@ export default { |
|
|
|
|
studySection(item) { |
|
|
|
|
item.whetherToStudyOrNot ? |
|
|
|
|
this.$post(`${this.api.deleteLearningProgress}?id=${item.learningProgressId}`).then(res => { |
|
|
|
|
this.getChapter() |
|
|
|
|
this.getProgress() |
|
|
|
|
}).catch(res => {}) : |
|
|
|
|
this.$post(this.api.saveLearningProgress, { |
|
|
|
|
chapterId: item.chapterId, |
|
|
|
|
cid: this.courseId, |
|
|
|
|
subsectionId: item.id, |
|
|
|
|
projectId: item.projectId, |
|
|
|
|
}).then(res => { |
|
|
|
|
this.getChapter() |
|
|
|
|
this.getProgress() |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}, |
|
|
|
|
preview(row, chapterName, showDia = 0) { |
|
|
|
|
@ -1076,6 +1075,9 @@ $height: 700px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.tab-content { |
|
|
|
|
width: 80%; |
|
|
|
|
} |
|
|
|
|
@media (max-width: 1430px) { |
|
|
|
|
.wrap { |
|
|
|
|
padding: 12px 100px 20px; |
|
|
|
|
|
