From 73caca04a8b3c07d1c2ff323b43904d98087aee1 Mon Sep 17 00:00:00 2001
From: cgd_mac <349008059@qq.com>
Date: Sun, 16 Jan 2022 22:03:41 +0800
Subject: [PATCH] feat: uI

---
 src/api/mycourse/index.js                     | 39 +++++++++++++-
 src/store/modules/user.js                     |  6 ++-
 .../mycourse/courseLearn/CourseCatalogue.vue  | 21 +++++---
 .../mycourse/courseLearn/SimulationTest.vue   | 26 ++++++----
 src/views/mycourse/courseLearn/index.vue      | 52 ++++++++++++++-----
 .../mycourse/mycourseList/MyCourseList.vue    | 12 +++--
 .../mycourse/mycourseList/TrainingPlan.vue    |  8 +--
 src/views/mycourse/mycourseList/index.vue     |  4 +-
 src/views/myexamCount/index.vue               |  4 +-
 9 files changed, 127 insertions(+), 45 deletions(-)

diff --git a/src/api/mycourse/index.js b/src/api/mycourse/index.js
index 19c8d24..5e190b2 100644
--- a/src/api/mycourse/index.js
+++ b/src/api/mycourse/index.js
@@ -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
+    })
+}
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 2336041..5578f77 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -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)
diff --git a/src/views/mycourse/courseLearn/CourseCatalogue.vue b/src/views/mycourse/courseLearn/CourseCatalogue.vue
index 56b43b7..cd81ac4 100644
--- a/src/views/mycourse/courseLearn/CourseCatalogue.vue
+++ b/src/views/mycourse/courseLearn/CourseCatalogue.vue
@@ -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 {
diff --git a/src/views/mycourse/courseLearn/SimulationTest.vue b/src/views/mycourse/courseLearn/SimulationTest.vue
index c49a568..44891f2 100644
--- a/src/views/mycourse/courseLearn/SimulationTest.vue
+++ b/src/views/mycourse/courseLearn/SimulationTest.vue
@@ -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>
diff --git a/src/views/mycourse/courseLearn/index.vue b/src/views/mycourse/courseLearn/index.vue
index e788245..212cc3b 100644
--- a/src/views/mycourse/courseLearn/index.vue
+++ b/src/views/mycourse/courseLearn/index.vue
@@ -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>
 
diff --git a/src/views/mycourse/mycourseList/MyCourseList.vue b/src/views/mycourse/mycourseList/MyCourseList.vue
index 2bd8624..5e8e4b1 100644
--- a/src/views/mycourse/mycourseList/MyCourseList.vue
+++ b/src/views/mycourse/mycourseList/MyCourseList.vue
@@ -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 }
+      })
     }
 	}
 }
diff --git a/src/views/mycourse/mycourseList/TrainingPlan.vue b/src/views/mycourse/mycourseList/TrainingPlan.vue
index c098295..07a8d7e 100644
--- a/src/views/mycourse/mycourseList/TrainingPlan.vue
+++ b/src/views/mycourse/mycourseList/TrainingPlan.vue
@@ -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
         })
       }
diff --git a/src/views/mycourse/mycourseList/index.vue b/src/views/mycourse/mycourseList/index.vue
index 4cb9e87..baba7fe 100644
--- a/src/views/mycourse/mycourseList/index.vue
+++ b/src/views/mycourse/mycourseList/index.vue
@@ -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()
diff --git a/src/views/myexamCount/index.vue b/src/views/myexamCount/index.vue
index 046b972..991691c 100644
--- a/src/views/myexamCount/index.vue
+++ b/src/views/myexamCount/index.vue
@@ -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)
       })
     }