提交 7b96a966 authored 作者: 王鹏飞's avatar 王鹏飞

bug fixes

上级 22e34112
<template>
<div>
<div>
<!-- <div class="con-title">课程详情</div> -->
<div class="detail-box">
<div class="box-thd">
<div class="title" @click="noWantThisCourse">{{headerInfo.title}}
<div class="title" @click="noWantThisCourse">
{{ headerInfo.title }}
<!--
<template v-if='headerInfo.isStart && tabs[1].chapterList.currentChapter'>
<el-button class="rbtn" type="primary" size="mini" @click='startLearn(tabs[1].chapterList.currentChapter)'>继续学习</el-button>
......@@ -17,11 +18,11 @@
</div>
<div class="tags">
<template v-for="(item1, index) in headerInfo.arrTab">
<span v-bind:key="index" class='tabs-item'>{{item1}}</span>
<span v-bind:key="index" class="tabs-item">{{ item1 }}</span>
</template>
</div>
<div class="time">{{headerInfo.time}} {{headerInfo.status}}</div>
<div style="float: left; width: 100%; height: 1px;"></div>
<div class="time">{{ headerInfo.time }} {{ headerInfo.status }}</div>
<div style="float: left; width: 100%; height: 1px"></div>
<!-- <div class="progress">
视频观看进度&emsp;<el-progress :percentage="headerInfo.progress" color="#b49441"></el-progress>
</div> -->
......@@ -29,7 +30,7 @@
<div class="box-tbd">
<div class="left-pic">
<template v-if="headerInfo.bgSrc">
<img :src="headerInfo.bgSrc" alt="">
<img :src="headerInfo.bgSrc" alt="" />
</template>
<template v-else>
<div class="no-img"><i class="el-icon-self-13"></i></div>
......@@ -42,24 +43,55 @@
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="学习计划" name="1">
<template v-if="isCourseDis === '1'">
<img style="width: 100%;" src="@/assets/images/jcxx.jpg" alt="">
<img style="width: 100%" src="@/assets/images/jcxx.jpg" alt="" />
</template>
<template v-else>
<div class='course-list'>
<div class="course-list">
<template v-for="(_item, index) in tabs[1].chapterList.course">
<div v-bind:key="index" :class='["content-group", (!_item.chapters.length ? "no-child" : ""), (_item.isUp ? "up" : "")]'>
<div class='title' @click='clickJumpOrStatus(index, _item)' :data-index='index' :data-cid='_item.cid' :data-sid='_item.sid' :data-status='!!_item.chapters.length'>{{_item.title}}
<i :class="['side', (_item.chapters.length ? '' : 'none'), (_item.isUp ? 'el-icon-arrow-down' : 'el-icon-arrow-up')]"></i>
<div
v-bind:key="index"
:class="['content-group', !_item.chapters.length ? 'no-child' : '', _item.isUp ? 'up' : '']"
>
<div
class="title"
@click="clickJumpOrStatus(index, _item)"
:data-index="index"
:data-cid="_item.cid"
:data-sid="_item.sid"
:data-status="!!_item.chapters.length"
>
{{ _item.title }}
<i
:class="[
'side',
_item.chapters.length ? '' : 'none',
_item.isUp ? 'el-icon-arrow-down' : 'el-icon-arrow-up'
]"
></i>
</div>
<template v-for="(item1, index1) in _item.chapters">
<div v-bind:key="index1" :class='["body", (item1.id === tabs[1].chapterList.currentChapterId && "on")]'>
<div class='name' :data-vid='item1.vid' :data-cid='item1.cid' :data-sid='item1.sid' :data-hasVA='item1.time' :data-type="item1.video_provider" :data-name='item1.name' :data-index='index' :data-count='index1' @click='jumpToOtherVA(item1)'>
{{item1.name}}
<template v-if='[5, 8].includes(item1.type)'>
<div class='time'>{{ item1.live.start_time }} {{ item1.live.statusStr }}</div>
<div
v-bind:key="index1"
:class="['body', item1.id === tabs[1].chapterList.currentChapterId && 'on']"
>
<div
class="name"
:data-vid="item1.vid"
:data-cid="item1.cid"
:data-sid="item1.sid"
:data-hasVA="item1.time"
:data-type="item1.video_provider"
:data-name="item1.name"
:data-index="index"
:data-count="index1"
@click="jumpToOtherVA(item1)"
>
{{ item1.name }}
<template v-if="[5, 8].includes(item1.type)">
<div class="time">{{ item1.live.start_time }} {{ item1.live.statusStr }}</div>
</template>
<template v-else>
<div class='time'>{{item1.time}}</div>
<div class="time">{{ item1.time }}</div>
</template>
</div>
</div>
......@@ -71,15 +103,22 @@
</el-tab-pane>
<el-tab-pane label="教材提问" name="2" v-if="isCourseDis === '1'">
<template v-if="!isPublicShow">
<div class='pub-ques'>
<div class='ask'>
<div class="pub-ques">
<div class="ask">
<i class="el-icon-edit img"></i>
<div class="txt" @click='publishDiscuss'>发布问题 ...</div>
<div class="txt" @click="publishDiscuss">发布问题 ...</div>
</div>
<div
:class="['item-order', sort[0].isShow ? 'on' : '']"
@click="sortFn"
:data-index="0"
:data-str="sort[0].str"
>
按时间排序
</div>
<div :class='["item-order", (sort[0].isShow ? "on" : "")]' @click='sortFn' :data-index='0' :data-str='sort[0].str'>按时间排序</div>
<!-- <div :class='["item-order", (sort[1].isShow ? "on" : "")]' @click='sortFn' :data-index='1' :data-str='sort[1].str'>按投票排序</div> -->
</div>
<div class='discuss-scroll' bindscrolltolower='loadmore' bindscrolltoupper='updatenew'>
<div class="discuss-scroll" bindscrolltolower="loadmore" bindscrolltoupper="updatenew">
<!-- <template v-for='(item, index) in discussList'>
<div v-if="item.questioner.uid == $GLOBAL.UserInfo.id" v-bind:key="index" class='item-list lhhId' @click='goDiscussDetail' :data-id='item.id' :data-sid='item.sid' :data-index='index'>
<div class='user'>
......@@ -106,21 +145,30 @@
</div>
</template>
<template v-else>
<div class='publish'>
<div style="overflow: hidden;">
<div class="right-goback-txt">发布问题</div>
<el-button type="text" @click='gobackDiscuss'>返回问题列表</el-button>
<div class="publish">
<div style="overflow: hidden">
<div class="right-goback-txt">
{{ $t('pages.learn.courseDetail.Releaseissues') }}
</div>
<el-button type="text" @click="gobackDiscuss">{{
$t('pages.learn.courseDetail.Returntoquestionlist')
}}</el-button>
</div>
<el-form ref="setPublishform" :model="publish" :rules="publishRules">
<el-form-item label="问题章节" prop="title">
<el-input v-model="publish.title" type="text" placeholder="请输入问题章节"></el-input>
<el-form ref="setPublishform" :model="publish" :rules="publishRules" label-position="top">
<el-form-item :label="$t('pages.learn.courseDetail.title1')" prop="title">
<el-input
v-model="publish.title"
type="text"
:placeholder="$t('pages.learn.courseDetail.inputtitle1')"
></el-input>
</el-form-item>
<el-form-item :label="$t('pages.learn.courseDetail.Textcontent')" prop="contents">
<v-editor v-model="publish.contents"></v-editor>
</el-form-item>
<!-- v-model="publish.content" -->
<div style="line-height: 1.5; font-size: 0.16rem; margin-bottom: 0.2rem;">问题内容</div>
<textarea id="editor"></textarea>
<div style="height: 0.2rem;"></div>
<el-form-item>
<el-button type="primary" @click="onSubmitPublish">发布问题</el-button>
<el-button type="primary" @click="onSubmitPublish">{{
$t('pages.learn.courseDetail.Releaseissues')
}}</el-button>
</el-form-item>
</el-form>
</div>
......@@ -194,17 +242,17 @@
<template v-if="tabs[0].content && tabs[0].content.teachers && tabs[0].content.teachers.length">
<el-tabs v-model="activeName1" @tab-click="handleClick">
<el-tab-pane label="课程讲师" name="1">
<template v-for='(item1, index) in tabs[0].content.teachers'>
<div v-bind:key='index' class='list-teacher'>
<img class="img" :src="item1.src" alt="">
<div class='ctx'>
<div class='top-ctx'>
<div class='name'>{{item1.name}}</div>
<template v-for="(item1, index) in tabs[0].content.teachers">
<div v-bind:key="index" class="list-teacher">
<img class="img" :src="item1.src" alt="" />
<div class="ctx">
<div class="top-ctx">
<div class="name">{{ item1.name }}</div>
</div>
<div class='bottom-ctx'>
<div class='t1'>{{item1.edu}}</div>
<div class='t2'>{{item1.job}}</div>
<div class='t3'>{{item1.unit}}</div>
<div class="bottom-ctx">
<div class="t1">{{ item1.edu }}</div>
<div class="t2">{{ item1.job }}</div>
<div class="t3">{{ item1.unit }}</div>
</div>
</div>
</div>
......@@ -215,22 +263,22 @@
</el-col>
</el-row>
</div>
</div>
</div>
</template>
<script>
import cAction from '@action'
import cTool from '@tool'
import CKEDITOR from 'CKEDITOR'
import VEditor from '@/components/ckeditor'
export default {
components: { },
components: { VEditor },
props: {
sid: { type: String, require: false },
cid: { type: String, require: false }
},
data () {
data() {
return {
params: {
path: `/${this.cid}`,
......@@ -244,37 +292,42 @@ export default {
},
isCourseDis: this.getQueryString('v'),
domLength: 0,
ckeditor: null,
activeName: '1',
activeName1: '1',
passCount: 0, // 隐藏功能, 退课专用
headerInfo: {}, // 后台数据返回
tabs: [{
tabs: [
{
title: '课程简介',
isShow: false,
content: {
text: '<p><b>视频课程没有加载出来,请检查自己的网络环境,并重新刷新。</b>',
teachers: [{
teachers: [
{
src: '',
name: '讲师姓名',
edu: '学历',
job: '职称',
unit: '讲师所在单位'
}]
}
}, {
]
}
},
{
title: '课程内容',
isShow: false,
chapterList: {
currentChapterId: '11', // 当前章节id
course: [{
course: [
{
title: '',
isUp: true,
chapters: [
// { id: '11', time: '28:18', name: '1.1 现值(PV)和终值(FV)' },
{ id: '12', time: '19:09', name: '1.2 测试课程' }
]
}, {
},
{
title: '',
isUp: true,
chapters: [
......@@ -283,7 +336,8 @@ export default {
// { id: '23', time: '', name: '公司金融第二周测验' },
// { id: '24', time: '', name: '公司金融第二周作业' }
]
}, {
},
{
// title: '课程大作业',
// isUp: true,
// chapters: []
......@@ -291,44 +345,57 @@ export default {
title: '',
isUp: true,
chapters: []
}]
}
}, {
]
}
},
{
title: '课程讨论',
isShow: false
}, {
},
{
title: '课程考核',
isShow: false,
richText: "<div class='h1'>一、最终成绩计算</div> <div class='p'>课程表现得分*30%+每章试题得分*30%+结业大作业得分*40%=该门课程总得分,满分100分,低于80分为不及格,需重修此门课程。84分以上方可申请学位。</div> <img class='b1' src='https://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/build/www/course-check.png' mode='aspectFill' /> <div class='h1'>二、具体细则</div> <div class='h2'>课程表现:总分100分(占科目总成绩的30%)</div> <div class='p'>1、每个视频观看完成度50分:以后台数据统计为准,全部看完视频满分50分,其它酌情给分。</div> <div class='em'>注:视频观看考核的是实际播放时长,不是进度条的显示状态,进度条满格并不一定表示观看完这个视频。以下方每日学习时长为准。</div> <div class='p'>2、课程反馈建设性问题及课程完成情况50分:反馈问题以教务老师统计为准,课程完成情况以后台数据为准,是否按时完成视频观看、测试、作业提交,满分50分,酌情给分。</div> <div class='h2'>每章试题:总分100分(占科目总成绩的30%)</div> <div class='p'>本课程所有试题的平均正确率*100分*占总成绩30%=此项得分。(比如正确度为80%,则此项得分:80%*100*30%=24分)</div> <div class='h2'>结业大作业:总分100分(占科目总成绩的40%)</div> <div class='p'>结业大作业满分为100分,以助教老师给分为准。</div>",
richText:
"<div class='h1'>一、最终成绩计算</div> <div class='p'>课程表现得分*30%+每章试题得分*30%+结业大作业得分*40%=该门课程总得分,满分100分,低于80分为不及格,需重修此门课程。84分以上方可申请学位。</div> <img class='b1' src='https://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/build/www/course-check.png' mode='aspectFill' /> <div class='h1'>二、具体细则</div> <div class='h2'>课程表现:总分100分(占科目总成绩的30%)</div> <div class='p'>1、每个视频观看完成度50分:以后台数据统计为准,全部看完视频满分50分,其它酌情给分。</div> <div class='em'>注:视频观看考核的是实际播放时长,不是进度条的显示状态,进度条满格并不一定表示观看完这个视频。以下方每日学习时长为准。</div> <div class='p'>2、课程反馈建设性问题及课程完成情况50分:反馈问题以教务老师统计为准,课程完成情况以后台数据为准,是否按时完成视频观看、测试、作业提交,满分50分,酌情给分。</div> <div class='h2'>每章试题:总分100分(占科目总成绩的30%)</div> <div class='p'>本课程所有试题的平均正确率*100分*占总成绩30%=此项得分。(比如正确度为80%,则此项得分:80%*100*30%=24分)</div> <div class='h2'>结业大作业:总分100分(占科目总成绩的40%)</div> <div class='p'>结业大作业满分为100分,以助教老师给分为准。</div>",
assess: {
score: '20',
duration: '00:01:20',
progress: '0/10',
video: [{
video: [
{
title: '第一章 市场营销原理导论',
sid: '',
cid: '',
arr: [{
arr: [
{
name: '1.1 什么是市场营销什么是市场营销市场营销什么是市场营销什么是市场营销',
time: '12:08',
progress: '100%',
vid: ''
}]
}],
homewrok: [{
}
]
}
],
homewrok: [
{
title: '第一章 市场营销原理导论',
arr: [{
arr: [
{
name: '1.1 什么是市场营销什么是市场营销市场营销什么是市场营销什么是市场营销',
score: 20
}]
}],
}
]
}
],
essay: {
created_time: '',
status: '未提交',
score: '暂无'
}
}
}],
}
],
// tabs: [{
// title: '课程简介',
// isShow: false,
......@@ -427,9 +494,8 @@ export default {
},
isPublicShow: false, // 是否显示发布问题
publishRules: {
title: [
{ required: true, message: '请输入标题', trigger: 'blur' }
]
title: [{ required: true, message: this.$t('pages.learn.courseDetail.inputtitle1'), trigger: 'blur' }],
contents: [{ required: true, message: this.$t('pages.learn.courseDetail.inputTextcontent'), trigger: 'blur' }]
},
isOpenNewTabFlag: false,
arrFn: [],
......@@ -438,7 +504,7 @@ export default {
firstVideo: {}
}
},
mounted () {
mounted() {
/* 获取云课堂所有地址 */
cAction.Player.getCloudUrl().then(json => {
this.cloudClassUrls = json
......@@ -454,7 +520,8 @@ export default {
loading.close()
return
}
cAction.Course.getCourseDetail(this.cid, this.sid).then(json => {
cAction.Course.getCourseDetail(this.cid, this.sid)
.then(json => {
this.headerInfo = json.headerInfo
this.tabs[0].content = json.tabs0Content
this.tabs[1].chapterList = json.tabs1ChapterList
......@@ -475,7 +542,8 @@ export default {
}
}
cAction.Course.getCourseAssess(this.cid, this.sid).then(json1 => {
cAction.Course.getCourseAssess(this.cid, this.sid)
.then(json1 => {
const _courseArr = json.tabs1ChapterList.course
/* 进行一次 对照,将 视频 vid 赋值 */
/* BUG: 如果有某一章 都没有视频时,对照失败,从没有的那一章开始,后面全部没有vid */
......@@ -494,65 +562,47 @@ export default {
}
this.tabs[3].assess = json1
loading.close()
}).catch(e => { this.$message.error(e.message) }).finally(() => { })
})
.catch(e => {
this.$message.error(e.message)
})
.finally(() => {})
// cAction.Discuss.getCourseDiscussList(this.cid, this.sid, this.param).then(json2 => {
// this.discussList = json2
// }).catch(e => { this.$message.error(e.message) }).finally(() => { })
}).catch(e => { this.$message.error(e.message); loading.close() }).finally(() => { })
})
.catch(e => {
this.$message.error(e.message)
loading.close()
})
.finally(() => {})
window.addEventListener('resize', this.resizeRoot.bind(this), false)
/* 实时刷新数据 */
if (this.timeHeart) { clearInterval(this.timeHeart); this.timeHeart = null }
if (this.timeHeart) {
clearInterval(this.timeHeart)
this.timeHeart = null
}
// this.timeHeart = setInterval(this.updatePages(), 3000)
this.arrFn = this.initBindKeyfn()
},
destroyed () {
destroyed() {
window.removeEventListener('resize', this.resizeRoot.bind(this), false)
/* 清空 ckeditor 需要调用方法删除 并 在DOM结构中也移除 */
this.ckeditor && this.ckeditor.destroy(true)
this.ckeditor = null
if (this.timeHeart) { clearInterval(this.timeHeart); this.timeHeart = null }
if (this.arrFn.length) { this.destroyKeyfn(this.arrFn) }
},
updated () {
this.resizeRoot()
if (this.isPublicShow) {
this.initckeditor()
if (this.timeHeart) {
clearInterval(this.timeHeart)
this.timeHeart = null
}
},
beforeUpdate () {
if (!this.isPublicShow) {
/* 清空 ckeditor 需要调用方法删除 并 在DOM结构中也移除 */
this.ckeditor && this.ckeditor.destroy(true)
this.ckeditor = null
if (this.arrFn.length) {
this.destroyKeyfn(this.arrFn)
}
},
updated() {
this.resizeRoot()
},
methods: {
handleClick (tab, event) { /* console.log(tab, event) */ },
/* 初始化 ckeditor */
initckeditor () {
!this.ckeditor && (this.ckeditor = CKEDITOR.replace('editor', {
height: 300,
uiColor: '#eeeeee',
filebrowserImageUploadUrl: '/api/ck/form/ckeditor-upload',
fileTools_requestHeaders: { tenant: 'wmp' },
// resize_enabled: typeof this.props.resizable === 'boolean' ? this.props.resizable : true,
toolbar: [
// { name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'Preview'] },
{ name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
{ name: 'colors', items: ['TextColor', 'BGColor'] },
{ name: 'tools', items: ['Maximize', 'ShowBlocks'] },
// { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
{ name: 'editing', items: ['Find', 'Replace'] },
// { name: 'forms', items: ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'] },
'/',
{ name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
{ name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl'] },
{ name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
{ name: 'insert', items: ['Image', 'Table', 'HorizontalRule'] }
]
}))
handleClick(tab, event) {
/* console.log(tab, event) */
},
updatePages () {
updatePages() {
cAction.Course.getCourseDetail(this.cid, this.sid).then(json => {
/* 更新直播状态 */
this.tabs[1].chapterList.course = json.tabs1ChapterList.course.map(item => {
......@@ -567,7 +617,7 @@ export default {
/**
* 课程内容 - 列表展开或者跳转
*/
clickJumpOrStatus (index, data) {
clickJumpOrStatus(index, data) {
const flag = !!data.chapters.length
if (flag) {
const json = this.tabs
......@@ -592,29 +642,42 @@ export default {
}
},
/* 直接跳转打开新页面 */
openNewTab (sid, cid, _id) {
cAction.Player.getChapterList(cid, sid, _id).then(json => {
openNewTab(sid, cid, _id) {
cAction.Player.getChapterList(cid, sid, _id)
.then(json => {
this.live = (json.curJson && json.curJson.live) || {}
if (this.live.id) {
if (this.live.live_status === 3 && this.live.enable_record && this.live.record_url) {
this.live.url = this.live.record_url
} else {
this.live.viewer_name = window.G.UserInfo.student_info.personal_name || window.G.UserInfo.nickname
this.live.url = 'https://view.csslcloud.net/api/view/index?roomid=' + this.live.room_id + '&userid=' + this.live.user_id + '&autoLogin=true&viewername=' + (this.live.viewer_name || '匿名') + '&viewertoken=' + this.live.viewer_token // + '&groupid=xxx'
this.live.url =
'https://view.csslcloud.net/api/view/index?roomid=' +
this.live.room_id +
'&userid=' +
this.live.user_id +
'&autoLogin=true&viewername=' +
(this.live.viewer_name || '匿名') +
'&viewertoken=' +
this.live.viewer_token // + '&groupid=xxx'
}
// this.CCLiveInit(this.live)
this.isOpenNewTabFlag = false
window.open(this.live.url)
}
}).catch(e => { this.$message.error(e.message) }).finally(() => { })
})
.catch(e => {
this.$message.error(e.message)
})
.finally(() => {})
},
initBindKeyfn () {
const _fn1 = (e) => {
initBindKeyfn() {
const _fn1 = e => {
if (e.keyCode === 70) {
this.isOpenNewTabFlag = true
}
}
const _fn2 = (e) => {
const _fn2 = e => {
if (e.keyCode === 70) {
this.isOpenNewTabFlag = false
}
......@@ -623,14 +686,14 @@ export default {
document.addEventListener('keyup', _fn2, false)
return [_fn1, _fn2]
},
destroyKeyfn (arr) {
destroyKeyfn(arr) {
document.removeEventListener('keydown', arr[0])
document.removeEventListener('keyup', arr[1])
},
/**
* 跳转到对应音视频播放页
*/
jumpToOtherVA (data) {
jumpToOtherVA(data) {
/* 如果未选课,不能查看课程内容 */
if (!this.headerInfo.isStart) {
this.$message.error('先选课,才能学习')
......@@ -675,12 +738,16 @@ export default {
window.open(data.live.record_url || data.live.join_url)
return
}
this.$router.push({ name: 'viewerCourseChapter', params: { sid, cid, id: data.id }, query: { offset: data.offset } })
this.$router.push({
name: 'viewerCourseChapter',
params: { sid, cid, id: data.id },
query: { offset: data.offset }
})
},
/**
* 开始学习或继续学习 - 跳转到对应音视频播放页
*/
startLearn (data) {
startLearn(data) {
if (data.id) {
this.$router.push({ name: 'viewerCourseChapter', params: { sid: this.sid, cid: this.cid, id: data.id } })
} else {
......@@ -690,24 +757,34 @@ export default {
/**
* 退课 - 隐藏功能,点击 标题15次,进行退课
*/
noWantThisCourse () {
noWantThisCourse() {
this.passCountTimeout && clearTimeout(this.passCountTimeout)
this.passCountTimeout = setTimeout(() => {
this.passCount = 0
}, 500)
if (this.passCount < 15) { this.passCount++; return }
if (this.passCount < 15) {
this.passCount++
return
}
const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
cAction.Course.outSelectCourse(this.cid, this.sid).then(json => {
cAction.Course.outSelectCourse(this.cid, this.sid)
.then(json => {
this.headerInfo.isStart = false
loading.close()
this.$message({ type: 'success', message: '退课成功' })
this.passCount = 0
}).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
})
.catch(e => {
this.$message.error(e.message)
})
.finally(() => {
loading.close()
})
},
/**
* 隐藏功能 - 在课程统计页 直接 点击进入视频学习页 或者 直接完成该课程的视频挂载
*/
jumpVAOrfinishVA (e) {
jumpVAOrfinishVA(e) {
const data = e.currentTarget.dataset
const _fn1 = this._keydownfn.bind(this, data)
document.addEventListener('keydown', _fn1, false)
......@@ -717,7 +794,7 @@ export default {
}
document.addEventListener('mouseup', _fn3, false)
},
_keydownfn (data, e) {
_keydownfn(data, e) {
const _cid = data.cid
const _vid = data.vid
const _duration = data.duration
......@@ -739,25 +816,37 @@ export default {
_m: parseInt(_duration), // 当前播放最大时间
_c: parseInt(_duration), // 当前播放位置
ps: '0,0' // 播放时,播放过的 帧
}).then(json => {
})
.then(json => {
if (json.success) {
this.$message.success('补课成功,刷新查看结果')
}
}).catch(e => { this.$message.error(e.message) }).finally(() => { })
})
.catch(e => {
this.$message.error(e.message)
})
.finally(() => {})
}
},
/**
* 选课
*/
wantThisCourse () {
wantThisCourse() {
const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
cAction.Course.selectCourse(this.cid, this.sid).then(json => {
cAction.Course.selectCourse(this.cid, this.sid)
.then(json => {
this.headerInfo.isStart = true
loading.close()
this.$message({ type: 'success', message: '选课成功' })
}).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
})
.catch(e => {
this.$message.error(e.message)
})
.finally(() => {
loading.close()
})
},
resizeRoot () {
resizeRoot() {
const elems = document.querySelectorAll('.ellipsis')
const fs = getComputedStyle(window.document.documentElement)['font-size'].replace('px', '') // eslint-disable-line
elems.forEach((_, i) => {
......@@ -775,63 +864,56 @@ export default {
/**
* 发布问题 - 页面打开
*/
publishDiscuss () {
publishDiscuss() {
this.isPublicShow = true
},
/**
* 返回问题列表
*/
gobackDiscuss () {
gobackDiscuss() {
this.isPublicShow = false
},
/**
* 问题发布 - 接口提交
*/
onSubmitPublish () {
this.$refs.setPublishform.validate((valid) => {
onSubmitPublish() {
this.$refs.setPublishform.validate(valid => {
if (valid) {
if (!this.ckeditor.getData()) {
this.$message.error('请输入正文内容')
} else {
this.publish.contents = this.ckeditor.getData()
const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
cAction.Discuss.publishQues(this.publish).then(json => {
this.$message({
type: 'success',
message: '问题发布成功'
})
cAction.Discuss.publishQues(this.publish)
.then(json => {
this.$message({ type: 'success', message: '问题发布成功' })
this.isPublicShow = false
this.params = {
path: `/${this.cid}`,
request: 'getCourseDiscussList',
dataJson: {
limit: 10,
offset: 0,
is_myself: true
}
dataJson: { limit: 10, offset: 0, is_myself: true }
}
this.$refs.setPublishform.resetFields()
// cAction.Discuss.getCourseDiscussList(this.cid, this.sid, this.param).then(json2 => {
// this.discussList = json2
// }).catch(e => { this.$message.error(e.message) }).finally(() => { })
}).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
}
} else {
this.$message.error('请输入标题')
return false
})
.catch(e => {
this.$message.error(e.message)
})
.finally(() => {
loading.close()
})
}
})
},
/**
* 跳转到对应 问题详情页
*/
goDiscussDetail (e) {
goDiscussDetail(e) {
const qid = e.currentTarget.dataset.id
this.$router.push({ path: `/app/learn/discuss-detail/${this.cid}/${qid}` })
},
/**
* 排序方式
*/
sortFn (e) {
sortFn(e) {
const index = e.currentTarget.dataset.index
const str = e.currentTarget.dataset.str
this.sort[index].isShow = !this.sort[index].isShow
......@@ -854,17 +936,20 @@ export default {
// this.discussList = json
// }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
},
getQueryString (name) {
getQueryString(name) {
const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
const r = window.location.search.substr(1).match(reg)
if (r != null) return unescape(r[2]); return null
if (r != null) return unescape(r[2])
return null
}
}
}
</script>
<style lang="scss" scoped>
body .el-tab-pane { padding-top: 0; }
body .el-tab-pane {
padding-top: 0;
}
.detail-box {
margin: 0.3rem;
color: #313131;
......@@ -942,85 +1027,425 @@ body .el-tab-pane { padding-top: 0; }
}
}
/* 课程列表内容 直接用 wx统一样式 修改单位 并 整体 缩小了 */
.course-list { padding: 0.2rem 0 0.1rem 0; background: #ffffff; }
.course-list .none { display: none; }
.course-list .content-group { padding: 0 0.2rem; }
.course-list .content-group.no-child { margin-bottom: 0.1rem; }
.course-list .content-group.up { margin-bottom: 0.1rem; }
.course-list .content-group.up .body { display: none; }
.course-list .content-group .title { position: relative; padding: 0.1rem 0.54rem 0.1rem 0.2rem; color: #313131; font-size: 0.16rem; line-height: 0.24rem; background: #e5e5e5; user-select: none; cursor: pointer; }
.course-list .content-group .title .side { position: absolute; top: 50%; right: 0.24rem; transform: translateY(-50%); }
.course-list .content-group .body { position: relative; padding: 0 0.2rem; font-size: 0.16rem; line-height: 0.24rem; color: #505050; cursor: pointer; }
.course-list .content-group .body:hover { background: #f3f3f3; }
.course-list .content-group .body.on .name { color: #b2183e; }
.course-list .content-group .body .name { padding: 0.1rem 0.8rem 0.1rem 0.2rem; border-left: 0.02rem solid #c9c9c9; }
.course-list .content-group .body .name:before { width: 0.2rem; height: 0.2rem; border-radius: 0.32rem; border: 0.02rem solid #c9c9c9; background: #e5e5e5; position: absolute; left: 0.11rem; top: 0.12rem; content: ""; display: block; z-index: 10; }
.course-list .content-group .body .name .time { position: absolute; right: 0.16rem; top: 0.1rem; }
.course-list {
padding: 0.2rem 0 0.1rem 0;
background: #ffffff;
}
.course-list .none {
display: none;
}
.course-list .content-group {
padding: 0 0.2rem;
}
.course-list .content-group.no-child {
margin-bottom: 0.1rem;
}
.course-list .content-group.up {
margin-bottom: 0.1rem;
}
.course-list .content-group.up .body {
display: none;
}
.course-list .content-group .title {
position: relative;
padding: 0.1rem 0.54rem 0.1rem 0.2rem;
color: #313131;
font-size: 0.16rem;
line-height: 0.24rem;
background: #e5e5e5;
user-select: none;
cursor: pointer;
}
.course-list .content-group .title .side {
position: absolute;
top: 50%;
right: 0.24rem;
transform: translateY(-50%);
}
.course-list .content-group .body {
position: relative;
padding: 0 0.2rem;
font-size: 0.16rem;
line-height: 0.24rem;
color: #505050;
cursor: pointer;
}
.course-list .content-group .body:hover {
background: #f3f3f3;
}
.course-list .content-group .body.on .name {
color: #b2183e;
}
.course-list .content-group .body .name {
padding: 0.1rem 0.8rem 0.1rem 0.2rem;
border-left: 0.02rem solid #c9c9c9;
}
.course-list .content-group .body .name:before {
width: 0.2rem;
height: 0.2rem;
border-radius: 0.32rem;
border: 0.02rem solid #c9c9c9;
background: #e5e5e5;
position: absolute;
left: 0.11rem;
top: 0.12rem;
content: '';
display: block;
z-index: 10;
}
.course-list .content-group .body .name .time {
position: absolute;
right: 0.16rem;
top: 0.1rem;
}
/* 老师列表内容 直接用 wx统一样式 修改单位 并 整体 缩小了 */
.list-teacher { margin-bottom: 0.2rem; overflow: hidden; }
.list-teacher .img { float: left; width: 30%; min-height: 0.8rem; background: #c9c9c9; }
.list-teacher .ctx { position: relative; margin-left: 32%; min-height: 0.5rem; }
.list-teacher .ctx .top-ctx { position: absolute; top: 0; width: 100%; overflow: hidden; }
.list-teacher .ctx .top-ctx .tit { font-size: 14px; color: #313131; line-height: 1.5; overflow: hidden; word-break: break-all; }
.list-teacher .ctx .bottom-ctx { display: block; padding-top: 0.2rem; width: 100%; overflow: hidden; }
.list-teacher .ctx .bottom-ctx .t1 { font-size: 12px; line-height: 1.5; color: #707070; overflow: hidden; word-break: break-all; }
.list-teacher .ctx .bottom-ctx .t2 { font-size: 12px; line-height: 1.5; color: #707070; overflow: hidden; word-break: break-all; }
.list-teacher .ctx .bottom-ctx .t3 { font-size: 12px; color: #707070; text-overflow: ellipsis; overflow: hidden; word-break: break-all; }
.list-teacher {
margin-bottom: 0.2rem;
overflow: hidden;
}
.list-teacher .img {
float: left;
width: 30%;
min-height: 0.8rem;
background: #c9c9c9;
}
.list-teacher .ctx {
position: relative;
margin-left: 32%;
min-height: 0.5rem;
}
.list-teacher .ctx .top-ctx {
position: absolute;
top: 0;
width: 100%;
overflow: hidden;
}
.list-teacher .ctx .top-ctx .tit {
font-size: 14px;
color: #313131;
line-height: 1.5;
overflow: hidden;
word-break: break-all;
}
.list-teacher .ctx .bottom-ctx {
display: block;
padding-top: 0.2rem;
width: 100%;
overflow: hidden;
}
.list-teacher .ctx .bottom-ctx .t1 {
font-size: 12px;
line-height: 1.5;
color: #707070;
overflow: hidden;
word-break: break-all;
}
.list-teacher .ctx .bottom-ctx .t2 {
font-size: 12px;
line-height: 1.5;
color: #707070;
overflow: hidden;
word-break: break-all;
}
.list-teacher .ctx .bottom-ctx .t3 {
font-size: 12px;
color: #707070;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
/* 课程讨论 */
.pub-ques { padding: 0 0.26rem; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; }
.pub-ques .ask { position: relative; float: left; margin-top: 0.22rem; width: 40%; min-width: 1rem; height: 0.42rem; border-radius: 0.28rem; border: 1rpx solid #dcdcdc; background: #ffffff; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; }
.pub-ques .ask .img { position: absolute; left: 0.15rem; font-size: 0.24rem; line-height: 0.42rem; }
.pub-ques .ask .txt { position: absolute; left: 0.45rem; top: 0.01rem; height: 0.4rem; width: 80%; border: none; line-height: 0.4rem; font-size: 0.2rem; color: #313131; }
.pub-ques .item-order { float: right; margin-top: 0.22rem; padding: 0 0.3rem; margin-left: 0.2rem; font-size: 0.2rem; color: #313131; text-align: center; line-height: 0.42rem; border-radius: 0.28rem; background: #ffffff; cursor: pointer; }
.pub-ques .item-order.on { background: #b49441; color: #ffffff; }
.pub-ques {
padding: 0 0.26rem;
overflow: hidden;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.pub-ques .ask {
position: relative;
float: left;
margin-top: 0.22rem;
width: 40%;
min-width: 1rem;
height: 0.42rem;
border-radius: 0.28rem;
border: 1rpx solid #dcdcdc;
background: #ffffff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
}
.pub-ques .ask .img {
position: absolute;
left: 0.15rem;
font-size: 0.24rem;
line-height: 0.42rem;
}
.pub-ques .ask .txt {
position: absolute;
left: 0.45rem;
top: 0.01rem;
height: 0.4rem;
width: 80%;
border: none;
line-height: 0.4rem;
font-size: 0.2rem;
color: #313131;
}
.pub-ques .item-order {
float: right;
margin-top: 0.22rem;
padding: 0 0.3rem;
margin-left: 0.2rem;
font-size: 0.2rem;
color: #313131;
text-align: center;
line-height: 0.42rem;
border-radius: 0.28rem;
background: #ffffff;
cursor: pointer;
}
.pub-ques .item-order.on {
background: #b49441;
color: #ffffff;
}
// .discuss-scroll { }
.discuss-scroll .item-list:first-child { margin-top: 0.3rem; }
.discuss-scroll .item-list { position: relative; padding: 0.3rem 0.26rem; margin-bottom: 0.2rem; background: #fff; box-shadow: 0 2px 4px rgba(10, 4, 6, 0.1); cursor: pointer; }
.discuss-scroll .item-list .user { position: relative; overflow: hidden; }
.discuss-scroll .item-list .user .img { float: left; width: 0.6rem; height: 0.6rem; background: #e5e5e5; border-radius: 50%; }
.discuss-scroll .item-list .user .right { position: absolute; left: 0.72rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.discuss-scroll .item-list .user .right .name { font-size: 0.18rem; color: #313131; text-overflow: ellipsis; overflow: hidden; word-break:break-all; }
.discuss-scroll .item-list .user .right .time { margin-top: 0.05rem; font-size: 0.16rem; color: #a0a0a0; }
.discuss-scroll .item-list .title { margin: 0.15rem 0; font-size: 0.22rem; color: #313131; font-weight: 700; line-height: 1.5; text-align: justify; }
.discuss-scroll .item-list .text { font-size: 0.18rem; color: #535353; line-height: 1.5; text-align: justify; /* display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; */ word-break:break-all; overflow: hidden; }
.discuss-scroll .item-list .ellipsis { display: none; position: absolute; right: 0.24rem; bottom: 0.68rem; padding: 0 0.15rem 0 0.05rem; color: #535353; background: #fff; font-size: 0.18rem; }
.discuss-scroll .item-list .ellipsis.on { display: block; }
.discuss-scroll .item-list .result { margin-top: 0.15rem; font-size: 0.16rem; color: #313131; }
.discuss-scroll .item-list .course-name { position: absolute; right: 0.32rem; bottom: 0.28rem; font-size: 0.16rem; color: #b49441; }
.discuss-scroll .no-data { margin: 0.2rem 0; font-size: 0.24rem; color: #112c42; line-height: 2rem; text-align: center; background: #fff; }
.discuss-scroll .item-list:first-child {
margin-top: 0.3rem;
}
.discuss-scroll .item-list {
position: relative;
padding: 0.3rem 0.26rem;
margin-bottom: 0.2rem;
background: #fff;
box-shadow: 0 2px 4px rgba(10, 4, 6, 0.1);
cursor: pointer;
}
.discuss-scroll .item-list .user {
position: relative;
overflow: hidden;
}
.discuss-scroll .item-list .user .img {
float: left;
width: 0.6rem;
height: 0.6rem;
background: #e5e5e5;
border-radius: 50%;
}
.discuss-scroll .item-list .user .right {
position: absolute;
left: 0.72rem;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.discuss-scroll .item-list .user .right .name {
font-size: 0.18rem;
color: #313131;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
.discuss-scroll .item-list .user .right .time {
margin-top: 0.05rem;
font-size: 0.16rem;
color: #a0a0a0;
}
.discuss-scroll .item-list .title {
margin: 0.15rem 0;
font-size: 0.22rem;
color: #313131;
font-weight: 700;
line-height: 1.5;
text-align: justify;
}
.discuss-scroll .item-list .text {
font-size: 0.18rem;
color: #535353;
line-height: 1.5;
text-align: justify; /* display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; */
word-break: break-all;
overflow: hidden;
}
.discuss-scroll .item-list .ellipsis {
display: none;
position: absolute;
right: 0.24rem;
bottom: 0.68rem;
padding: 0 0.15rem 0 0.05rem;
color: #535353;
background: #fff;
font-size: 0.18rem;
}
.discuss-scroll .item-list .ellipsis.on {
display: block;
}
.discuss-scroll .item-list .result {
margin-top: 0.15rem;
font-size: 0.16rem;
color: #313131;
}
.discuss-scroll .item-list .course-name {
position: absolute;
right: 0.32rem;
bottom: 0.28rem;
font-size: 0.16rem;
color: #b49441;
}
.discuss-scroll .no-data {
margin: 0.2rem 0;
font-size: 0.24rem;
color: #112c42;
line-height: 2rem;
text-align: center;
background: #fff;
}
/* 问题发布 */
.publish { margin-bottom: 0.5rem; padding: 0.3rem; background: #f7f7f7; overflow: hidden; }
.publish .right-goback-txt { float: right; font-size: 0.2rem; color: #000000; line-height: 40px; }
.publish {
margin-bottom: 0.5rem;
padding: 0.3rem;
background: #f7f7f7;
overflow: hidden;
}
.publish .right-goback-txt {
float: right;
font-size: 0.2rem;
color: #000000;
line-height: 40px;
}
/* 课程考核内容 直接用 wx统一样式 修改单位 并 整体 缩小了 */
.course-assess { padding: 0.2rem; margin-bottom: 1rem; background: #ffffff; overflow: hidden; }
.course-assess .title { color: #313131; font-size: 0.2rem; margin: 0.4rem auto 0.2rem auto; text-align: center; }
.course-assess .topic { position: relative; width: 100%; height: 0.50rem; overflow: hidden; }
.course-assess .topic .line { width: 3rem; height: 1px; margin: 0.25rem auto 0 auto; background: #313131; }
.course-assess .topic .tit { position: absolute; top: 50%; left: 50%; padding: 0.1rem 0.22rem; font-size: 0.14rem; font-weight: 700; color: #313131; background: #fff; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.course-assess .detail { margin-bottom: 0.4rem; padding: 0 0.2rem; }
.course-assess {
padding: 0.2rem;
margin-bottom: 1rem;
background: #ffffff;
overflow: hidden;
}
.course-assess .title {
color: #313131;
font-size: 0.2rem;
margin: 0.4rem auto 0.2rem auto;
text-align: center;
}
.course-assess .topic {
position: relative;
width: 100%;
height: 0.5rem;
overflow: hidden;
}
.course-assess .topic .line {
width: 3rem;
height: 1px;
margin: 0.25rem auto 0 auto;
background: #313131;
}
.course-assess .topic .tit {
position: absolute;
top: 50%;
left: 50%;
padding: 0.1rem 0.22rem;
font-size: 0.14rem;
font-weight: 700;
color: #313131;
background: #fff;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.course-assess .detail {
margin-bottom: 0.4rem;
padding: 0 0.2rem;
}
/* 富文本不定义在这 */
/* 统计表格 */
.course-assess .table-title { font-size: 0.16rem; font-weight: 700; margin: 0.2rem 0.26rem 0.20rem 0.26rem; text-align: justify; color: #b49441; }
.course-assess .table { padding: 0 0.2rem; color: #313131; padding-bottom: 0.3rem; border-bottom: 0.02rem solid #c9c9c9; }
.course-assess .table .col3-td1 { float: left; padding-left: 0.15rem; width: 65%; text-align: left; box-sizing: border-box; -webkit-box-sizing: border-box; }
.course-assess .table .col3-td2 { float: left; width: 21%; text-align: center; }
.course-assess .table .col3-td3 { float: left; width: 14%; text-align: right; box-sizing: border-box; -webkit-box-sizing: border-box; }
.course-assess .table .col2-td1 { float: left; padding-left: 0.15rem; width: 86%; text-align: left; box-sizing: border-box; -webkit-box-sizing: border-box; }
.course-assess .table .col2-td2 { float: left; width: 14%; text-align: right; box-sizing: border-box; -webkit-box-sizing: border-box; }
.course-assess .table .th { padding: 0 0.2rem; font-size: 0.16rem; overflow: hidden; border-bottom: 0.02rem solid #e5e5e5; line-height: 1.5; font-weight: 700; }
.course-assess .table .tb { padding: 0 0 0 0.2rem; font-size: 0.14rem; overflow: hidden; }
.course-assess .table .tb .tt { padding: 0.1rem 0 0.02rem 0; line-height: 0.24rem; font-weight: 700; }
.course-assess .table .tb .rd { padding-right: 0.2rem; overflow: hidden; /* border-bottom: 1rpx solid #e5e5e5; */ line-height: 0.26rem; /* padding: 10rpx 0; */ }
.course-assess .table .tb .rd:hover { background: #efefef; }
.course-assess .table-title {
font-size: 0.16rem;
font-weight: 700;
margin: 0.2rem 0.26rem 0.2rem 0.26rem;
text-align: justify;
color: #b49441;
}
.course-assess .table {
padding: 0 0.2rem;
color: #313131;
padding-bottom: 0.3rem;
border-bottom: 0.02rem solid #c9c9c9;
}
.course-assess .table .col3-td1 {
float: left;
padding-left: 0.15rem;
width: 65%;
text-align: left;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.course-assess .table .col3-td2 {
float: left;
width: 21%;
text-align: center;
}
.course-assess .table .col3-td3 {
float: left;
width: 14%;
text-align: right;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.course-assess .table .col2-td1 {
float: left;
padding-left: 0.15rem;
width: 86%;
text-align: left;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.course-assess .table .col2-td2 {
float: left;
width: 14%;
text-align: right;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.course-assess .table .th {
padding: 0 0.2rem;
font-size: 0.16rem;
overflow: hidden;
border-bottom: 0.02rem solid #e5e5e5;
line-height: 1.5;
font-weight: 700;
}
.course-assess .table .tb {
padding: 0 0 0 0.2rem;
font-size: 0.14rem;
overflow: hidden;
}
.course-assess .table .tb .tt {
padding: 0.1rem 0 0.02rem 0;
line-height: 0.24rem;
font-weight: 700;
}
.course-assess .table .tb .rd {
padding-right: 0.2rem;
overflow: hidden; /* border-bottom: 1rpx solid #e5e5e5; */
line-height: 0.26rem; /* padding: 10rpx 0; */
}
.course-assess .table .tb .rd:hover {
background: #efefef;
}
/* .course-assess .table .tb .rd:last-child { border-bottom: none; } */
.course-assess .status-text { padding-left: 0.3rem; font-size: 0.14rem; color: #000000; line-height: 1.5; }
.course-assess .status-text {
padding-left: 0.3rem;
font-size: 0.14rem;
color: #000000;
line-height: 1.5;
}
}
@media (max-width: 767px) {
.detail-box { margin: 0.2rem; }
.detail-box {
margin: 0.2rem;
}
.detail-box .box-thd .progress .el-progress {
width: 80%;
}
......@@ -1033,7 +1458,11 @@ body .el-tab-pane { padding-top: 0; }
display: block;
}
/* 课程考核样式 */
.detail-box .course-assess .detail { padding: 0; }
.detail-box .course-assess .table { padding: 0 0 0.3rem 0; }
.detail-box .course-assess .detail {
padding: 0;
}
.detail-box .course-assess .table {
padding: 0 0 0.3rem 0;
}
}
</style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论