我的技能培训详情

src/api/SkillTraining/index.js

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-12 09:31:28
  * @LastEditors: gcz
- * @LastEditTime: 2022-08-25 15:25:26
+ * @LastEditTime: 2022-08-25 15:29:57
  * @FilePath: \veterans_client_web\src\api\SkillTraining\index.js
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
  */
@@ -73,7 +73,7 @@ export function signUpClass(data) {
  */
 export function getTrainDetail(params) {
   return request({
-    url: `/app/learnmember/myTrainDetail${params.id}`,
+    url: `/app/learnmember/myTrainDetail/${params.id}`,
     method: 'get',
     params
   })

src/views/PersonalCenter/SkillTraining/SkillsTrainingDetails.vue

@@ -3,49 +3,273 @@
  * @Author: gcz
  * @Date: 2022-08-25 15:01:55
  * @LastEditors: gcz
- * @LastEditTime: 2022-08-25 15:26:12
+ * @LastEditTime: 2022-08-25 17:48:55
  * @FilePath: \veterans_client_web\src\views\PersonalCenter\SkillTraining\SkillsTrainingDetails.vue
  * @Copyright: Copyright (c) 2016~2022 by gcz, All Rights Reserved. 
 -->
 <template>
-    <div class='app-main'>
-        <section class="base-info-wrap">
-            <div class="app-main-box u-flex u-row-between">
-                <div class="base-info-left">
+  <div class="app-main">
+    <section class="base-info-wrap">
+      <div class="app-main-box u-flex u-col-top u-row-between">
+        <div class="base-info-left u-flex u-col-top">
+          <el-image
+            style="width: 260px; height: 260px"
+            :src="details.img"
+            fit="cover"
+          ></el-image>
+          <div class="text">
+            <div class="text-item name">{{ details.name }}</div>
+            <div class="text-item u-flex">
+              <span>难度：</span>
+              <el-rate v-model="details.difficult" disabled></el-rate>
+            </div>
+            <div class="text-item">培训学校：{{ details.schoolName }}</div>
+            <div class="text-item">培训导师：{{ details.teacherName }}</div>
+            <div class="text-item">培训周期：{{ details.cycle }}</div>
+            <div class="text-item">报名人数：{{ details.applyCount }}</div>
+            <div class="text-item">开班时间：{{ details.openingTime }}</div>
+            <div class="text-item progress">
+              <div>学习进度</div>
+              <el-progress
+                :percentage="details.finishPercent || 0"
+              ></el-progress>
+            </div>
+          </div>
+        </div>
+        <div class="base-info-right">
+          <div class="certificate" @click="jumpPage('/achievementCertificate')">
+            <div class="img-wrap u-flex u-row-center">
+              <el-image
+                :src="require('@/assets/images/certificate-icon.svg')"
+                style="width: 48px; height: 58px"
+              ></el-image>
+            </div>
+            <span class="certificate-text">成绩与证书</span>
+          </div>
+        </div>
+      </div>
+    </section>
+    <div class="app-main-box">
+      <div class="app-main-box-content">
+        <el-tabs
+          v-model="classTypeActive"
+          @tab-click="classTypeClick"
+        >
+          <el-tab-pane
+            v-for="(item, index) in classTypeList"
+            :key="index"
+            :label="item.label"
+            :name="item.name"
+          >
+            <div class="" v-if="classTypeActive==0">
+            <el-row :gutter="16" v-if="onLineCourselist && onLineCourselist.length">
+              <el-col
+                class="course-item"
+                :xs="24"
+                :sm="24"
+                :md="24"
+                :lg="24"
+                :xl="12"
+                v-for="(item, index) in onLineCourselist"
+                :key="index"
+              >
+                <div @click="jumpPage('/coursevideo',{id:item.id})" class="course u-flex u-row-between" >
+                  <div class="left u-flex">
                     <el-image
-                        style="width: 100px; height: 100px"
-                        :src="url"
-                        fit="contain"></el-image>
+                        style="width: 87px; height: 65px"
+                        :src="item.img"
+                        fit="cover"
+                    ></el-image>
+                    <div class="text">
+                        <div class="name">{{item.name}}</div>
+                        <div class="info">{{` 共${item.amount || 0}课,已学完${item.finishCount || 0},学习进度${item.finishPercent || 0}% `}}</div>
+                    </div>
+                  </div>
+                  <div class="right">
+                    
+                  </div>
                 </div>
-                <div class="base-info-right"></div>
+              </el-col>
+            </el-row>
+            <el-empty v-else description="暂无线上课程"></el-empty>
             </div>
-        </section>
-        <div class="app-main-box">
-            <div class="app-main-box-content">
-
+            
+            <div class="" v-if="classTypeActive==1">
+             <el-row :gutter="16" v-if="offLineCourselist && offLineCourselist.length">
+              <el-col
+                class="course-item"
+                :xs="24"
+                :sm="24"
+                :md="24"
+                :lg="24"
+                :xl="12"
+                v-for="(item, index) in onLineCourselist"
+                :key="index"
+              >
+                <div @click="goDetails(item.id)" class="course u-flex u-row-between" >
+                  <div class="left u-flex">
+                    <el-image
+                        style="width: 87px; height: 65px"
+                        :src="item.img"
+                        fit="cover"
+                    ></el-image>
+                    <div class="text">
+                        <div class="name">{{item.name}}</div>
+                        <div class="info">{{` 共${item.amount || 0}课,已学完${item.finishCount || 0},学习进度${item.finishPercent || 0}% `}}</div>
+                    </div>
+                  </div>
+                  <div class="right">
+                  </div>
+                </div>
+              </el-col>
+            </el-row>
+            <el-empty v-else description="暂无线下课程"></el-empty>
             </div>
-        </div>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 import { getTrainDetail } from "@/api/SkillTraining";
-    export default {
-        name: '',
-        components: {},
-        data () {
-            return {
+export default {
+  name: "",
+  components: {},
+  data() {
+    return {
+        classTypeActive:0,
+        details: {},
+        classTypeList:[
+            {label:'线上课程',name:'0'},
+            {label:'线下实训',name:'1'},
+        ],
+        onLineCourselist:[],
+        offLineCourselist :[]
+    };
+  },
+  created() {
+    this.handleGetTrainDetail();
+  },
+  methods: {
+    handleGetTrainDetail() {
+      getTrainDetail({ id: this.$route.query.id }).then((res) => {
+        this.details = res?.data;
+        this.onLineCourselist = this.details.onLineCourselist;
+        console.log("getTrainDetail", res);
+      });
+    },
+    classTypeClick(){
 
-            };
-        },
-        created(){},
-        methods: {},
-    }
+    },
+    /**
+     * 跳转到指定页面
+     * @date 2022-08-11
+     * @param {any} path
+     * @returns {any}
+     */
+    jumpPage(path, param) {
+      if (path) {
+        this.$router.push({ path: path, query: param });
+      }
+    },
+  },
+};
 </script>
 
 <style lang='scss' scoped>
-.base-info-wrap{
-    background: #43565F;
-    padding: 35px 0 100px;
+.base-info-wrap .app-main-box {
+  margin-top: 0;
+}
+.app-main > .app-main-box{
+    min-height: calc( 100vh - 73px - 400px - 100px - 23px);
+}
+.base-info-wrap {
+  background: #43565f;
+  padding: 35px 0 100px;
+  .base-info-left {
+    // width: 60%;
+    .text {
+      // width: 80%;
+      margin-left: 30px;
+      .text-item {
+        color: #fff;
+        font-size: 16px;
+        margin-bottom: 5px;
+      }
+      .name {
+        font-size: 20px;
+        margin-bottom: 25px;
+      }
+      .progress {
+        margin-top: 20px;
+      }
+    }
+  }
+
+  .base-info-right {
+    .certificate {
+      background: #6a767d;
+      width: 88px;
+      overflow: hidden;
+      border-radius: 4px;
+      text-align: center;
+      .img-wrap {
+        text-align: center;
+        height: 80px;
+        background: #fff;
+      }
+      .certificate-text {
+        color: #fff;
+        font-size: 14px;
+        line-height: 35px;
+      }
+    }
+  }
+}
+.course{
+    cursor: pointer;
+    padding: 20px;
+    margin-bottom: 20px;
+    background: #FFFFFF;
+    border-radius: 3px;
+    border: 1px solid rgba(0, 0, 0, 0.11);
+    transition: all 0.3s;
+    &:hover{
+        box-shadow: 0 1px 10px 0 rgba(0,0,0,0.11);
+    }
+    .text{
+        color: #666;
+        margin-left: 15px;
+        font-size: 14px;
+        .name{
+            font-size: 20px;
+            margin-bottom: 10px;
+            color: #222;
+        }
+    }
+}
+:deep(.el-tabs){
+    &::after{
+        background-color: transparent;
+    }
+    .el-tabs__nav-wrap{
+        &::after{
+            background-color: transparent;
+        }
+    }
+    .el-tabs__header{
+        margin-bottom: 48px;
+    }
+    .el-tabs__item{
+        font-size: 20px;
+        &.is-active,&:hover{
+            color: #416050;
+        }
+    }
+    .el-tabs__active-bar{
+        background-color: #416050;
+    }
 }
 </style>