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