12.2初次提交

src/pages/person-center/index.vue

@@ -70,6 +70,9 @@
             <div class="nav__section">
               <div class="title">我的课程</div>
               <div class="list">
+                <router-link to="/person-center/learn-center">
+                  <div class="item">学习中心</div>
+                </router-link>
                 <router-link to="/person-center/my-course">
                   <div class="item">开始学习</div>
                 </router-link>

src/pages/person-center/learn-center/index.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="learn-main">
+    <div class="course-classify">
+      <div class="course-classify__list">
+        <div class="left-item">教育类型：</div>
+        <div class="right-item">
+          <div class="list">
+            <div
+              class="item"
+              v-for="(item, index) in typeList"
+              :key="index"
+              :class="{ active: params.educationTypeId == item.id }"
+              @click="changeType(item)"
+            >
+              {{ item.educationName }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="course-classify__list" v-if="businessList.length > 0">
+        <div class="left-item">培训项目：</div>
+        <div class="right-item">
+          <div class="list">
+            <!-- <div class="item active">全部</div> -->
+            <div
+              class="item"
+              v-for="(item, index) in businessList"
+              :key="index"
+              :class="{ active: params.businessId == item.id }"
+              @click="changeBusiness(item)"
+            >
+              {{ item.aliasName }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      typeList: [],
+      businessList: [],
+      params: { businessId: "", educationTypeId: "" },
+    };
+  },
+  methods: {
+    changeType(item) {
+      if (this.params.educationTypeId == item.id) {
+        return;
+      }
+      this.params.educationTypeId = item.id;
+      this.params.businessId = "";
+      this.businessList = [];
+      this.getBusinessList();
+    },
+    getEducationTypeList() {
+      this.$request.educationTypeList().then((res) => {
+        this.typeList = res.rows;
+        this.params.educationTypeId = res.rows[0].id;
+        this.getBusinessList();
+      });
+    },
+    getBusinessList() {
+      this.$request
+        .businessList({ educationId: this.params.educationTypeId })
+        .then((res) => {
+          this.businessList = res.rows.filter((item) => item.aliasName);
+          this.params.businessId = this.businessList[0].id;
+        });
+    },
+    changeBusiness(item) {
+      if (this.params.businessId == item.id) {
+        return;
+      }
+      this.params.businessId = item.id;
+    },
+  },
+  created() {
+    this.getEducationTypeList();
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.learn-main {
+  .course-classify {
+    margin: 20px 0 18px;
+    padding: 20px 20px 0;
+    overflow: hidden;
+    background: #f8f8fc;
+    &__list {
+      padding-bottom: 20px;
+      display: flex;
+      .left-item {
+        padding-top: 4px;
+        width: 80px;
+        font-size: 13px;
+        color: #333333;
+      }
+
+      .right-item {
+        flex: 1;
+        .list {
+          display: flex;
+          flex-wrap: wrap;
+          .item {
+            cursor: pointer;
+            border-radius: 2px;
+            // margin: 10px;
+            padding: 4px 8px;
+            color: #666666;
+            font-size: 13px;
+            background: #f7f9fc;
+            color: #999;
+
+            &.active {
+              color: #3f8dfd;
+              background: #ebf2ff;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/router/index.js

@@ -450,6 +450,11 @@ const router = new Router({
           component: resolve => require(['@/pages/person-center/my-course/index'], resolve),
           name: '我的课程'
         },
+        {
+          path: 'learn-center',
+          component: resolve => require(['@/pages/person-center/learn-center/index'], resolve),
+          name: '学习中心'
+        },
         {
           path: 'my-live',
           component: resolve => require(['@/pages/person-center/my-live/index'], resolve),