提交 b5b9b8d6 authored 作者: 高一's avatar 高一

sofia国际化

上级 1e93d3ba
...@@ -220,6 +220,40 @@ ...@@ -220,6 +220,40 @@
"showCourse": "View", "showCourse": "View",
"progress": "Video viewing progress" "progress": "Video viewing progress"
}, },
"courseDetail": {
"title": "Course details",
"Keeplearning": "Continue learning",
"Startlearning": "Start to learn",
"Courseselection": "Course selection",
"Videoviewingprogress": "Video viewing progress",
"Coursecontent": "Course content",
"Coursediscussion": "Discussions",
"Publishingissues": "Publishing issues ...",
"Sortbytime": "Sort by time",
"Sortbyvote": "Sort by vote",
"Releaseissues": "Post a question",
"Returntoquestionlist": "Return to report list",
"title1": "Title",
"inputtitle1": "Please enter a title",
"Textcontent": "Text content",
"Courseassessment": "Course assessment",
"Finalresult": "Final grade:",
"Courseassessmentstandard": "Assessment standards",
"Learningprogressachievements": "Learning progress and results",
"title2": "Statistics of watching 'audio and video' of the course (cumulative learning time:",
"Completionrate": ",completion rate:",
"chapter": "Chapter",
"Lengthofstudy": "Study duration",
"percent": "Percentage",
"Nodataavailable": "No data",
"subjectivequestions": "Test questions and subjective questions",
"Submissiontime": "Submit time",
"score": "score",
"Bighomework": "Final assessment",
"Status": "Status:",
"score2": "score:",
"Courselecturer": "Course Lecturer"
},
"discussion": { "discussion": {
"title": "Course discussion", "title": "Course discussion",
"tap1": "My Question", "tap1": "My Question",
...@@ -313,6 +347,10 @@ ...@@ -313,6 +347,10 @@
"abstractHint": "Please enter a summary of the report", "abstractHint": "Please enter a summary of the report",
"themeTips": "Report subject cannot be empty", "themeTips": "Report subject cannot be empty",
"submitSuccess": "Submitted successfully" "submitSuccess": "Submitted successfully"
},
"reportList": {
"title": "Academic Report",
"Appliedactivities": "Applied"
} }
}, },
"feedback": { "feedback": {
...@@ -369,6 +407,76 @@ ...@@ -369,6 +407,76 @@
"passed": "Pass", "passed": "Pass",
"failed": "Fail" "failed": "Fail"
} }
},
"test": {
"title": "This is a test page",
"yuyan": "Switch between Chinese and English:"
},
"survey": {
"surveyy": {
"title": "Sofia MBA Teaching Service Evaluation Form",
"title2": "Hello! In order to ensure that we can provide you with better courses, improve the quality of teaching and services, please give us valuable opinions and suggestions for this course. Thank you for your support! (Please select a star rating, select 1 star for 1 point, up to 5 stars). Please rate each item from 1 (low) to 5 (high) and add any comments you want to write.",
"kecheng": "Course Title:",
"Pleaseexplain": "Please explain",
"tip": "What else needs to be improved",
"btmtip": "If you have gained a lot from the ZIJING MBA degree course, we would like to thank you very much for helping us recommend students as good as you to join the MBA family. Please contact your head teacher for details.",
"previouspage": "previous page",
"submit": "Submit",
"nextpage": "next page"
},
"surveyPhone": {
"title": "(course assessment)",
"Pleaseexplain": "Please explain",
"tip": "What else needs to be improved",
"previouspage": "previous page",
"submit": "Submit",
"nextpage": "next page"
}
},
"other": {
"message": {
"title": "Notifications",
"tip": "You have not received any notice"
},
"setPwd": {
"title": "Change password",
"Oldpassword": "Old password",
"inputOldpassword": "Please enter the password",
"newpassword": "new password",
"inputnewpassword": "Enter a new password",
"Repeatnewpassword": "Re-enter the new password",
"inputRepeatnewpassword": "Please enter the new password again",
"save": "Save"
},
"updatePic": {
"title": "Change profile photo",
"student": "Student name:",
"studentnum": "College ID:",
"studentid": "Student Sid:",
"studentsoid": "Student SSO_ id:",
"msg": "Supports jpg, gif, png or bmp format pictures, the recommended file size is less than 5M",
"clickup": "Click upload",
"Oldpassword": "Old password",
"inputOldpassword": "Enter the password",
"newpassword": "new password",
"inputnewpassword": "Enter a new password",
"Repeatnewpassword": "Re-enter the new password",
"inputRepeatnewpassword": "Please enter the new password again",
"save": "Save"
}
},
"mobile": {
"studentHelp": {
"title": "User Guide - student end"
},
"teacherHelp": {
"title": "User Guide - teacher side"
}
} }
}, },
"live": { "live": {
......
...@@ -203,6 +203,11 @@ ...@@ -203,6 +203,11 @@
"learn": { "learn": {
"course": { "course": {
"title": "我的课程", "title": "我的课程",
"title2": "直播提醒:",
"msg": "您的直播课程",
"msg1": "将于",
"msg2": "开始",
"Enterlive": "进入直播",
"goCourseAllStr": "请去选课广场选课", "goCourseAllStr": "请去选课广场选课",
"noFitCourseStr": "暂无符合条件的课程", "noFitCourseStr": "暂无符合条件的课程",
"noCourseStr": "暂无相关课程", "noCourseStr": "暂无相关课程",
...@@ -221,6 +226,40 @@ ...@@ -221,6 +226,40 @@
"showCourse": "查看课程", "showCourse": "查看课程",
"progress": "视频观看进度" "progress": "视频观看进度"
}, },
"courseDetail": {
"title": "课程详情",
"Keeplearning": "继续学习",
"Startlearning": "开始学习",
"Courseselection": "选课",
"Videoviewingprogress": "视频观看进度",
"Coursecontent": "课程内容",
"Coursediscussion": "课程讨论",
"Publishingissues": "发布问题 ...",
"Sortbytime": "按时间排序",
"Sortbyvote": "按投票排序",
"Releaseissues": "发布问题",
"Returntoquestionlist": "返回问题列表",
"title1": "标题",
"inputtitle1": "请输入标题",
"Textcontent": "正文内容",
"Courseassessment": "课程考核",
"Finalresult": "最终成绩:",
"Courseassessmentstandard": "课程考核标准",
"Learningprogressachievements": "学习进度及成绩",
"title2": "课程“音视频”观看统计( 累计学习时长:",
"Completionrate": ",完成率:",
"chapter": "章节",
"Lengthofstudy": "学习时长",
"percent": "百分比",
"Nodataavailable": "暂无数据",
"subjectivequestions": "试题及主观题",
"Submissiontime": "提交时间",
"score": "得分",
"Bighomework": "大作业",
"Status": "状 态:",
"score2": "得 分:",
"Courselecturer": "课程讲师"
},
"discussion": { "discussion": {
"title": "课程讨论", "title": "课程讨论",
"tap1": "我提出的问题", "tap1": "我提出的问题",
...@@ -314,6 +353,10 @@ ...@@ -314,6 +353,10 @@
"abstractHint": "请输入报告摘要", "abstractHint": "请输入报告摘要",
"themeTips": "报告主题不能为空", "themeTips": "报告主题不能为空",
"submitSuccess": "提交成功" "submitSuccess": "提交成功"
},
"reportList": {
"title": "学术报告列表",
"Appliedactivities": "已申请的活动"
} }
}, },
"feedback": { "feedback": {
...@@ -370,6 +413,76 @@ ...@@ -370,6 +413,76 @@
"passed": "通过", "passed": "通过",
"failed": "未通过" "failed": "未通过"
} }
},
"test": {
"title": "这是一个测试页面",
"yuyan": "切换中英文:"
},
"survey": {
"surveyy": {
"title": "索菲亚MBA课程教学服务评估表",
"title2": "您好!为保证我们能够为您提供更优质的课程,提高教学质量及服务,请您对此次课程提出宝贵的意见和建议。感谢您对我们工作的支持!(请您选择星级,选中1颗星为1分,最高5颗星)。请用1(低)到5(高)为每一项打分,并加上任何您想写的评论。",
"kecheng": "课程名称:",
"Pleaseexplain": "请说明",
"tip": "还有哪些需要改进的方面",
"btmtip": "如果您在紫荆MBA学位课程的收获比较大,我们会非常感谢您帮助我们推荐和您一样优秀的学员加入到MBA的大家庭,具体请联系您所在班的班主任。",
"previouspage": "上一页",
"submit": "提交",
"nextpage": "下一页"
},
"surveyPhone": {
"title": "(课程评估)",
"Pleaseexplain": "请说明",
"tip": "还有哪些需要改进的方面",
"previouspage": "上一页",
"submit": "提交",
"nextpage": "下一页"
}
},
"other": {
"message": {
"title": "通知",
"tip": "您没有收到任何通知"
},
"setPwd": {
"title": "修改密码",
"Oldpassword": "旧密码",
"inputOldpassword": "请输入密码",
"newpassword": "新密码",
"inputnewpassword": "请输入新密码",
"Repeatnewpassword": "重复新密码",
"inputRepeatnewpassword": "请重复输入新密码",
"save": "保存"
},
"updatePic": {
"title": "修改头像",
"student": "学员姓名:",
"studentnum": "学员学号:",
"studentid": "学员sid:",
"studentsoid": "学员sso_id:",
"msg": "支持jpg、gif、png或bmp格式的图片,建议文件小于5M",
"clickup": "点击上传",
"Oldpassword": "旧密码",
"inputOldpassword": "请输入密码",
"newpassword": "新密码",
"inputnewpassword": "请输入新密码",
"Repeatnewpassword": "重复新密码",
"inputRepeatnewpassword": "请重复输入新密码",
"save": "保存"
}
},
"mobile": {
"studentHelp": {
"title": "使用指南 - 学生端"
},
"teacherHelp": {
"title": "使用指南 - 教师端"
}
} }
}, },
"live": { "live": {
......
<template> <template>
<div> <div>
<template v-if="newLiveMsg.live"> <template v-if="newLiveMsg.live">
<div class="live-msg"> <div class="live-msg">
<div class="txt">直播提醒:</div> <div class="txt">{{ $t('pages.learn.course.title2') }}</div>
<div class="txt">您的直播课程 《{{newLiveMsg.course_name}}》 将于 {{newLiveMsg.live.start_time}} 开始</div> <div class="txt">
<el-button class="in-btn" type="primary" size="small" round @click="goLive">进入直播</el-button> {{ $t('pages.learn.course.msg') }}{{ newLiveMsg.course_name }}{{ $t('pages.learn.course.msg1') }}
</div> {{ newLiveMsg.live.start_time }}
</template> {{ $t('pages.learn.course.msg2') }}
<div class="con-title">{{ $t('pages.learn.course.title') }}</div> </div>
<div class="con-box"> <el-button class="in-btn" type="primary" size="small" round @click="goLive">{{
<template v-for="(item, index) in find"> $t('pages.learn.course.Enterlive')
<ul v-bind:key="index" class="tabs-list"> }}</el-button>
<template v-if="find[index].arrItem.length"> </div>
<li class="tabs-hd">{{item.name}}</li>
<template v-for="(item1, index1) in item.arrItem">
<li v-bind:key="index1">
<div :class="['tab', (item.selectIndex == index1 ? 'on' : '')]" @click="selFindSelect" :data-index='index1' :data-i="index" :data-key='item.key' :data-val='item1.val'>{{item1.name}}</div>
</li>
</template>
</template>
</ul>
</template> </template>
</div> <div class="con-title">{{ $t('pages.learn.course.title') }}</div>
<div class="con-box">
<template v-for="(item, index) in find">
<ul v-bind:key="index" class="tabs-list">
<template v-if="find[index].arrItem.length">
<li class="tabs-hd">{{ item.name }}</li>
<template v-for="(item1, index1) in item.arrItem">
<li v-bind:key="index1">
<div
:class="['tab', item.selectIndex == index1 ? 'on' : '']"
@click="selFindSelect"
:data-index="index1"
:data-i="index"
:data-key="item.key"
:data-val="item1.val"
>
{{ item1.name }}
</div>
</li>
</template>
</template>
</ul>
</template>
</div>
<div class="switch-box"> <div class="switch-box">
<el-button type="info" size="medium" @click="studyEarlyUpdate" plain>{{ $t('pages.learn.course.lastLearn') }}<i :class="['el-icon-caret-' + (filter.studyEarly == 'down' ? 'bottom' : 'top'), 'icon']"></i></el-button> <el-button type="info" size="medium" @click="studyEarlyUpdate" plain
<el-button type="info" size="medium" @click="selectTimeUpdate" plain>{{ $t('pages.learn.course.updateTime') }}<i :class="['el-icon-caret-' + (filter.selectTime == 'down' ? 'bottom' : 'top'), 'icon']"></i></el-button> >{{ $t('pages.learn.course.lastLearn')
<!-- <el-button class="rbtn" type="primary" size="medium" icon="el-icon-self-cc-book icon" @click="goCourseAll">{{ $t('pages.learn.course.changeCourse') }}</el-button> --> }}<i :class="['el-icon-caret-' + (filter.studyEarly == 'down' ? 'bottom' : 'top'), 'icon']"></i
</div> ></el-button>
<el-button type="info" size="medium" @click="selectTimeUpdate" plain
>{{ $t('pages.learn.course.updateTime')
}}<i :class="['el-icon-caret-' + (filter.selectTime == 'down' ? 'bottom' : 'top'), 'icon']"></i
></el-button>
<!-- <el-button class="rbtn" type="primary" size="medium" icon="el-icon-self-cc-book icon" @click="goCourseAll">{{ $t('pages.learn.course.changeCourse') }}</el-button> -->
</div>
<div class="con-box" v-loading="loading"> <div class="con-box" v-loading="loading">
<ul class="course-list"> <ul class="course-list">
<template v-for="(item, index) in homeList"> <template v-for="(item, index) in homeList">
<li v-bind:key="index" class="item"> <li v-bind:key="index" class="item">
<div class="left-pic"> <div class="left-pic">
<template v-if="item.src"> <template v-if="item.src">
<img :src="item.src" alt="" @click="goCourseContent" :data-cid='item.id' :data-sid='item.sid'> <img :src="item.src" alt="" @click="goCourseContent" :data-cid="item.id" :data-sid="item.sid" />
</template> </template>
<template v-else> <template v-else>
<div class="no-img"><i class="el-icon-self-13"></i></div> <div class="no-img"><i class="el-icon-self-13"></i></div>
</template>
</div>
<div class="right-bd">
<div class="title" @click="goCourseContent" :data-cid='item.id' :data-sid='item.sid'>{{item.title}}</div>
<div class="tags">
<template v-for="(item1, index) in item.arrTab">
<span v-bind:key="index">{{item1}}</span>
</template> </template>
</div> </div>
<div class="time"> <div class="right-bd">
{{item.status}}&emsp;&emsp;<em>{{item.time}}</em> <div class="title" @click="goCourseContent" :data-cid="item.id" :data-sid="item.sid">
</div> {{ item.title }}
<div class="progress"> </div>
{{ $t('pages.learn.course.progress') }}&emsp;<el-progress :percentage="item.progress > 99.5 ? 100 : item.progress" color="#b49441"></el-progress> <div class="tags">
<template v-for="(item1, index) in item.arrTab">
<span v-bind:key="index">{{ item1 }}</span>
</template>
</div>
<div class="time">
{{ item.status }}&emsp;&emsp;<em>{{ item.time }}</em>
</div>
<div class="progress">
{{ $t('pages.learn.course.progress') }}&emsp;<el-progress
:percentage="item.progress > 99.5 ? 100 : item.progress"
color="#b49441"
></el-progress>
</div>
<div class="right-sel">{{ item.myStatus }}</div>
<el-button
class="in-btn"
type="primary"
size="small"
round
@click="goCourseContent"
:data-cid="item.id"
:data-sid="item.sid"
>{{ $t('pages.learn.course.showCourse') }}</el-button
>
</div> </div>
<div class="right-sel">{{item.myStatus}}</div> </li>
<el-button class="in-btn" type="primary" size="small" round @click="goCourseContent" :data-cid='item.id' :data-sid='item.sid'>{{ $t('pages.learn.course.showCourse') }}</el-button> </template>
</div> <template v-if="!homeList.length">
</li> <div class="no-data">{{ $t('pages.learn.course.noCourseStr') }}</div>
</template> </template>
<template v-if="!homeList.length"> </ul>
<div class='no-data'>{{ $t('pages.learn.course.noCourseStr') }}</div> </div>
</template>
</ul>
</div> </div>
</div>
</template> </template>
<script> <script>
import cAction from '@action' import cAction from '@action'
export default { export default {
components: { }, components: {},
data () { data() {
return { return {
filter: { filter: {
studyEarly: 'down', studyEarly: 'down',
selectTime: 'down' selectTime: 'down'
}, },
find: [{ find: [
name: this.$t('pages.learn.course.semeter'), {
isShow: false, name: this.$t('pages.learn.course.semeter'),
selectIndex: 0, isShow: false,
key: 'semester_id', selectIndex: 0,
arrItem: [] // 从后台请求 key: 'semester_id',
}, { arrItem: [] // 从后台请求
name: this.$t('pages.learn.course.courseType'), },
isShow: false, {
selectIndex: 0, name: this.$t('pages.learn.course.courseType'),
key: 'course_type', isShow: false,
arrItem: [ selectIndex: 0,
{ val: '-1', name: this.$t('pages.learn.course.allLearn') }, key: 'course_type',
{ val: '1', name: this.$t('pages.learn.course.mustLearn') }, arrItem: [
{ val: '2', name: this.$t('pages.learn.course.changeLearn') }, {
{ val: '3', name: this.$t('pages.learn.course.repeatLearn') } val: '-1',
] name: this.$t('pages.learn.course.allLearn')
}], },
{
val: '1',
name: this.$t('pages.learn.course.mustLearn')
},
{
val: '2',
name: this.$t('pages.learn.course.changeLearn')
},
{
val: '3',
name: this.$t('pages.learn.course.repeatLearn')
}
]
}
],
homeList: [], // 从后台请求 homeList: [], // 从后台请求
param: {}, param: {},
timeInterval: null, timeInterval: null,
...@@ -103,7 +153,7 @@ export default { ...@@ -103,7 +153,7 @@ export default {
loading: false loading: false
} }
}, },
mounted () { mounted() {
if (this.timeInterval) { if (this.timeInterval) {
clearInterval(this.timeInterval) clearInterval(this.timeInterval)
this.timeInterval = null this.timeInterval = null
...@@ -113,41 +163,55 @@ export default { ...@@ -113,41 +163,55 @@ export default {
// 定时获取最新直播 // 定时获取最新直播
this.timeInterval = setInterval(this.getLatestLive, 10000) this.timeInterval = setInterval(this.getLatestLive, 10000)
cAction.Course.getLearnFind().then(data => { cAction.Course.getLearnFind()
this.find[0].arrItem = data .then(data => {
this.getAjaxList(true, this.$t('pages.learn.course.goCourseAllStr')) this.find[0].arrItem = data
}).catch(e => { this.$message.error(e.message) }).finally(() => { }) this.getAjaxList(true, this.$t('pages.learn.course.goCourseAllStr'))
})
.catch(e => {
this.$message.error(e.message)
})
.finally(() => {})
}, },
destroyed () { destroyed() {
if (this.timeInterval) { if (this.timeInterval) {
clearInterval(this.timeInterval) clearInterval(this.timeInterval)
this.timeInterval = null this.timeInterval = null
} }
}, },
methods: { methods: {
goCourseAll () { goCourseAll() {
this.$router.push({ path: '/app/learn/course-all' }) this.$router.push({
path: '/app/learn/course-all'
})
}, },
goCourseContent (e) { goCourseContent(e) {
const cid = e.currentTarget.dataset.cid const cid = e.currentTarget.dataset.cid
const sid = e.currentTarget.dataset.sid const sid = e.currentTarget.dataset.sid
this.$router.push({ path: `/app/learn/course-detail/${sid}/${cid}` }) this.$router.push({
path: `/app/learn/course-detail/${sid}/${cid}`
})
}, },
getAjaxList (bool, str) { getAjaxList(bool, str) {
this.loading = true this.loading = true
cAction.Course.getCourseList(bool, this.param).then(json => { cAction.Course.getCourseList(bool, this.param)
this.homeList = json .then(json => {
if (!json.length) { this.homeList = json
this.$message(str) if (!json.length) {
} this.$message(str)
}).catch(e => { this.$message.error(e.message) }).finally(() => { }
this.loading = false })
}) .catch(e => {
this.$message.error(e.message)
})
.finally(() => {
this.loading = false
})
}, },
/** /**
* 分类选择 - 选中某一项 * 分类选择 - 选中某一项
*/ */
selFindSelect (e) { selFindSelect(e) {
const _data = e.currentTarget.dataset const _data = e.currentTarget.dataset
const index = _data.index const index = _data.index
const json = this.find const json = this.find
...@@ -166,8 +230,8 @@ export default { ...@@ -166,8 +230,8 @@ export default {
/** /**
* 筛选 - 最近学习顺序 * 筛选 - 最近学习顺序
*/ */
studyEarlyUpdate () { studyEarlyUpdate() {
const na = (this.filter.studyEarly === 'up' ? 'down' : 'up') const na = this.filter.studyEarly === 'up' ? 'down' : 'up'
this.filter.studyEarly = na this.filter.studyEarly = na
if (na === 'down') { if (na === 'down') {
this.param.order_type = 'learn_time' this.param.order_type = 'learn_time'
...@@ -180,8 +244,8 @@ export default { ...@@ -180,8 +244,8 @@ export default {
/** /**
* 筛选 - 选修时间顺序 * 筛选 - 选修时间顺序
*/ */
selectTimeUpdate () { selectTimeUpdate() {
const na = (this.filter.selectTime === 'up' ? 'down' : 'up') const na = this.filter.selectTime === 'up' ? 'down' : 'up'
this.filter.selectTime = na this.filter.selectTime = na
if (na === 'down') { if (na === 'down') {
this.param.order_type = 'join_time' this.param.order_type = 'join_time'
...@@ -192,33 +256,47 @@ export default { ...@@ -192,33 +256,47 @@ export default {
this.getAjaxList(true, this.$t('pages.learn.course.goCourseAllStr')) this.getAjaxList(true, this.$t('pages.learn.course.goCourseAllStr'))
}, },
/* 直接进直播 */ /* 直接进直播 */
goLive () { goLive() {
const live = this.newLiveMsg.live const live = this.newLiveMsg.live
if (live.type === 8) { if (live.type === 8) {
window.open(live.record_url || live.join_url) window.open(live.record_url || live.join_url)
} else { } else {
this.$router.push({ name: 'viewerCourseChapter', params: { sid: this.newLiveMsg.semester_id, cid: this.newLiveMsg.course_id, id: this.newLiveMsg.chapter_id } }) this.$router.push({
name: 'viewerCourseChapter',
params: {
sid: this.newLiveMsg.semester_id,
cid: this.newLiveMsg.course_id,
id: this.newLiveMsg.chapter_id
}
})
} }
}, },
// 获取最新直播 // 获取最新直播
getLatestLive() { getLatestLive() {
cAction.Player.getNewLiveMsg().then(json => { cAction.Player.getNewLiveMsg()
if (json.status === 200) { .then(json => {
this.newLiveMsg = json.data if (json.status === 200) {
} this.newLiveMsg = json.data
}).catch(e => { this.$message.error(e.message) }) }
})
.catch(e => {
this.$message.error(e.message)
})
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.live-msg { .live-msg {
position: relative; position: relative;
padding: 15px; padding: 15px;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
.txt { .txt {
padding-right: 100px; padding-right: 100px;
} }
.in-btn { .in-btn {
position: absolute; position: absolute;
right: 20px; right: 20px;
...@@ -226,6 +304,7 @@ export default { ...@@ -226,6 +304,7 @@ export default {
transform: translateY(-50%); transform: translateY(-50%);
} }
} }
/* 列表 筛选 */ /* 列表 筛选 */
ul.tabs-list { ul.tabs-list {
float: left; float: left;
...@@ -235,9 +314,11 @@ ul.tabs-list { ...@@ -235,9 +314,11 @@ ul.tabs-list {
font-size: 0.16rem; font-size: 0.16rem;
line-height: 1.5; line-height: 1.5;
border-top: 1px solid #e8e8e8; border-top: 1px solid #e8e8e8;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.tabs-hd { .tabs-hd {
display: inline-block; display: inline-block;
color: #fff; color: #fff;
...@@ -247,73 +328,90 @@ ul.tabs-list { ...@@ -247,73 +328,90 @@ ul.tabs-list {
text-align: center; text-align: center;
background: url('~@/assets/images/type.png') no-repeat 0 0; background: url('~@/assets/images/type.png') no-repeat 0 0;
} }
li { li {
float: left; float: left;
list-style: none; list-style: none;
padding: 0.1rem 0; padding: 0.1rem 0;
margin-right: 0.2rem; margin-right: 0.2rem;
.tab { .tab {
padding: 0 0.1rem; padding: 0 0.1rem;
cursor: pointer; cursor: pointer;
&.on { &.on {
background: #b49441; background: #b49441;
color: #ffffff; color: #ffffff;
} }
&:focus, &:hover {
&:focus,
&:hover {
color: #b49441; color: #b49441;
background: #eeeeee; background: #eeeeee;
} }
} }
} }
} }
/* 筛选按钮 */ /* 筛选按钮 */
.switch-box { .switch-box {
margin: 0 0.3rem; margin: 0 0.3rem;
.icon { .icon {
margin-left: 0.1rem; margin-left: 0.1rem;
} }
.rbtn { .rbtn {
float: right; float: right;
} }
} }
/* 课程列表 */ /* 课程列表 */
ul.course-list { ul.course-list {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 0.18rem; font-size: 0.18rem;
color: #313131; color: #313131;
.no-data { .no-data {
text-align: center; text-align: center;
line-height: 2rem; line-height: 2rem;
} }
li.item { li.item {
padding: 0.1rem 0; padding: 0.1rem 0;
list-style: none; list-style: none;
border-bottom: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc;
overflow: hidden; overflow: hidden;
&:first-child { &:first-child {
padding-top: 0; padding-top: 0;
} }
&:last-child { &:last-child {
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
} }
.left-pic { .left-pic {
position: relative; position: relative;
float: left; float: left;
width: 1.8rem; width: 1.8rem;
// min-height: 1rem; // min-height: 1rem;
overflow: hidden; overflow: hidden;
.no-img { .no-img {
width: 100%; width: 100%;
height: 1rem; height: 1rem;
text-align: center; text-align: center;
line-height: 1.1rem; line-height: 1.1rem;
border: 1px solid #e2e2e2; border: 1px solid #e2e2e2;
i { i {
font-size: 0.4rem; font-size: 0.4rem;
color: #e2e2e2; color: #e2e2e2;
} }
} }
img { img {
// position: absolute; // position: absolute;
// top: 50%; // top: 50%;
...@@ -325,10 +423,12 @@ ul.course-list { ...@@ -325,10 +423,12 @@ ul.course-list {
cursor: pointer; cursor: pointer;
} }
} }
.right-bd { .right-bd {
position: relative; position: relative;
display: block; display: block;
margin-left: 2rem; margin-left: 2rem;
.title { .title {
width: 80%; width: 80%;
line-height: 1.5; line-height: 1.5;
...@@ -338,37 +438,46 @@ ul.course-list { ...@@ -338,37 +438,46 @@ ul.course-list {
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
} }
.tags { .tags {
margin: 0.05rem 0; margin: 0.05rem 0;
font-size: 0.14rem; font-size: 0.14rem;
span { span {
padding: 0 0.1rem; padding: 0 0.1rem;
margin: 0; margin: 0;
border-right: 1px solid #313131; border-right: 1px solid #313131;
&:first-child { &:first-child {
padding-left: 0; padding-left: 0;
} }
&:last-child { &:last-child {
border: none; border: none;
} }
} }
} }
.time { .time {
font-size: 0.12rem; font-size: 0.12rem;
em { em {
font-style: normal; font-style: normal;
color: #898989; color: #898989;
} }
} }
.progress { .progress {
margin-top: 0.05rem; margin-top: 0.05rem;
font-size: 14px; font-size: 14px;
.el-progress { .el-progress {
width: 50%; width: 50%;
display: inline-block; display: inline-block;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
} }
.right-sel { .right-sel {
position: absolute; position: absolute;
right: 0; right: 0;
...@@ -376,6 +485,7 @@ ul.course-list { ...@@ -376,6 +485,7 @@ ul.course-list {
font-size: 14px; font-size: 14px;
padding: 0 0.1rem; padding: 0 0.1rem;
} }
.in-btn { .in-btn {
position: absolute; position: absolute;
right: 0; right: 0;
......
<template> <template>
<div> <div>
<div class="con-title">课程详情</div> <div class="con-title">{{ $t('pages.learn.courseDetail.title') }}</div>
<div class="detail-box"> <div class="detail-box">
<div class="box-thd"> <div class="box-thd">
<div class="title" @click="noWantThisCourse">{{headerInfo.title}} <div class="title" @click="noWantThisCourse">
<template v-if='headerInfo.isStart && tabs[1].chapterList.currentChapter'> {{ headerInfo.title }}
<el-button class="rbtn" type="primary" size="mini" @click='startLearn(tabs[1].chapterList.currentChapter)'>继续学习</el-button> <template v-if="headerInfo.isStart && tabs[1].chapterList.currentChapter">
</template> <el-button
<template v-else-if='headerInfo.isStart'> class="rbtn"
<el-button class="rbtn" type="primary" size="mini" @click='startLearn(firstVideo)'>开始学习</el-button> type="primary"
</template> size="mini"
<template v-else> @click="startLearn(tabs[1].chapterList.currentChapter)"
<el-button class="rbtn" type="primary" size="mini" @click='wantThisCourse'>选课</el-button> >{{ $t('pages.learn.courseDetail.Keeplearning') }}</el-button
</template> >
</template>
<template v-else-if="headerInfo.isStart">
<el-button class="rbtn" type="primary" size="mini" @click="startLearn(firstVideo)">{{
$t('pages.learn.courseDetail.Startlearning')
}}</el-button>
</template>
<template v-else>
<el-button class="rbtn" type="primary" size="mini" @click="wantThisCourse">{{
$t('pages.learn.courseDetail.Courseselection')
}}</el-button>
</template>
</div>
<div class="tags">
<template v-for="(item1, index) in headerInfo.arrTab">
<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="progress">
{{ $t('pages.learn.courseDetail.Videoviewingprogress') }}&emsp;<el-progress
:percentage="headerInfo.progress"
color="#b49441"
></el-progress>
</div>
</div> </div>
<div class="tags"> <div class="box-tbd">
<template v-for="(item1, index) in headerInfo.arrTab"> <div class="left-pic">
<span v-bind:key="index" class='tabs-item'>{{item1}}</span> <template v-if="headerInfo.bgSrc">
</template> <img :src="headerInfo.bgSrc" alt="" />
</template>
<template v-else>
<div class="no-img"><i class="el-icon-self-13"></i></div>
</template>
</div>
<div class="right-content" v-html="tabs[0].content.text"></div>
</div> </div>
<div class="time">{{headerInfo.time}} {{headerInfo.status}}</div> <el-row :gutter="20">
<div style="float: left; width: 100%; height: 1px;"></div> <el-col :xs="24" :sm="15" :md="17" :lg="18" :xl="20">
<div class="progress"> <el-tabs v-model="activeName" @tab-click="handleClick">
视频观看进度&emsp;<el-progress :percentage="headerInfo.progress" color="#b49441"></el-progress> <el-tab-pane :label="$t('pages.learn.courseDetail.Coursecontent')" name="1">
</div> <div class="course-list">
</div> <template v-for="(_item, index) in tabs[1].chapterList.course">
<div class="box-tbd"> <div
<div class="left-pic"> v-bind:key="index"
<template v-if="headerInfo.bgSrc"> :class="['content-group', !_item.chapters.length ? 'no-child' : '', _item.isUp ? 'up' : '']"
<img :src="headerInfo.bgSrc" alt=""> >
</template> <div class="title" @click="clickJumpOrStatus(index, _item)">
<template v-else> {{ _item.title }}
<div class="no-img"><i class="el-icon-self-13"></i></div> <i
</template> :class="[
</div> 'side',
<div class="right-content" v-html="tabs[0].content.text"></div> _item.chapters.length ? '' : 'none',
</div> _item.isUp ? 'el-icon-arrow-down' : 'el-icon-arrow-up'
<el-row :gutter="20"> ]"
<el-col :xs="24" :sm="15" :md="17" :lg="18" :xl="20"> ></i>
<el-tabs v-model="activeName" @tab-click="handleClick"> </div>
<el-tab-pane label="课程内容" name="1"> <template v-for="(item1, index1) in _item.chapters">
<div class='course-list'> <div
<template v-for="(_item, index) in tabs[1].chapterList.course"> v-bind:key="index1"
<div v-bind:key="index" :class='["content-group", (!_item.chapters.length ? "no-child" : ""), (_item.isUp ? "up" : "")]'> :class="['body', item1.id === tabs[1].chapterList.currentChapterId && 'on']"
<div class='title' @click='clickJumpOrStatus(index, _item)'>{{_item.title}} >
<i :class="['side', (_item.chapters.length ? '' : 'none'), (_item.isUp ? 'el-icon-arrow-down' : 'el-icon-arrow-up')]"></i> <div
</div> class="name"
<template v-for="(item1, index1) in _item.chapters"> :data-vid="item1.vid"
<div v-bind:key="index1" :class='["body", (item1.id === tabs[1].chapterList.currentChapterId && "on")]'> :data-cid="item1.cid"
<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)'> :data-sid="item1.sid"
{{item1.name}} :data-hasVA="item1.time"
<template v-if='[5,8].includes(item1.type)'> :data-type="item1.video_provider"
<div class='time'>{{ item1.live.start_time }} {{ item1.live.statusStr }}</div> :data-name="item1.name"
</template> :data-index="index"
<template v-else> :data-count="index1"
<div class='time'>{{item1.time}}</div> @click="jumpToOtherVA(item1)"
</template> >
{{ 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>
</template>
</div>
</div> </div>
</template>
</div>
</template>
</div>
</el-tab-pane>
<el-tab-pane :label="$t('pages.learn.courseDetail.Coursediscussion')" name="2">
<template v-if="!isPublicShow">
<div class="pub-ques">
<div class="ask">
<i class="el-icon-edit img"></i>
<div class="txt" @click="publishDiscuss">
{{ $t('pages.learn.courseDetail.Publishingissues') }}
</div> </div>
</template> </div>
<div
:class="['item-order', sort[0].isShow ? 'on' : '']"
@click="sortFn"
:data-index="0"
:data-str="sort[0].str"
>
{{ $t('pages.learn.courseDetail.Sortbytime') }}
</div>
<div
:class="['item-order', sort[1].isShow ? 'on' : '']"
@click="sortFn"
:data-index="1"
:data-str="sort[1].str"
>
{{ $t('pages.learn.courseDetail.Sortbyvote') }}
</div>
</div>
<div class="discuss-scroll" bindscrolltolower="loadmore" bindscrolltoupper="updatenew">
<discuss :params="params"></discuss>
</div> </div>
</template> </template>
</div> <template v-else>
</el-tab-pane> <div class="publish">
<el-tab-pane label="课程讨论" name="2"> <div style="overflow: hidden">
<template v-if="!isPublicShow"> <div class="right-goback-txt">
<div class='pub-ques'> {{ $t('pages.learn.courseDetail.Releaseissues') }}
<div class='ask'> </div>
<i class="el-icon-edit img"></i> <el-button type="text" @click="gobackDiscuss">{{
<div class="txt" @click='publishDiscuss'>发布问题 ...</div> $t('pages.learn.courseDetail.Returntoquestionlist')
}}</el-button>
</div>
<el-form ref="setPublishform" :model="publish" :rules="publishRules">
<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>
<div style="line-height: 1.5; font-size: 0.16rem; margin-bottom: 0.2rem">
{{ $t('pages.learn.courseDetail.Textcontent') }}
</div>
<textarea id="editor"></textarea>
<div style="height: 0.2rem"></div>
<el-form-item>
<el-button type="primary" @click="onSubmitPublish">{{
$t('pages.learn.courseDetail.Releaseissues')
}}</el-button>
</el-form-item>
</el-form>
</div> </div>
<div :class='["item-order", (sort[0].isShow ? "on" : "")]' @click='sortFn' :data-index='0' :data-str='sort[0].str'>按时间排序</div> </template>
<div :class='["item-order", (sort[1].isShow ? "on" : "")]' @click='sortFn' :data-index='1' :data-str='sort[1].str'>按投票排序</div> </el-tab-pane>
</div> <el-tab-pane :label="$t('pages.learn.courseDetail.Courseassessment')" name="3">
<div class='discuss-scroll' bindscrolltolower='loadmore' bindscrolltoupper='updatenew'> <div class="course-assess">
<discuss :params="params"></discuss> <div class="title">
</div> {{ $t('pages.learn.courseDetail.Finalresult')
</template> }}{{ (tabs[3].assess.score && tabs[3].assess.score + '分') || '暂无' }}
<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> </div>
<el-form ref="setPublishform" :model="publish" :rules="publishRules"> <div class="topic">
<el-form-item label="标题" prop="title"> <div class="line"></div>
<el-input v-model="publish.title" type="text" placeholder="请输入标题"></el-input> <div class="tit">
</el-form-item> {{ $t('pages.learn.courseDetail.Courseassessmentstandard') }}
<div style="line-height: 1.5; font-size: 0.16rem; margin-bottom: 0.2rem;">正文内容</div> </div>
<textarea id="editor"></textarea>
<div style="height: 0.2rem;"></div>
<el-form-item>
<el-button type="primary" @click="onSubmitPublish">发布问题</el-button>
</el-form-item>
</el-form>
</div>
</template>
</el-tab-pane>
<el-tab-pane label="课程考核" name="3">
<div class='course-assess'>
<div class='title'>最终成绩:{{tabs[3].assess.score && (tabs[3].assess.score + '分') || '暂无'}}</div>
<div class='topic'>
<div class='line'></div>
<div class='tit'>课程考核标准</div>
</div>
<div class='detail'>
<div class='detail-rich' v-html='tabs[3].richText'></div>
</div>
<div class='topic'>
<div class='line'></div>
<div class='tit'>学习进度及成绩</div>
</div>
<div class='table-title'>课程“音视频”观看统计( 累计学习时长:{{tabs[3].assess.duration}},完成率:{{tabs[3].assess.progress}} )</div>
<div class='table'>
<div class='th'>
<div class='col3-td1'>章节</div>
<div class='col3-td2'>学习时长</div>
<div class='col3-td3'>百分比</div>
</div> </div>
<template v-for='(item1, index) in tabs[3].assess.video'> <div class="detail">
<div v-bind:key="index" class='tb'> <div class="detail-rich" v-html="tabs[3].richText"></div>
<div class='tt'>{{item1.title}}</div> </div>
<template v-for='(item2, index) in item1.arr'> <div class="topic">
<div v-bind:key="index" class='rd'> <div class="line"></div>
<div class='col3-td1' :data-sid='item1.sid' :data-cid='item1.cid' :data-vid='item2.vid' :data-id='item2.id' :data-type='item2.type' :data-duration='item2.duration' @mousedown="jumpVAOrfinishVA($event)">{{item2.name}}</div> <div class="tit">
<div class='col3-td2'>{{item2.time}}</div> {{ $t('pages.learn.courseDetail.Learningprogressachievements') }}
<div class='col3-td3'>{{item2.progress}}</div>
</div>
</template>
</div> </div>
</template>
<template v-if='!tabs[3].assess.video.length'>
<div style='width: 100%; font-size: 30rpx; margin: 40rpx auto 10rpx auto; text-align: center;'>暂无数据</div>
</template>
</div>
<div class='table-title'>试题及主观题</div>
<div class='table'>
<div class='th'>
<div class='col3-td1'>章节</div>
<div class='col3-td2'>提交时间</div>
<div class='col3-td3'>得分</div>
</div> </div>
<template v-for='(item1, index) in tabs[3].assess.homewrok'> <div class="table-title">
<div v-bind:key="index" class='tb'> {{ $t('pages.learn.courseDetail.title2') }}{{ tabs[3].assess.duration
<div class='tt'>{{item1.title}}</div> }}{{ $t('pages.learn.courseDetail.Completionrate') }}{{ tabs[3].assess.progress }} )
<template v-for='(item2, index) in item1.arr'> </div>
<div v-bind:key="index" class='rd'> <div class="table">
<div class='col3-td1'>{{item2.name}}</div> <div class="th">
<div class='col3-td2'>{{item2.created_time || '暂无提交'}}</div> <div class="col3-td1">
<div class='col3-td3'>{{item2.score}}</div> {{ $t('pages.learn.courseDetail.chapter') }}
</div> </div>
</template> <div class="col3-td2">
{{ $t('pages.learn.courseDetail.Lengthofstudy') }}
</div>
<div class="col3-td3">
{{ $t('pages.learn.courseDetail.percent') }}
</div>
</div> </div>
</template> <template v-for="(item1, index) in tabs[3].assess.video">
<template v-if='!tabs[3].assess.homewrok.length'> <div v-bind:key="index" class="tb">
<div style='width: 100%; font-size: 30rpx; margin: 40rpx auto 10rpx auto; text-align: center;'>暂无数据</div> <div class="tt">{{ item1.title }}</div>
</template> <template v-for="(item2, index) in item1.arr">
</div> <div v-bind:key="index" class="rd">
<div class='table-title'>大作业</div> <div
<div class='status-text'>状 态:{{tabs[3].assess.essay.status}}</div> class="col3-td1"
<div class='status-text' v-if='tabs[3].assess.essay.created_time'>提交时间:{{tabs[3].assess.essay.created_time}}</div> :data-sid="item1.sid"
<div class='status-text'>得 分:{{tabs[3].assess.essay.score}}</div> :data-cid="item1.cid"
</div> :data-vid="item2.vid"
</el-tab-pane> :data-id="item2.id"
</el-tabs> :data-type="item2.type"
</el-col> :data-duration="item2.duration"
<el-col :xs="24" :sm="9" :md="7" :lg="6" :xl="4"> @mousedown="jumpVAOrfinishVA($event)"
<template v-if="tabs[0].content && tabs[0].content.teachers && tabs[0].content.teachers.length"> >
<el-tabs v-model="activeName1" @tab-click="handleClick"> {{ item2.name }}
<el-tab-pane label="课程讲师" name="1"> </div>
<template v-for='(item1, index) in tabs[0].content.teachers'> <div class="col3-td2">{{ item2.time }}</div>
<div v-bind:key='index' class='list-teacher'> <div class="col3-td3">{{ item2.progress }}</div>
<img class="img" :src="item1.src" alt=""> </div>
<div class='ctx'> </template>
<div class='top-ctx'> </div>
<div class='name'>{{item1.name}}</div> </template>
<template v-if="!tabs[3].assess.video.length">
<div style="width: 100%; font-size: 30rpx; margin: 40rpx auto 10rpx auto; text-align: center">
{{ $t('pages.learn.courseDetail.Nodataavailable') }}
</div>
</template>
</div>
<div class="table-title">
{{ $t('pages.learn.courseDetail.subjectivequestions') }}
</div>
<div class="table">
<div class="th">
<div class="col3-td1">
{{ $t('pages.learn.courseDetail.chapter') }}
</div> </div>
<div class='bottom-ctx'> <div class="col3-td2">
<div class='t1'>{{item1.edu}}</div> {{ $t('pages.learn.courseDetail.Submissiontime') }}
<div class='t2'>{{item1.job}}</div> </div>
<div class='t3'>{{item1.unit}}</div> <div class="col3-td3">
{{ $t('pages.learn.courseDetail.score') }}
</div> </div>
</div> </div>
<template v-for="(item1, index) in tabs[3].assess.homewrok">
<div v-bind:key="index" class="tb">
<div class="tt">{{ item1.title }}</div>
<template v-for="(item2, index) in item1.arr">
<div v-bind:key="index" class="rd">
<div class="col3-td1">{{ item2.name }}</div>
<div class="col3-td2">
{{ item2.created_time || '暂无提交' }}
</div>
<div class="col3-td3">{{ item2.score }}</div>
</div>
</template>
</div>
</template>
<template v-if="!tabs[3].assess.homewrok.length">
<div style="width: 100%; font-size: 30rpx; margin: 40rpx auto 10rpx auto; text-align: center">
{{ $t('pages.learn.courseDetail.Nodataavailable') }}
</div>
</template>
</div> </div>
</template> <div class="table-title">{{ $t('pages.learn.courseDetail.Bighomework') }}</div>
<div class="status-text">{{ $t('pages.learn.courseDetail.Status') }}{{ tabs[3].assess.essay.status }}</div>
<div class="status-text" v-if="tabs[3].assess.essay.created_time">
{{ $t('pages.learn.courseDetail.Submissiontime') }}{{ tabs[3].assess.essay.created_time }}
</div>
<div class="status-text">{{ $t('pages.learn.courseDetail.score2') }}{{ tabs[3].assess.essay.score }}</div>
</div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</template> </el-col>
</el-col> <el-col :xs="24" :sm="9" :md="7" :lg="6" :xl="4">
</el-row> <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="$t('pages.learn.courseDetail.Courselecturer')" 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>
</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>
</template>
</el-tab-pane>
</el-tabs>
</template>
</el-col>
</el-row>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
...@@ -200,12 +312,18 @@ import cTool from '@tool' ...@@ -200,12 +312,18 @@ import cTool from '@tool'
import CKEDITOR from 'CKEDITOR' import CKEDITOR from 'CKEDITOR'
export default { export default {
components: { }, components: {},
props: { props: {
sid: { type: String, require: false }, sid: {
cid: { type: String, require: false } type: String,
require: false
},
cid: {
type: String,
require: false
}
}, },
data () { data() {
return { return {
params: { params: {
path: `/${this.sid}/${this.cid}`, path: `/${this.sid}/${this.cid}`,
...@@ -220,65 +338,87 @@ export default { ...@@ -220,65 +338,87 @@ export default {
activeName1: '1', activeName1: '1',
passCount: 0, // 隐藏功能, 退课专用 passCount: 0, // 隐藏功能, 退课专用
headerInfo: {}, // 后台数据返回 headerInfo: {}, // 后台数据返回
tabs: [{ tabs: [
title: '课程简介', {
isShow: true, title: '课程简介',
content: { isShow: true,
text: '<p><b>视频课程没有加载出来,请检查自己的网络环境,并重新刷新。</b>', content: {
teachers: [{ text: '<p><b>视频课程没有加载出来,请检查自己的网络环境,并重新刷新。</b>',
src: '', teachers: [
name: '讲师姓名', {
edu: '学历', src: '',
job: '职称', name: '讲师姓名',
unit: '讲师所在单位' edu: '学历',
}] job: '职称',
} unit: '讲师所在单位'
}, { }
title: '课程内容', ]
isShow: false, }
chapterList: { },
currentChapterId: '11', // 当前章节id {
course: [] title: '课程内容',
} isShow: false,
}, { chapterList: {
title: '课程讨论', currentChapterId: '11', // 当前章节id
isShow: false course: []
}, { }
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>", title: '课程讨论',
assess: { isShow: false
score: '20', },
duration: '00:01:20', {
progress: '0/10', title: '课程考核',
video: [{ isShow: false,
title: '第一章 市场营销原理导论', richText:
sid: '', "<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>",
cid: '', assess: {
arr: [{ score: '20',
name: '1.1 什么是市场营销什么是市场营销市场营销什么是市场营销什么是市场营销', duration: '00:01:20',
time: '12:08', progress: '0/10',
progress: '100%', video: [
vid: '' {
}] title: '第一章 市场营销原理导论',
}], sid: '',
homewrok: [{ cid: '',
title: '第一章 市场营销原理导论', arr: [
arr: [{ {
name: '1.1 什么是市场营销什么是市场营销市场营销什么是市场营销什么是市场营销', name: '1.1 什么是市场营销什么是市场营销市场营销什么是市场营销什么是市场营销',
score: 20 time: '12:08',
}] progress: '100%',
}], vid: ''
essay: { }
created_time: '', ]
status: '未提交', }
score: '暂无' ],
homewrok: [
{
title: '第一章 市场营销原理导论',
arr: [
{
name: '1.1 什么是市场营销什么是市场营销市场营销什么是市场营销什么是市场营销',
score: 20
}
]
}
],
essay: {
created_time: '',
status: '未提交',
score: '暂无'
}
} }
} }
}], ],
sort: [ sort: [
{ isShow: false, str: '' }, {
{ isShow: false, str: 'tag' } isShow: false,
str: ''
},
{
isShow: false,
str: 'tag'
}
], ],
discussList: [], // 后台数据返回 discussList: [], // 后台数据返回
param: { param: {
...@@ -295,7 +435,11 @@ export default { ...@@ -295,7 +435,11 @@ export default {
isPublicShow: false, // 是否显示发布问题 isPublicShow: false, // 是否显示发布问题
publishRules: { publishRules: {
title: [ title: [
{ required: true, message: '请输入标题', trigger: 'blur' } {
required: true,
message: '请输入标题',
trigger: 'blur'
}
] ]
}, },
isOpenNewTabFlag: false, isOpenNewTabFlag: false,
...@@ -305,13 +449,18 @@ export default { ...@@ -305,13 +449,18 @@ export default {
firstVideo: {} firstVideo: {}
} }
}, },
mounted () { mounted() {
/* 获取云课堂所有地址 */ /* 获取云课堂所有地址 */
cAction.Player.getCloudUrl().then(json => { cAction.Player.getCloudUrl().then(json => {
this.cloudClassUrls = json this.cloudClassUrls = json
}) })
const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' }) const loading = this.$loading({
lock: true,
text: '',
spinner: '',
background: 'rgba(255, 255, 255, 0.9)'
})
if (this.cid === '0' && this.sid === '0') { if (this.cid === '0' && this.sid === '0') {
this.$message({ this.$message({
message: 'URL异常,请点击“返回首页”,重新选择课程学习!!', message: 'URL异常,请点击“返回首页”,重新选择课程学习!!',
...@@ -321,72 +470,91 @@ export default { ...@@ -321,72 +470,91 @@ export default {
loading.close() loading.close()
return return
} }
cAction.Course.getCourseDetail(this.cid, this.sid).then(json => { cAction.Course.getCourseDetail(this.cid, this.sid)
this.headerInfo = json.headerInfo .then(json => {
this.tabs[0].content = json.tabs0Content this.headerInfo = json.headerInfo
this.tabs[1].chapterList = json.tabs1ChapterList this.tabs[0].content = json.tabs0Content
json.tabs3richTest && (this.tabs[3].richText = json.tabs3richTest) this.tabs[1].chapterList = json.tabs1ChapterList
// 设置开始学习的视频 json.tabs3richTest && (this.tabs[3].richText = json.tabs3richTest)
const courseList = json.tabs1ChapterList.course // 设置开始学习的视频
for (let i = 0; i < courseList.length; i++) { const courseList = json.tabs1ChapterList.course
const children = courseList[i].chapters || [] for (let i = 0; i < courseList.length; i++) {
if (this.firstVideo && this.firstVideo.vid) { const children = courseList[i].chapters || []
break if (this.firstVideo && this.firstVideo.vid) {
}
for (let k = 0; k < children.length; k++) {
const item = children[k]
if (item.vid && item.video_provider) {
this.firstVideo = item
break break
} }
for (let k = 0; k < children.length; k++) {
const item = children[k]
if (item.vid && item.video_provider) {
this.firstVideo = item
break
}
}
} }
}
cAction.Course.getCourseAssess(this.cid, this.sid).then(json1 => { cAction.Course.getCourseAssess(this.cid, this.sid)
const _courseArr = json.tabs1ChapterList.course .then(json1 => {
/* 进行一次 对照,将 视频 vid 赋值 */ const _courseArr = json.tabs1ChapterList.course
/* BUG: 如果有某一章 都没有视频时,对照失败,从没有的那一章开始,后面全部没有vid */ /* 进行一次 对照,将 视频 vid 赋值 */
for (let i = 0; i < json1.video.length; i++) { /* BUG: 如果有某一章 都没有视频时,对照失败,从没有的那一章开始,后面全部没有vid */
const _tmp = json1.video[i].arr for (let i = 0; i < json1.video.length; i++) {
const _tmp1 = _courseArr[i].chapters const _tmp = json1.video[i].arr
for (let j = 0; j < _tmp.length; j++) { const _tmp1 = _courseArr[i].chapters
for (let k = j; k < _tmp1.length; k++) { for (let j = 0; j < _tmp.length; j++) {
if (_tmp[j].id === _tmp1[k].id) { for (let k = j; k < _tmp1.length; k++) {
_tmp[j].vid = _tmp1[k].vid if (_tmp[j].id === _tmp1[k].id) {
_tmp[j].duration = _tmp1[k].duration _tmp[j].vid = _tmp1[k].vid
break _tmp[j].duration = _tmp1[k].duration
break
}
}
} }
} }
} this.tabs[3].assess = json1
} loading.close()
this.tabs[3].assess = json1 })
.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() loading.close()
}).catch(e => { this.$message.error(e.message) }).finally(() => { }) })
// cAction.Discuss.getCourseDiscussList(this.cid, this.sid, this.param).then(json2 => { .finally(() => {})
// this.discussList = json2
// }).catch(e => { this.$message.error(e.message) }).finally(() => { })
}).catch(e => { this.$message.error(e.message); loading.close() }).finally(() => { })
window.addEventListener('resize', this.resizeRoot.bind(this), false) 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.timeHeart = setInterval(this.updatePages(), 3000)
this.arrFn = this.initBindKeyfn() this.arrFn = this.initBindKeyfn()
}, },
destroyed () { destroyed() {
window.removeEventListener('resize', this.resizeRoot.bind(this), false) window.removeEventListener('resize', this.resizeRoot.bind(this), false)
/* 清空 ckeditor 需要调用方法删除 并 在DOM结构中也移除 */ /* 清空 ckeditor 需要调用方法删除 并 在DOM结构中也移除 */
this.ckeditor && this.ckeditor.destroy(true) this.ckeditor && this.ckeditor.destroy(true)
this.ckeditor = null this.ckeditor = null
if (this.timeHeart) { clearInterval(this.timeHeart); this.timeHeart = null } if (this.timeHeart) {
if (this.arrFn.length) { this.destroyKeyfn(this.arrFn) } clearInterval(this.timeHeart)
this.timeHeart = null
}
if (this.arrFn.length) {
this.destroyKeyfn(this.arrFn)
}
}, },
updated () { updated() {
this.resizeRoot() this.resizeRoot()
if (this.isPublicShow) { if (this.isPublicShow) {
this.initckeditor() this.initckeditor()
} }
}, },
beforeUpdate () { beforeUpdate() {
if (!this.isPublicShow) { if (!this.isPublicShow) {
/* 清空 ckeditor 需要调用方法删除 并 在DOM结构中也移除 */ /* 清空 ckeditor 需要调用方法删除 并 在DOM结构中也移除 */
this.ckeditor && this.ckeditor.destroy(true) this.ckeditor && this.ckeditor.destroy(true)
...@@ -394,32 +562,78 @@ export default { ...@@ -394,32 +562,78 @@ export default {
} }
}, },
methods: { methods: {
handleClick (tab, event) { /* console.log(tab, event) */ }, handleClick(tab, event) {
/* console.log(tab, event) */
},
/* 初始化 ckeditor */ /* 初始化 ckeditor */
initckeditor () { initckeditor() {
!this.ckeditor && (this.ckeditor = CKEDITOR.replace('editor', { !this.ckeditor &&
height: 300, (this.ckeditor = CKEDITOR.replace('editor', {
uiColor: '#eeeeee', height: 300,
filebrowserImageUploadUrl: '/api/ck/form/ckeditor-upload', uiColor: '#eeeeee',
fileTools_requestHeaders: { tenant: 'sofia' }, filebrowserImageUploadUrl: '/api/ck/form/ckeditor-upload',
// resize_enabled: typeof this.props.resizable === 'boolean' ? this.props.resizable : true, fileTools_requestHeaders: {
toolbar: [ tenant: 'sofia'
// { name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'Preview'] }, },
{ name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] }, // resize_enabled: typeof this.props.resizable === 'boolean' ? this.props.resizable : true,
{ name: 'colors', items: ['TextColor', 'BGColor'] }, toolbar: [
{ name: 'tools', items: ['Maximize', 'ShowBlocks'] }, // { name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'Preview'] },
// { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] }, {
{ name: 'editing', items: ['Find', 'Replace'] }, name: 'styles',
// { name: 'forms', items: ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'] }, items: ['Styles', 'Format', 'Font', 'FontSize']
'/', },
{ 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: 'colors',
{ name: 'links', items: ['Link', 'Unlink', 'Anchor'] }, items: ['TextColor', 'BGColor']
{ name: 'insert', items: ['Image', 'Table', 'HorizontalRule'] } },
] {
})) 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']
}
]
}))
}, },
updatePages () { updatePages() {
cAction.Course.getCourseDetail(this.cid, this.sid).then(json => { cAction.Course.getCourseDetail(this.cid, this.sid).then(json => {
/* 更新直播状态 */ /* 更新直播状态 */
this.tabs[1].chapterList.course = json.tabs1ChapterList.course.map(item => { this.tabs[1].chapterList.course = json.tabs1ChapterList.course.map(item => {
...@@ -434,7 +648,7 @@ export default { ...@@ -434,7 +648,7 @@ export default {
/** /**
* 课程内容 - 列表展开或者跳转 * 课程内容 - 列表展开或者跳转
*/ */
clickJumpOrStatus (index, data) { clickJumpOrStatus(index, data) {
const flag = !!data.chapters.length const flag = !!data.chapters.length
if (flag) { if (flag) {
const json = this.tabs const json = this.tabs
...@@ -452,36 +666,62 @@ export default { ...@@ -452,36 +666,62 @@ export default {
// 教学评估 // 教学评估
if (data.id === 'teach_evaluation') { if (data.id === 'teach_evaluation') {
const { sid, cid } = this.$route.params const { sid, cid } = this.$route.params
this.$router.push({ name: 'survey', params: { sid, cid } }) this.$router.push({
name: 'survey',
params: {
sid,
cid
}
})
return return
} }
this.$router.push({ name: 'viewerCourseChapter', params: { sid, cid, id: data.id } }) this.$router.push({
name: 'viewerCourseChapter',
params: {
sid,
cid,
id: data.id
}
})
} }
}, },
/* 直接跳转打开新页面 */ /* 直接跳转打开新页面 */
openNewTab (sid, cid, _id) { openNewTab(sid, cid, _id) {
cAction.Player.getChapterList(cid, sid, _id).then(json => { cAction.Player.getChapterList(cid, sid, _id)
this.live = (json.curJson && json.curJson.live) || {} .then(json => {
if (this.live.id) { this.live = (json.curJson && json.curJson.live) || {}
if (this.live.live_status === 3 && this.live.enable_record && this.live.record_url) { if (this.live.id) {
this.live.url = this.live.record_url if (this.live.live_status === 3 && this.live.enable_record && this.live.record_url) {
} else { this.live.url = this.live.record_url
this.live.viewer_name = window.G.UserInfo.student_info.personal_name || window.G.UserInfo.nickname } else {
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.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.CCLiveInit(this.live)
this.isOpenNewTabFlag = false
window.open(this.live.url)
} }
// this.CCLiveInit(this.live) })
this.isOpenNewTabFlag = false .catch(e => {
window.open(this.live.url) this.$message.error(e.message)
} })
}).catch(e => { this.$message.error(e.message) }).finally(() => { }) .finally(() => {})
}, },
initBindKeyfn () { initBindKeyfn() {
const _fn1 = (e) => { const _fn1 = e => {
if (e.keyCode === 70) { if (e.keyCode === 70) {
this.isOpenNewTabFlag = true this.isOpenNewTabFlag = true
} }
} }
const _fn2 = (e) => { const _fn2 = e => {
if (e.keyCode === 70) { if (e.keyCode === 70) {
this.isOpenNewTabFlag = false this.isOpenNewTabFlag = false
} }
...@@ -490,14 +730,14 @@ export default { ...@@ -490,14 +730,14 @@ export default {
document.addEventListener('keyup', _fn2, false) document.addEventListener('keyup', _fn2, false)
return [_fn1, _fn2] return [_fn1, _fn2]
}, },
destroyKeyfn (arr) { destroyKeyfn(arr) {
document.removeEventListener('keydown', arr[0]) document.removeEventListener('keydown', arr[0])
document.removeEventListener('keyup', arr[1]) document.removeEventListener('keyup', arr[1])
}, },
/** /**
* 跳转到对应音视频播放页 * 跳转到对应音视频播放页
*/ */
jumpToOtherVA (data) { jumpToOtherVA(data) {
/* 如果未选课,不能查看课程内容 */ /* 如果未选课,不能查看课程内容 */
if (!this.headerInfo.isStart) { if (!this.headerInfo.isStart) {
this.$message.error('先选课,才能学习') this.$message.error('先选课,才能学习')
...@@ -542,14 +782,31 @@ export default { ...@@ -542,14 +782,31 @@ export default {
window.open(data.live.record_url || data.live.join_url) window.open(data.live.record_url || data.live.join_url)
return 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) { if (data.id) {
this.$router.push({ name: 'viewerCourseChapter', params: { sid: this.sid, cid: this.cid, id: data.id } }) this.$router.push({
name: 'viewerCourseChapter',
params: {
sid: this.sid,
cid: this.cid,
id: data.id
}
})
} else { } else {
this.$message.error('当前暂无点播课程') this.$message.error('当前暂无点播课程')
} }
...@@ -557,24 +814,42 @@ export default { ...@@ -557,24 +814,42 @@ export default {
/** /**
* 退课 - 隐藏功能,点击 标题15次,进行退课 * 退课 - 隐藏功能,点击 标题15次,进行退课
*/ */
noWantThisCourse () { noWantThisCourse() {
this.passCountTimeout && clearTimeout(this.passCountTimeout) this.passCountTimeout && clearTimeout(this.passCountTimeout)
this.passCountTimeout = setTimeout(() => { this.passCountTimeout = setTimeout(() => {
this.passCount = 0 this.passCount = 0
}, 500) }, 500)
if (this.passCount < 15) { this.passCount++; return } if (this.passCount < 15) {
const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' }) this.passCount++
cAction.Course.outSelectCourse(this.cid, this.sid).then(json => { return
this.headerInfo.isStart = false }
loading.close() const loading = this.$loading({
this.$message({ type: 'success', message: '退课成功' }) lock: true,
this.passCount = 0 text: '',
}).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() }) spinner: '',
background: 'rgba(255, 255, 255, 0.9)'
})
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()
})
}, },
/** /**
* 隐藏功能 - 在课程统计页 直接 点击进入视频学习页 或者 直接完成该课程的视频挂载 * 隐藏功能 - 在课程统计页 直接 点击进入视频学习页 或者 直接完成该课程的视频挂载
*/ */
jumpVAOrfinishVA (e) { jumpVAOrfinishVA(e) {
const data = e.currentTarget.dataset const data = e.currentTarget.dataset
const _fn1 = this._keydownfn.bind(this, data) const _fn1 = this._keydownfn.bind(this, data)
document.addEventListener('keydown', _fn1, false) document.addEventListener('keydown', _fn1, false)
...@@ -584,7 +859,7 @@ export default { ...@@ -584,7 +859,7 @@ export default {
} }
document.addEventListener('mouseup', _fn3, false) document.addEventListener('mouseup', _fn3, false)
}, },
_keydownfn (data, e) { _keydownfn(data, e) {
const _sid = data.sid const _sid = data.sid
const _cid = data.cid const _cid = data.cid
const _vid = data.vid const _vid = data.vid
...@@ -593,7 +868,14 @@ export default { ...@@ -593,7 +868,14 @@ export default {
/* 字母 o */ /* 字母 o */
if (e.keyCode === 79) { if (e.keyCode === 79) {
/* 直接跳转 进入 继续学习 */ /* 直接跳转 进入 继续学习 */
this.$router.push({ name: 'viewerCourseChapter', params: { sid: _sid, cid: _cid, id: _id } }) this.$router.push({
name: 'viewerCourseChapter',
params: {
sid: _sid,
cid: _cid,
id: _id
}
})
} }
/* 字母 f */ /* 字母 f */
if (e.keyCode === 70) { if (e.keyCode === 70) {
...@@ -608,25 +890,45 @@ export default { ...@@ -608,25 +890,45 @@ export default {
_m: parseInt(_duration), // 当前播放最大时间 _m: parseInt(_duration), // 当前播放最大时间
_c: parseInt(_duration), // 当前播放位置 _c: parseInt(_duration), // 当前播放位置
ps: '0,0' // 播放时,播放过的 帧 ps: '0,0' // 播放时,播放过的 帧
}).then(json => { })
if (json.success) { .then(json => {
this.$message.success('补课成功,刷新查看结果') 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)' }) const loading = this.$loading({
cAction.Course.selectCourse(this.cid, this.sid).then(json => { lock: true,
this.headerInfo.isStart = true text: '',
loading.close() spinner: '',
this.$message({ type: 'success', message: '选课成功' }) background: 'rgba(255, 255, 255, 0.9)'
}).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() }) })
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()
})
}, },
resizeRoot () { resizeRoot() {
const elems = document.querySelectorAll('.ellipsis') const elems = document.querySelectorAll('.ellipsis')
const fs = getComputedStyle(window.document.documentElement)['font-size'].replace('px', '') // eslint-disable-line const fs = getComputedStyle(window.document.documentElement)['font-size'].replace('px', '') // eslint-disable-line
elems.forEach((_, i) => { elems.forEach((_, i) => {
...@@ -644,44 +946,56 @@ export default { ...@@ -644,44 +946,56 @@ export default {
/** /**
* 发布问题 - 页面打开 * 发布问题 - 页面打开
*/ */
publishDiscuss () { publishDiscuss() {
this.isPublicShow = true this.isPublicShow = true
}, },
/** /**
* 返回问题列表 * 返回问题列表
*/ */
gobackDiscuss () { gobackDiscuss() {
this.isPublicShow = false this.isPublicShow = false
}, },
/** /**
* 问题发布 - 接口提交 * 问题发布 - 接口提交
*/ */
onSubmitPublish () { onSubmitPublish() {
this.$refs.setPublishform.validate((valid) => { this.$refs.setPublishform.validate(valid => {
if (valid) { if (valid) {
if (!this.ckeditor.getData()) { if (!this.ckeditor.getData()) {
this.$message.error('请输入正文内容') this.$message.error('请输入正文内容')
} else { } else {
this.publish.contents = this.ckeditor.getData() this.publish.contents = this.ckeditor.getData()
const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' }) const loading = this.$loading({
cAction.Discuss.publishQues(this.publish).then(json => { lock: true,
this.$message({ text: '',
type: 'success', spinner: '',
message: '问题发布成功' background: 'rgba(255, 255, 255, 0.9)'
}) })
this.isPublicShow = false cAction.Discuss.publishQues(this.publish)
this.params = { .then(json => {
path: `/${this.sid}/${this.cid}`, this.$message({
request: 'getCourseDiscussList', type: 'success',
page: { message: '问题发布成功'
limit: 10, })
offset: 0 this.isPublicShow = false
this.params = {
path: `/${this.sid}/${this.cid}`,
request: 'getCourseDiscussList',
page: {
limit: 10,
offset: 0
}
} }
} // cAction.Discuss.getCourseDiscussList(this.cid, this.sid, this.param).then(json2 => {
// cAction.Discuss.getCourseDiscussList(this.cid, this.sid, this.param).then(json2 => { // this.discussList = json2
// this.discussList = json2 // }).catch(e => { this.$message.error(e.message) }).finally(() => { })
// }).catch(e => { this.$message.error(e.message) }).finally(() => { }) })
}).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() }) .catch(e => {
this.$message.error(e.message)
})
.finally(() => {
loading.close()
})
} }
} else { } else {
this.$message.error('请输入标题') this.$message.error('请输入标题')
...@@ -692,14 +1006,16 @@ export default { ...@@ -692,14 +1006,16 @@ export default {
/** /**
* 跳转到对应 问题详情页 * 跳转到对应 问题详情页
*/ */
goDiscussDetail (e) { goDiscussDetail(e) {
const qid = e.currentTarget.dataset.id const qid = e.currentTarget.dataset.id
this.$router.push({ path: `/app/learn/discuss-detail/${this.sid}/${this.cid}/${qid}` }) this.$router.push({
path: `/app/learn/discuss-detail/${this.sid}/${this.cid}/${qid}`
})
}, },
/** /**
* 排序方式 * 排序方式
*/ */
sortFn (e) { sortFn(e) {
const index = e.currentTarget.dataset.index const index = e.currentTarget.dataset.index
const str = e.currentTarget.dataset.str const str = e.currentTarget.dataset.str
this.sort[index].isShow = !this.sort[index].isShow this.sort[index].isShow = !this.sort[index].isShow
...@@ -726,47 +1042,60 @@ export default { ...@@ -726,47 +1042,60 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
body .el-tab-pane { padding-top: 0; } body .el-tab-pane {
padding-top: 0;
}
.detail-box { .detail-box {
margin: 0.3rem; margin: 0.3rem;
color: #313131; color: #313131;
overflow: hidden; overflow: hidden;
.box-thd { .box-thd {
margin-bottom: 0.1rem; margin-bottom: 0.1rem;
overflow: hidden; overflow: hidden;
.title { .title {
font-size: 0.22rem; font-size: 0.22rem;
line-height: 1.5; line-height: 1.5;
font-weight: 700; font-weight: 700;
.rbtn { .rbtn {
float: right; float: right;
} }
} }
.tags { .tags {
float: left; float: left;
margin: 0.1rem 0.2rem 0.05rem 0; margin: 0.1rem 0.2rem 0.05rem 0;
font-size: 0.14rem; font-size: 0.14rem;
span { span {
padding: 0 0.1rem; padding: 0 0.1rem;
margin: 0; margin: 0;
border-right: 1px solid #313131; border-right: 1px solid #313131;
&:first-child { &:first-child {
padding-left: 0; padding-left: 0;
} }
&:last-child { &:last-child {
border: none; border: none;
} }
} }
} }
.time { .time {
float: left; float: left;
margin: 0.1rem 0 0.05rem 0; margin: 0.1rem 0 0.05rem 0;
font-size: 0.14rem; font-size: 0.14rem;
} }
.progress { .progress {
float: left; float: left;
width: 100%; width: 100%;
font-size: 14px; font-size: 14px;
.el-progress { .el-progress {
width: 45%; width: 45%;
display: inline-block; display: inline-block;
...@@ -774,128 +1103,547 @@ body .el-tab-pane { padding-top: 0; } ...@@ -774,128 +1103,547 @@ body .el-tab-pane { padding-top: 0; }
} }
} }
} }
.box-tbd { .box-tbd {
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
overflow: hidden; overflow: hidden;
.left-pic { .left-pic {
float: left; float: left;
width: 1.8rem; width: 1.8rem;
overflow: hidden; overflow: hidden;
.no-img { .no-img {
width: 100%; width: 100%;
height: 1rem; height: 1rem;
text-align: center; text-align: center;
line-height: 1.1rem; line-height: 1.1rem;
border: 1px solid #c9c9c9; border: 1px solid #c9c9c9;
i { i {
font-size: 0.4rem; font-size: 0.4rem;
color: #c9c9c9; color: #c9c9c9;
} }
} }
img { img {
display: block; display: block;
width: 100%; width: 100%;
} }
} }
.right-content { .right-content {
margin-left: 2rem; margin-left: 2rem;
line-height: 1.5; line-height: 1.5;
font-size: 14px; font-size: 14px;
} }
} }
/* 课程列表内容 直接用 wx统一样式 修改单位 并 整体 缩小了 */ /* 课程列表内容 直接用 wx统一样式 修改单位 并 整体 缩小了 */
.course-list { padding: 0.2rem 0 0.1rem 0; background: #ffffff; } .course-list {
.course-list .none { display: none; } padding: 0.2rem 0 0.1rem 0;
.course-list .content-group { padding: 0 0.2rem; } background: #ffffff;
.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 .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; } display: none;
.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 {
.course-list .content-group .body.on .name { color: #b2183e; } padding: 0 0.2rem;
.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 .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统一样式 修改单位 并 整体 缩小了 */ /* 老师列表内容 直接用 wx统一样式 修改单位 并 整体 缩小了 */
.list-teacher { margin-bottom: 0.2rem; overflow: hidden; } .list-teacher {
.list-teacher .img { float: left; width: 30%; min-height: 0.8rem; background: #c9c9c9; } margin-bottom: 0.2rem;
.list-teacher .ctx { position: relative; margin-left: 32%; min-height: 0.5rem; } overflow: hidden;
.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 .img {
.list-teacher .ctx .bottom-ctx .t1 { font-size: 12px; line-height: 1.5; color: #707070; overflow: hidden; word-break: break-all; } float: left;
.list-teacher .ctx .bottom-ctx .t2 { font-size: 12px; line-height: 1.5; color: #707070; overflow: hidden; word-break: break-all; } width: 30%;
.list-teacher .ctx .bottom-ctx .t3 { font-size: 12px; color: #707070; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } 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 {
.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; } padding: 0 0.26rem;
.pub-ques .ask .img { position: absolute; left: 0.15rem; font-size: 0.24rem; line-height: 0.42rem; } overflow: hidden;
.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; } -webkit-box-sizing: border-box;
.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; } box-sizing: border-box;
.pub-ques .item-order.on { background: #b49441; color: #ffffff; } }
.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 { }
.discuss-scroll .item-list:first-child { margin-top: 0.3rem; } .discuss-scroll .item-list:first-child {
.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; } margin-top: 0.3rem;
.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 {
.discuss-scroll .item-list .user .right .name { font-size: 0.18rem; color: #313131; text-overflow: ellipsis; overflow: hidden; word-break:break-all; } position: relative;
.discuss-scroll .item-list .user .right .time { margin-top: 0.05rem; font-size: 0.16rem; color: #a0a0a0; } padding: 0.3rem 0.26rem;
.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; } margin-bottom: 0.2rem;
.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; } background: #fff;
.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; } box-shadow: 0 2px 4px rgba(10, 4, 6, 0.1);
.discuss-scroll .item-list .ellipsis.on { display: block; } cursor: pointer;
.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 .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 {
.publish .right-goback-txt { float: right; font-size: 0.2rem; color: #000000; line-height: 40px; } 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统一样式 修改单位 并 整体 缩小了 */ /* 课程考核内容 直接用 wx统一样式 修改单位 并 整体 缩小了 */
.course-assess { padding: 0.2rem; margin-bottom: 1rem; background: #ffffff; overflow: hidden; } .course-assess {
.course-assess .title { color: #313131; font-size: 0.2rem; margin: 0.4rem auto 0.2rem auto; text-align: center; } padding: 0.2rem;
.course-assess .topic { position: relative; width: 100%; height: 0.50rem; overflow: hidden; } margin-bottom: 1rem;
.course-assess .topic .line { width: 3rem; height: 1px; margin: 0.25rem auto 0 auto; background: #313131; } background: #ffffff;
.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%); } overflow: hidden;
.course-assess .detail { margin-bottom: 0.4rem; padding: 0 0.2rem; } }
.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-title {
.course-assess .table { padding: 0 0.2rem; color: #313131; padding-bottom: 0.3rem; border-bottom: 0.02rem solid #c9c9c9; } font-size: 0.16rem;
.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; } font-weight: 700;
.course-assess .table .col3-td2 { float: left; width: 21%; text-align: center; } margin: 0.2rem 0.26rem 0.2rem 0.26rem;
.course-assess .table .col3-td3 { float: left; width: 14%; text-align: right; box-sizing: border-box; -webkit-box-sizing: border-box; } text-align: justify;
.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; } color: #b49441;
.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 {
.course-assess .table .tb .tt { padding: 0.1rem 0 0.02rem 0; line-height: 0.24rem; font-weight: 700; } padding: 0 0.2rem;
.course-assess .table .tb .rd { padding-right: 0.2rem; overflow: hidden; /* border-bottom: 1rpx solid #e5e5e5; */ line-height: 0.26rem; /* padding: 10rpx 0; */ } color: #313131;
.course-assess .table .tb .rd:hover { background: #efefef; } 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 .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) { @media (max-width: 767px) {
.detail-box { margin: 0.2rem; } .detail-box {
margin: 0.2rem;
}
.detail-box .box-thd .progress .el-progress { .detail-box .box-thd .progress .el-progress {
width: 80%; width: 80%;
} }
.detail-box .box-tbd .left-pic { .detail-box .box-tbd .left-pic {
width: 100%; width: 100%;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
} }
.detail-box .box-tbd .right-content { .detail-box .box-tbd .right-content {
margin-left: 0; margin-left: 0;
display: block; display: block;
} }
/* 课程考核样式 */ /* 课程考核样式 */
.detail-box .course-assess .detail { padding: 0; } .detail-box .course-assess .detail {
.detail-box .course-assess .table { padding: 0 0 0.3rem 0; } padding: 0;
}
.detail-box .course-assess .table {
padding: 0 0 0.3rem 0;
}
} }
</style> </style>
<template> <template>
<div> <div>
<div class="con-title">学术报告列表</div> <div class="con-title">{{ $t('pages.learn.reportList.title') }}</div>
<div class="con-box"> <div class="con-box">
<el-button type="primary" @click="goActiveList">已申请的活动</el-button> <el-button type="primary" @click="goActiveList">{{ $t('pages.learn.reportList.已申请的活动') }}</el-button>
<div style="width: 100%; height: 0.2rem;"></div> <div style="width: 100%; height: 0.2rem;"></div>
<m-page <m-page
:tableHead="tableHead" :tableHead="tableHead"
......
<template> <template>
<div class="box"> <div class="box">
<div class="head">使用指南 - 学生端</div> <div class="head">{{ $t('pages.mobile.studentHelp.title') }}</div>
<div class="main"> <div class="main">
<div class="menu" > <div class="menu">
<div v-for="(item,index) in studentChapter" :key="index"> <div v-for="(item, index) in studentChapter" :key="index">
<h2 class="title" v-html="item.name"></h2> <h2 class="title" v-html="item.name"></h2>
<template v-if="item.child" > <template v-if="item.child">
<div v-for="(item1,index1) in item.child" :key="index1"> <div v-for="(item1, index1) in item.child" :key="index1">
<h3 class="title" v-html="item1.name" @click="openContent(item1.content)"></h3> <h3 class="title" v-html="item1.name" @click="openContent(item1.content)"></h3>
<template v-if="item1.child" > <template v-if="item1.child">
<div v-for="(item2,index2) in item1.child" :key="index2"> <div v-for="(item2, index2) in item1.child" :key="index2">
<h3 class="title" v-html="item2.name" @click="openContent(item2.content)"></h3> <h3 class="title" v-html="item2.name" @click="openContent(item2.content)"></h3>
</div> </div>
</template> </template>
</div> </div>
</template> </template>
</div> </div>
...@@ -23,9 +22,10 @@ ...@@ -23,9 +22,10 @@
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data () { data() {
return { return {
studentChapter: [ studentChapter: [
// 学生端 // 学生端
...@@ -39,8 +39,7 @@ export default { ...@@ -39,8 +39,7 @@ export default {
}, },
{ {
name: '1.2 文档适用范围', name: '1.2 文档适用范围',
content: content: '该文档是针对v1.1版本编写的操作说明,后期会根据系统的升级增加相应的功能描述。'
'该文档是针对v1.1版本编写的操作说明,后期会根据系统的升级增加相应的功能描述。'
} }
] ]
}, },
...@@ -49,15 +48,13 @@ export default { ...@@ -49,15 +48,13 @@ export default {
child: [ child: [
{ {
name: '2.1 登录方式', name: '2.1 登录方式',
content: content: `使用者通过登录网址 <a href='https://pbcsf.ezijing.com/'>https://pbcsf.ezijing.com</a> 进入登录,填写自己的账号和密码完成登录,账号和密码由五道口金融学院教务老师通知学员。
`使用者通过登录网址 <a href='https://pbcsf.ezijing.com/'>https://pbcsf.ezijing.com</a> 进入登录,填写自己的账号和密码完成登录,账号和密码由五道口金融学院教务老师通知学员。
<img src="https://zws-imgs-pub.ezijing.com/static/public/8fa8253970ad76dc23aa5dd8f7cd5dc2.png" alt=""> <img src="https://zws-imgs-pub.ezijing.com/static/public/8fa8253970ad76dc23aa5dd8f7cd5dc2.png" alt="">
` `
}, },
{ {
name: '2.2 退出系统', name: '2.2 退出系统',
content: content: `点击系统右上角头像和姓名旁边的图标 <img src="https://zws-imgs-pub.ezijing.com/static/public/7621c520cdb74bf28376e6e13992d7e4.png" alt=""> 会出现下拉菜单,菜单中有退出登录的按钮,点击退出登录后用户将退出系统,页面跳转到登录页。<br/>
`点击系统右上角头像和姓名旁边的图标 <img src="https://zws-imgs-pub.ezijing.com/static/public/7621c520cdb74bf28376e6e13992d7e4.png" alt=""> 会出现下拉菜单,菜单中有退出登录的按钮,点击退出登录后用户将退出系统,页面跳转到登录页。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/bda3c4e1dc9a9606332a425b3175fffd.png" alt=""> <img src="https://zws-imgs-pub.ezijing.com/static/public/bda3c4e1dc9a9606332a425b3175fffd.png" alt="">
` `
}, },
...@@ -66,8 +63,7 @@ export default { ...@@ -66,8 +63,7 @@ export default {
child: [ child: [
{ {
name: '2.3.1 进入直播', // <br/> name: '2.3.1 进入直播', // <br/>
content: content: `进入当天最近时间的直播:登陆后页面上方显示当天直播课程体系,用户点击直播提醒里的“<span>进入直播</span>”<br/>
`进入当天最近时间的直播:登陆后页面上方显示当天直播课程体系,用户点击直播提醒里的“<span>进入直播</span>”<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/43ad6446857c110d1c59eee2c0cce7f8.png" alt=""> <img src="https://zws-imgs-pub.ezijing.com/static/public/43ad6446857c110d1c59eee2c0cce7f8.png" alt="">
在课程大纲里<br/> 在课程大纲里<br/>
课程大纲里找到相应课程,点击“<span>查看课程</span>“,进入下一级课程章节列表<br/> 课程大纲里找到相应课程,点击“<span>查看课程</span>“,进入下一级课程章节列表<br/>
...@@ -79,8 +75,7 @@ export default { ...@@ -79,8 +75,7 @@ export default {
}, },
{ {
name: '2.3.2 安装flash播放器', name: '2.3.2 安装flash播放器',
content: content: `安装 flash 播放器,点击“<span>这里</span>”<br/>
`安装 flash 播放器,点击“<span>这里</span>”<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/533e05ba6ab4b5530ba27b1bf7c98d86.png" alt=""><br/> <img src="https://zws-imgs-pub.ezijing.com/static/public/533e05ba6ab4b5530ba27b1bf7c98d86.png" alt=""><br/>
打开 Chrome 的 Flash 拦截<br/> 打开 Chrome 的 Flash 拦截<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/cc03e3ddfc5940307099d2affe5e2447.png" alt=""><br/> <img src="https://zws-imgs-pub.ezijing.com/static/public/cc03e3ddfc5940307099d2affe5e2447.png" alt=""><br/>
...@@ -94,8 +89,7 @@ export default { ...@@ -94,8 +89,7 @@ export default {
}, },
{ {
name: '2.3.3 直播上课', name: '2.3.3 直播上课',
content: content: `之后可以打开老师视频,观看直播上课 <br/>
`之后可以打开老师视频,观看直播上课 <br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/34d550f5e1855ff30d0744f47faf95b7.png" alt=""><br/> <img src="https://zws-imgs-pub.ezijing.com/static/public/34d550f5e1855ff30d0744f47faf95b7.png" alt=""><br/>
视频区:显示老师上课的视频,或老师的分享屏幕<br/> 视频区:显示老师上课的视频,或老师的分享屏幕<br/>
问答区:输入问题向老师提问,可选只看我的问题<br/> 问答区:输入问题向老师提问,可选只看我的问题<br/>
...@@ -115,8 +109,7 @@ export default { ...@@ -115,8 +109,7 @@ export default {
child: [ child: [
{ {
name: '2.3.1 进入回放视频', name: '2.3.1 进入回放视频',
content: content: `在课程大纲课程章节页面,选择相应的课程,点击“<span>观看回放</span>”,进入回放视频<br/>
`在课程大纲课程章节页面,选择相应的课程,点击“<span>观看回放</span>”,进入回放视频<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/6d3a7e90992960d10218525b16e9d700.png" alt=""><br/> <img src="https://zws-imgs-pub.ezijing.com/static/public/6d3a7e90992960d10218525b16e9d700.png" alt=""><br/>
观看回放页面<br/> 观看回放页面<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/a5094720de06c2db4ae17e226d147b02.png" alt=""><br/> <img src="https://zws-imgs-pub.ezijing.com/static/public/a5094720de06c2db4ae17e226d147b02.png" alt=""><br/>
...@@ -129,15 +122,13 @@ export default { ...@@ -129,15 +122,13 @@ export default {
}, },
{ {
name: '2.3.2 显示课件', name: '2.3.2 显示课件',
content: content: `点击屏幕下方的显示课件按钮,如红框所示:<br/>
`点击屏幕下方的显示课件按钮,如红框所示:<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/5e989fed092c5b84c41fc66cf81a40d1.png" alt=""><br/> <img src="https://zws-imgs-pub.ezijing.com/static/public/5e989fed092c5b84c41fc66cf81a40d1.png" alt=""><br/>
` `
}, },
{ {
name: '2.3.3 切换屏幕', name: '2.3.3 切换屏幕',
content: content: `点击屏幕下方的切换屏幕按钮,如红框所示:<br/>
`点击屏幕下方的切换屏幕按钮,如红框所示:<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/446445be8b2b5a34ef85e9aee51c5398.png" alt=""><br/> <img src="https://zws-imgs-pub.ezijing.com/static/public/446445be8b2b5a34ef85e9aee51c5398.png" alt=""><br/>
` `
} }
...@@ -146,10 +137,11 @@ export default { ...@@ -146,10 +137,11 @@ export default {
] ]
} }
], ],
contentData: '本操作说明详细的描述了紫荆教育在线教与学系统-学生端-(V1.1版本)实现的功能和操作步骤,其编写目的为:<br/>直播学习系统使用者的操作指南<br/>直播学习系统使用者培训参考文档' contentData:
'本操作说明详细的描述了紫荆教育在线教与学系统-学生端-(V1.1版本)实现的功能和操作步骤,其编写目的为:<br/>直播学习系统使用者的操作指南<br/>直播学习系统使用者培训参考文档'
} }
}, },
metaInfo () { metaInfo() {
return { return {
title: '紫荆教育在线教与学系统', title: '紫荆教育在线教与学系统',
meta: [ meta: [
...@@ -165,87 +157,104 @@ export default { ...@@ -165,87 +157,104 @@ export default {
}, },
dealRender: () => { dealRender: () => {
// 移动端设置HTML字体大小 // 移动端设置HTML字体大小
(function (win, doc) { ;(function (win, doc) {
let wWidth = (win.screen.width > 0) ? (win.innerWidth >= win.screen.width || win.innerWidth === 0) ? win.screen.width : win.innerWidth : win.innerWidth // eslint-disable-line const wWidth =
const wFsize = (wWidth > 640 ? 640 : wWidth) / 375 * 100 win.screen.width > 0
? win.innerWidth >= win.screen.width || win.innerWidth === 0
? win.screen.width
: win.innerWidth
: win.innerWidth // eslint-disable-line
const wFsize = ((wWidth > 640 ? 640 : wWidth) / 375) * 100
doc.documentElement.style.fontSize = wFsize + 'px' doc.documentElement.style.fontSize = wFsize + 'px'
})(window, document) })(window, document)
} }
}, },
mounted () { mounted() {
this.dealRender() this.dealRender()
} }
} }
</script> </script>
<style> <style>
html{ html {
font-size: 100px; font-size: 100px;
font-family: "PingFang SC" font-family: 'PingFang SC';
} }
.content a{
color:#0C7AB9; .content a {
color: #0C7AB9;
} }
.content img{
.content img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.content span{
.content span {
color: red; color: red;
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.head{ .head {
width: 100%; width: 100%;
text-align: center; text-align: center;
color: #000000; color: #000000;
font-size: .16rem; font-size: 0.16rem;
font-weight: 800; font-weight: 800;
height: .6rem; height: 0.6rem;
line-height: .6rem; line-height: 0.6rem;
background-color: #EDEDED; background-color: #EDEDED;
} }
.main{
display:flex; .main {
.menu{ display: flex;
.menu {
width: 1.04rem; width: 1.04rem;
flex-shrink:0; flex-shrink: 0;
background-color: #EDEDED; background-color: #EDEDED;
h2.title{
h2.title {
color: #999999; color: #999999;
font-size: .1rem; font-size: 0.1rem;
line-height: .14rem; line-height: 0.14rem;
font-weight: 800; font-weight: 800;
} }
h3.title{
h3.title {
color: #000000; color: #000000;
font-size: .14rem; font-size: 0.14rem;
line-height: .2rem; line-height: 0.2rem;
font-weight: 400; font-weight: 400;
} }
.title{
.title {
margin: 0; margin: 0;
padding: .15rem .08rem .15rem .13rem; padding: 0.15rem 0.08rem 0.15rem 0.13rem;
} }
h3:active,h3:hover{
h3:active,
h3:hover {
background-color: #ffffff; background-color: #ffffff;
color: #BB133E; color: #BB133E;
} }
} }
.content{
.content {
background-color: #ffffff; background-color: #ffffff;
flex-grow:1; flex-grow: 1;
padding: .2rem; padding: 0.2rem;
color: #000000; color: #000000;
font-size: .14rem; font-size: 0.14rem;
line-height: .2rem; line-height: 0.2rem;
font-weight: 400; font-weight: 400;
} }
} }
@media (min-width: 900px) { @media (min-width: 900px) {
.head{ .head {
height: 105px; height: 105px;
line-height: 105px; line-height: 105px;
padding-left: 40px; padding-left: 40px;
...@@ -253,49 +262,59 @@ html{ ...@@ -253,49 +262,59 @@ html{
font-size: 18px; font-size: 18px;
background-color: #ffffff; background-color: #ffffff;
} }
.main{
.menu{ .main {
width: 194px; .menu {
background-color: #fff; width: 194px;
h2.title{ background-color: #fff;
font-size: 12px;
line-height: 17px; h2.title {
padding{ font-size: 12px;
left: 20px; line-height: 17px;
right: 20px;
padding {
left: 20px;
right: 20px;
}
} }
}
h3.title{ h3.title {
color: #333; color: #333;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
font-weight: 400; font-weight: 400;
padding{
left: 40px; padding {
right: 17px; left: 40px;
right: 17px;
}
}
.title {
margin: 0;
padding-top: 20px;
padding-bottom: 20px;
}
h3:active,
h3:hover {
background-color: #ededed;
} }
} }
.title{
margin: 0; .content {
padding-top:20px;
padding-bottom: 20px;
}
h3:active,h3:hover{
background-color: #ededed; background-color: #ededed;
padding: 40px;
font-size: 14px;
line-height: 20px;
} }
} }
.content{
background-color: #ededed;
padding: 40px;
font-size: 14px;
line-height: 20px;
}
}
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
.box{ .box {
width: 1200px; width: 1200px;
margin: auto margin: auto;
} }
} }
</style> </style>
<template> <template>
<div class="box"> <div class="box">
<div class="head">使用指南 - 教师端</div> <div class="head">{{ $t('pages.mobile.teacherHelp.title') }}</div>
<div class="main"> <div class="main">
<div class="menu" > <div class="menu">
<div v-for="(item,index) in chapter" :key="index"> <div v-for="(item, index) in chapter" :key="index">
<h2 class="title" v-html="item.name"></h2> <h2 class="title" v-html="item.name"></h2>
<template v-if="item.child" > <template v-if="item.child">
<div v-for="(item1,index1) in item.child" :key="index1"> <div v-for="(item1, index1) in item.child" :key="index1">
<h3 class="title" v-html="item1.name" @click="openContent(item1.content)"></h3> <h3 class="title" v-html="item1.name" @click="openContent(item1.content)"></h3>
<template v-if="item1.child" > <template v-if="item1.child">
<div v-for="(item2,index2) in item1.child" :key="index2"> <div v-for="(item2, index2) in item1.child" :key="index2">
<h3 class="title" v-html="item2.name" @click="openContent(item2.content)"></h3> <h3 class="title" v-html="item2.name" @click="openContent(item2.content)"></h3>
</div> </div>
</template> </template>
</div> </div>
</template> </template>
</div> </div>
...@@ -23,9 +22,10 @@ ...@@ -23,9 +22,10 @@
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data () { data() {
return { return {
chapter: [ chapter: [
// 教师端 // 教师端
...@@ -34,8 +34,7 @@ export default { ...@@ -34,8 +34,7 @@ export default {
child: [ child: [
{ {
name: '1.1 文档编写目的', name: '1.1 文档编写目的',
content: content: `本操作说明详细的描述了紫荆教育在线教与学系统-教师端-(V1.1版本)实现的功能和操作步骤,其编写目的为:<br/>
`本操作说明详细的描述了紫荆教育在线教与学系统-教师端-(V1.1版本)实现的功能和操作步骤,其编写目的为:<br/>
教师在线上课的操作指南<br/> 教师在线上课的操作指南<br/>
助教在线上课的操作指南<br/> 助教在线上课的操作指南<br/>
教师和助教培训参考文档 教师和助教培训参考文档
...@@ -43,8 +42,7 @@ export default { ...@@ -43,8 +42,7 @@ export default {
}, },
{ {
name: '1.2 文档适用范围', name: '1.2 文档适用范围',
content: content: '该文档是针对v1.1版本编写的操作说明,后期会根据系统的升级增加相应的功能描述。'
'该文档是针对v1.1版本编写的操作说明,后期会根据系统的升级增加相应的功能描述。'
} }
] ]
}, },
...@@ -53,22 +51,19 @@ export default { ...@@ -53,22 +51,19 @@ export default {
child: [ child: [
{ {
name: '2.1 登录方式', name: '2.1 登录方式',
content: content: `通过登录网址 <a href='https://mba-pbcsf.ezijing.com/'>https://mba-pbcsf.ezijing.com</a> 进入登录,填写自己的账号和密码完成登录,初始密码默认为:123456。
`通过登录网址 <a href='https://mba-pbcsf.ezijing.com/'>https://mba-pbcsf.ezijing.com</a> 进入登录,填写自己的账号和密码完成登录,初始密码默认为:123456。
<img src="https://zws-imgs-pub.ezijing.com/static/public/2345a1017960c7abe216b392ca5499aa.png" alt=""> <img src="https://zws-imgs-pub.ezijing.com/static/public/2345a1017960c7abe216b392ca5499aa.png" alt="">
` `
}, },
{ {
name: '2.2 教师课程列表页', name: '2.2 教师课程列表页',
content: content: `进入系统后首先显示是的教师的仪表盘,展示出最近在线学习的人数,点击主菜单中的“教学管理”“我的课程“,展示出教师所教授的课程列表:<br/>
`进入系统后首先显示是的教师的仪表盘,展示出最近在线学习的人数,点击主菜单中的“教学管理”“我的课程“,展示出教师所教授的课程列表:<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/1c2df3b76c6bb57e77be679025ba808b.png" alt=""> <img src="https://zws-imgs-pub.ezijing.com/static/public/1c2df3b76c6bb57e77be679025ba808b.png" alt="">
` `
}, },
{ {
name: '2.3 课程内容页', name: '2.3 课程内容页',
content: content: `选择要教学的课程,点击进入课程内容页,展示出该课程的基本信息、课程内容大纲、课程资料、课程大作业,以及学习该课程的学员:<br/>
`选择要教学的课程,点击进入课程内容页,展示出该课程的基本信息、课程内容大纲、课程资料、课程大作业,以及学习该课程的学员:<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/2afe5cff94fc08346a6a601bff5558b3.png" alt=""> <img src="https://zws-imgs-pub.ezijing.com/static/public/2afe5cff94fc08346a6a601bff5558b3.png" alt="">
` `
}, },
...@@ -77,13 +72,11 @@ export default { ...@@ -77,13 +72,11 @@ export default {
child: [ child: [
{ {
name: '2.4.1 启动直播教学客户端', name: '2.4.1 启动直播教学客户端',
content: content: '点击课程内容中的要直播课程,将会新打开一个新的页面,首次使用该系统的教师需要安装客户端。'
'点击课程内容中的要直播课程,将会新打开一个新的页面,首次使用该系统的教师需要安装客户端。'
}, },
{ {
name: '2.4.1.1 客户端安装', name: '2.4.1.1 客户端安装',
content: content: `点击下载按钮下载客户端安装包。<br/>
`点击下载按钮下载客户端安装包。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/06006588231fc35af7a1b548834c5d19.png" alt=""><br/> <img src="https://zws-imgs-pub.ezijing.com/static/public/06006588231fc35af7a1b548834c5d19.png" alt=""><br/>
运行安装包程序,完成一键安装,可自定义安装目录。<br/> 运行安装包程序,完成一键安装,可自定义安装目录。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/35c6bf85e8df880807e5c39e5f18f8b3.png" alt=""> <img src="https://zws-imgs-pub.ezijing.com/static/public/35c6bf85e8df880807e5c39e5f18f8b3.png" alt="">
...@@ -92,15 +85,13 @@ export default { ...@@ -92,15 +85,13 @@ export default {
// 暂停开发 // 暂停开发
{ {
name: '2.4.1.2 启动在线直播客户端', name: '2.4.1.2 启动在线直播客户端',
content: content: `在教师端启动页面点击启动按钮启动客户端。如客户端无法启动,可点击“下载修复工具”进行修复,然后重新启动客户端。<br/>
`在教师端启动页面点击启动按钮启动客户端。如客户端无法启动,可点击“下载修复工具”进行修复,然后重新启动客户端。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/ba5802d8c23cf265dd6882e816be5344.png" alt=""><br/> <img src="https://zws-imgs-pub.ezijing.com/static/public/ba5802d8c23cf265dd6882e816be5344.png" alt=""><br/>
` `
}, },
{ {
name: '2.4.2 开启直播', name: '2.4.2 开启直播',
content: content: `进入直播主界面后,可以上传演示文档显示在电子白板后,在点击“开始直播”(Mac系统是点击“上课”),如图所示。<br/>
`进入直播主界面后,可以上传演示文档显示在电子白板后,在点击“开始直播”(Mac系统是点击“上课”),如图所示。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/0c1b3fd9ea823606d59f01d68cd31215.png" alt=""><br/> <img src="https://zws-imgs-pub.ezijing.com/static/public/0c1b3fd9ea823606d59f01d68cd31215.png" alt=""><br/>
教师就可以进行直播在线上课了。 教师就可以进行直播在线上课了。
` `
...@@ -114,8 +105,7 @@ export default { ...@@ -114,8 +105,7 @@ export default {
child: [ child: [
{ {
name: '3.1 文档上传与演示', name: '3.1 文档上传与演示',
content: content: `主界面介绍,如图:<br/>
`主界面介绍,如图:<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/0c1b3fd9ea823606d59f01d68cd31215.png" alt=""><br/> <img src="https://zws-imgs-pub.ezijing.com/static/public/0c1b3fd9ea823606d59f01d68cd31215.png" alt=""><br/>
主界面主要分为视频区、聊天区、文档区、工具栏几个部分:<br/> 主界面主要分为视频区、聊天区、文档区、工具栏几个部分:<br/>
1)视频区:可调整设置摄像头、麦克风,或将视频区设置为桌面共享、插播视频等;<br/> 1)视频区:可调整设置摄像头、麦克风,或将视频区设置为桌面共享、插播视频等;<br/>
...@@ -126,8 +116,7 @@ export default { ...@@ -126,8 +116,7 @@ export default {
child: [ child: [
{ {
name: '3.1.1 文档上传', name: '3.1.1 文档上传',
content: content: `教师上课前需提前上传文档。<br/>
`教师上课前需提前上传文档。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/3aa9762255a2a3ece9fe503f19e1b68e.png" alt=""><br/> <img src="https://zws-imgs-pub.ezijing.com/static/public/3aa9762255a2a3ece9fe503f19e1b68e.png" alt=""><br/>
1)点击文档区“+”,选择本地文档进行上传。上传完成后会进行格式转换,若文档较大处理时间会略长,请耐心等待。云端将保留本次直播使用的文档,下次直播打开客户端时会自动同步添加。<br/> 1)点击文档区“+”,选择本地文档进行上传。上传完成后会进行格式转换,若文档较大处理时间会略长,请耐心等待。云端将保留本次直播使用的文档,下次直播打开客户端时会自动同步添加。<br/>
2)点击“×”可在客户端中删除该文档;<br/> 2)点击“×”可在客户端中删除该文档;<br/>
...@@ -139,8 +128,7 @@ export default { ...@@ -139,8 +128,7 @@ export default {
}, },
{ {
name: '3.1.2 文档演示', name: '3.1.2 文档演示',
content: content: `<img src="https://zws-imgs-pub.ezijing.com/static/public/a541a46ab182bde135026d0217f08878.png" alt=""><br/>
`<img src="https://zws-imgs-pub.ezijing.com/static/public/a541a46ab182bde135026d0217f08878.png" alt=""><br/>
1)可点击翻页按钮或键盘左右键进行翻页;<br/> 1)可点击翻页按钮或键盘左右键进行翻页;<br/>
2)点击预览跳页按钮可展开文档缩略图,点击缩略图进行跳页。<br/> 2)点击预览跳页按钮可展开文档缩略图,点击缩略图进行跳页。<br/>
※如果PPT保留了动画特效,点击向后翻页按钮将显示下一个动画动作。<br/> ※如果PPT保留了动画特效,点击向后翻页按钮将显示下一个动画动作。<br/>
...@@ -148,8 +136,7 @@ export default { ...@@ -148,8 +136,7 @@ export default {
}, },
{ {
name: '3.1.3 文档标注', name: '3.1.3 文档标注',
content: content: `在文档工具区可对文档进行画笔标注、添加文字等。支持使用鼠标、触摸板、手写板等。<br/>
`在文档工具区可对文档进行画笔标注、添加文字等。支持使用鼠标、触摸板、手写板等。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/c1a0ba0fc21f41585a0f4b54587031d1.png" alt=""><br/> <img src="https://zws-imgs-pub.ezijing.com/static/public/c1a0ba0fc21f41585a0f4b54587031d1.png" alt=""><br/>
1)画笔、图形、直线、文字等可设置大小和颜色;<br/> 1)画笔、图形、直线、文字等可设置大小和颜色;<br/>
2)激光笔模式下学员可实时看到教师的鼠标移动轨迹;<br/> 2)激光笔模式下学员可实时看到教师的鼠标移动轨迹;<br/>
...@@ -164,8 +151,7 @@ export default { ...@@ -164,8 +151,7 @@ export default {
child: [ child: [
{ {
name: '3.2.1 音视频设置', name: '3.2.1 音视频设置',
content: content: `在客户端主界面点击“设置”按钮,可对视频和音频进行设置。<br/>
`在客户端主界面点击“设置”按钮,可对视频和音频进行设置。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/b345ed946676018fbdfbaefb82dc93c5.png" alt=""><br/> <img src="https://zws-imgs-pub.ezijing.com/static/public/b345ed946676018fbdfbaefb82dc93c5.png" alt=""><br/>
1.声音设置<br/> 1.声音设置<br/>
1)麦克风:外部语音输入,根据名称选择内置麦克风或外接耳麦;<br/> 1)麦克风:外部语音输入,根据名称选择内置麦克风或外接耳麦;<br/>
...@@ -194,8 +180,7 @@ export default { ...@@ -194,8 +180,7 @@ export default {
}, },
{ {
name: '3.2.2 直播控制', name: '3.2.2 直播控制',
content: content: `在音视频设置后,即可开启直播,并在视频区对直播进行实时控制。<br/>
`在音视频设置后,即可开启直播,并在视频区对直播进行实时控制。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/c1a0ba0fc21f41585a0f4b54587031d1.png" alt=""><br/> <img src="https://zws-imgs-pub.ezijing.com/static/public/c1a0ba0fc21f41585a0f4b54587031d1.png" alt=""><br/>
1)点击下方图标可开启/关闭麦克风、扬声器、视频画面;<br/> 1)点击下方图标可开启/关闭麦克风、扬声器、视频画面;<br/>
2)点击“开始直播”按钮,客户端将推流开始直播,同时云端会自动进行录制。在手动录制模式下,需同时点击“开始录制”按钮进行录制。点击“结束直播”按钮,客户端将停止推流,并自动结束录制。<br/> 2)点击“开始直播”按钮,客户端将推流开始直播,同时云端会自动进行录制。在手动录制模式下,需同时点击“开始录制”按钮进行录制。点击“结束直播”按钮,客户端将停止推流,并自动结束录制。<br/>
...@@ -234,13 +219,11 @@ export default { ...@@ -234,13 +219,11 @@ export default {
}, },
{ {
name: '3.3 互动功能', name: '3.3 互动功能',
content: content: '在直播过程中教师可发起聊天、连麦、用户管理、问答、签到等多种互动功能。',
'在直播过程中教师可发起聊天、连麦、用户管理、问答、签到等多种互动功能。',
child: [ child: [
{ {
name: '3.3.1 聊天', name: '3.3.1 聊天',
content: content: `教师可与学员进行公共聊天,支持与单个学员进行私聊。<br/>
`教师可与学员进行公共聊天,支持与单个学员进行私聊。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/d8cee0f5f8a66447446a8cf870b54780.png" alt=""><br/> <img src="https://zws-imgs-pub.ezijing.com/static/public/d8cee0f5f8a66447446a8cf870b54780.png" alt=""><br/>
1)点击学员名称可与该学员进行私聊;<br/> 1)点击学员名称可与该学员进行私聊;<br/>
2)教师可发送表情包及本地图片;<br/> 2)教师可发送表情包及本地图片;<br/>
...@@ -250,8 +233,7 @@ export default { ...@@ -250,8 +233,7 @@ export default {
}, },
{ {
name: '3.3.2 问答', name: '3.3.2 问答',
content: content: `教师可解答学员在问答区的提问,可选择私聊回复或公开回复。<br/>
`教师可解答学员在问答区的提问,可选择私聊回复或公开回复。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/bfe706fc030c274ee3688456df290ca2.png" alt=""><br/> <img src="https://zws-imgs-pub.ezijing.com/static/public/bfe706fc030c274ee3688456df290ca2.png" alt=""><br/>
1)学员可在观看页问答区发起提问,提问内容仅教师和助教可见;<br/> 1)学员可在观看页问答区发起提问,提问内容仅教师和助教可见;<br/>
2)教师回复内容默认为全员可见,勾选“仅提问者可见”可进行单独回复;<br/> 2)教师回复内容默认为全员可见,勾选“仅提问者可见”可进行单独回复;<br/>
...@@ -262,8 +244,7 @@ export default { ...@@ -262,8 +244,7 @@ export default {
}, },
{ {
name: '3.3.3 用户', name: '3.3.3 用户',
content: content: `教师可查看当前在线用户列表,对用户进行禁言、踢出等操作。<br/>
`教师可查看当前在线用户列表,对用户进行禁言、踢出等操作。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/68312cb9ef5eda0b327c46c6f219cf79.png" alt=""><br/> <img src="https://zws-imgs-pub.ezijing.com/static/public/68312cb9ef5eda0b327c46c6f219cf79.png" alt=""><br/>
1)私聊:其他用户无法看到私聊内容;<br/> 1)私聊:其他用户无法看到私聊内容;<br/>
2)禁言:该用户可观看直播,但无法进行发言;<br/> 2)禁言:该用户可观看直播,但无法进行发言;<br/>
...@@ -273,8 +254,7 @@ export default { ...@@ -273,8 +254,7 @@ export default {
}, },
{ {
name: '3.3.4 连麦', name: '3.3.4 连麦',
content: content: `教师可与学员进行一对一视频/语音互动,其他学员将同时看到两人的视频/语音内容。<br/>
`教师可与学员进行一对一视频/语音互动,其他学员将同时看到两人的视频/语音内容。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/05efa523a4c29acc5c218f4d0bfd4f3a.png" alt=""><br/> <img src="https://zws-imgs-pub.ezijing.com/static/public/05efa523a4c29acc5c218f4d0bfd4f3a.png" alt=""><br/>
教师与学员连麦的流程如下:<br/> 教师与学员连麦的流程如下:<br/>
1)教师在教学客户端点击“开启语音”;<br/> 1)教师在教学客户端点击“开启语音”;<br/>
...@@ -288,15 +268,13 @@ export default { ...@@ -288,15 +268,13 @@ export default {
}, },
{ {
name: '3.3.5 公告', name: '3.3.5 公告',
content: content: `教师可发布、编辑、删除公告,公告内容将置顶于学员聊天区最上方。<br/>
`教师可发布、编辑、删除公告,公告内容将置顶于学员聊天区最上方。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/7929c9d839a89fece17a0d8b3386fbad.png" alt=""> <img src="https://zws-imgs-pub.ezijing.com/static/public/7929c9d839a89fece17a0d8b3386fbad.png" alt="">
` `
}, },
{ {
name: '3.3.6 答题卡', name: '3.3.6 答题卡',
content: content: `教师可发布答题卡,考察学员的学习情况。题干内容由教师通过视频/语音/文档等途径给出。<br/>
`教师可发布答题卡,考察学员的学习情况。题干内容由教师通过视频/语音/文档等途径给出。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/bf4236a44a82ec1d7e32566eaa3c1693.png" alt=""><br/> <img src="https://zws-imgs-pub.ezijing.com/static/public/bf4236a44a82ec1d7e32566eaa3c1693.png" alt=""><br/>
1)答题卡题型包括判断题、单选题和多选题(三至五个选项);<br/> 1)答题卡题型包括判断题、单选题和多选题(三至五个选项);<br/>
2)点击“停止答题”后教师和学员端均可查看全员的答题统计。 2)点击“停止答题”后教师和学员端均可查看全员的答题统计。
...@@ -304,8 +282,7 @@ export default { ...@@ -304,8 +282,7 @@ export default {
}, },
{ {
name: '3.3.7 签到', name: '3.3.7 签到',
content: content: `教师可发起签到,考察学员是否有挂机等现象。<br/>
`教师可发起签到,考察学员是否有挂机等现象。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/461fafde1248bf0fd4f010b50c045d1f.png" alt=""><br/> <img src="https://zws-imgs-pub.ezijing.com/static/public/461fafde1248bf0fd4f010b50c045d1f.png" alt=""><br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/3402f9624afbe21547f1afe6b340d282.png" alt=""><br/> <img src="https://zws-imgs-pub.ezijing.com/static/public/3402f9624afbe21547f1afe6b340d282.png" alt=""><br/>
1)答题卡题型包括判断题、单选题和多选题(三至五个选项);<br/> 1)答题卡题型包括判断题、单选题和多选题(三至五个选项);<br/>
...@@ -314,8 +291,7 @@ export default { ...@@ -314,8 +291,7 @@ export default {
}, },
{ {
name: '3.3.8 抽奖', name: '3.3.8 抽奖',
content: content: `教师可发起抽奖,调动学员的积极性。<br/>
`教师可发起抽奖,调动学员的积极性。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/433f49801d441d8b33ed97703e2dba7b.png" alt=""><br/> <img src="https://zws-imgs-pub.ezijing.com/static/public/433f49801d441d8b33ed97703e2dba7b.png" alt=""><br/>
1)教师可选择参与抽奖的用户,设置中奖名额;<br/> 1)教师可选择参与抽奖的用户,设置中奖名额;<br/>
2)每个中奖者将分别进行抽取,教师可对该中奖者进行重抽;<br/> 2)每个中奖者将分别进行抽取,教师可对该中奖者进行重抽;<br/>
...@@ -324,8 +300,7 @@ export default { ...@@ -324,8 +300,7 @@ export default {
}, },
{ {
name: '3.3.9 问卷', name: '3.3.9 问卷',
content: content: `教师可发布问卷,考察学员的学习情况。题干内容与选项均包含在问卷中。<br/>
`教师可发布问卷,考察学员的学习情况。题干内容与选项均包含在问卷中。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/3c68911b9b74212fa110226990d2425a.png" alt=""><br/> <img src="https://zws-imgs-pub.ezijing.com/static/public/3c68911b9b74212fa110226990d2425a.png" alt=""><br/>
1)每个问卷可创建多个题目,题型包括单选题、多选题和问答题。问卷创建后可进行预览、编辑或删除;<br/> 1)每个问卷可创建多个题目,题型包括单选题、多选题和问答题。问卷创建后可进行预览、编辑或删除;<br/>
2)可创建多个问卷,问卷可提前创建,在直播中随时发布;<br/> 2)可创建多个问卷,问卷可提前创建,在直播中随时发布;<br/>
...@@ -349,15 +324,13 @@ export default { ...@@ -349,15 +324,13 @@ export default {
child: [ child: [
{ {
name: '3.4.1 设置用户基数', name: '3.4.1 设置用户基数',
content: content: `设置用户基数,观看端显示的在线人数将为实际人数与基数的总和。教师端显示的人数不受影响。<br/>
`设置用户基数,观看端显示的在线人数将为实际人数与基数的总和。教师端显示的人数不受影响。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/f01de62f98f0c4c7297361f7c1cdd7f4.png" alt=""> <img src="https://zws-imgs-pub.ezijing.com/static/public/f01de62f98f0c4c7297361f7c1cdd7f4.png" alt="">
` `
}, },
{ {
name: '3.4.2 线路测速', name: '3.4.2 线路测速',
content: content: `在直播开始前,客户端会测量当前网络状况,自动选择最优的推流服务器节点。用户也可手动进行节点测试,根据评分和推荐结果选择服务器节点。<br/>
`在直播开始前,客户端会测量当前网络状况,自动选择最优的推流服务器节点。用户也可手动进行节点测试,根据评分和推荐结果选择服务器节点。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/f0979c245f7d2a688fa9b07cbec276a4.png" alt=""><br/> <img src="https://zws-imgs-pub.ezijing.com/static/public/f0979c245f7d2a688fa9b07cbec276a4.png" alt=""><br/>
1)连接耗时:客户端到推流服务器的网络连接时间,连接耗时越短则评分越高;<br/> 1)连接耗时:客户端到推流服务器的网络连接时间,连接耗时越短则评分越高;<br/>
2)带宽:客户端到推流服务器的网络吞吐量,带宽值越大则评分越高;<br/> 2)带宽:客户端到推流服务器的网络吞吐量,带宽值越大则评分越高;<br/>
...@@ -367,8 +340,7 @@ export default { ...@@ -367,8 +340,7 @@ export default {
}, },
{ {
name: '3.4.3 布局切换', name: '3.4.3 布局切换',
content: content: `
`
在直播过程中教师可切换学员观看端的页面布局。点击按钮,选择相应布局模式。<br/> 在直播过程中教师可切换学员观看端的页面布局。点击按钮,选择相应布局模式。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/d66837d018cc45ce5dc7fc1c7ccb198d.png" alt=""><br/> <img src="https://zws-imgs-pub.ezijing.com/static/public/d66837d018cc45ce5dc7fc1c7ccb198d.png" alt=""><br/>
1)文档为主:<br/> 1)文档为主:<br/>
...@@ -387,13 +359,11 @@ export default { ...@@ -387,13 +359,11 @@ export default {
}, },
{ {
name: '3.4.5 服务器时间', name: '3.4.5 服务器时间',
content: content: '勾选后将在客户端顶部栏显示当前实时时间,方便教师查看。'
'勾选后将在客户端顶部栏显示当前实时时间,方便教师查看。'
}, },
{ {
name: '3.4.6 状态监控', name: '3.4.6 状态监控',
content: content: `在直播过程中用户可实时查看直播状态,如图17所示。<br/>
`在直播过程中用户可实时查看直播状态,如图17所示。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/585b894a698854837170052888da2a9b.png" alt=""><br/> <img src="https://zws-imgs-pub.ezijing.com/static/public/585b894a698854837170052888da2a9b.png" alt=""><br/>
1)掉帧:若掉帧数不为0,表示直播画面出现了丢失,请检查教师端电脑和网络配置是否符合第一章所述的直播要求;<br/> 1)掉帧:若掉帧数不为0,表示直播画面出现了丢失,请检查教师端电脑和网络配置是否符合第一章所述的直播要求;<br/>
2)码率:直播实时传输码率,如果码率有时出现0 kb/s,表示当前网络较差,请检查网络配置是否符合直播要求;<br/> 2)码率:直播实时传输码率,如果码率有时出现0 kb/s,表示当前网络较差,请检查网络配置是否符合直播要求;<br/>
...@@ -405,10 +375,11 @@ export default { ...@@ -405,10 +375,11 @@ export default {
] ]
} }
], ],
contentData: '本操作说明说详细的描述了紫荆教育在线教与学系统-教师端-(V1.1版本)实现的功能和操作步骤,其编写目的为:<br/>直播学习系统使用者的操作指南<br/>直播学习系统使用者培训参考文档' contentData:
'本操作说明说详细的描述了紫荆教育在线教与学系统-教师端-(V1.1版本)实现的功能和操作步骤,其编写目的为:<br/>直播学习系统使用者的操作指南<br/>直播学习系统使用者培训参考文档'
} }
}, },
metaInfo () { metaInfo() {
return { return {
title: '紫荆教育在线教与学系统', title: '紫荆教育在线教与学系统',
meta: [ meta: [
...@@ -424,87 +395,104 @@ export default { ...@@ -424,87 +395,104 @@ export default {
}, },
dealRender: () => { dealRender: () => {
// 移动端设置HTML字体大小 // 移动端设置HTML字体大小
(function (win, doc) { ;(function (win, doc) {
let wWidth = (win.screen.width > 0) ? (win.innerWidth >= win.screen.width || win.innerWidth === 0) ? win.screen.width : win.innerWidth : win.innerWidth // eslint-disable-line const wWidth =
const wFsize = (wWidth > 640 ? 640 : wWidth) / 375 * 100 win.screen.width > 0
? win.innerWidth >= win.screen.width || win.innerWidth === 0
? win.screen.width
: win.innerWidth
: win.innerWidth // eslint-disable-line
const wFsize = ((wWidth > 640 ? 640 : wWidth) / 375) * 100
doc.documentElement.style.fontSize = wFsize + 'px' doc.documentElement.style.fontSize = wFsize + 'px'
})(window, document) })(window, document)
} }
}, },
mounted () { mounted() {
this.dealRender() this.dealRender()
} }
} }
</script> </script>
<style> <style>
html{ html {
font-size: 100px; font-size: 100px;
font-family: "PingFang SC" font-family: 'PingFang SC';
} }
.content a{
color:#0C7AB9; .content a {
color: #0C7AB9;
} }
.content img{
.content img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.content span{
.content span {
color: red; color: red;
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.head{ .head {
width: 100%; width: 100%;
text-align: center; text-align: center;
color: #000000; color: #000000;
font-size: .16rem; font-size: 0.16rem;
font-weight: 800; font-weight: 800;
height: .6rem; height: 0.6rem;
line-height: .6rem; line-height: 0.6rem;
background-color: #EDEDED; background-color: #EDEDED;
} }
.main{
display:flex; .main {
.menu{ display: flex;
.menu {
width: 1.04rem; width: 1.04rem;
flex-shrink:0; flex-shrink: 0;
background-color: #EDEDED; background-color: #EDEDED;
h2.title{
h2.title {
color: #999999; color: #999999;
font-size: .1rem; font-size: 0.1rem;
line-height: .14rem; line-height: 0.14rem;
font-weight: 800; font-weight: 800;
} }
h3.title{
h3.title {
color: #000000; color: #000000;
font-size: .14rem; font-size: 0.14rem;
line-height: .2rem; line-height: 0.2rem;
font-weight: 400; font-weight: 400;
} }
.title{
.title {
margin: 0; margin: 0;
padding: .15rem .08rem .15rem .13rem; padding: 0.15rem 0.08rem 0.15rem 0.13rem;
} }
h3:active,h3:hover{
h3:active,
h3:hover {
background-color: #ffffff; background-color: #ffffff;
color: #BB133E; color: #BB133E;
} }
} }
.content{
.content {
background-color: #ffffff; background-color: #ffffff;
flex-grow:1; flex-grow: 1;
padding: .2rem; padding: 0.2rem;
color: #000000; color: #000000;
font-size: .14rem; font-size: 0.14rem;
line-height: .2rem; line-height: 0.2rem;
font-weight: 400; font-weight: 400;
} }
} }
@media (min-width: 900px) { @media (min-width: 900px) {
.head{ .head {
height: 105px; height: 105px;
line-height: 105px; line-height: 105px;
padding-left: 40px; padding-left: 40px;
...@@ -512,49 +500,59 @@ html{ ...@@ -512,49 +500,59 @@ html{
font-size: 18px; font-size: 18px;
background-color: #ffffff; background-color: #ffffff;
} }
.main{
.menu{ .main {
width: 194px; .menu {
background-color: #fff; width: 194px;
h2.title{ background-color: #fff;
font-size: 12px;
line-height: 17px; h2.title {
padding{ font-size: 12px;
left: 20px; line-height: 17px;
right: 20px;
padding {
left: 20px;
right: 20px;
}
} }
}
h3.title{ h3.title {
color: #333; color: #333;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
font-weight: 400; font-weight: 400;
padding{
left: 40px; padding {
right: 17px; left: 40px;
right: 17px;
}
}
.title {
margin: 0;
padding-top: 20px;
padding-bottom: 20px;
}
h3:active,
h3:hover {
background-color: #ededed;
} }
} }
.title{
margin: 0; .content {
padding-top:20px;
padding-bottom: 20px;
}
h3:active,h3:hover{
background-color: #ededed; background-color: #ededed;
padding: 40px;
font-size: 14px;
line-height: 20px;
} }
} }
.content{
background-color: #ededed; @media (min-width: 1200px) {
padding: 40px; .box {
font-size: 14px; width: 1200px;
line-height: 20px; margin: auto;
} }
}
@media (min-width: 1200px) {
.box{
width: 1200px;
margin: auto
} }
} }
}
</style> </style>
<template> <template>
<div> <div>
<div class="con-title">通知</div> <div class="con-title">{{ $t('pages.other.message.title') }}</div>
<div class="con-box"> <div class="con-box">
<el-collapse accordion v-model="activeName" @change="handleChange" v-if="msgList.length"> <el-collapse accordion v-model="activeName" @change="handleChange" v-if="msgList.length">
<template v-for="(item, index) in msgList"> <template v-for="(item, index) in msgList">
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</el-collapse-item> </el-collapse-item>
</template> </template>
</el-collapse> </el-collapse>
<div class="empty" v-else>您没有收到任何通知</div> <div class="empty" v-else>{{ $t('pages.other.message.tip') }}</div>
<el-pagination <el-pagination
background background
layout="prev, pager, next" layout="prev, pager, next"
...@@ -58,7 +58,10 @@ export default { ...@@ -58,7 +58,10 @@ export default {
} }
}, },
getData() { getData() {
const params = { offset: this.page.offset, limit: this.page.limit } const params = {
offset: this.page.offset,
limit: this.page.limit
}
cAction.Other.getMyMsg(params).then(response => { cAction.Other.getMyMsg(params).then(response => {
this.msgList = response.list this.msgList = response.list
this.page.total = parseInt(response.count) this.page.total = parseInt(response.count)
...@@ -76,6 +79,7 @@ export default { ...@@ -76,6 +79,7 @@ export default {
.el-collapse-item__header { .el-collapse-item__header {
line-height: 15px; line-height: 15px;
} }
.empty { .empty {
padding: 100px; padding: 100px;
font-size: 18px; font-size: 18px;
......
<template> <template>
<div> <div>
<div class="con-title">修改密码</div> <div class="con-title">{{ $t('pages.other.setPwd.tip') }}</div>
<div class="con-box"> <div class="con-box">
<el-row> <el-row>
<!-- <el-col class="hidden-sm-and-down" :md="6" :lg="7" :xl="8" style="height: 1px;"></el-col> --> <!-- <el-col class="hidden-sm-and-down" :md="6" :lg="7" :xl="8" style="height: 1px;"></el-col> -->
<el-col :xs="24" :sm="16" :md="12" :lg="10" :xl="8"> <el-col :xs="24" :sm="16" :md="12" :lg="10" :xl="8">
<el-form ref="setpwdform" label-width="100px" :model="accountSetPwd" :rules="rules"> <el-form ref="setpwdform" label-width="100px" :model="accountSetPwd" :rules="rules">
<el-form-item label="旧密码" prop="oldPwd"> <el-form-item :label="$t('pages.other.setPwd.Oldpassword')" prop="oldPwd">
<el-input v-model="accountSetPwd.oldPwd" type="password" placeholder="请输入密码" @keyup.enter.native="onSubmitSetPwd"></el-input> <el-input
v-model="accountSetPwd.oldPwd"
type="password"
:placeholder="$t('pages.other.setPwd.inputOldpassword')"
@keyup.enter.native="onSubmitSetPwd"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="新密码" prop="newPwd"> <el-form-item :label="$t('pages.other.setPwd.newpassword')" prop="newPwd">
<el-input v-model="accountSetPwd.newPwd" type="password" placeholder="请输入新密码" @keyup.enter.native="onSubmitSetPwd"></el-input> <el-input
v-model="accountSetPwd.newPwd"
type="password"
placeholder="$t('pages.other.setPwd.inputnewpassword')"
@keyup.enter.native="onSubmitSetPwd"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="重复新密码" prop="newPwdAgain"> <el-form-item :label="$t('pages.other.setPwd.Repeatnewpassword')" prop="newPwdAgain">
<el-input v-model="accountSetPwd.newPwdAgain" type="password" placeholder="请重复输入新密码" @keyup.enter.native="onSubmitSetPwd"></el-input> <el-input
v-model="accountSetPwd.newPwdAgain"
type="password"
placeholder="$t('pages.other.setPwd.inputRepeatnewpassword')"
@keyup.enter.native="onSubmitSetPwd"
></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="onSubmitSetPwd">保存</el-button> <el-button type="primary" @click="onSubmitSetPwd">{{ $t('pages.other.setPwd.save') }}</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-col> </el-col>
...@@ -29,8 +44,8 @@ ...@@ -29,8 +44,8 @@
import { request } from '@action' import { request } from '@action'
export default { export default {
components: { }, components: {},
data () { data() {
/* 校验两次输入密码是否一致 */ /* 校验两次输入密码是否一致 */
const checkNewPwd = (rule, value, callback) => { const checkNewPwd = (rule, value, callback) => {
if (value !== this.accountSetPwd.newPwd) { if (value !== this.accountSetPwd.newPwd) {
...@@ -44,24 +59,49 @@ export default { ...@@ -44,24 +59,49 @@ export default {
accountSetPwd: {}, accountSetPwd: {},
rules: { rules: {
oldPwd: [ oldPwd: [
{ required: true, message: '请输入密码', trigger: 'blur' }, {
{ pattern: /^[a-zA-Z0-9_+-]{6,12}$/, message: '请输入6-20个字母、数字及标点符号', trigger: 'change' } required: true,
message: '请输入密码',
trigger: 'blur'
},
{
pattern: /^[a-zA-Z0-9_+-]{6,12}$/,
message: '请输入6-20个字母、数字及标点符号',
trigger: 'change'
}
], ],
newPwd: [ newPwd: [
{ required: true, message: '请输入新密码', trigger: 'blur' }, {
{ pattern: /^[a-zA-Z0-9_+-]{6,12}$/, message: '请输入6-20个字母、数字及标点符号', trigger: 'change' } required: true,
message: '请输入新密码',
trigger: 'blur'
},
{
pattern: /^[a-zA-Z0-9_+-]{6,12}$/,
message: '请输入6-20个字母、数字及标点符号',
trigger: 'change'
}
], ],
newPwdAgain: [ newPwdAgain: [
{ required: true, message: '请重复输入新密码', trigger: 'blur' }, {
{ validator: checkNewPwd, trigger: 'change' } required: true,
message: '请重复输入新密码',
trigger: 'blur'
},
{
validator: checkNewPwd,
trigger: 'change'
}
] ]
} }
} }
}, },
methods: { methods: {
handleClick (tab, event) { /* console.log(tab, event) */ }, handleClick(tab, event) {
onSubmitSetPwd () { /* console.log(tab, event) */
this.$refs.setpwdform.validate((valid) => { },
onSubmitSetPwd() {
this.$refs.setpwdform.validate(valid => {
if (valid) { if (valid) {
request({ request({
component: this, component: this,
......
<template> <template>
<div> <div>
<div class="con-title">修改头像</div> <div class="con-title">{{ $t('pages.other.setPwd.title') }}</div>
<div class="con-box"> <div class="con-box">
<el-row justify="center"> <el-row justify="center">
<el-col :xs="24" :sm="9" :md="8" :lg="7" :xl="6"> <el-col :xs="24" :sm="9" :md="8" :lg="7" :xl="6">
<div class="pic-show"> <div class="pic-show">
<img :src="imgUrl" alt /> <img :src="imgUrl" alt />
</div> </div>
</el-col> </el-col>
<el-col :xs="24" :sm="15" :md="16" :lg="17" :xl="18"> <el-col :xs="24" :sm="15" :md="16" :lg="17" :xl="18">
<div class="info"> <div class="info">
学员姓名: {{ $t('pages.other.setPwd.student') }}
<b>{{user.student_name}}</b> <b>{{user.student_name}}</b>
</div> </div>
<div class="info">学员学号:{{user.student_no}}</div> <div class="info">{{ $t('pages.other.setPwd.studentnum') }}{{user.student_no}}</div>
<div class="info" style="display: none;">学员sid:{{user.student_id}}</div> <div class="info" style="display: none;">{{ $t('pages.other.setPwd.studentid') }}{{user.student_id}}</div>
<div class="info" style="display: none;">学员sso_id:{{user.sso_id}}</div> <div class="info" style="display: none;">{{ $t('pages.other.setPwd.studentsoid') }}{{user.sso_id}}</div>
<div class="info">支持jpg、gif、png或bmp格式的图片,建议文件小于5M</div> <div class="info">{{ $t('pages.other.setPwd.msg') }}</div>
<el-upload <el-upload ref="upFile" class="upload-demo" action :multiple="false" :limit="1" :show-file-list="false" :on-change="handleChange" :http-request="uploadFile" :file-list="filesArr">
ref="upFile" <el-button type="primary">{{ $t('pages.other.setPwd.clickup') }}</el-button>
class="upload-demo" </el-upload>
action </el-col>
:multiple="false" </el-row>
:limit="1"
:show-file-list="false"
:on-change="handleChange"
:http-request="uploadFile"
:file-list="filesArr"
>
<el-button type="primary">点击上传</el-button>
</el-upload>
</el-col>
</el-row>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
...@@ -96,7 +86,11 @@ export default { ...@@ -96,7 +86,11 @@ export default {
}, },
updateUser() { updateUser() {
action.Other.updateUser({ action.Other.updateUser({
SsoBasicUser: { info: { avatar: this.imgUrl } } SsoBasicUser: {
info: {
avatar: this.imgUrl
}
}
}).then(data => { }).then(data => {
window.G.UserInfo.avatar = this.imgUrl window.G.UserInfo.avatar = this.imgUrl
}) })
...@@ -112,21 +106,23 @@ export default { ...@@ -112,21 +106,23 @@ export default {
margin: 0 auto; margin: 0 auto;
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
background: #ffffff url('../../assets/images/person-default.jpg') center background: #ffffff url('../../assets/images/person-default.jpg') center center no-repeat;
center no-repeat;
background-size: cover; background-size: cover;
border: 1px solid #e6e3e3; border: 1px solid #e6e3e3;
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
} }
.info { .info {
margin-top: 0.2rem; margin-top: 0.2rem;
} }
.upload-demo { .upload-demo {
display: block; display: block;
margin: 0.2rem 0 0 0; margin: 0.2rem 0 0 0;
...@@ -137,6 +133,7 @@ export default { ...@@ -137,6 +133,7 @@ export default {
margin-top: 0.2rem; margin-top: 0.2rem;
text-align: center; text-align: center;
} }
.upload-demo { .upload-demo {
text-align: center; text-align: center;
} }
......
<template> <template>
<div class="survey-container"> <div class="survey-container">
<div class="header"> <div class="header">
<div class="title">索菲亚MBA课程教学服务评估表</div> <div class="title">{{ $t('pages.survey.surveyy.title') }}</div>
<div class="sub-title">您好!为保证我们能够为您提供更优质的课程,提高教学质量及服务,请您对此次课程提出宝贵的意见和建议。感谢您对我们工作的支持!(请您选择星级,选中1颗星为1分,最高5颗星)。请用1(低)到5(高)为每一项打分,并加上任何您想写的评论。</div> <div class="sub-title">{{ $t('pages.survey.surveyy.title2') }}</div>
<!-- <img src="./logo-header.jpg" alt=""> --> <!-- <img src="./logo-header.jpg" alt=""> -->
<div class="sub-left">课程名称:{{headerInfo.title}} <div class="sub-left">
{{ $t('pages.survey.surveyy.kecheng') }}{{ headerInfo.title }}
<!-- <div class="sub-right">授课人:{{}}</div> --> <!-- <div class="sub-right">授课人:{{}}</div> -->
</div> </div>
</div> </div>
<div class="progress"> <div class="progress">
<div class="cur-progress" :style="{ width: progress}"></div> <div class="cur-progress" :style="{ width: progress }"></div>
</div> </div>
<div class="exam-box"> <div class="exam-box">
<template v-for='(item, index) in exam.group'> <template v-for="(item, index) in exam.group">
<template v-if='item.type === 1'> <template v-if="item.type === 1">
<div v-bind:key="index" class='q-group' @click="radioClick" :data-index='index'> <div v-bind:key="index" class="q-group" @click="radioClick" :data-index="index">
<div class='q-item'>{{item.title}}</div> <div class="q-item">{{ item.title }}</div>
<el-radio-group class='radio-group' @change='radioChange' v-model="item.sel"> <el-radio-group class="radio-group" @change="radioChange" v-model="item.sel">
<template v-for='(item1, index1) in item.arr'> <template v-for="(item1, index1) in item.arr">
<!-- checked='{{item1.selected}}' --> <!-- checked='{{item1.selected}}' -->
<el-radio v-bind:key="index1" :label='index1' :disabled='!!item.cur' :class='["radio"]'>{{item1.option}}</el-radio> <el-radio v-bind:key="index1" :label="index1" :disabled="!!item.cur" :class="['radio']">{{
item1.option
}}</el-radio>
<template v-if="item1.txt !== undefined && item1.selected"> <template v-if="item1.txt !== undefined && item1.selected">
<el-input v-bind:key="item1.id" v-model="item1.txt" placeholder="请说明"></el-input> <el-input
v-bind:key="item1.id"
v-model="item1.txt"
:placeholder="$t('pages.survey.surveyy.Pleaseexplain')"
></el-input>
</template> </template>
</template> </template>
</el-radio-group> </el-radio-group>
</div> </div>
</template> </template>
<template v-if='item.type === 2'> <template v-if="item.type === 2">
<div v-bind:key="index" class='q-group' @click="checkboxClick" :data-index='index'> <div v-bind:key="index" class="q-group" @click="checkboxClick" :data-index="index">
<div class='q-item'>{{item.title}}</div> <div class="q-item">{{ item.title }}</div>
<el-checkbox-group class='checkbox-group' @change='checkboxChange' v-model="item.arrSel"> <el-checkbox-group class="checkbox-group" @change="checkboxChange" v-model="item.arrSel">
<template v-for='(item1, index1) in item.arr'> <template v-for="(item1, index1) in item.arr">
<!-- value='{{index1}}' --> <!-- value='{{index1}}' -->
<el-checkbox v-bind:key="item1.id" :label='index1' :disabled='!!item.cur' :class='["checkbox"]'>{{item1.option}}</el-checkbox> <el-checkbox v-bind:key="item1.id" :label="index1" :disabled="!!item.cur" :class="['checkbox']">{{
item1.option
}}</el-checkbox>
<template v-if="item1.txt !== undefined && item1.selected"> <template v-if="item1.txt !== undefined && item1.selected">
<el-input v-bind:key="index1" v-model="item1.txt" placeholder="请说明"></el-input> <el-input
v-bind:key="index1"
v-model="item1.txt"
:placeholder="$t('pages.survey.surveyy.Pleaseexplain')"
></el-input>
</template> </template>
</template> </template>
</el-checkbox-group> </el-checkbox-group>
</div> </div>
</template> </template>
<template v-if="item.type === 3 || item.type === 4"> <template v-if="item.type === 3 || item.type === 4">
<div v-bind:key="index" class='q-group'> <div v-bind:key="index" class="q-group">
<div class='q-item'>{{item.title}}</div> <div class="q-item">{{ item.title }}</div>
<template v-for='(item1, index1) in item.arr'> <template v-for="(item1, index1) in item.arr">
<div v-bind:key="item1.id" class="star-item"> <div v-bind:key="item1.id" class="star-item">
<div class="left-txt">{{item1.option}}</div> <div class="left-txt">{{ item1.option }}</div>
<template v-if="item1.star !== undefined"> <template v-if="item1.star !== undefined">
<div class="right-stars"> <div class="right-stars">
<i :class="['icon', (item1.star >= 1 ? 'el-icon-self-star_full' : 'el-icon-self-wujiaoxing')]" @click="setStar(index, 1, index1)" @mouseenter="hoverStar(index, 1, index1)"></i> <i
<i :class="['icon', (item1.star >= 2 ? 'el-icon-self-star_full' : 'el-icon-self-wujiaoxing')]" @click="setStar(index, 2, index1)" @mouseenter="hoverStar(index, 2, index1)"></i> :class="['icon', item1.star >= 1 ? 'el-icon-self-star_full' : 'el-icon-self-wujiaoxing']"
<i :class="['icon', (item1.star >= 3 ? 'el-icon-self-star_full' : 'el-icon-self-wujiaoxing')]" @click="setStar(index, 3, index1)" @mouseenter="hoverStar(index, 3, index1)"></i> @click="setStar(index, 1, index1)"
<i :class="['icon', (item1.star >= 4 ? 'el-icon-self-star_full' : 'el-icon-self-wujiaoxing')]" @click="setStar(index, 4, index1)" @mouseenter="hoverStar(index, 4, index1)"></i> @mouseenter="hoverStar(index, 1, index1)"
<i :class="['icon', (item1.star === 5 ? 'el-icon-self-star_full' : 'el-icon-self-wujiaoxing')]" @click="setStar(index, 5, index1)" @mouseenter="hoverStar(index, 5, index1)"></i> ></i>
<i
:class="['icon', item1.star >= 2 ? 'el-icon-self-star_full' : 'el-icon-self-wujiaoxing']"
@click="setStar(index, 2, index1)"
@mouseenter="hoverStar(index, 2, index1)"
></i>
<i
:class="['icon', item1.star >= 3 ? 'el-icon-self-star_full' : 'el-icon-self-wujiaoxing']"
@click="setStar(index, 3, index1)"
@mouseenter="hoverStar(index, 3, index1)"
></i>
<i
:class="['icon', item1.star >= 4 ? 'el-icon-self-star_full' : 'el-icon-self-wujiaoxing']"
@click="setStar(index, 4, index1)"
@mouseenter="hoverStar(index, 4, index1)"
></i>
<i
:class="['icon', item1.star === 5 ? 'el-icon-self-star_full' : 'el-icon-self-wujiaoxing']"
@click="setStar(index, 5, index1)"
@mouseenter="hoverStar(index, 5, index1)"
></i>
</div> </div>
</template> </template>
</div> </div>
</template> </template>
<div style="width: 100%; height: 20px;"></div> <div style="width: 100%; height: 20px"></div>
<template v-if='item.area !== undefined'> <template v-if="item.area !== undefined">
<el-input <el-input
type="textarea" type="textarea"
:rows="4" :rows="4"
placeholder="还有哪些需要改进的方面" :placeholder="$t('pages.survey.surveyy.tip')"
v-model="item.area" @blur="leaveSave"> v-model="item.area"
@blur="leaveSave"
>
</el-input> </el-input>
</template> </template>
</div> </div>
</template> </template>
</template> </template>
<div class="bottom">如果您在紫荆MBA学位课程的收获比较大,我们会非常感谢您帮助我们推荐和您一样优秀的学员加入到MBA的大家庭,具体请联系您所在班的班主任。</div> <div class="bottom">{{ $t('pages.survey.surveyy.btmtip') }}</div>
<div :class="['btn', this.curPage > 1 ? '' : 'none']" @click="prevPage">上一页</div> <div :class="['btn', this.curPage > 1 ? '' : 'none']" @click="prevPage">
{{ $t('pages.survey.surveyy.previouspage') }}
</div>
<template v-if="lastPage"> <template v-if="lastPage">
<div class="btn" @click="goSubmit">提交</div> <div class="btn" @click="goSubmit">
{{ $t('pages.survey.surveyy.submit') }}
</div>
</template> </template>
<template v-else> <template v-else>
<div class="btn" @click="nextPage">下一页</div> <div class="btn" @click="nextPage">
{{ $t('pages.survey.surveyy.nextpage') }}
</div>
</template> </template>
</div> </div>
</div> </div>
...@@ -90,10 +131,16 @@ import _ from 'lodash' ...@@ -90,10 +131,16 @@ import _ from 'lodash'
export default { export default {
props: { props: {
sid: { type: String, require: false }, sid: {
cid: { type: String, require: false } type: String,
require: false
},
cid: {
type: String,
require: false
}
}, },
data () { data() {
const _headerInfo = JSON.parse(window.localStorage.getItem('headerInfo') || '{}') const _headerInfo = JSON.parse(window.localStorage.getItem('headerInfo') || '{}')
return { return {
dataQuestion: _.cloneDeep(qData.question), dataQuestion: _.cloneDeep(qData.question),
...@@ -132,7 +179,7 @@ export default { ...@@ -132,7 +179,7 @@ export default {
lastPage: false lastPage: false
} }
}, },
mounted () { mounted() {
/* 读取本地缓存 */ /* 读取本地缓存 */
const quesLocal = window.localStorage.getItem('quesLocal' + this.sid + this.cid) const quesLocal = window.localStorage.getItem('quesLocal' + this.sid + this.cid)
const quesPage = window.localStorage.getItem('quesPage' + this.sid + this.cid) const quesPage = window.localStorage.getItem('quesPage' + this.sid + this.cid)
...@@ -144,12 +191,12 @@ export default { ...@@ -144,12 +191,12 @@ export default {
} }
this.loadQuestion() this.loadQuestion()
}, },
destroyed () { destroyed() {
qData.question = this.dataQuestion qData.question = this.dataQuestion
}, },
methods: { methods: {
/* 提交数据 */ /* 提交数据 */
goSubmit () { goSubmit() {
for (let i = 0; i < qData.question.length; i++) { for (let i = 0; i < qData.question.length; i++) {
const _item = qData.question[i] const _item = qData.question[i]
if (_item.type === 3) { if (_item.type === 3) {
...@@ -167,35 +214,44 @@ export default { ...@@ -167,35 +214,44 @@ export default {
} }
} }
} }
const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' }) const loading = this.$loading({
lock: true,
text: '',
spinner: '',
background: 'rgba(255, 255, 255, 0.9)'
})
cAction.Player.updateSurveyAnswer({ cAction.Player.updateSurveyAnswer({
semester_id: this.sid, semester_id: this.sid,
course_id: this.cid, course_id: this.cid,
raw: Base64.encode(JSON.stringify(qData.question)) raw: Base64.encode(JSON.stringify(qData.question))
}).then(res => {
const a = 1
if (a) {
this.$message.success('感谢你的宝贵意见。')
/* 答题成功,清空本地缓存 */
window.localStorage.removeItem('quesLocal' + this.sid + this.cid)
window.localStorage.removeItem('quesPage' + this.sid + this.cid)
window.localStorage.removeItem('quesSelectId' + this.sid + this.cid)
loading.close()
setTimeout(() => {
this.$router.push({ path: `/app/learn/course-detail/${this.sid}/${this.cid}` })
}, 2000)
}
}).catch(e => {
/* 答题 记录计入本地缓存 */
window.localStorage.setItem('quesLocal' + this.sid + this.cid, JSON.stringify(qData.question))
window.localStorage.setItem('quesPage' + this.sid + this.cid, this.curPage)
window.localStorage.setItem('quesSelectId' + this.sid + this.cid, this.selectId)
this.$message.error('提交失败,请稍后刷新重试')
loading.close()
}) })
.then(res => {
const a = 1
if (a) {
this.$message.success('感谢你的宝贵意见。')
/* 答题成功,清空本地缓存 */
window.localStorage.removeItem('quesLocal' + this.sid + this.cid)
window.localStorage.removeItem('quesPage' + this.sid + this.cid)
window.localStorage.removeItem('quesSelectId' + this.sid + this.cid)
loading.close()
setTimeout(() => {
this.$router.push({
path: `/app/learn/course-detail/${this.sid}/${this.cid}`
})
}, 2000)
}
})
.catch(e => {
/* 答题 记录计入本地缓存 */
window.localStorage.setItem('quesLocal' + this.sid + this.cid, JSON.stringify(qData.question))
window.localStorage.setItem('quesPage' + this.sid + this.cid, this.curPage)
window.localStorage.setItem('quesSelectId' + this.sid + this.cid, this.selectId)
this.$message.error('提交失败,请稍后刷新重试')
loading.close()
})
}, },
/* 按照id编号规则 放入 exam.group中 */ /* 按照id编号规则 放入 exam.group中 */
loadQuestion () { loadQuestion() {
this.exam.group = [] this.exam.group = []
for (let i = 0; i < qData.question.length; i++) { for (let i = 0; i < qData.question.length; i++) {
const exp = new RegExp('^\\d+-' + this.curPage, 'gi') const exp = new RegExp('^\\d+-' + this.curPage, 'gi')
...@@ -208,10 +264,10 @@ export default { ...@@ -208,10 +264,10 @@ export default {
} }
} }
} }
this.progress = ((this.curPage - 1) / this.total * 100) + '%' this.progress = ((this.curPage - 1) / this.total) * 100 + '%'
}, },
/* 点击下一页 */ /* 点击下一页 */
nextPage () { nextPage() {
for (let i = 0; i < this.exam.group.length; i++) { for (let i = 0; i < this.exam.group.length; i++) {
if (!this.exam.group[i].flag) { if (!this.exam.group[i].flag) {
this.$message.error('本页尚有题目未填写') this.$message.error('本页尚有题目未填写')
...@@ -227,21 +283,21 @@ export default { ...@@ -227,21 +283,21 @@ export default {
window.localStorage.setItem('quesSelectId' + this.sid + this.cid, this.selectId) window.localStorage.setItem('quesSelectId' + this.sid + this.cid, this.selectId)
}, },
/* 点击上一页 */ /* 点击上一页 */
prevPage () { prevPage() {
this.curPage-- this.curPage--
this.loadQuestion() this.loadQuestion()
}, },
/** /**
* 辅助 radio选择 * 辅助 radio选择
*/ */
radioClick (e) { radioClick(e) {
this.radioCur = e.currentTarget.dataset.index this.radioCur = e.currentTarget.dataset.index
}, },
/** /**
* radio选择 * radio选择
* PC端 值会 返回 选择的 值 * PC端 值会 返回 选择的 值
*/ */
radioChange (val) { radioChange(val) {
const i = this.radioCur const i = this.radioCur
const arr = this.exam.group[i].arr const arr = this.exam.group[i].arr
const value = val const value = val
...@@ -255,13 +311,13 @@ export default { ...@@ -255,13 +311,13 @@ export default {
/** /**
* 辅助 checkbox选择 * 辅助 checkbox选择
*/ */
checkboxClick (e) { checkboxClick(e) {
this.checkboxCur = e.currentTarget.dataset.index this.checkboxCur = e.currentTarget.dataset.index
}, },
/** /**
* checkbox选择 * checkbox选择
*/ */
checkboxChange (val) { checkboxChange(val) {
const i = this.checkboxCur const i = this.checkboxCur
const arr = this.exam.group[i].arr const arr = this.exam.group[i].arr
const value = val const value = val
...@@ -279,11 +335,9 @@ export default { ...@@ -279,11 +335,9 @@ export default {
} }
}, },
/* hover选中星星 */ /* hover选中星星 */
hoverStar (index, len, i) { hoverStar(index, len, i) {},
},
/* 点击选中星星 */ /* 点击选中星星 */
setStar (index, len, i) { setStar(index, len, i) {
this.exam.group[index].arr[i].star = len this.exam.group[index].arr[i].star = len
/* 答题 记录计入本地缓存 */ /* 答题 记录计入本地缓存 */
window.localStorage.setItem('quesLocal' + this.sid + this.cid, JSON.stringify(qData.question)) window.localStorage.setItem('quesLocal' + this.sid + this.cid, JSON.stringify(qData.question))
...@@ -291,7 +345,7 @@ export default { ...@@ -291,7 +345,7 @@ export default {
window.localStorage.setItem('quesSelectId' + this.sid + this.cid, this.selectId) window.localStorage.setItem('quesSelectId' + this.sid + this.cid, this.selectId)
}, },
/* 内容离开保存 */ /* 内容离开保存 */
leaveSave () { leaveSave() {
/* 答题 记录计入本地缓存 */ /* 答题 记录计入本地缓存 */
window.localStorage.setItem('quesLocal' + this.sid + this.cid, JSON.stringify(qData.question)) window.localStorage.setItem('quesLocal' + this.sid + this.cid, JSON.stringify(qData.question))
window.localStorage.setItem('quesPage' + this.sid + this.cid, this.curPage) window.localStorage.setItem('quesPage' + this.sid + this.cid, this.curPage)
...@@ -303,25 +357,30 @@ export default { ...@@ -303,25 +357,30 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import './index.css'; @import './index.css';
.survey-container { .survey-container {
display: block; display: block;
max-width: 900px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
.bottom { .bottom {
float: left; float: left;
margin-top: 20px; margin-top: 20px;
font-size: 20px; font-size: 20px;
text-align: justify; text-align: justify;
} }
.header { .header {
padding: 20px; padding: 20px;
background: #ffffff; background: #ffffff;
box-sizing: border-box; box-sizing: border-box;
.title { .title {
font-size: 30px; font-size: 30px;
text-align: center; text-align: center;
margin-bottom: 10px; margin-bottom: 10px;
} }
.sub-title { .sub-title {
padding: 0 30px; padding: 0 30px;
text-indent: 40px; text-indent: 40px;
...@@ -329,33 +388,41 @@ export default { ...@@ -329,33 +388,41 @@ export default {
text-align: justify; text-align: justify;
margin-bottom: 20px; margin-bottom: 20px;
} }
.sub-left { .sub-left {
font-size: 20px; font-size: 20px;
padding-left: 30px; padding-left: 30px;
.sub-right { .sub-right {
float: right; float: right;
} }
} }
width: 100%; width: 100%;
img { img {
display: block; display: block;
width: 100%; width: 100%;
} }
} }
.progress { .progress {
width: 100%; width: 100%;
height: 6px; height: 6px;
background: #b5b5b5; background: #b5b5b5;
.cur-progress { .cur-progress {
display: block; display: block;
height: 100%; height: 100%;
background: #ebbb14; background: #ebbb14;
} }
} }
.exam-box { .exam-box {
padding: 55px 8.7% 100px 8.7%; padding: 55px 8.7% 100px 8.7%;
background: #ffffff; background: #ffffff;
overflow: hidden; overflow: hidden;
/* 选择样式 */ /* 选择样式 */
.q-group { .q-group {
padding: 20px 0 10px 0; padding: 20px 0 10px 0;
...@@ -363,23 +430,29 @@ export default { ...@@ -363,23 +430,29 @@ export default {
color: #313131; color: #313131;
border-bottom: 1px dashed #dcdcdc; border-bottom: 1px dashed #dcdcdc;
overflow: hidden; overflow: hidden;
.q-item { .q-item {
display: block; display: block;
font-weight: 700; font-weight: 700;
margin-bottom: 10px; margin-bottom: 10px;
} }
.star-item { .star-item {
line-height: 2; line-height: 2;
overflow: hidden; overflow: hidden;
.left-txt { .left-txt {
float: left; float: left;
width: 70%; width: 70%;
} }
.right-stars { .right-stars {
float: right; float: right;
.icon { .icon {
font-size: 24px; font-size: 24px;
cursor: pointer; cursor: pointer;
&.el-icon-self-star_full { &.el-icon-self-star_full {
color: #a98c58; color: #a98c58;
} }
...@@ -387,9 +460,11 @@ export default { ...@@ -387,9 +460,11 @@ export default {
} }
} }
} }
.q-group:last-child { .q-group:last-child {
border-bottom: none; border-bottom: none;
} }
.btn { .btn {
float: left; float: left;
width: 150px; width: 150px;
...@@ -403,6 +478,7 @@ export default { ...@@ -403,6 +478,7 @@ export default {
background: #b01b3c; background: #b01b3c;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
&.none { &.none {
display: none; display: none;
} }
......
<template> <template>
<div class="survey-container"> <div class="survey-container">
<div class="header"> <div class="header">
<!-- <img src="./logo-header-phone.jpg" alt=""> --> <!-- <img src="./logo-header-phone.jpg" alt=""> -->
{{headerInfo.title}}(课程评估) {{headerInfo.title}}{{ $t('pages.survey.surveyPhone.title') }}
</div> </div>
<div class="progress"> <div class="progress">
<div class="cur-progress" :style="{ width: progress}"></div> <div class="cur-progress" :style="{ width: progress}"></div>
</div> </div>
<div class="exam-box"> <div class="exam-box">
<template v-for='(item, index) in exam.group'> <template v-for='(item, index) in exam.group'>
<template v-if='item.type === 1'> <template v-if='item.type === 1'>
<div v-bind:key="index" class='q-group' @click="radioClick" :data-index='index'> <div v-bind:key="index" class='q-group' @click="radioClick" :data-index='index'>
<div class='q-item'>{{item.title}}</div> <div class='q-item'>{{item.title}}</div>
<el-radio-group class='radio-group' @change='radioChange' v-model="item.sel"> <el-radio-group class='radio-group' @change='radioChange' v-model="item.sel">
<template v-for='(item1, index1) in item.arr'> <template v-for='(item1, index1) in item.arr'>
<!-- checked='{{item1.selected}}' --> <!-- checked='{{item1.selected}}' -->
<el-radio v-bind:key="index1" :label='index1' :disabled='!!item.cur' :class='["radio"]'>{{item1.option}}</el-radio> <el-radio v-bind:key="index1" :label='index1' :disabled='!!item.cur' :class='["radio"]'>{{item1.option}}</el-radio>
<template v-if="item1.txt !== undefined && item1.selected"> <template v-if="item1.txt !== undefined && item1.selected">
<el-input v-bind:key="item1.id" v-model="item1.txt" placeholder="请说明"></el-input> <el-input v-bind:key="item1.id" v-model="item1.txt" :placeholder="$t('pages.survey.surveyPhone.Pleaseexplain')"></el-input>
</template> </template>
</template> </template>
</el-radio-group> </el-radio-group>
</div> </div>
</template> </template>
<template v-if='item.type === 2'> <template v-if='item.type === 2'>
<div v-bind:key="index" class='q-group' @click="checkboxClick" :data-index='index'> <div v-bind:key="index" class='q-group' @click="checkboxClick" :data-index='index'>
<div class='q-item'>{{item.title}}</div> <div class='q-item'>{{item.title}}</div>
<el-checkbox-group class='checkbox-group' @change='checkboxChange' v-model="item.arrSel"> <el-checkbox-group class='checkbox-group' @change='checkboxChange' v-model="item.arrSel">
<template v-for='(item1, index1) in item.arr'> <template v-for='(item1, index1) in item.arr'>
<!-- value='{{index1}}' --> <!-- value='{{index1}}' -->
<el-checkbox v-bind:key="item1.id" :label='index1' :disabled='!!item.cur' :class='["checkbox"]'>{{item1.option}}</el-checkbox> <el-checkbox v-bind:key="item1.id" :label='index1' :disabled='!!item.cur' :class='["checkbox"]'>{{item1.option}}</el-checkbox>
<template v-if="item1.txt !== undefined && item1.selected"> <template v-if="item1.txt !== undefined && item1.selected">
<el-input v-bind:key="index1" v-model="item1.txt" placeholder="请说明"></el-input> <el-input v-bind:key="index1" v-model="item1.txt" :placeholder="$t('pages.survey.surveyPhone.Pleaseexplain')"></el-input>
</template> </template>
</template> </template>
</el-checkbox-group> </el-checkbox-group>
</div> </div>
</template> </template>
<template v-if="item.type === 3"> <template v-if="item.type === 3">
<div v-bind:key="index" class='q-group'> <div v-bind:key="index" class='q-group'>
<div class='q-item'>{{item.title}}</div> <div class='q-item'>{{item.title}}</div>
<template v-for='(item1, index1) in item.arr'> <template v-for='(item1, index1) in item.arr'>
<div v-bind:key="item1.id" class="star-item"> <div v-bind:key="item1.id" class="star-item">
<div class="left-txt">{{item1.option}}</div> <div class="left-txt">{{item1.option}}</div>
<template v-if="item1.star !== undefined"> <template v-if="item1.star !== undefined">
<div class="right-stars"> <div class="right-stars">
<i :class="['icon', (item1.star >= 1 ? 'el-icon-self-star_full' : 'el-icon-self-wujiaoxing')]" @click="setStar(1, index1)" @mouseenter="hoverStar(1, index1)"></i> <i :class="['icon', (item1.star >= 1 ? 'el-icon-self-star_full' : 'el-icon-self-wujiaoxing')]" @click="setStar(1, index1)" @mouseenter="hoverStar(1, index1)"></i>
<i :class="['icon', (item1.star >= 2 ? 'el-icon-self-star_full' : 'el-icon-self-wujiaoxing')]" @click="setStar(2, index1)" @mouseenter="hoverStar(2, index1)"></i> <i :class="['icon', (item1.star >= 2 ? 'el-icon-self-star_full' : 'el-icon-self-wujiaoxing')]" @click="setStar(2, index1)" @mouseenter="hoverStar(2, index1)"></i>
<i :class="['icon', (item1.star >= 3 ? 'el-icon-self-star_full' : 'el-icon-self-wujiaoxing')]" @click="setStar(3, index1)" @mouseenter="hoverStar(3, index1)"></i> <i :class="['icon', (item1.star >= 3 ? 'el-icon-self-star_full' : 'el-icon-self-wujiaoxing')]" @click="setStar(3, index1)" @mouseenter="hoverStar(3, index1)"></i>
<i :class="['icon', (item1.star >= 4 ? 'el-icon-self-star_full' : 'el-icon-self-wujiaoxing')]" @click="setStar(4, index1)" @mouseenter="hoverStar(4, index1)"></i> <i :class="['icon', (item1.star >= 4 ? 'el-icon-self-star_full' : 'el-icon-self-wujiaoxing')]" @click="setStar(4, index1)" @mouseenter="hoverStar(4, index1)"></i>
<i :class="['icon', (item1.star === 5 ? 'el-icon-self-star_full' : 'el-icon-self-wujiaoxing')]" @click="setStar(5, index1)" @mouseenter="hoverStar(5, index1)"></i> <i :class="['icon', (item1.star === 5 ? 'el-icon-self-star_full' : 'el-icon-self-wujiaoxing')]" @click="setStar(5, index1)" @mouseenter="hoverStar(5, index1)"></i>
</div> </div>
</template> </template>
</div> </div>
</template>
<div style="width: 100%; height: 20px;"></div>
<el-input type="textarea" :rows="4" :placeholder="$t('pages.survey.surveyPhone.tip')" v-model="item.textarea">
</el-input>
</div>
</template> </template>
<div style="width: 100%; height: 20px;"></div>
<el-input
type="textarea"
:rows="4"
placeholder="还有哪些需要改进的方面"
v-model="item.textarea">
</el-input>
</div>
</template>
</template>
<div class="btns-fix">
<div :class="['btn', this.curPage > 1 ? 'two c-btn' : 'none']" @click="prevPage">上一页</div>
<template v-if="lastPage">
<div :class="['btn', this.lastPage ? 'two' : '']" @click="goSubmit">提交</div>
</template>
<template v-else>
<div :class="['btn', this.curPage > 1 ? 'two' : '']" @click="nextPage">下一页</div>
</template> </template>
</div> <div class="btns-fix">
<div :class="['btn', this.curPage > 1 ? 'two c-btn' : 'none']" @click="prevPage">{{ $t('pages.survey.surveyPhone.previouspage') }}</div>
<template v-if="lastPage">
<div :class="['btn', this.lastPage ? 'two' : '']" @click="goSubmit">{{ $t('pages.survey.surveyPhone.submit') }}</div>
</template>
<template v-else>
<div :class="['btn', this.curPage > 1 ? 'two' : '']" @click="nextPage">{{ $t('pages.survey.surveyPhone.nextpage') }}</div>
</template>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
...@@ -84,294 +80,326 @@ import Base64 from 'Base64' ...@@ -84,294 +80,326 @@ import Base64 from 'Base64'
import _ from 'lodash' import _ from 'lodash'
export default { export default {
props: { props: {
sid: { type: String, require: false }, sid: {
cid: { type: String, require: false } type: String,
}, require: false
data () { },
let _headerInfo = JSON.parse(window.localStorage.getItem('headerInfo') || '{}') cid: {
return { type: String,
dataQuestion: _.assignIn({}, qData.question), require: false
headerInfo: _headerInfo,
exam: {
id: '',
semester_id: '',
title: '',
score: '',
work_contents: '',
group: []
},
// 提交时,传入的参数值
param: {
semester_id: '',
course_id: '',
raw: '' // base64
},
count: 0,
/* 进入页面记录初试时间 */
startTime: '',
setTime: null,
/* 当前 radio点击 */
radioCur: '',
/* 当前 checkbox点击 */
checkCur: '',
/* 记录当前页 */
curPage: 1,
/* 记录 区分选择项 */
selectId: '',
/* 记录页数进度 */
progress: '',
/* 总共题目数 */
total: 7,
/* 最后一页 */
lastPage: false
}
},
mounted () {
/* 读取本地缓存 */
let quesLocal = window.localStorage.getItem('quesLocal' + this.sid + this.cid)
let quesPage = window.localStorage.getItem('quesPage' + this.sid + this.cid)
let quesSelectId = window.localStorage.getItem('quesSelectId' + this.sid + this.cid)
if (quesLocal) {
qData.question = JSON.parse(quesLocal)
this.curPage = quesPage
this.selectId = quesSelectId
}
this.loadQuestion()
},
destroyed () {
qData.question = this.dataQuestion
},
methods: {
/* 提交数据 */
goSubmit () {
const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
cAction.chapterAction.updateSurveyAnswer({
semester_id: this.sid,
course_id: this.cid,
raw: Base64.encode(JSON.stringify(qData.question))
}).then(res => {
if (res.id) {
this.$router.push({ path: `/result/${this.iphone}/${encodeURIComponent(this.email)}/${res.id}` })
} }
/* 答题成功,清空本地缓存 */
window.localStorage.removeItem('quesLocal' + this.sid + this.cid)
window.localStorage.removeItem('quesPage' + this.sid + this.cid)
window.localStorage.removeItem('quesSelectId' + this.sid + this.cid)
loading.close()
}).catch(e => {
/* 答题 记录计入本地缓存 */
window.localStorage.setItem('quesLocal' + this.sid + this.cid, JSON.stringify(qData.question))
window.localStorage.setItem('quesPage' + this.sid + this.cid, this.curPage)
window.localStorage.setItem('quesSelectId' + this.sid + this.cid, this.selectId)
this.$message.error('提交失败,请稍后刷新重试')
loading.close()
})
}, },
/* 按照id编号规则 放入 exam.group中 */ data() {
loadQuestion () { let _headerInfo = JSON.parse(window.localStorage.getItem('headerInfo') || '{}')
this.exam.group = [] return {
for (let i = 0; i < qData.question.length; i++) { dataQuestion: _.assignIn({}, qData.question),
let exp = new RegExp('$\\d+-' + this.curPage, 'gi') headerInfo: _headerInfo,
if (exp.test(qData.question[i].id)) { exam: {
this.exam.group.push(qData.question[i]) id: '',
if (qData.question[i].submit) { semester_id: '',
this.lastPage = true title: '',
} else { score: '',
this.lastPage = false work_contents: '',
} group: []
},
// 提交时,传入的参数值
param: {
semester_id: '',
course_id: '',
raw: '' // base64
},
count: 0,
/* 进入页面记录初试时间 */
startTime: '',
setTime: null,
/* 当前 radio点击 */
radioCur: '',
/* 当前 checkbox点击 */
checkCur: '',
/* 记录当前页 */
curPage: 1,
/* 记录 区分选择项 */
selectId: '',
/* 记录页数进度 */
progress: '',
/* 总共题目数 */
total: 7,
/* 最后一页 */
lastPage: false
} }
}
this.progress = ((this.curPage - 1) / this.total * 100) + '%'
}, },
/* 点击下一页 */ mounted() {
nextPage () { /* 读取本地缓存 */
for (let i = 0; i < this.exam.group.length; i++) { let quesLocal = window.localStorage.getItem('quesLocal' + this.sid + this.cid)
if (!this.exam.group[i].flag) { let quesPage = window.localStorage.getItem('quesPage' + this.sid + this.cid)
this.$message.error('本页尚有题目未填写') let quesSelectId = window.localStorage.getItem('quesSelectId' + this.sid + this.cid)
return if (quesLocal) {
} qData.question = JSON.parse(quesLocal)
} this.curPage = quesPage
/* 做区分,需要特殊判断 */ this.selectId = quesSelectId
if (this.curPage === 4) {
if (this.exam.group[0].arr[3].selected) {
this.selectId = '4-4'
} else {
this.selectId = '4-1'
} }
}
this.curPage++
this.loadQuestion()
/* 答题 记录计入本地缓存 */ this.loadQuestion()
window.localStorage.setItem('quesLocal' + this.sid + this.cid, JSON.stringify(qData.question))
window.localStorage.setItem('quesPage' + this.sid + this.cid, this.curPage)
window.localStorage.setItem('quesSelectId' + this.sid + this.cid, this.selectId)
},
/* 点击上一页 */
prevPage () {
this.curPage--
if (this.curPage <= 4) {
this.selectId = ''
}
this.loadQuestion()
},
/**
* 辅助 radio选择
*/
radioClick (e) {
this.radioCur = e.currentTarget.dataset.index
},
/**
* radio选择
* PC端 值会 返回 选择的 值
*/
radioChange (val) {
let i = this.radioCur
let arr = this.exam.group[i].arr
let value = val
for (let j = 0; j < arr.length; j++) {
arr[j]['selected'] = 0
}
arr[value].selected = 1
/* 记录 题目是否 已经选过 */
this.exam.group[i].flag = true
}, },
/** destroyed() {
* 辅助 checkbox选择 qData.question = this.dataQuestion
*/
checkboxClick (e) {
this.checkboxCur = e.currentTarget.dataset.index
}, },
/** methods: {
* checkbox选择 /* 提交数据 */
*/ goSubmit() {
checkboxChange (val) { const loading = this.$loading({
let i = this.checkboxCur lock: true,
let arr = this.exam.group[i].arr text: '',
let value = val spinner: '',
for (let j = 0; j < arr.length; j++) { background: 'rgba(255, 255, 255, 0.9)'
arr[j]['selected'] = 0 })
} cAction.chapterAction.updateSurveyAnswer({
for (let j = 0; j < value.length; j++) { semester_id: this.sid,
arr[value[j]].selected = 1 course_id: this.cid,
} raw: Base64.encode(JSON.stringify(qData.question))
/* 记录 题目是否 已经选过 */ }).then(res => {
if (!value.length) { if (res.id) {
this.exam.group[i].flag = false this.$router.push({
} else { path: `/result/${this.iphone}/${encodeURIComponent(this.email)}/${res.id}`
this.exam.group[i].flag = true })
} }
}, /* 答题成功,清空本地缓存 */
/* hover选中星星 */ window.localStorage.removeItem('quesLocal' + this.sid + this.cid)
hoverStar (len, i) { window.localStorage.removeItem('quesPage' + this.sid + this.cid)
window.localStorage.removeItem('quesSelectId' + this.sid + this.cid)
loading.close()
}).catch(e => {
/* 答题 记录计入本地缓存 */
window.localStorage.setItem('quesLocal' + this.sid + this.cid, JSON.stringify(qData.question))
window.localStorage.setItem('quesPage' + this.sid + this.cid, this.curPage)
window.localStorage.setItem('quesSelectId' + this.sid + this.cid, this.selectId)
this.$message.error('提交失败,请稍后刷新重试')
loading.close()
})
},
/* 按照id编号规则 放入 exam.group中 */
loadQuestion() {
this.exam.group = []
for (let i = 0; i < qData.question.length; i++) {
let exp = new RegExp('$\\d+-' + this.curPage, 'gi')
if (exp.test(qData.question[i].id)) {
this.exam.group.push(qData.question[i])
if (qData.question[i].submit) {
this.lastPage = true
} else {
this.lastPage = false
}
}
}
this.progress = ((this.curPage - 1) / this.total * 100) + '%'
},
/* 点击下一页 */
nextPage() {
for (let i = 0; i < this.exam.group.length; i++) {
if (!this.exam.group[i].flag) {
this.$message.error('本页尚有题目未填写')
return
}
}
/* 做区分,需要特殊判断 */
if (this.curPage === 4) {
if (this.exam.group[0].arr[3].selected) {
this.selectId = '4-4'
} else {
this.selectId = '4-1'
}
}
this.curPage++
this.loadQuestion()
}, /* 答题 记录计入本地缓存 */
/* 点击选中星星 */ window.localStorage.setItem('quesLocal' + this.sid + this.cid, JSON.stringify(qData.question))
setStar (len, i) { window.localStorage.setItem('quesPage' + this.sid + this.cid, this.curPage)
this.exam.group[0].arr[i].star = len window.localStorage.setItem('quesSelectId' + this.sid + this.cid, this.selectId)
},
/* 点击上一页 */
prevPage() {
this.curPage--
if (this.curPage <= 4) {
this.selectId = ''
}
this.loadQuestion()
},
/**
* 辅助 radio选择
*/
radioClick(e) {
this.radioCur = e.currentTarget.dataset.index
},
/**
* radio选择
* PC端 值会 返回 选择的 值
*/
radioChange(val) {
let i = this.radioCur
let arr = this.exam.group[i].arr
let value = val
for (let j = 0; j < arr.length; j++) {
arr[j]['selected'] = 0
}
arr[value].selected = 1
/* 记录 题目是否 已经选过 */
this.exam.group[i].flag = true
},
/**
* 辅助 checkbox选择
*/
checkboxClick(e) {
this.checkboxCur = e.currentTarget.dataset.index
},
/**
* checkbox选择
*/
checkboxChange(val) {
let i = this.checkboxCur
let arr = this.exam.group[i].arr
let value = val
for (let j = 0; j < arr.length; j++) {
arr[j]['selected'] = 0
}
for (let j = 0; j < value.length; j++) {
arr[value[j]].selected = 1
}
/* 记录 题目是否 已经选过 */
if (!value.length) {
this.exam.group[i].flag = false
} else {
this.exam.group[i].flag = true
}
},
/* hover选中星星 */
hoverStar(len, i) {
},
/* 点击选中星星 */
setStar(len, i) {
this.exam.group[0].arr[i].star = len
}
} }
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import './index.css'; @import './index.css';
.survey-container { .survey-container {
display: block; display: block;
max-width: 640px; max-width: 640px;
height: 100%; height: 100%;
margin: 0 auto; margin: 0 auto;
background: #ffffff;
.header {
font-size: 20px;
text-align: center;
padding: 20px;
background: #ffffff; background: #ffffff;
width: 100%;
img { .header {
display: block; font-size: 20px;
width: 100%; text-align: center;
padding: 20px;
background: #ffffff;
width: 100%;
img {
display: block;
width: 100%;
}
} }
}
.progress { .progress {
width: 100%; width: 100%;
height: 6px; height: 6px;
background: #b5b5b5; background: #b5b5b5;
.cur-progress {
display: block; .cur-progress {
height: 100%; display: block;
background: #ebbb14; height: 100%;
background: #ebbb14;
}
} }
}
.exam-box { .exam-box {
position: relative; position: relative;
padding: 20px 20px 70px 20px; padding: 20px 20px 70px 20px;
background: #ffffff; background: #ffffff;
overflow: hidden;
/* 选择样式 */
.q-group {
padding: 0;
font-size: 20px;
color: #313131;
overflow: hidden;
.q-item {
display: block;
font-weight: 700;
margin-bottom: 10px;
}
.star-item {
line-height: 2;
overflow: hidden; overflow: hidden;
.left-txt {
float: left; /* 选择样式 */
width: 58%; .q-group {
font-size: 18px; padding: 0;
line-height: 40px; font-size: 20px;
} color: #313131;
.right-stars { overflow: hidden;
float: right;
.icon { .q-item {
font-size: 18px; display: block;
cursor: pointer; font-weight: 700;
&.el-icon-self-star_full { margin-bottom: 10px;
color: #a98c58; }
.star-item {
line-height: 2;
overflow: hidden;
.left-txt {
float: left;
width: 58%;
font-size: 18px;
line-height: 40px;
}
.right-stars {
float: right;
.icon {
font-size: 18px;
cursor: pointer;
&.el-icon-self-star_full {
color: #a98c58;
}
}
}
} }
}
}
}
}
.q-group:last-child {
border-bottom: none;
}
.btns-fix {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
.btn {
float: left;
width: 100%;
height: 50px;
text-align: center;
font-size: 18px;
line-height: 50px;
color: #eedfb1;
background: #b01b3c;
cursor: pointer;
&.none {
display: none;
} }
&.two {
width: 50%; .q-group:last-child {
border-bottom: none;
} }
&.c-btn {
background: #b5b5b5; .btns-fix {
color: #ffffff; position: fixed;
left: 0;
bottom: 0;
width: 100%;
.btn {
float: left;
width: 100%;
height: 50px;
text-align: center;
font-size: 18px;
line-height: 50px;
color: #eedfb1;
background: #b01b3c;
cursor: pointer;
&.none {
display: none;
}
&.two {
width: 50%;
}
&.c-btn {
background: #b5b5b5;
color: #ffffff;
}
}
} }
}
} }
}
} }
</style> </style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论