This commit is contained in:
cgd_mac 2022-01-16 22:03:41 +08:00
parent 7c3530e498
commit 73caca04a8
9 changed files with 127 additions and 45 deletions

View File

@ -6,7 +6,28 @@ const mycourseApi = {
centerList: 'focused/training/list', // 集中培训列表 centerList: 'focused/training/list', // 集中培训列表
centerDetail: 'focused/training/list', // 集中培训详情 centerDetail: 'focused/training/list', // 集中培训详情
recommendList: 'sys/recommend/listPage', // 系统推荐课程列表 recommendList: 'sys/recommend/listPage', // 系统推荐课程列表
recommendDetail: 'sys/recommend/detail' // 系统课程推荐详情 recommendDetail: 'sys/recommend/detail', // 系统课程推荐详情
getCourseDetail: 'myCourse/getCourseDetail', // 我的课程详情
getCourseCatalogue: 'myCourse/getCourseCatalogue', // 获取课程目录
simulateTestList: 'simulateTest/list', // 模拟测试列表
simulateTestDetail: 'simulateTest/getQuestions' // 获取模拟测试详情
}
export function reqSimulateTestDetail (params) {
return request({
url: mycourseApi.simulateTestDetail,
method: 'get',
params: params
})
}
export function reqSimulateTestList (data) {
return request({
url: mycourseApi.simulateTestList,
method: 'post',
data: data,
params: data
})
} }
export function reqMyCourseList (params) { export function reqMyCourseList (params) {
@ -56,3 +77,19 @@ export function recommendDetail (params) {
params: params params: params
}) })
} }
export function reqCourseDetail (params) {
return request({
url: mycourseApi.getCourseDetail,
method: 'get',
params: params
})
}
export function reqCourseCatalogue (params) {
return request({
url: mycourseApi.getCourseCatalogue,
method: 'get',
params: params
})
}

View File

