页面搭建

src/api/AdaptiveTraining/index.js

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-12 17:34:57
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-15 09:39:06
+ * @LastEditTime: 2022-08-24 13:41:03
  * @FilePath: \veterans_client_web\src\api\AdaptiveTraining\index.js
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
  */
@@ -24,6 +24,19 @@ export function getTrainingList(params) {
   })
 }
 
+/**
+ * 获取线上课程详情
+ * @param {*} params
+ * @returns
+ */
+export function getOnlineCourseDetails(params) {
+  return request({
+    url: '/app/adaptTrainOnline/' + params.id,
+    method: 'get',
+    params
+  })
+}
+
 /**
  * 获取适应性培训统计
  * @param {*} params

src/components/CourseVideo/index.vue

@@ -0,0 +1,152 @@
+<!--
+ * @Description: 课程视频
+ * @Author: 空白格
+ * @Date: 2022-08-24 13:48:47
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-24 15:12:30
+ * @FilePath: \veterans_client_web\src\components\CourseVideo\index.vue
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+-->
+<template>
+  <div class="course-video">
+    <div class="course-video-header">
+      <div class="course-video-header-left">
+        <div class="subtitle" v-if="courseDetails.major">
+          {{ courseDetails.major || "-" }}
+        </div>
+        <div class="title">{{ currentClasses.chapterName || "-" }}</div>
+      </div>
+      <div class="course-video-header-right">
+        本课程 共{{ courseDetails.amount || 0 }}课，已学完{{
+          courseDetails.amount || 0
+        }}课，共进度{{ courseDetails.finishPercent || 0 }}%
+      </div>
+    </div>
+    <div class="course-video-box">
+      <el-row>
+        <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
+          <div class="course-video-box-left">
+            <video :src="currentClasses.videoUrl"></video>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
+          <div class="course-video-box-right">
+            <div class="cvbr-top">
+              <div class="cvbr-top-teacher">
+                主讲老师：{{ courseDetails.presenter || "-" }}
+              </div>
+              <div class="cvbr-top-des">
+                {{ currentClasses.chapterInfo || "-" }}
+              </div>
+            </div>
+            <div class="cvbr-bottom">
+              <el-timeline class="cvbr-bottom-list">
+                <el-timeline-item
+                  v-for="(course, index) in courseDetails.chapterList"
+                  :key="index"
+                  timestamp=""
+                >
+                  <div
+                    class="cvbr-bottom-list-item"
+                    @click="chooseClasses(course)"
+                  >
+                    第{{ index + 1 }}课（{{ course.finishPercent }}%）
+                  </div>
+                </el-timeline-item>
+              </el-timeline>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CourseVideoIndex",
+  props: {
+    courseDetails: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      currentClasses: {},
+    };
+  },
+  watch: {
+    "courseDetails.id"(val) {
+      this.currentClasses = this.courseDetails.chapterList[0];
+    },
+  },
+  methods: {
+    /**
+     * 选择课程播放
+     * @date 2022-08-24
+     * @param {any} item
+     * @returns {any}
+     */
+    chooseClasses(item) {
+      this.currentClasses = item;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.course-video {
+  padding: 10px 0;
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #fff;
+    padding: 10px 0;
+    &-left {
+      display: flex;
+      align-items: center;
+      .subtitle {
+        padding: 7px 23px;
+        background-color: #ef651f;
+        font-size: 14px;
+        border-radius: 20px;
+        margin-right: 11px;
+      }
+      .title {
+        font-size: 20px;
+        line-height: 33px;
+      }
+    }
+    &-right {
+      font-size: 12px;
+      line-height: 33px;
+    }
+  }
+  &-box {
+    width: 100%;
+    &-left {
+      width: 100%;
+      video {
+        width: 100%;
+        background-color: #fff;
+        aspect-ratio: 16 / 9;
+      }
+    }
+    &-right {
+      .cvbr-top {
+        padding: 10px 25px;
+        background: #4a5053;
+        color: #fff;
+        &-teacher {
+          font-size: 20px;
+        }
+        &-des {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}
+</style>

src/router/index.js

@@ -132,6 +132,15 @@ const routes = [
           title: '适应性培训'
         }
       },
+      {
+        path: 'adaptivetraining/onlinecoursedetails',
+        name: 'OnlineCourseDetailsIndex',
+        component: () =>
+          import('@/views/AdaptiveTraining/OnlineCourseDetails/OnlineCourseDetailsIndex.vue'),
+        meta: {
+          title: '线上课程详情'
+        }
+      },
       {
         path: 'personalcenter',
         name: 'PersonalCenterIndex',
@@ -142,7 +151,7 @@ const routes = [
         }
       },
       {
-        path: 'setting',
+        path: 'personalcenter/setting',
         name: 'SettingIndex',
         component: () =>
           import('@/views/PersonalCenter/Setting/SettingIndex.vue'),
@@ -150,6 +159,60 @@ const routes = [
           title: '设置'
         }
       },
+      {
+        path: 'personalcenter/resume',
+        name: 'ResumeIndex',
+        component: () =>
+          import('@/views/PersonalCenter/Resume/ResumeIndex.vue'),
+        meta: {
+          title: '我的简历'
+        }
+      },
+      {
+        path: 'personalcenter/deliver',
+        name: 'DeliverIndex',
+        component: () =>
+          import('@/views/PersonalCenter/Deliver/DeliverIndex.vue'),
+        meta: {
+          title: '我的投递'
+        }
+      },
+      {
+        path: 'personalcenter/interview',
+        name: 'InterviewIndex',
+        component: () =>
+          import('@/views/PersonalCenter/Interview/InterviewIndex.vue'),
+        meta: {
+          title: '我的面试'
+        }
+      },
+      {
+        path: 'personalcenter/evaluate',
+        name: 'EvaluateIndex',
+        component: () =>
+          import('@/views/PersonalCenter/Evaluate/EvaluateIndex.vue'),
+        meta: {
+          title: '我的评价'
+        }
+      },
+      {
+        path: 'personalcenter/skilltraining',
+        name: 'SkillTrainingIndex',
+        component: () =>
+          import('@/views/PersonalCenter/SkillTraining/SkillTrainingIndex.vue'),
+        meta: {
+          title: '我的技能培训'
+        }
+      },
+      {
+        path: 'personalcenter/progresspoints',
+        name: 'ProgressPointsIndex',
+        component: () =>
+          import('@/views/PersonalCenter/ProgressPoints/ProgressPointsIndex.vue'),
+        meta: {
+          title: '进步积分'
+        }
+      },
       {
         path: 'applyeducationauth',
         name: 'ApplyEducationAuthIndex',

src/views/AdaptiveTraining/AdaptiveTrainingIndex.vue

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-12 15:23:44
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-22 17:55:12
+ * @LastEditTime: 2022-08-24 10:56:08
  * @FilePath: \veterans_client_web\src\views\AdaptiveTraining\AdaptiveTrainingIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
@@ -59,6 +59,9 @@
             class="atcl-item"
             v-for="(item, index) in onlineObj.list"
             :key="index"
+            @click="
+              jumpPage('/adaptivetraining/onlinecoursedetails', { id: item.id })
+            "
           >
             <div class="atcl-item-left">
               <el-image :src="item.titleImg" class="image" fit="cover">
@@ -92,13 +95,13 @@
         <div class="adaptive-training-content-statistics">
           <div class="atcs-total" v-if="trainingTotal.status === 1">
             <div class="atcs-total-item">
-              <p>未参加线下培训</p>
+              <p>已参加线下培训</p>
               <p>（注：必须参加线下培训才能通过适应性培训）</p>
             </div>
           </div>
           <div class="atcs-total" v-else>
             <div class="atcs-total-item">
-              <p>已参加线下培训</p>
+              <p>未参加线下培训</p>
               <p>（注：必须参加线下培训才能通过适应性培训）</p>
             </div>
           </div>
@@ -242,6 +245,19 @@ export default {
       this.offlineObj.queryParams.pageNum = page;
       this.getOfflineList();
     },
+    /**
+     * 跳转指定页面携带参数
+     * @date 2022-08-24
+     * @param {any} path
+     * @param {any} query
+     * @returns {any}
+     */
+    jumpPage(path, query) {
+      this.$router.push({
+        path,
+        query,
+      });
+    },
   },
 };
 </script>

src/views/AdaptiveTraining/OnlineCourseDetails/OnlineCourseDetailsIndex.vue

@@ -0,0 +1,129 @@
+<!--
+ * @Description: 线上课程详情
+ * @Author: 空白格
+ * @Date: 2022-08-24 10:44:26
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-24 14:01:39
+ * @FilePath: \veterans_client_web\src\views\AdaptiveTraining\OnlineCourseDetails\OnlineCourseDetailsIndex.vue
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+-->
+<template>
+  <div class="course-details">
+    <div class="course-details-breadcrumb">
+      <el-breadcrumb
+        class="course-details-breadcrumb-content"
+        separator-class="el-icon-arrow-right"
+      >
+        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item
+          v-for="(item, index) in breadcrumbList"
+          :key="index"
+          :to="'/' + item.path"
+          >{{ item.label }}</el-breadcrumb-item
+        >
+      </el-breadcrumb>
+    </div>
+    <div class="course-details-video">
+      <div class="course-details-video-box">
+        <course-video :courseDetails="detailsInfo"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CourseVideo from "@/components/CourseVideo";
+import { getOnlineCourseDetails } from "@/api/AdaptiveTraining";
+export default {
+  name: "OnlineCourseDetailsIndex",
+  components: {
+    CourseVideo,
+  },
+  data() {
+    return {
+      breadcrumbList: [],
+      classesId: null,
+      detailsInfo: {},
+      currentClasses: {},
+    };
+  },
+  created() {
+    this.handleRouter();
+    const { id } = this.$route.query;
+    if (id) {
+      this.classesId = id;
+      this.getDetails();
+    }
+  },
+  methods: {
+    /**
+     * 获取课程详情
+     * @date 2022-08-24
+     * @param {any} id
+     * @returns {any}
+     */
+    getDetails() {
+      getOnlineCourseDetails({ id: this.classesId }).then((res) => {
+        if (res.code === 200) {
+          this.detailsInfo = res?.data;
+        }
+      });
+    },
+    /**
+     * 根据路由获取面包屑
+     * @date 2022-08-24
+     * @returns {any}
+     */
+    handleRouter() {
+      let path = this.$router.currentRoute.path.slice(1),
+        routerOptions = this.$router.options.routes[0].children,
+        breadcrumbList = [],
+        pathList;
+      if (path) {
+        pathList = path.split("/").filter((item) => item && item.trim());
+        pathList[pathList.length - 1] = path;
+        pathList.forEach((item) => {
+          routerOptions.forEach((jitem) => {
+            if (item === jitem.path) {
+              breadcrumbList.push({
+                path: jitem.path,
+                label: jitem.meta.title,
+              });
+            }
+          });
+        });
+        this.breadcrumbList = breadcrumbList;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.course-details {
+  &-breadcrumb {
+    height: 57px;
+    line-height: 57px;
+    background: #43565f;
+    &-content {
+      width: 70%;
+      height: 57px;
+      line-height: 57px;
+      min-width: 600px;
+      margin: 0 auto;
+      :deep(.el-breadcrumb__inner.is-link) {
+        color: #fff;
+        font-size: 14px;
+      }
+    }
+  }
+  &-video {
+    background: #181c1e;
+    &-box {
+      width: 70%;
+      min-width: 600px;
+      margin: 0 auto;
+    }
+  }
+}
+</style>

src/views/PersonalCenter/Deliver/DeliverIndex.vue

@@ -0,0 +1,12 @@
+<!--
+ * @Description: 我的投递
+ * @Author: 空白格
+ * @Date: 2022-08-24 09:40:33
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-24 09:40:33
+ * @FilePath: \veterans_client_web\src\views\PersonalCenter\Deliver\DeliverIndex.vue
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+-->
+<template>
+  <div>我的投递</div>
+</template>

src/views/PersonalCenter/Evaluate/EvaluateIndex.vue

@@ -0,0 +1,12 @@
+<!--
+ * @Description: 我的评价
+ * @Author: 空白格
+ * @Date: 2022-08-24 10:00:07
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-24 10:00:07
+ * @FilePath: \veterans_client_web\src\views\PersonalCenter\Evaluate\EvaluateIndex.vue
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+-->
+<template>
+  <div>我的评价</div>
+</template>

src/views/PersonalCenter/Interview/InterviewIndex.vue

@@ -0,0 +1,12 @@
+<!--
+ * @Description: 我的面试
+ * @Author: 空白格
+ * @Date: 2022-08-24 09:56:29
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-24 09:56:29
+ * @FilePath: \veterans_client_web\src\views\PersonalCenter\Interview\InterviewIndex.vue
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+-->
+<template>
+  <div>我的面试</div>
+</template>

src/views/PersonalCenter/PersonalCenterIndex.vue

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-15 10:09:03
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-23 15:27:46
+ * @LastEditTime: 2022-08-24 10:12:43
  * @FilePath: \veterans_client_web\src\views\PersonalCenter\PersonalCenterIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
@@ -29,7 +29,7 @@
               <div class="pchb-left-user">
                 <div class="pchb-left-user-item">
                   <div class="plui-username">{{ userInfo.name || "-" }}</div>
-                  <div class="plui-integral">
+                  <div class="plui-integral" @click="jumpPage('/personalcenter/progresspoints')">
                     <div class="plui-integral-item">进步<br />积分</div>
                     <div class="plui-integral-item">
                       {{ integralTotal || 0 }}
@@ -56,7 +56,7 @@
                   </div>
                   <div class="plui-train">
                     <div class="plui-train-item">适应性培训</div>
-                    <div class="plui-train-item">
+                    <div class="plui-train-item link" @click="jumpPage('/adaptivetraining')">
                       <template v-if="userInfo.adaptTrainIsPass === 1"
                         >已通过</template
                       >
@@ -75,7 +75,7 @@
                 :key="index"
               >
                 <p>{{ item.label }}</p>
-                <p>{{ learnObj[item.key] || 0 }}{{ item.unit }}</p>
+                <p><span>{{ learnObj[item.key] || 0 }}</span>{{ item.unit }}</p>
               </div>
             </div>
           </el-col>
@@ -84,7 +84,7 @@
     </div>
     <div class="app-main-box personal-center-main">
       <el-row :gutter="20">
-        <el-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16">
+        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
           <div class="personal-center-main-left">
             <div
               class="pcml-item"
@@ -102,15 +102,13 @@
             </div>
           </div>
         </el-col>
-        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+        <!-- <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
           <div class="personal-center-main-right">
-            <!-- 附件管理 -->
             <div class="pcmr-top">
               <h4>附件管理</h4>
               <div class="pcmr-top-btn upload-btn">上传简历</div>
               <div class="pcmr-top-btn make-btn">制作简历</div>
             </div>
-            <!-- 我的技能培训 -->
             <div class="pcmr-bottom">
               <h4>我的技能培训</h4>
               <div class="pcmr-bottom-list">
@@ -171,7 +169,7 @@
               </div>
             </div>
           </div>
-        </el-col>
+        </el-col> -->
       </el-row>
     </div>
   </div>
@@ -199,17 +197,17 @@ export default {
         {
           icon: require("@/assets/images/personal-center-icon/jianlitongguo.svg"),
           label: "我的简历",
-          path: "",
+          path: "/personalcenter/resume",
         },
         {
           icon: require("@/assets/images/personal-center-icon/toudimoren.svg"),
           label: "我的投递",
-          path: "",
+          path: "/personalcenter/deliver",
         },
         {
           icon: require("@/assets/images/personal-center-icon/mianshi-houxuanren.svg"),
           label: "我的面试",
-          path: "",
+          path: "/personalcenter/interview",
         },
         {
           icon: require("@/assets/images/personal-center-icon/_jiuyechuangye.svg"),
@@ -219,17 +217,17 @@ export default {
         {
           icon: require("@/assets/images/personal-center-icon/jinengx.svg"),
           label: "我的技能培训",
-          path: "",
+          path: "/personalcenter/skilltraining",
         },
         {
           icon: require("@/assets/images/personal-center-icon/pingjia.svg"),
           label: "我的评价",
-          path: "",
+          path: "/personalcenter/evaluate",
         },
         {
           icon: require("@/assets/images/personal-center-icon/shezhi.svg"),
           label: "设置",
-          path: "/setting",
+          path: "/personalcenter/setting",
         },
       ],
       skillTrainList: [],
@@ -334,6 +332,7 @@ export default {
                 #fe7c02 100%
               );
               border-radius: 40px;
+              cursor: pointer;
               &-item {
                 color: #fff;
                 &:first-child {
@@ -369,6 +368,9 @@ export default {
                   color: rgba($color: #fff, $alpha: 0.6);
                 }
               }
+              .link {
+                cursor: pointer;
+              }
             }
             .plui-train {
               margin-left: 30px;
@@ -392,6 +394,10 @@ export default {
           }
           p {
             font-family: PingFangSC-Regular;
+            span {
+              color: #FE7B02;
+              font-size: 36px;
+            }
           }
           p:first-child {
             margin-bottom: 10px;

src/views/PersonalCenter/ProgressPoints/ProgressPointsIndex.vue

@@ -0,0 +1,12 @@
+<!--
+ * @Description: 进步积分
+ * @Author: 空白格
+ * @Date: 2022-08-24 10:06:50
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-24 10:06:50
+ * @FilePath: \veterans_client_web\src\views\PersonalCenter\ProgressPoints\ProgressPointsIndex.vue
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+-->
+<template>
+  <div>进步积分</div>
+</template>

src/views/PersonalCenter/Resume/ResumeIndex.vue

@@ -0,0 +1,12 @@
+<!--
+ * @Description: 我的简历
+ * @Author: 空白格
+ * @Date: 2022-08-24 09:35:03
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-24 09:35:03
+ * @FilePath: \veterans_client_web\src\views\PersonalCenter\Resume\ResumeIndex.vue
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+-->
+<template>
+  <div>我的简历</div>
+</template>

src/views/PersonalCenter/SkillTraining/SkillTrainingIndex.vue

@@ -0,0 +1,12 @@
+<!--
+ * @Description: 我的技能培训
+ * @Author: 空白格
+ * @Date: 2022-08-24 10:02:17
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-24 10:02:17
+ * @FilePath: \veterans_client_web\src\views\PersonalCenter\SkillTraining\SkillTrainingIndex.vue
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+-->
+<template>
+  <div>我的技能培训</div>
+</template>