feat: uI
This commit is contained in:
parent
7c3530e498
commit
73caca04a8
|
@ -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
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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 }
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -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()
|
||||||
|
|
|
@ -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)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue