lingling
/
welfare-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: uI

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/api/mycourse/index.js
View File

@ -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
})
}

6
src/store/modules/user.js
View File

@ -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)

21
src/views/mycourse/courseLearn/CourseCatalogue.vue
View File

@ -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 {

26
src/views/mycourse/courseLearn/SimulationTest.vue
View File

@ -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,8 +9,9 @@
</template>
<script>
import { reqSimulateTestList } from '@/api/mycourse/index'
export default {
data() {
data () {
return {
columns: [
{ dataIndex: 'courseName', title: '课程' },
@ -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>

52
src/views/mycourse/courseLearn/index.vue
View File

@ -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() {
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,27 +70,47 @@ export default {
// { name: 'durationDisplay' }, // 总时间
{
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: {
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)
// this.$refs.videoPlayer.player.play() // 播放
// this.$refs.videoPlayer.player.pause() // 暂停
// this.$refs.videoPlayer.player.src('src') // 重置进度条复制代码
},
// 当视频播放完毕的回调处理
onPlayerEnded() {
onPlayerEnded () {
this.$refs.examDialog.show()
},
},
}
}
}
</script>

12
src/views/mycourse/mycourseList/MyCourseList.vue
View File

@ -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 }
})
}
}
}

8
src/views/mycourse/mycourseList/TrainingPlan.vue
View File

@ -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
})
}

4
src/views/mycourse/mycourseList/index.vue
View File

@ -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()

4
src/views/myexamCount/index.vue
View File

@ -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)
})
}