@ -11,7 +11,8 @@ const user = {
avatar: '', avatar: '',
roles: [], roles: [],
buttons: [], // 按钮权限 buttons: [], // 按钮权限
info: {} info: {},
person: {}
}, },
mutations: { mutations: {
@ -51,7 +52,7 @@ const user = {
}, },
// 获取用户信息 // 获取用户信息
GetInfo({ commit }) { GetInfo({ commit, state }) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
getLoginUser().then(response => { getLoginUser().then(response => {
if (response.code === 200) { if (response.code === 200) {
@ -59,6 +60,7 @@ const user = {
commit('SET_ROLES', 1) commit('SET_ROLES', 1)
commit('SET_BUTTONS', data.permissions) commit('SET_BUTTONS', data.permissions)
commit('SET_INFO', data.user) commit('SET_INFO', data.user)
state.person = data.person
commit('SET_NAME', { name: data.user.userName, welcome: welcome() }) commit('SET_NAME', { name: data.user.userName, welcome: welcome() })
if (data.user.avatar != null) { if (data.user.avatar != null) {
commit('SET_AVATAR', process.env.VUE_APP_API_BASE_URL + '/sysFileInfo/preview?id=' + data.user.avatar) commit('SET_AVATAR', process.env.VUE_APP_API_BASE_URL + '/sysFileInfo/preview?id=' + data.user.avatar)

View File

@ -1,16 +1,17 @@
<template> <template>
<div class="CourseCatalogue-box"> <div class="CourseCatalogue-box">
<ul class="list-box"> <ul class="list-box">
<li class="list-item" v-for="(item, index) in 3" :key="index"> <li class="list-item" v-for="(item, index) in catalogueList" :key="index">
<div class="list-item-title"><span style="margin-right: 10px;">一章</span>建筑施工安全培训第一期课程学习</div> <div class="list-item-title"><span style="margin-right: 10px;">{{ capitalizeNumber[index] }}</span>{{ item.name }}</div>
<ul class="sub-list"> <ul class="sub-list">
<li @click="handlerItem(j, item)" class="sub-list-item" v-for="(j, k) in 4" :key="`${index}-${k}`"> <li @click="handlerItem(j, item)" class="sub-list-item" v-for="(j, k) in item.courseList" :key="`${index}-${k}`">
<div class="sub-item-info"> <div class="sub-item-info">
<VideoOne theme="filled" fill="#ccc" style="margin-right: 6px;" size="1.2em"></VideoOne>1.1 <VideoOne theme="filled" fill="#ccc" style="margin-right: 6px;" size="1.2em"></VideoOne>{{index+1}}.{{k+1}}
建筑施工安全培训第一期课程学习 {{item.name}}
</div> </div>
<!-- 0-未学 1-已学 -->
<div v-if="`${index}-${k}` === selectedId" class="sub-item-status"> <div v-if="`${index}-${k}` === selectedId" class="sub-item-status">
正在学习...<History 正在学习<History
theme="filled" theme="filled"
tyle="margin-left: 10px;" tyle="margin-left: 10px;"
size="1.2em" size="1.2em"
@ -31,8 +32,15 @@
import { VideoOne, Round, History } from '@icon-park/vue' import { VideoOne, Round, History } from '@icon-park/vue'
export default { export default {
components: { VideoOne, Round, History }, components: { VideoOne, Round, History },
props: {
catalogueList: {
type: Array,
default: () => ([])
}
},
data () { data () {
return { return {
capitalizeNumber: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一'],
selectedId: '1-1' selectedId: '1-1'
} }
}, },
@ -90,6 +98,7 @@ export default {
.sub-item-info { .sub-item-info {
flex: 1; flex: 1;
display: flex; display: flex;
line-height: 2;
} }
.sub-item-status { .sub-item-status {

View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<a-table :columns="columns" :data-source="data"> <a-table :columns="columns" :data-source="dataList">
<template slot="date" slot-scope="text, record, index"> <template slot="date" slot-scope="text, record, index">
全天<a-button style="margin-left: 6px;" type="primary" size="small">进入考试</a-button> 全天<a-button style="margin-left: 6px;" type="primary" size="small">进入考试</a-button>
</template> </template>
@ -9,8 +9,9 @@
</template> </template>
<script> <script>
import { reqSimulateTestList } from '@/api/mycourse/index'
export default { export default {
data() { data () {
return { return {
columns: [ columns: [
{ dataIndex: 'courseName', title: '课程' }, { dataIndex: 'courseName', title: '课程' },
@ -20,16 +21,21 @@ export default {
{ dataIndex: 'date', title: '考试时间段', scopedSlots: { customRender: 'date' } }, { dataIndex: 'date', title: '考试时间段', scopedSlots: { customRender: 'date' } },
{ dataIndex: 'time', title: '考试时长' } { dataIndex: 'time', title: '考试时长' }
], ],
data: [ dataList: [
{
courseName: '1.1,建筑施工安全培训第一期课程学习',
type: '机考',
examType: '闭卷',
subType: '网络提交',
time: '150分钟'
}
] ]
} }
},
mounted () {
this.initData()
},
methods: {
initData () {
const { person } = this.$store.state.user
reqSimulateTestList({ personId: person.id, projectId: this.$route.query.courseId }).then(res => {
// console.log('', res)
this.dataList = res.data
})
}
} }
} }
</script> </script>

View File

@ -1,7 +1,7 @@
<template> <template>
<a-card :bordered="false"> <a-card :bordered="false">
<div class="video-box"> <div class="video-box">
<div class="video-title">建筑施工安全培训第一期课程学习</div> <div class="video-title">{{ courseInfo.name }}</div>
<div class="video-main"> <div class="video-main">
<video-player <video-player
class="vjs-custom-skin" class="vjs-custom-skin"
@ -16,7 +16,7 @@
<a-tabs :default-active-key="activeTab" @change="tabChange"> <a-tabs :default-active-key="activeTab" @change="tabChange">
<a-tab-pane key="1" tab="课程目录"> <a-tab-pane key="1" tab="课程目录">
<div class="tab-box"> <div class="tab-box">
<CourseCatalogue></CourseCatalogue> <CourseCatalogue @changeVideo="changeVideo" :catalogueList="catalogueList"></CourseCatalogue>
</div> </div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="2" tab="模拟测试"> <a-tab-pane key="2" tab="模拟测试">
@ -40,12 +40,16 @@ import { videoPlayer } from 'vue-video-player'
import CourseCatalogue from './CourseCatalogue.vue' import CourseCatalogue from './CourseCatalogue.vue'
import SimulationTest from './SimulationTest.vue' import SimulationTest from './SimulationTest.vue'
import ExamDialog from './ExamDialog.vue' import ExamDialog from './ExamDialog.vue'
import { reqCourseDetail, reqCourseCatalogue } from '@/api/mycourse/index'
export default { export default {
components: { CourseCatalogue, SimulationTest, ExamDialog, videoPlayer }, components: { CourseCatalogue, SimulationTest, ExamDialog, videoPlayer },
data() { data () {
return { return {
activeTab: '1', activeTab: '1',
query: {},
courseInfo: {},
catalogueList: [], //
playerOptions: { playerOptions: {
height: '360', height: '360',
autoplay: false, autoplay: false,
@ -54,8 +58,8 @@ export default {
sources: [ sources: [
{ {
type: 'video/mp4', type: 'video/mp4',
src: 'http://vjs.zencdn.net/v/oceans.mp4', src: 'http://vjs.zencdn.net/v/oceans.mp4'
}, }
], ],
controlBar: { controlBar: {
/* 使用children的形式可以控制每一个控件的位置以及显示与否 */ /* 使用children的形式可以控制每一个控件的位置以及显示与否 */
@ -66,27 +70,47 @@ export default {
// { name: 'durationDisplay' }, // // { name: 'durationDisplay' }, //
{ {
name: 'volumePanel', // name: 'volumePanel', //
inline: false, // 使 inline: false // 使
}, },
{ name: 'FullscreenToggle' }, // { name: 'FullscreenToggle' } //
], ]
}, },
poster: 'https://surmon-china.github.io/vue-quill-editor/static/images/surmon-1.jpg', poster: 'https://surmon-china.github.io/vue-quill-editor/static/images/surmon-1.jpg'
}, }
} }
}, },
mounted () {
const query = this.$route.query
this.query = query
this.initData()
},
methods: { methods: {
tabChange(key) { initData () {
const { person } = this.$store.state.user
reqCourseDetail({ personId: person.id, id: this.query.courseId }).then(res => {
console.log('课程详情', res)
this.courseInfo = res.data
})
reqCourseCatalogue({ personId: person.id, projectId: this.query.courseId }).then(res => {
console.log('课程目录', res)
this.catalogueList = res.data
})
},
changeVideo ({ item, pItem }) {
console.log('item', item)
this.$refs.videoPlayer.player.src('http://a.3a6.cn' + item.videoAddress)
},
tabChange (key) {
console.log('key', key) console.log('key', key)
// this.$refs.videoPlayer.player.play() // // this.$refs.videoPlayer.player.play() //
// this.$refs.videoPlayer.player.pause() // // this.$refs.videoPlayer.player.pause() //
// this.$refs.videoPlayer.player.src('src') // // this.$refs.videoPlayer.player.src('src') //
}, },
// //
onPlayerEnded() { onPlayerEnded () {
this.$refs.examDialog.show() this.$refs.examDialog.show()
}, }
}, }
} }
</script> </script>

View File

@ -47,7 +47,7 @@
> >
<a>添加课程</a> <a>添加课程</a>
</a-popconfirm> </a-popconfirm>
<a v-if="record.status === 2" @click="handlerContinue(record)">继续学习</a> <a v-if="record.status === 1" @click="handlerContinue(record)">继续学习</a>
<a v-if="record.status === 3">已完成学习</a> <a v-if="record.status === 3">已完成学习</a>
</span> </span>
</s-table> </s-table>
@ -121,8 +121,8 @@ export default {
], ],
// Promise // Promise
loadData: parameter => { loadData: parameter => {
const { info: userInfo } = this.$store.state.user const { person } = this.$store.state.user
const params = { ...parameter, ...this.queryParam, personId: userInfo.id } const params = { ...parameter, ...this.queryParam, personId: person.id }
return reqMyCourseList(params).then(res => { return reqMyCourseList(params).then(res => {
return res return res
}) })
@ -173,7 +173,11 @@ export default {
}, },
// //
handlerContinue (row) { handlerContinue (row) {
this.$emit('continue', { row: row }) // this.$emit('continue', { row: row })
this.$router.push({
path: '/mycourse/courseLearn',
query: { courseId: row.id }
})
} }
} }
} }

View File

@ -89,14 +89,14 @@ export default {
], ],
// Promise // Promise
loadDataYear: parameter => { loadDataYear: parameter => {
const { info: userInfo } = this.$store.state.user const { person } = this.$store.state.user
return reqMyCourseList({ personId: userInfo.id, type: 2, pageNum: 1, pageSize: 5 }).then(res => { return reqMyCourseList({ personId: person.id, type: 2, pageNum: 1, pageSize: 5 }).then(res => {
return res return res
}) })
}, },
loadDataUnit: parameter => { loadDataUnit: parameter => {
const { info: userInfo } = this.$store.state.user const { person } = this.$store.state.user
return reqMyCourseList({ personId: userInfo.id, type: 3, pageNum: 1, pageSize: 5 }).then(res => { return reqMyCourseList({ personId: person.id, type: 3, pageNum: 1, pageSize: 5 }).then(res => {
return res return res
}) })
} }

View File

@ -44,8 +44,8 @@ export default {
methods: { methods: {
// //
handlerAddCourse (row, callback) { handlerAddCourse (row, callback) {
const { info: userInfo } = this.$store.state.user const { id: userId } = this.$store.state.person
reqAddMyCourse({ personId: userInfo.id, projectId: row.id }).then(res => { reqAddMyCourse({ personId: userId, projectId: row.id }).then(res => {
if (res.code === 200) { if (res.code === 200) {
this.$message.success('添加课程成功!') this.$message.success('添加课程成功!')
callback && callback() callback && callback()

View File

@ -79,8 +79,8 @@ export default {
methods: { methods: {
initData () { initData () {
console.log('this.$sotre', this.$store) console.log('this.$sotre', this.$store)
const { info: userInfo } = this.$store.state.user const { id: userId } = this.$store.state.person
getMyexamCount({ personId: userInfo.id }).then(res => { getMyexamCount({ personId: userId }).then(res => {
console.log('data', res) console.log('data', res)
}) })
} }