添加调用接口

.env.development

@@ -1,3 +1 @@
-VUE_APP_TMC_URL = ""
-VUE_APP_RP_URL = ""
-VUE_APP_UPLOAD_URL = ""
+VUE_APP_JTXT_URL = "http://120.77.221.199:7000"

.env.production

@@ -1 +1 @@
-VUE_H5_JTXT_URL = ""
+VUE_APP_JTXT_URL = "http://120.77.221.199:7000"

.env.testing

@@ -1 +1 @@
-VUE_H5_JTXT_URL = ""
+VUE_APP_JTXT_URL = "http://120.77.221.199:7000"

README.md

@@ -1,4 +1,4 @@
-# tmch5.web
+# jtxth5.web
 
 ## Project setup
 ```

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "tmch5.web",
+  "name": "jtxth5.web",
   "version": "1.0.0",
   "private": true,
   "scripts": {

src/api/modules/jtxt.js

@@ -1,7 +1,10 @@
 // TMC系统相关api
 export default {
-  basePath: process.env.VUE_H5_JTXT_URL,
+  basePath: process.env.VUE_APP_JTXT_URL,
   apiList: {
-    TEST_AAA: ""
+    // 查询根目录
+    JTXT_GET_CATEGORIES: "categories",
+    // 查询目录详情
+    JTXT_GET_CATEGORIES_CATEGROYID: "categories/{categoryId}"
   }
 };

src/router/index.js

@@ -1,9 +1,5 @@
 import Vue from "vue";
 import Router from "vue-router";
-// import Home from "@/views/home";
-// import answerRecruit from "@/views/home/answer/page-answer-recruit";
-// import pageExamItemDetail from "@/views/home/exam/page-exam-item-detail";
-// import pageExamItem from "@/views/home/exam/page-exam-item";
 
 Vue.use(Router);
 
@@ -29,7 +25,12 @@ let routes = [
     path: "/Exam",
     name: "Exam",
     component: () => import("@/views/home/exam/page-exam-item-doing")
-  } // 单个考试的试卷页
+  }, // 单个考试的试卷页
+  {
+    path: "/Learn-Content",
+    name: "learn-content",
+    component: () => import("@/views/home/learn/page-learn-content")
+  } // 学习内容页
 ];
 
 export default new Router({

src/store/index.js

@@ -18,7 +18,8 @@ export default new Vuex.Store({
   })],
   state: {
     current: Date.now(), // 当前时间
-    intervalID: 0
+    intervalID: 0,
+    screenLoading: false // 显示全屏加载中
   },
   getters: {
     hidden() {
@@ -39,6 +40,7 @@ export default new Vuex.Store({
       state.intervalID = 0;
     },
     toggleLoading(state, value) {
+      state.screenLoading = value;
     },
     updateItem(state, { field, value }) {
       state[field] = value;

src/utils/axios.js

@@ -11,7 +11,7 @@ import md5 from "js-md5";
 axios.defaults.headers.post["Content-Type"] = "application/json;charset=utf-8";
 
 let config = {
-  baseURL: process.env.BASE_URL || process.env.VUE_APP_UPLOAD_URL || process.env.VUE_APP_TMC_URL || "",
+  baseURL: process.env.BASE_URL || process.env.VUE_APP_JTXT_URL || "",
   timeout: 60 * 1000,
   withCredentials: false,
   crossDomain: true
@@ -63,7 +63,7 @@ _axios.interceptors.request.use(
 _axios.interceptors.response.use(
   response => {
     // 用来判断是否请求成功
-    const success = response.status === 200 && response.data.code === 0;
+    const success = response.status === 200;
     let message = "";
     if (!success) {
       if (typeof response.data === "string") {
@@ -79,7 +79,7 @@ _axios.interceptors.response.use(
       return Promise.reject(response);
     }
     return {
-      data: response.data.data,
+      data: response.data,
       success,
       message
     };

src/utils/tools.js

@@ -71,3 +71,17 @@ export function flat(list) {
   });
   return retArr;
 }
+
+/**
+ * 路径参数替换
+ * @pathParams {Object} 路径参数
+ */
+export function pathParams(path, pathParams) {
+  if (path.includes("{") && pathParams) {
+    let keys = Object.keys(pathParams);
+    keys.forEach(it => {
+      path = path.replace("{" + `${it}` + "}", pathParams[it]);
+    });
+  }
+  return path;
+}

src/views/home/index.vue

@@ -67,7 +67,7 @@ export default {
     };
   },
   created() {
-    this.activeTabName = 2;
+    this.activeTabName = 0;
     this.currentComponents = this.tabbars[this.activeTabName].pageName;
   },
   methods: {

src/views/home/learn/page-learn-child.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="contentBody" v-if="learnChildList.length > 0">
+    <van-tabs
+      :active="active"
+      type="line"
+      line-width="30px"
+      line-height="1px"
+      @click="childChange"
+    >
+      <!-- 子目录 -->
+      <van-tab
+        v-for="(tabItem, tabIndex) in learnChildList"
+        :key="tabIndex"
+        :title="tabItem.name"
+        :title-style="titleStyle"
+      >
+        <van-list
+          v-model="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="onLoad"
+        >
+          <van-cell
+            v-for="(contentItem, contentIndex) in contentList"
+            :key="contentIndex"
+            :title="contentItem.name"
+            @click="chooseContent(contentIndex)"
+          />
+        </van-list>
+      </van-tab>
+    </van-tabs>
+  </div>
+</template>
+
+<script>
+import { pathParams } from "@/utils/tools";
+export default {
+  name: "page-learn-child",
+  components: {},
+  props: {
+    learnChildList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      active: 0,
+      choosedChildIndex: 0,
+      titleStyle: {
+        fontSize: "10px"
+      },
+      contentList: [],
+      loading: false,
+      finished: false
+    };
+  },
+  computed: {},
+  created() {},
+  mounted() {},
+  watch: {
+    //   第一次加载内容
+    "learnChildList.length": {
+      handler(newValue, oldValue) {
+        if (oldValue === 0 && newValue !== 0) {
+          this.getChildList();
+        }
+      }
+    }
+  },
+  methods: {
+    childChange(index) {
+      this.finished = false;
+      this.choosedChildIndex = index;
+      this.getChildList();
+    },
+    //   查询子目录
+    getChildList() {
+      let path = {
+        categoryId: this.learnChildList[this.choosedChildIndex].id
+      };
+      this.$_http
+        .get(pathParams(this.$_API.JTXT_GET_CATEGORIES_CATEGROYID, path))
+        .then(res => {
+          this.contentList = res.data;
+          //   移除第一个
+          this.contentList.shift();
+          console.log("--child--" + JSON.stringify(this.contentList));
+          this.finished = true;
+        })
+        .catch(() => {
+          this.$store.commit("toggleLoading", false);
+        });
+    },
+    onLoad() {},
+    chooseContent(index) {
+      this.$router.push({ name: "learn-content" });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/mixin";
+.contentBody {
+  background-color: #fff;
+}
+</style>

src/views/home/learn/page-learn-content.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <van-nav-bar title="学习" left-arrow @click-left="onClickLeft" />
+  </div>
+</template>
+
+<script>
+// import { pathParams } from "@/utils/tools";
+export default {
+  name: "page-learn-content",
+  components: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  created() {},
+  mounted() {
+    console.log("======学习页面");
+  },
+  methods: {
+    onClickLeft() {
+      this.$router.back();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/home/learn/page-learn.vue

@@ -1,82 +1,72 @@
 <template>
-  <div class="scroll">
-    <div>
-      <van-tabs :active="active" @click="tabChange">
-        <van-tab
-          v-for="(item, index) in learnModuleList"
-          :key="index"
-          :title="item.title"
-        >
-          <van-list
-            v-model="loading"
-            :finished="finished"
-            finished-text="没有更多了"
-            @load="onLoad"
-          >
-            <van-cell v-for="item in item.content" :key="item" :title="item" />
-          </van-list>
-        </van-tab>
-      </van-tabs>
-    </div>
+  <div>
+    <van-tabs :active="active" @click="rootChange">
+      <!-- 根目录 -->
+      <van-tab
+        v-for="(item, index) in learnRootList"
+        :key="index"
+        :title="item.name"
+      >
+        <page-learn-child :learnChildList="learnChildList"> </page-learn-child>
+      </van-tab>
+    </van-tabs>
   </div>
 </template>
 
 <script>
+import { pathParams } from "@/utils/tools";
+import PageLearnChild from "./page-learn-child";
 export default {
   name: "page-learn",
-  components: {},
+  components: { PageLearnChild },
   data() {
     return {
       active: 0,
-      learnModuleList: [
-        { title: "推荐", code: "recommend", content: [] },
-        { title: "实践", code: "practice", content: [] },
-        { title: "百科", code: "encyclopedia", content: [] },
-        { title: "推荐", code: "recommend", content: [] },
-        { title: "实践", code: "practice", content: [] },
-        { title: "百科", code: "encyclopedia", content: [] },
-        { title: "推荐", code: "recommend", content: [] },
-        { title: "实践", code: "practice", content: [] },
-        { title: "百科", code: "encyclopedia", content: [] }
-      ],
-      choosedTabIndex: 0,
-      choosedTabTitle: "推荐",
-      loading: true,
-      finished: false
+      learnRootList: [],
+      choosedRootIndex: 0,
+      learnChildList: []
     };
   },
   computed: {},
-  created() {
-    this.onLoad();
+  created() {},
+  mounted() {
+    this.getLearnRootList();
   },
-  mounted() {},
   methods: {
-    tabChange(index, title) {
-      this.choosedTabIndex = index;
-      this.choosedTabTitle = title;
-      console.log("---index--" + index + "--title--" + title);
-      this.initLoadStatus();
-      this.onLoad();
+    //   查询学习根目录
+    getLearnRootList() {
+      this.$_http
+        .get(this.$_API.JTXT_GET_CATEGORIES)
+        .then(res => {
+          this.learnRootList = res.data;
+          console.log("--root--" + JSON.stringify(this.learnRootList));
+          //   查询子目录
+          this.getChildList();
+        })
+        .catch(() => {
+          this.$store.commit("toggleLoading", false);
+        });
     },
-    initLoadStatus() {
-      this.loading = true;
-      this.finished = false;
+    //   查询子目录
+    getChildList() {
+      let path = {
+        categoryId: this.learnRootList[this.choosedRootIndex].id
+      };
+      this.$_http
+        .get(pathParams(this.$_API.JTXT_GET_CATEGORIES_CATEGROYID, path))
+        .then(res => {
+          this.learnChildList = res.data;
+          //   移除第一个根目录
+          this.learnChildList.shift();
+        })
+        .catch(() => {
+          this.$store.commit("toggleLoading", false);
+        });
     },
-    onLoad() {
-      // 异步更新数据
-      setTimeout(() => {
-        for (let i = 0; i < 10; i++) {
-          this.learnModuleList[this.choosedTabIndex].content.push(
-            this.choosedTabTitle + i
-          );
-        }
-        // 加载状态结束
-        this.loading = false;
-        // 数据全部加载完成
-        if (this.learnModuleList[this.choosedTabIndex].content.length >= 40) {
-          this.finished = true;
-        }
-      }, 1000);
+    // 切换根目录
+    rootChange(index, title) {
+      this.choosedRootIndex = index;
+      this.getChildList();
     }
   }
 };