1.add: 课程商城代码添加

2.add：课程详情页内容初步添加

src/router/routes.js

@@ -117,6 +117,12 @@ const USER_VISITOR_ROUTES = [
         meta: { title: '课程商城', USER_LEVEL: USER_LEVEL.USER_VISITOR, showHeader: false, animation: false },
         component: () => import('@/views/courseResources/courseMall/index')
       },
+      {
+        path: '/courseResources/courseDetails/index',
+        name: 'courseDetails',
+        meta: { title: '课程详情', USER_LEVEL: USER_LEVEL.USER_VISITOR, showHeader: false, animation: false },
+        component: () => import('@/views/courseResources/courseDetails/index')
+      },
       {
         path: '/assessmentRating/index',
         name: 'assessmentRating',

src/views/courseResources/courseDetails/index.vue

+<template>
+  <!-- 首页 - 课程资源 - 课程介绍详情 -->
+  <div>
+    <nav-list :list="navList" :current-menu="'/courseResources/index'"/>
+    <HomeSearch/>
+    <div class="courseDetails-content">
+      <div class="courseCard">
+        <div class="coursePicture">
+          <el-image
+            class="img"
+            :src="courseDetails.coursePicture || defaultCourseUrl"
+            fit="cover"/>
+          <div
+            v-if="courseDetails.courseLevel"
+            :class="'levelTag level' + (courseDetails.courseLevel === '2' ? '2' : courseDetails.courseLevel === '1' ? '1' : '0')">
+            {{ courseDetails.courseLevel === '2' ? '高级' : courseDetails.courseLevel === '1' ? '中级' : '初级' }}
+          </div>
+          <el-button class="studyBtn" round>开始学习</el-button>
+        </div>
+        <div class="courseInfo">
+          <div class="title-box">
+            <div class="title">{{ courseDetails.courseTitle || '暂无数据' }}</div>
+            <div class="classify">{{
+                courseDetails.courseClassify === '2' ? '通用能力培养' : courseDetails.courseClassify === '1' ? '岗位能力准入' : '行业前沿适配'
+              }}
+            </div>
+            <i :class="'collectIcon el-icon-star-' + (courseDetails.isCollect === '1' ? 'on' : 'off')"></i>
+          </div>
+          <div class="subTitle">{{ courseDetails.courseIntro || '暂无数据' }}</div>
+          <div class="period">{{ courseDetails.coursePeriod ? courseDetails.coursePeriod + '课时' : '暂无数据' }}</div>
+          <div class="tags-box">
+            <div
+              v-for="tag in courseDetails.courseTags"
+              :key="tag.id"
+              class="tag">{{ tag.tagTitle }}
+            </div>
+          </div>
+          <div
+            :class="'price price-' + (courseDetails.coursePrice === '免费' || !courseDetails.coursePrice ? 'free' : 'charge')">
+            {{
+              courseDetails.coursePrice === '免费' || !courseDetails.coursePrice ? '免费' : '￥' + courseDetails.coursePrice
+            }}
+          </div>
+        </div>
+      </div>
+      <div class="bottom-box">
+        <div class="left-group-box">
+          <el-tabs
+            v-model="originalLocation">
+            <el-tab-pane name="introduction">
+              <div slot="label" class="label">介绍</div>
+              <div class="introduction-box">
+                <div class="info-card">
+                  <div class="title">适用人群</div>
+                  <div class="content">{{ courseDetails.courseApplicableGroup }}</div>
+                </div>
+                <div class="info-card">
+                  <div class="title">课程概述</div>
+                  <div class="content">{{ courseDetails.courseSummarize }}</div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane name="catalogue">
+              <div slot="label" class="label">目录</div>
+              <div>这是目录内容</div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        <div class="right-group-box">
+          <div class="lecturerCard">
+            <div class="card-top">
+              <div class="avatar">
+                <el-image
+                  class="img"
+                  :src="courseDetails.courseLecturer.avatarUrl || defaultAvatarUrl"
+                  fit="cover"/>
+              </div>
+              <div class="info">
+                <div class="name">
+                  {{ courseDetails.courseLecturer.name ? '讲师：' + courseDetails.courseLecturer.name : '暂无数据' }}
+                </div>
+                <div class="position">{{ courseDetails.courseLecturer.position || '暂无数据' }}</div>
+              </div>
+            </div>
+            <div class="introduction">{{ courseDetails.courseLecturer.introduction || '暂无数据' }}</div>
+          </div>
+          <div class="right-bottom-box">
+            <div class="title">课程推荐</div>
+            <div class="recommendedCourse-box">
+              <div
+                v-for="course in recommendedCoursesList"
+                :key="course.id"
+                class="courseCard">
+                <div class="picture">
+                  <el-image
+                    class="img"
+                    :src="course.coursePicture || defaultCourseUrl"
+                    fit="cover"/>
+                </div>
+                <div class="title">{{ course.courseTitle }}</div>
+                <div :class="'price price-' + (course.coursePrice === '免费' || !course.coursePrice ? 'free' : 'charge')">
+                  {{
+                    course.coursePrice === '免费' || !course.coursePrice ? '免费' : '￥' + course.coursePrice
+                  }}
+                </div>
+              </div>
+            </div>
+            <div class="getMore">
+              <el-button class="enterBtn" @click="getMore">
+                查看更多
+                <el-image
+                  class="img"
+                  :src="require('@/assets/image/people.png')"
+                  fit="cover"/>
+              </el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import HomeSearch from '@/views/homePage/components/searchHome/index'
+import NavList from '@/views/homePage/components/NavList/index'
+import page from '@/mixins/page'
+
+export default {
+  name: 'Index',
+  components: {
+    HomeSearch,
+    NavList
+  },
+  mixins: [page],
+  data() {
+    return {
+      // 默认头像
+      defaultAvatarUrl: require('@/assets/image/defaultAvatar.png'),
+      // 默认课程图片
+      defaultCourseUrl: require('@/assets/image/defaultPicture.png'),
+      // 初始化位置
+      originalLocation: 'introduction',
+      // 推荐课程分页搜索条件
+      queryParams: {
+        // 分页
+        pageNum: 1,
+        // 每页记录条数
+        pageSize: 3
+      },
+      // 课程详情数据
+      courseDetails: {
+        // id
+        courseId: 1,
+        // 课程标题
+        courseTitle: 'Java 案例课程',
+        // 课程简介
+        courseIntro: 'Java 从入门到放弃的完整体验',
+        // 课程价格
+        coursePrice: '648',
+        // 课程关注人数
+        courseFollowNum: 2001,
+        // 课程图片
+        coursePicture: require('@/assets/image/courseTwo.jpg'),
+        // 课程购入状态（0：未购；1：已购）
+        courseStatus: '1',
+        // 课程等级（0：初级；1：中级；2：高级）
+        courseLevel: '2',
+        // 是否收藏课程（1：为收藏）
+        isCollect: '1',
+        // 课程课时
+        coursePeriod: '72',
+        // 课程分类（0：行业前沿适配；1：岗位能力准入；2：通用能力培养）
+        courseClassify: '0',
+        // 课程标签
+        courseTags: [
+          {
+            id: 1,
+            tagTitle: '感知算法工程师'
+          },
+          {
+            id: 2,
+            tagTitle: '决策控制算法工程师'
+          },
+          {
+            id: 3,
+            tagTitle: '环境感知工程师'
+          },
+          {
+            id: 4,
+            tagTitle: '智能决策技术'
+          },
+          {
+            id: 5,
+            tagTitle: '高级软件开发工程师'
+          },
+          {
+            id: 6,
+            tagTitle: 'AI智能决策算法工程师'
+          }
+        ],
+        // 课程适用人群
+        courseApplicableGroup: '对Java有需求或感兴趣的大学生及职场人士。',
+        // 课程概述
+        courseSummarize: '你有这么高速运转的机械进入中国记住我给出的原理 \n' +
+          '小的时候就是研发人 就是研发这个东西的原理是是阴间政权管着知道为什么有生灵给他运转 \n' +
+          '先位还有还有专门饲养这个为什么地下产这种东西\n' +
+          '它管着它说是五世同堂旗下子孙你以为我跟你闹着玩呢\n' +
+          '你不你不你不警察吗黄龙江一派全都带蓝牙王龙江我告我告诉你 在阴间是是那个化名化名小舅亲小舅 赵金兰的那个嫡子嫡孙\n' + '咋的 你跟王守义玩的啊\n' +
+          '那是我儿子 他都管我叫太祖奶奶 爱因斯基叶赫那拉我是施瓦辛格\n' +
+          '我告诉你 他不听命于杜康\n' +
+          '我跟你说句肝上的事你不刑警队的吗\n' +
+          '他不听命于杜康 为什么\n' +
+          '他是韩国人 他属于合作方 合伙人 自己有自己的政权但是你进入亚洲了 这这块牡丹江号称小联合国你触犯了军权就可以抓他\n' +
+          '但是你们为了什么 你为了碎银几两啊 还是限制你的数字啊 还是你你定格不了你没有主权你这兵不硬啊 你理论不强你都说不明白你人情世故 你为了几个数字导致你的方向啊\n' +
+          '因为什么 这块有交警队的人 我才说这话的天天交警队交警队 你你你干什么工作了你你这军情我分析的我靠古人\n' +
+          '到时候你张口管我要军费的时候挺牛逼的没有定向资金你们 你们资金全是佣金就是你那水平 你这活你给我干完了有这个有这笔钱不干完没有\n' +
+          '不敢苟同，我认为意大利面就应该拌42号混凝土，因为螺丝钉的长度会直接影响挖据机的扭矩，你往下砸的时候一瞬间会产生大量高能蛋白，对经济的发展以及太平洋都会有严重的核污染，再者说，你根据勾股定理会很容易的知道，人工饲养的东条英鸡是能够捕获野生的三角函数的，也就是说不管秦始皇的横切面是否具有放射性，特朗普的n\n' +
+          '次方是否含有沉淀物，都不影响沃尔玛和尔康在南极汇合',
+        // 课程目录
+        courseCatalogue: [],
+        // 课程讲师信息
+        courseLecturer: {
+          id: 1,
+          name: 'Tony',
+          avatarUrl: '',
+          position: '技术总监',
+          introduction: '这个讲师比较能说所以简介稍微长点儿也是很正常的嘛。这个讲师比较能说所以简介稍微长点儿也是很正常的嘛。这个讲师比较能说所以简介稍微长点儿也是很正常的嘛。这个讲师比较能说所以简介稍微长点儿也是很正常的嘛。这个讲师比较能说所以简介稍微长点儿也是很正常的嘛。这个讲师比较能说所以简介稍微长点儿也是很正常的嘛。这个讲师比较能说所以简介稍微长点儿也是很正常的嘛。这个讲师比较能说所以简介稍微长点儿也是很正常的嘛。这个讲师比较能说所以简介稍微长点儿也是很正常的嘛。这个讲师比较能说所以简介稍微长点儿也是很正常的嘛。这个讲师比较能说所以简介稍微长点儿也是很正常的嘛。这个讲师比较能说所以简介稍微长点儿也是很正常的嘛。这个讲师比较能说所以简介稍微长点儿也是很正常的嘛。这个讲师比较能说所以简介稍微长点儿也是很正常的嘛。'
+        }
+      },
+      // 推荐课程列表数据
+      recommendedCoursesList: [
+        {
+          id: 1,
+          courseTitle: 'Visual C++案例课程',
+          coursePrice: '648',
+          courseFollowNum: 2001,
+          coursePicture: '',
+          courseStatus: '1'
+        },
+        {
+          id: 2,
+          courseTitle: 'Java 案例课程',
+          coursePrice: '18',
+          courseFollowNum: 7700,
+          coursePicture: '',
+          courseStatus: '0'
+        },
+        {
+          id: 3,
+          courseTitle: 'Vue3 案例课程',
+          coursePrice: '30',
+          courseFollowNum: 1114,
+          coursePicture: '',
+          courseStatus: '0'
+        }
+      ]
+    }
+  },
+  computed: {
+    navList() {
+      const navArray = [
+        {menuName: '首页', path: '/', query: {}},
+        {menuName: '学习平台', path: '/learningPlatform/index', query: {}},
+        {menuName: '课程资源', path: '/courseResources/index'},
+        {menuName: '考核评级', path: '/assessmentRating/index', query: {}},
+        {menuName: '合作案例', path: '/collaborationCases/index', query: {}},
+        {menuName: '关于我们', path: '/aboutUs/index', query: {}},
+        {menuName: '学习中心', path: '/learningCenter/index', query: {}},
+      ]
+      return navArray
+    }
+  },
+  beforeRouteUpdate(to, from, next) {
+    this.queryParams.courseId = this.$route.query.courseId || ''
+    next()
+  },
+  mounted() {
+    this.queryParams.courseId = this.$route.query.courseId || ''
+  },
+  methods: {
+    // 查询条件页签改变
+    changeQueryTabs(tab, event) {
+      // TODO: please clear this log
+      console.log(`tab`, tab)
+      // TODO: please clear this log
+      console.log(`event`, event)
+    },
+    // 查看更多推荐课程
+    getMore() {
+      console.log('查看更多')
+    },
+    // 测试方法
+    test() {
+      // TODO: please clear this log
+      console.log(`this.mallIdentityType`, this.mallIdentityType)
+      // TODO: please clear this log
+      console.log(`this.queryParams`, this.queryParams)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.courseDetails-content {
+  width: 1920px;
+  margin: auto;
+  background: #f5f8fd;
+
+  .courseCard {
+    width: 1200px;
+    height: 279px;
+    margin: auto;
+    padding: 24px;
+
+    .coursePicture {
+      position: relative;
+      width: 410px;
+      height: 231px;
+      border-radius: 8px;
+
+      .img {
+        width: 410px;
+        height: 231px;
+        border-radius: 8px;
+      }
+
+      .levelTag {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        width: 48px;
+        height: 30px;
+        border-radius: 4px;
+        font-size: 14px;
+        font-weight: 400;
+        text-align: center;
+        color: #ffffff;
+        line-height: 30px;
+      }
+
+      .level0 {
+        background: #67C23A;
+      }
+
+      .level1 {
+        background: #E6A23C;
+      }
+
+      .level2 {
+        background: #f96f21;
+      }
+
+      .studyBtn {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 112px;
+        height: 37px;
+        background: rgba(0, 0, 0, 0.75);
+        font-size: 16px;
+        font-weight: 700;
+        color: #ffffff;
+        border: none;
+      }
+    }
+
+    .courseInfo {
+      .title-box {
+        .title {
+        }
+
+        .classify {
+        }
+
+        .collectIcon {
+        }
+      }
+
+      .subTitle {
+      }
+
+      .period {
+      }
+
+      .tags-box {
+        .tag {
+        }
+      }
+
+      .price {
+      }
+
+      .price-free {
+      }
+
+      .price-charge {
+      }
+    }
+  }
+
+  .bottom-box {
+    .left-group-box {
+      .label {
+      }
+
+      .introduction-box {
+        .info-card {
+          .title {
+          }
+
+          .content {
+          }
+        }
+      }
+    }
+
+    .right-group-box {
+      .lecturerCard {
+        .card-top {
+          .avatar {
+            .img {
+            }
+          }
+
+          .info {
+            .name {
+            }
+
+            .position {
+            }
+          }
+        }
+
+        .introduction {
+        }
+      }
+
+      .right-bottom-box {
+        .title {
+        }
+
+        .recommendedCourse-box {
+          .courseCard {
+            .picture {
+              .img {
+              }
+            }
+
+            .title {
+            }
+
+            .price {
+            }
+
+            .price-free {
+            }
+
+            .price-charge {
+            }
+          }
+        }
+
+        .getMore {
+          .enterBtn {
+            .img {
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/courseResources/courseMall/index.vue

@@ -12,21 +12,21 @@
           @tab-click="changeQueryTabs">
           <el-tab-pane label="行业前沿适配" name="first">
             <screen
-              v-model="queryParams.type1"
+              v-model="queryParams.type"
               title="技术分类"
               :items="industryTechnologyOptions"
             ></screen>
           </el-tab-pane>
           <el-tab-pane label="岗位能力准入" name="second">
             <screen
-              v-model="queryParams.type2"
+              v-model="queryParams.type"
               title="岗位分类"
               :items="postAbilityOptions"
             ></screen>
           </el-tab-pane>
           <el-tab-pane label="通用能力培养" name="third">
             <screen
-              v-model="queryParams.type3"
+              v-model="queryParams.type"
               title="技术分类"
               :items="abilityTechnologyOptions"
             ></screen>
@@ -34,7 +34,7 @@
         </el-tabs>
         <screen
           v-else
-          v-model="queryParams.type1"
+          v-model="queryParams.type"
           title="技术分类"
           :items="industryTechnologyOptions"
         ></screen>
@@ -75,7 +75,11 @@
           </div>
         </div>
         <div class="box-bottom">
-          <div v-for="course in coursesDataList" :key="course.id" class="course-card">
+          <div
+            v-for="course in coursesDataList"
+            :key="course.id"
+            class="course-card"
+            @click="toCourseDetails(course)">
             <div class="card-top">
               <div class="picture">
                 <el-image
@@ -358,13 +362,25 @@ export default {
   mounted() {
     this.mallIdentityType = this.$route.query.mallIdentityType || ''
   },
+  beforeRouteUpdate(to, from, next) {
+    this.mallIdentityType = to.query.mallIdentityType || ''
+    this.queryParams.type = undefined
+    next()
+  },
   methods: {
     // 查询条件页签改变
     changeQueryTabs(tab, event) {
-      // TODO: please clear this log
-      console.log(`tab`, tab)
-      // TODO: please clear this log
-      console.log(`event`, event)
+      // 重置全部页签查询条件
+      this.queryParams.type = undefined
+    },
+    // 跳转到课程详情
+    toCourseDetails(param) {
+      this.$router.push({
+        path: '/courseResources/courseDetails/index',
+        query: {
+          courseId: param.id
+        }
+      })
     },
     // 测试方法
     test() {
@@ -404,7 +420,7 @@ export default {
       }
     }
 
-    .screen-box:first-child {
+    ::v-deep .el-tabs__content .screen-box {
       margin: 0;
       padding-top: 56px;
       padding-bottom: 24px;
@@ -414,6 +430,12 @@ export default {
       margin: 0;
     }
 
+    .screen-box:first-child {
+      margin: 0;
+      padding-top: 56px;
+      padding-bottom: 24px;
+    }
+
     .screen-box:last-child {
       margin: 0;
       padding-top: 26px;

src/views/courseResources/index.vue

@@ -143,7 +143,11 @@
           <div class="toMore">更多 》</div>
         </div>
         <div class="box-bottom">
-          <div v-for="course in enterpriseCourseList" :key="course.id" class="course-card">
+          <div
+            v-for="course in enterpriseCourseList"
+            :key="course.id"
+            class="course-card"
+            @click="toCourseDetails(course)">
             <div class="card-top">
               <div class="picture">
                 <el-image
@@ -183,7 +187,11 @@
           <div class="toMore">更多 》</div>
         </div>
         <div class="box-bottom">
-          <div v-for="course in collegeCoursesList" :key="course.id" class="course-card">
+          <div
+            v-for="course in collegeCoursesList"
+            :key="course.id"
+            class="course-card"
+            @click="toCourseDetails(course)">
             <div class="card-top">
               <div class="picture">
                 <el-image
@@ -474,6 +482,15 @@ export default {
     // 点击导航栏中 课程商城二级导航栏
     clickSelectIDDialog() {
       this.$refs.navList.openSelectID()
+    },
+    // 跳转到课程详情
+    toCourseDetails(param) {
+      this.$router.push({
+        path: '/courseResources/courseDetails/index',
+        query: {
+          courseId: param.id
+        }
+      })
     }
   }
 }