feat: uI
This commit is contained in:
cgd_mac
parent
7c3530e498
commit
73caca04a8
|
|
@ -6,7 +6,28 @@ const mycourseApi = {
|
|||
centerList: 'focused/training/list', // 集中培训列表
|
||||
centerDetail: 'focused/training/list', // 集中培训详情
|
||||
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) {
|
||||
|
|
@ -56,3 +77,19 @@ export function recommendDetail (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
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@ const user = {
|
|||
avatar: '',
|
||||
roles: [],
|
||||
buttons: [], // 按钮权限
|
||||
info: {}
|
||||
info: {},
|
||||
person: {}
|
||||
},
|
||||
|
||||
mutations: {
|
||||
|
|
@ -51,7 +52,7 @@ const user = {
|
|||
},
|
||||
|
||||
// 获取用户信息
|
||||
GetInfo({ commit }) {
|
||||
GetInfo({ commit, state }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
getLoginUser().then(response => {
|
||||
if (response.code === 200) {
|
||||
|
|
@ -59,6 +60,7 @@ const user = {
|
|||
commit('SET_ROLES', 1)
|
||||
commit('SET_BUTTONS', data.permissions)
|
||||
commit('SET_INFO', data.user)
|
||||
state.person = data.person
|
||||
commit('SET_NAME', { name: data.user.userName, welcome: welcome() })
|
||||
if (data.user.avatar != null) {
|
||||
commit('SET_AVATAR', process.env.VUE_APP_API_BASE_URL + '/sysFileInfo/preview?id=' + data.user.avatar)
|
||||
|
|
|
|||
|
|
@ -1,16 +1,17 @@
|
|||
<template>
|
||||
<div class="CourseCatalogue-box">
|
||||
<ul class="list-box">
|
||||
<li class="list-item" v-for="(item, index) in 3" :key="index">
|
||||
<div class="list-item-title"><span style="margin-right: 10px;">第一章</span>建筑施工安全培训第一期课程学习</div>
|
||||
<li class="list-item" v-for="(item, index) in catalogueList" :key="index">
|
||||
<div class="list-item-title"><span style="margin-right: 10px;">第{{ capitalizeNumber[index] }}章</span>{{ item.name }}</div>
|
||||
<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">
|
||||
<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>
|
||||
<!-- 0-未学 1-已学 -->
|
||||
<div v-if="`${index}-${k}` === selectedId" class="sub-item-status">
|
||||
正在学习...<History
|
||||
正在学习中<History
|
||||
theme="filled"
|
||||
tyle="margin-left: 10px;"
|
||||
size="1.2em"
|
||||
|
|
@ -31,8 +32,15 @@
|
|||
import { VideoOne, Round, History } from '@icon-park/vue'
|
||||
export default {
|
||||
components: { VideoOne, Round, History },
|
||||
props: {
|
||||
catalogueList: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
capitalizeNumber: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一'],
|
||||
selectedId: '1-1'
|
||||
}
|
||||
},
|
||||
|
|
@ -90,6 +98,7 @@ export default {
|
|||
.sub-item-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.sub-item-status {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<a-table :columns="columns" :data-source="data">
|
||||
<a-table :columns="columns" :data-source="dataList">
|
||||
<template slot="date" slot-scope="text, record, index">
|
||||
全天<a-button style="margin-left: 6px;" type="primary" size="small">进入考试</a-button>
|
||||
</template>
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { reqSimulateTestList } from '@/api/mycourse/index'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -20,16 +21,21 @@ export default {
|
|||
{ dataIndex: 'date', title: '考试时间段', scopedSlots: { customRender: 'date' } },
|
||||
{ dataIndex: 'time', title: '考试时长' }
|
||||
],
|
||||
data: [
|
||||
{
|
||||
courseName: '1.1，建筑施工安全培训第一期课程学习',
|
||||
type: '机考',
|
||||
examType: '闭卷',
|
||||
subType: '网络提交',
|
||||
time: '150分钟'
|
||||
}
|
||||
dataList: [
|
||||
]
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<a-card :bordered="false">
|
||||
<div class="video-box">
|
||||
<div class="video-title">建筑施工安全培训第一期课程学习</div>
|
||||
<div class="video-title">{{ courseInfo.name }}</div>
|
||||
<div class="video-main">
|
||||
<video-player
|
||||
class="vjs-custom-skin"
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
<a-tabs :default-active-key="activeTab" @change="tabChange">
|
||||
<a-tab-pane key="1" tab="课程目录">
|
||||
<div class="tab-box">
|
||||
<CourseCatalogue></CourseCatalogue>
|
||||
<CourseCatalogue @changeVideo="changeVideo" :catalogueList="catalogueList"></CourseCatalogue>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="模拟测试">
|
||||
|
|
@ -40,12 +40,16 @@ import { videoPlayer } from 'vue-video-player'
|
|||
import CourseCatalogue from './CourseCatalogue.vue'
|
||||
import SimulationTest from './SimulationTest.vue'
|
||||
import ExamDialog from './ExamDialog.vue'
|
||||
import { reqCourseDetail, reqCourseCatalogue } from '@/api/mycourse/index'
|
||||
|
||||
export default {
|
||||
components: { CourseCatalogue, SimulationTest, ExamDialog, videoPlayer },
|
||||
data () {
|
||||
return {
|
||||
activeTab: '1',
|
||||
query: {},
|
||||
courseInfo: {},
|
||||
catalogueList: [], // 目录列表
|
||||
playerOptions: {
|
||||
height: '360',
|
||||
autoplay: false,
|
||||
|
|
@ -54,8 +58,8 @@ export default {
|
|||
sources: [
|
||||
{
|
||||
type: 'video/mp4',
|
||||
src: 'http://vjs.zencdn.net/v/oceans.mp4',
|
||||
},
|
||||
src: 'http://vjs.zencdn.net/v/oceans.mp4'
|
||||
}
|
||||
],
|
||||
controlBar: {
|
||||
/* 使用children的形式可以控制每一个控件的位置，以及显示与否 */
|
||||
|
|
@ -66,16 +70,36 @@ export default {
|
|||
// { name: 'durationDisplay' }, // 总时间
|
||||
{
|
||||
name: 'volumePanel', // 音量控制
|
||||
inline: false, // 不使用水平方式
|
||||
inline: false // 不使用水平方式
|
||||
},
|
||||
{ name: 'FullscreenToggle' }, // 全屏
|
||||
],
|
||||
},
|
||||
poster: 'https://surmon-china.github.io/vue-quill-editor/static/images/surmon-1.jpg',
|
||||
{ name: 'FullscreenToggle' } // 全屏
|
||||
]
|
||||
},
|
||||
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: {
|
||||
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)
|
||||
// this.$refs.videoPlayer.player.play() // 播放
|
||||
|
|
@ -85,8 +109,8 @@ export default {
|
|||
// 当视频播放完毕的回调处理
|
||||
onPlayerEnded () {
|
||||
this.$refs.examDialog.show()
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
>
|
||||
<a>添加课程</a>
|
||||
</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>
|
||||
</span>
|
||||
</s-table>
|
||||
|
|
@ -121,8 +121,8 @@ export default {
|
|||
],
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: parameter => {
|
||||
const { info: userInfo } = this.$store.state.user
|
||||
const params = { ...parameter, ...this.queryParam, personId: userInfo.id }
|
||||
const { person } = this.$store.state.user
|
||||
const params = { ...parameter, ...this.queryParam, personId: person.id }
|
||||
return reqMyCourseList(params).then(res => {
|
||||
return res
|
||||
})
|
||||
|
|
@ -173,7 +173,11 @@ export default {
|
|||
},
|
||||
// 继续学习
|
||||
handlerContinue (row) {
|
||||
this.$emit('continue', { row: row })
|
||||
// this.$emit('continue', { row: row })
|
||||
this.$router.push({
|
||||
path: '/mycourse/courseLearn',
|
||||
query: { courseId: row.id }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -89,14 +89,14 @@ export default {
|
|||
],
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadDataYear: parameter => {
|
||||
const { info: userInfo } = this.$store.state.user
|
||||
return reqMyCourseList({ personId: userInfo.id, type: 2, pageNum: 1, pageSize: 5 }).then(res => {
|
||||
const { person } = this.$store.state.user
|
||||
return reqMyCourseList({ personId: person.id, type: 2, pageNum: 1, pageSize: 5 }).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
loadDataUnit: parameter => {
|
||||
const { info: userInfo } = this.$store.state.user
|
||||
return reqMyCourseList({ personId: userInfo.id, type: 3, pageNum: 1, pageSize: 5 }).then(res => {
|
||||
const { person } = this.$store.state.user
|
||||
return reqMyCourseList({ personId: person.id, type: 3, pageNum: 1, pageSize: 5 }).then(res => {
|
||||
return res
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,8 +44,8 @@ export default {
|
|||
methods: {
|
||||
// 添加课程
|
||||
handlerAddCourse (row, callback) {
|
||||
const { info: userInfo } = this.$store.state.user
|
||||
reqAddMyCourse({ personId: userInfo.id, projectId: row.id }).then(res => {
|
||||
const { id: userId } = this.$store.state.person
|
||||
reqAddMyCourse({ personId: userId, projectId: row.id }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('添加课程成功!')
|
||||
callback && callback()
|
||||
|
|
|
|||
|
|
@ -79,8 +79,8 @@ export default {
|
|||
methods: {
|
||||
initData () {
|
||||
console.log('this.$sotre', this.$store)
|
||||
const { info: userInfo } = this.$store.state.user
|
||||
getMyexamCount({ personId: userInfo.id }).then(res => {
|
||||
const { id: userId } = this.$store.state.person
|
||||
getMyexamCount({ personId: userId }).then(res => {
|
||||
console.log('data', res)
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue