Merge branch 'master' of https://gitlab.ezijing.com/ezijing/transport

.config.dev.js

@@ -7,7 +7,8 @@ module.exports = {
       'CKEDITOR': 'window.CKEDITOR',
       'Base64': 'window.Base64',
       'md5': 'window.md5',
-      'regeneratorRuntime': 'window.regeneratorRuntime'
+      'regeneratorRuntime': 'window.regeneratorRuntime',
+      'wx': 'window.wx',
     },
     devServer: {
       proxy: {

.eslintrc

 {
   "extends": "standard",
-  "plugins": [
-    "html"
-  ],
+  "plugins": ["html"],
   "parser": "vue-eslint-parser",
   "parserOptions": {
     "parser": "babel-eslint",
@@ -19,6 +17,7 @@
     "md5": false,
     "$": false,
     "window": false,
-    "webConf": false
+    "webConf": false,
+    "wx": false
   }
 }

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "lint": "eslint --ext .js --ext .jsx --ext .vue src/",
     "lint:fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/",
-    "dev": "cross-env NODE_ENV=development SERVER_PORT=3001 webpack-dev-server --inline --progress --config build/webpack.client.conf.js",
+    "dev": "cross-env NODE_ENV=development SERVER_PORT=3002 webpack-dev-server --inline --progress --config build/webpack.client.conf.js",
     "build:test": "cross-env NODE_ENV=test webpack --progress --config build/webpack.client.conf.js && cross-env NODE_ENV=test n use 8.11.3 ./build/uploadAliyunCDN.js",
     "build:pro": "cross-env NODE_ENV=production webpack --progress --config build/webpack.client.conf.js && cross-env NODE_ENV=production n use 8.11.3 ./build/uploadAliyunCDN.js"
   },
@@ -71,12 +71,14 @@
     "promise.prototype.finally": "^3.1.2",
     "regenerator": "^0.14.4",
     "swiper": "^5.4.5",
+    "vant": "^2.8.7",
     "vue": "^2.6.11",
     "vue-awesome-swiper": "^4.1.1",
     "vue-i18n": "^8.16.0",
     "vue-loader": "^15.9.1",
     "vue-meta-info": "^0.1.7",
     "vue-router": "^3.1.6",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.11",
+    "vuex": "^3.4.0"
   }
 }

src/api/course.js

+import BaseAPI from '@/api/base_api'
+
+const httpRequest = new BaseAPI(webConf)
+
+/**
+ * 获取免费课程列表
+ */
+export function getFreeCourseList() {
+  return httpRequest.get('/zy/v2/education/freecourse')
+}
+
+/**
+ * 获取课程列表
+ */
+export function getCourseList() {
+  return httpRequest.get('/zy/v2/education/courses/list')
+}
+
+/**
+ * 获取课程详情
+ * @param {string} courseId 课程ID
+ */
+export function getCourse(courseId) {
+  return httpRequest.get(`/zy/v2/education/courses/${courseId}`)
+}
+
+/**
+ * 获取课程知识点
+ * @param {string} courseId 课程ID
+ */
+export function getCourseTag(courseId) {
+  return httpRequest.get(`/zy/v2/education/tag/tree/${courseId}`)
+}
+
+/**
+ * 获取搜索记录
+ */
+export function getSearchTips() {
+  return httpRequest.get('/zy/v2/education/search/tips')
+}
+
+/**
+ * 知识点搜索
+ */
+export function getTagSearchList(data) {
+  return httpRequest.post('/zy/v2/education/search/tag', data, {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
+  })
+}
+
+/**
+ * 视频课程搜索
+ */
+export function getCourseVideoSearchList(data) {
+  return httpRequest.post('/zy/v2/education/search/chapter1', data, {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
+  })
+}
+
+/**
+ * 课程搜索
+ */
+export function getCourseSearchList(data) {
+  return httpRequest.post('/zy/v2/education/search/chapter2', data, {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
+  })
+}

src/app.vue

 <template>
-  <div style="width: 100%;">
+  <div style="width: 100%;" id="app">
     <router-view></router-view>
   </div>
 </template>
 
 <script>
-export default {
-
-}
+export default {}
 </script>
 
 <style lang="scss" scoped>
-
+#app {
+  max-width: 750px;
+  margin: 0 auto;
+}
 </style>

src/assets/rem/rem.js

@@ -5,7 +5,7 @@
     var wWidth = (win.screen.width > 0)
       ? ((win.innerWidth >= win.screen.width || win.innerWidth === 0) ? win.screen.width : win.innerWidth)
       : win.innerWidth
-    var wFsize = (wWidth > 640 ? 640 : wWidth) / 750 * 100
+    var wFsize = (wWidth > 750 ? 750 : wWidth) / 750 * 100
     doc.documentElement.style.fontSize = wFsize + 'px'
   }
   win.addEventListener(resize, resizeRoot, false)

src/components/Card.vue

+<template>
+  <div class="card">
+    <div class="card-hd">
+      <h3 class="card-hd__title">{{ title }}</h3>
+      <div class="card-hd__aside">
+        <slot name="aside"></slot>
+      </div>
+    </div>
+    <div class="card-bd">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Card',
+  props: {
+    title: String
+  }
+}
+</script>
+
+<style lang="scss">
+.card-hd {
+  display: flex;
+  justify-content: space-between;
+}
+.card-hd__title {
+  margin: 0;
+  padding-bottom: 0.1rem;
+  font-size: 0.3rem;
+  font-weight: 600;
+  color: #333;
+  border-bottom: 0.06rem solid #2b7ce9;
+}
+</style>

src/components/CourseItem.vue

+<template>
+  <div class="course-item" @click="onClick(data)">
+    <div class="course-item-pic" v-if="curriculum.curriculum_picture">
+      <img :src="curriculum.curriculum_picture" />
+    </div>
+    <div class="course-item-content">
+      <h3 class="course-item__title">{{data.course_name}}</h3>
+      <div class="course-item__text" v-html="curriculum.curriculum_represent"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CourseItem',
+  props: {
+    data: { type: Object, required: true }
+  },
+  computed: {
+    curriculum() {
+      return this.data.curriculum
+    }
+  },
+  methods: {
+    onClick(data) {
+      this.$router.push({
+        name: 'courseLearnItem',
+        params: { id: data.course_id }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.course-item {
+  display: flex;
+  padding: 0.2rem 0;
+  border-bottom: 1px solid #f1f1f1;
+}
+.course-item-content {
+  flex: 1;
+}
+.course-item-pic {
+  width: 2.4rem;
+  height: 1.35rem;
+  border-radius: 6px;
+  overflow: hidden;
+  margin-right: 0.2rem;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+.course-item__title {
+  margin: 0;
+  font-size: 0.3rem;
+  font-weight: 400;
+  color: #222;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.course-item__text {
+  margin: 0.37rem 0 0 0;
+  font-size: 0.26rem;
+  color: #999;
+}
+</style>

src/components/FreeCourseItem.vue

+<template>
+  <div class="course-item" @click="onClick(data)">
+    <div class="course-item-content">
+      <h3 class="course-item__title">{{data.course_name}}</h3>
+      <p class="course-item__text" v-if="data.describe">{{data.describe}}</p>
+    </div>
+    <div class="course-item-pic" v-if="data.image_url">
+      <img :src="data.image_url" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CourseItem',
+  props: {
+    data: { type: Object, required: true }
+  },
+  methods: {
+    onClick(data) {
+      if (this.isWeapp) {
+        wx.miniProgram.navigateTo(`/pages/course/item?id=${data.course_id}`)
+      } else {
+        window.alert('请在微信小程序中打开')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.course-item {
+  display: flex;
+  padding: 0.2rem 0;
+  border-bottom: 1px solid #f1f1f1;
+}
+.course-item-content {
+  flex: 1;
+}
+.course-item-pic {
+  width: 2.4rem;
+  height: 1.35rem;
+  border-radius: 6px;
+  overflow: hidden;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+.course-item__title {
+  margin: 0;
+  font-size: 0.3rem;
+  font-weight: 400;
+  color: #222;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.course-item__text {
+  margin: 0.37rem 0 0 0;
+  font-size: 0.26rem;
+  color: #999;
+}
+</style>

src/components/SearchBar.vue

+<template>
+  <div class="search-bar">
+    <form action @submit.prevent="onSearch">
+      <input
+        type="search"
+        class="search-input"
+        :placeholder="placeholder"
+        v-model="currentValue"
+        v-bind="$attrs"
+        @input="onChange"
+        ref="formInput"
+      />
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: String,
+    focus: { type: Boolean, default: false },
+    placeholder: { type: String, default: '全国道路运输安全生产管理培训' }
+  },
+  data() {
+    return {
+      currentValue: this.value,
+      debounced: null
+    }
+  },
+  watch: {
+    value(value) {
+      this.currentValue = value
+    }
+  },
+  computed: {
+    formInput() {
+      return this.$refs.formInput
+    }
+  },
+  methods: {
+    bindFocus() {
+      this.formInput.focus()
+    },
+    onChange() {
+      this.$emit('input', this.currentValue)
+      this.$emit('change', this.currentValue)
+    },
+    onSearch() {
+      this.$emit('search', this.currentValue)
+    }
+  },
+  mounted() {
+    this.bindFocus()
+  }
+}
+</script>
+
+<style lang="scss">
+.search-bar {
+  padding: 0.4rem 0;
+}
+.search-input {
+  display: block;
+  width: 100%;
+  padding: 0.2rem 0.2rem 0.2rem 0.9rem;
+  height: 0.66rem;
+  font-size: 0.26rem;
+  line-height: 1;
+  background: #f7f7f7 url('~@/assets/images/icon_search.png') no-repeat 0.4rem
+    center;
+  background-size: 0.31rem;
+  border: 0;
+  border-radius: 0.1rem;
+  outline: none;
+}
+</style>

src/index.html

@@ -4,11 +4,12 @@
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta content="origin" name="referrer">
-  <title>标题</title>
+  <title></title>
   <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
 </head>
 <body>
   <div id="app"></div>
+  <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
   <!-- es5 兼容 新方法 -->
   <script type="text/javascript" src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/compatible/es5-shim.min.js"></script>
   <script type="text/javascript" src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/compatible/es5-sham.min.js"></script>

src/main.js

 import Vue from 'vue' // 引入vue框架
 import VueRouter from 'vue-router' // 使用 vue-router
 import createRouter from './router' // router定义
+import store from '@/store'
 import VueI18n from 'vue-i18n' // 使用 国际化
 import createI18n from './assets/languages' // 国际化定义
 
@@ -11,7 +12,12 @@ import MetaInfo from 'vue-meta-info'
 import Element from 'element-ui'
 import modules from './modules'
 
-import createBefore from './components/beforeEnter'
+// vant
+import Vant from 'vant'
+import 'vant/lib/index.css'
+
+Vue.use(Vant)
+// import createBefore from './components/beforeEnter'
 
 /* 兼容处理 start */
 /* 处理低版本浏览器支持axios finally问题 */
@@ -39,11 +45,16 @@ window.G = Vue.prototype.$GLOBAL = {
 Vue.prototype.VueEvent = new Vue()
 
 /* 创建实例之前，通过导航守卫，处理部分逻辑，如：是否直接进入系统 */
-const before = createBefore()
+// const before = createBefore()
 /* 导航守卫 */
 router.beforeEach((to, from, next) => {
-  before.update(to, from, next)
+  // before.update(to, from, next)
   next()
 })
 
-window.G.$instance_vue = new Vue({ router, i18n, render: (h) => h(App) }).$mount('#app')
+window.G.$instance_vue = new Vue({
+  store,
+  router,
+  i18n,
+  render: h => h(App)
+}).$mount('#app')

src/pages/course/learn/courseChapter.vue

+<template>
+  <van-collapse v-model="activeNames">
+    <van-collapse-item :title="item.name" :name="item.id" v-for="item in data" :key="item.id">
+      <ul>
+        <li v-for="subItem in item.children" :key="subItem.id">{{subItem.name}}</li>
+      </ul>
+    </van-collapse-item>
+  </van-collapse>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      activeNames: []
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .van-cell {
+  padding-left: 0;
+  padding-right: 0;
+}
+::v-deep .van-collapse-item__content {
+  padding: 0;
+}
+::v-deep .van-collapse-item--border::after {
+  left: 0;
+  right: 0;
+}
+::v-deep .van-collapse-item__title--expanded::after {
+  display: none;
+}
+li {
+  padding: 10px 0;
+}
+</style>

src/pages/course/learn/courseTag.vue

+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  props: {},
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/pages/course/learn/index.vue

+<template>
+  <div class="main-container">
+    <course-item v-for="item in courseList" :data="item" :key="item.course_id"></course-item>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/course.js'
+import CourseItem from '@/components/CourseItem.vue'
+
+export default {
+  name: 'Course',
+  components: { CourseItem },
+  metaInfo: {
+    title: '课程学习'
+  },
+  data() {
+    return {
+      courseList: []
+    }
+  },
+  methods: {
+    getCourseList() {
+      api.getCourseList().then(response => {
+        this.courseList = response
+      })
+    }
+  },
+  beforeMount() {
+    this.getCourseList()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/pages/course/learn/item.vue

+<template>
+  <div class="main-container">
+    <div class="course-title">{{detail.course_name}}</div>
+    <van-tabs
+      class="main-tabs"
+      v-model="tabActive"
+      color="#2b7ce9"
+      :line-height="2"
+      @click="onTabClick"
+    >
+      <van-tab title="课程学习" name="0">
+        <course-chapter :data="detail.chapters"></course-chapter>
+      </van-tab>
+      <van-tab title="知识点速学" name="1">
+        <course-tag></course-tag>
+      </van-tab>
+    </van-tabs>
+  </div>
+</template>
+
+<script>
+import CourseChapter from './courseChapter.vue'
+import CourseTag from './courseTag.vue'
+import * as api from '@/api/course.js'
+export default {
+  name: 'CourseLearnItem',
+  components: { CourseChapter, CourseTag },
+  metaInfo: {
+    title: '课程内容'
+  },
+  data() {
+    return {
+      tabActive: '0',
+      detail: {}
+    }
+  },
+  watch: {
+    $route: {
+      immediate: true,
+      handler(route) {
+        this.tabActive = route.query.tab || '0'
+      }
+    }
+  },
+  computed: {
+    courseId() {
+      return this.$route.params.id
+    }
+  },
+  methods: {
+    onTabClick(name) {
+      // this.$router.replace({ query: { tab: name } })
+    },
+    // 课程学习
+    getCourse() {
+      api.getCourse(this.courseId).then(response => {
+        this.detail = response
+      })
+    },
+    // 知识点速学
+    getCourseTag() {
+      api.getCourseTag(this.courseId).then(response => {
+        console.log(response)
+      })
+    }
+  },
+  beforeMount() {
+    this.getCourse()
+    this.getCourseTag()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.course-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #222;
+  padding: 20px 0 10px;
+}
+</style>

src/pages/home/index.vue

+<template>
+  <div class="main-container">
+    <search-bar readonly @click.native="toSearch"></search-bar>
+    <div class="banner">
+      <van-swipe class="banner-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../../assets/images/banner.png" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../../assets/images/banner.png" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <ul class="nav-list">
+        <li class="nav-item" @click="onClickNav('courseLearn')">
+          <img src="../../assets/images/home_menu_01.png" alt="课程学习" />
+        </li>
+        <li class="nav-item" @click="onClickNav('courseTest')">
+          <img src="../../assets/images/home_menu_02.png" alt="课程测验" />
+        </li>
+        <li class="nav-item">
+          <img src="../../assets/images/home_menu_03.png" alt="模拟考试" />
+        </li>
+      </ul>
+    </div>
+    <card title="课程试听">
+      <free-course-item v-for="item in courseList" :data="item" :key="item.course_id"></free-course-item>
+    </card>
+  </div>
+</template>
+<script>
+import SearchBar from '@/components/SearchBar.vue'
+import Card from '@/components/Card.vue'
+import FreeCourseItem from '@/components/FreeCourseItem.vue'
+import * as api from '@/api/course.js'
+
+export default {
+  name: 'Index',
+  components: { SearchBar, Card, FreeCourseItem },
+  metaInfo: {
+    title: '道路运输安全知识学习'
+  },
+  data() {
+    return {
+      courseList: [] // 免费课程列表
+    }
+  },
+  methods: {
+    // 获取课程试听列表
+    getCourseList() {
+      api.getFreeCourseList().then(response => {
+        this.courseList = response
+      })
+    },
+    // 搜索
+    toSearch() {
+      this.$router.push({ name: 'search' })
+    },
+    // 点击导航
+    onClickNav(name) {
+      this.$router.push({ name })
+    }
+  },
+  beforeMount() {
+    this.getCourseList()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.banner {
+  height: 2.4rem;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+.nav {
+  padding: 0.4rem 0;
+}
+.nav-list {
+  display: flex;
+  justify-content: space-between;
+  padding: 0;
+  list-style: none;
+}
+.nav-item {
+  width: 2rem;
+  height: 2rem;
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/pages/search/courseList.vue

+<template>
+  <div class="list">
+    <van-list v-model="loading" :finished="finished" @load="onLoad" v-if="list.length"></van-list>
+    <template v-else>
+      <slot name="empty">
+        <div class="empty">暂时没有内容哦，去别处看看吧～</div>
+      </slot>
+    </template>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/course.js'
+export default {
+  name: 'CourseList',
+  props: {
+    params: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    showIndex: { type: Boolean, default: false }
+  },
+  data() {
+    return {
+      list: [],
+      loading: false,
+      finished: false,
+      requestParams: { offset: 0, limit: 20 }
+    }
+  },
+  watch: {
+    params: {
+      immediate: true,
+      handler(value) {
+        this.requestParams = Object.assign({}, this.requestParams, value)
+      }
+    }
+  },
+  methods: {
+    getList() {
+      this.loading = true
+      api
+        .getCourseSearchList(this.requestParams)
+        .then(response => {
+          if (response.length) {
+            this.list = this.list.concat(response)
+          }
+          this.loading = false
+          this.finished = response.length !== this.requestParams.limit
+        })
+        .catch(() => {
+          this.loading = false
+          this.finished = true
+        })
+    },
+    onLoad() {
+      this.requestParams.offset =
+        this.requestParams.offset + this.requestParams.limit
+      this.getList()
+    },
+    // 刷新
+    refresh() {
+      this.requestParams.offset = 0
+      this.list = []
+      this.getList()
+    }
+  },
+  beforeMount() {
+    this.getList()
+  }
+}
+</script>

src/pages/search/index.vue

+<template>
+  <div class="main-container">
+    <search-bar v-model="searchValue"></search-bar>
+    <div class="search-tips">
+      <div class="search-tips-item" v-if="historyList.length">
+        <h3 class="search-tips__title">搜索历史</h3>
+        <ul class="search-tips__list">
+          <li
+            v-for="(item, index) in historyList"
+            :key="index"
+            @click="changeSearchValue(item)"
+          >{{item}}</li>
+        </ul>
+      </div>
+      <div class="search-tips-item" v-if="featureList.length">
+        <h3 class="search-tips__title">搜索发现</h3>
+        <ul class="search-tips__list">
+          <li
+            v-for="(item, index) in featureList"
+            :key="index"
+            @click="changeSearchValue(item)"
+          >{{item}}</li>
+        </ul>
+      </div>
+    </div>
+    <div class="search-main">
+      <van-tabs
+        class="main-tabs"
+        v-model="tabActive"
+        color="#2b7ce9"
+        :line-height="2"
+        @click="onTabClick"
+      >
+        <van-tab title="知识点" name="0">
+          <tag-list :params="{ keyworks: searchValue }" ref="list" v-if="tabActive === '0'">
+            <template #empty>
+              <div class="search-empty">暂时没有内容哦，换个搜索词试试吧～</div>
+            </template>
+          </tag-list>
+        </van-tab>
+        <van-tab title="视频课程" name="1">
+          <video-list :params="{ keyworks: searchValue }" ref="list" v-if="tabActive === '1'">
+            <template #empty>
+              <div class="search-empty">暂时没有内容哦，换个搜索词试试吧～</div>
+            </template>
+          </video-list>
+        </van-tab>
+        <van-tab title="课程" name="2">
+          <course-list :params="{ keyworks: searchValue }" ref="list" v-if="tabActive === '2'">
+            <template #empty>
+              <div class="search-empty">暂时没有内容哦，换个搜索词试试吧～</div>
+            </template>
+          </course-list>
+        </van-tab>
+      </van-tabs>
+    </div>
+  </div>
+</template>
+<script>
+// components
+import SearchBar from '@/components/SearchBar.vue'
+import TagList from './tagList.vue'
+import VideoList from './videoList.vue'
+import CourseList from './courseList.vue'
+// api
+import * as api from '@/api/course.js'
+
+export default {
+  name: 'SearchIndex',
+  components: { SearchBar, TagList, VideoList, CourseList },
+  metaInfo: {
+    title: '搜索'
+  },
+  data() {
+    return {
+      tabActive: '0',
+      searchValue: '',
+      featureList: [], // 搜索发现
+      historyList: [] // 搜索记录
+    }
+  },
+  watch: {
+    $route: {
+      immediate: true,
+      depp: true,
+      handler(route) {
+        this.tabActive = route.query.tab || '0'
+        this.searchValue = route.query.keywords || ''
+      }
+    }
+  },
+  methods: {
+    // 获取所搜记录
+    getSearchTips() {
+      api.getSearchTips().then(response => {
+        this.featureList = response.base_tips
+        this.historyList = response.tips
+      })
+    },
+    changeSearchValue(value) {
+      this.searchValue = value
+    },
+    onTabClick(name) {
+      this.$router.replace({ query: { tab: name, keywords: this.searchValue } })
+    },
+    onSearch() {
+      this.$router.replace({
+        query: { tab: this.tabActive, keywords: this.searchValue }
+      })
+    }
+  },
+  beforeMount() {
+    this.getSearchTips()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.search-tips-item {
+  clear: both;
+  overflow: hidden;
+}
+.search-tips__title {
+  font-size: 0.3rem;
+  color: #222;
+}
+.search-tips__list {
+  padding-top: 0.37rem;
+}
+.search-tips__list li {
+  display: inline-block;
+  font-size: 0.26rem;
+  color: #999;
+  margin-right: 0.4rem;
+  margin-bottom: 0.4rem;
+}
+</style>

src/pages/search/tagList.vue

+<template>
+  <div class="list">
+    <van-list v-model="loading" :finished="finished" @load="onLoad" v-if="list.length">
+      <activity-item
+        v-for="(item, index) in list"
+        :data="item"
+        :index="index"
+        :show-index="showIndex"
+        :key="item.id"
+      ></activity-item>
+    </van-list>
+    <template v-else>
+      <slot name="empty">
+        <div class="empty">暂时没有内容哦，去别处看看吧～</div>
+      </slot>
+    </template>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/course.js'
+export default {
+  name: 'TagList',
+  props: {
+    params: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    showIndex: { type: Boolean, default: false }
+  },
+  data() {
+    return {
+      list: [],
+      loading: false,
+      finished: false,
+      requestParams: { offset: 0, limit: 20 }
+    }
+  },
+  watch: {
+    params: {
+      immediate: true,
+      handler(value) {
+        this.requestParams = Object.assign({}, this.requestParams, value)
+      }
+    }
+  },
+  methods: {
+    getList() {
+      this.loading = true
+      api
+        .getTagSearchList(this.requestParams)
+        .then(response => {
+          if (response.length) {
+            this.list = this.list.concat(response)
+          }
+          this.loading = false
+          this.finished = response.length !== this.requestParams.limit
+        })
+        .catch(() => {
+          this.loading = false
+          this.finished = true
+        })
+    },
+    onLoad() {
+      this.requestParams.offset =
+        this.requestParams.offset + this.requestParams.limit
+      this.getList()
+    },
+    // 刷新
+    refresh() {
+      this.requestParams.offset = 0
+      this.list = []
+      this.getList()
+    }
+  },
+  beforeMount() {
+    this.getList()
+  }
+}
+</script>

src/pages/search/videoList.vue

+<template>
+  <div class="list">
+    <van-list v-model="loading" :finished="finished" @load="onLoad" v-if="list.length">
+      <activity-item
+        v-for="(item, index) in list"
+        :data="item"
+        :index="index"
+        :show-index="showIndex"
+        :key="item.id"
+      ></activity-item>
+    </van-list>
+    <template v-else>
+      <slot name="empty">
+        <div class="empty">暂时没有内容哦，去别处看看吧～</div>
+      </slot>
+    </template>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/course.js'
+export default {
+  name: 'VideoList',
+  props: {
+    params: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    showIndex: { type: Boolean, default: false }
+  },
+  data() {
+    return {
+      list: [],
+      loading: false,
+      finished: false,
+      requestParams: { offset: 0, limit: 20 }
+    }
+  },
+  watch: {
+    params: {
+      immediate: true,
+      handler(value) {
+        this.requestParams = Object.assign({}, this.requestParams, value)
+      }
+    }
+  },
+  methods: {
+    getList() {
+      this.loading = true
+      api
+        .getCourseVideoSearchList(this.requestParams)
+        .then(response => {
+          if (response.length) {
+            this.list = this.list.concat(response)
+          }
+          this.loading = false
+          this.finished = response.length !== this.requestParams.limit
+        })
+        .catch(() => {
+          this.loading = false
+          this.finished = true
+        })
+    },
+    onLoad() {
+      this.requestParams.offset =
+        this.requestParams.offset + this.requestParams.limit
+      this.getList()
+    },
+    // 刷新
+    refresh() {
+      this.requestParams.offset = 0
+      this.list = []
+      this.getList()
+    }
+  },
+  beforeMount() {
+    this.getList()
+  }
+}
+</script>

src/router/routes.js

-
 export default [
-  { path: '/', redirect: '/test' },
+  { path: '/', redirect: '/index' },
   /* 测试页面 */
   { path: '/test', name: 'test', component: () => import('../pages/test.vue') },
   /* 能力自测 */
@@ -10,5 +9,29 @@ export default [
   /* 答题结果 */
   { path: '/course/answer-result', name: 'answer-result', component: () => import('../pages/courseTest/answerResult.vue') },
   /* 如果所有页面都没找到 - 指向 */
-  { path: '*', component: () => import('@/components/errorPages/404.vue') }
+  { path: '*', component: () => import('@/components/errorPages/404.vue') },
+  /* 首页 */
+  {
+    path: '/index',
+    name: 'index',
+    component: () => import('../pages/home/index.vue')
+  },
+  // 搜索
+  {
+    path: '/search',
+    name: 'search',
+    component: () => import('../pages/search/index.vue')
+  },
+  // 课程学习
+  {
+    path: '/course/learn',
+    name: 'courseLearn',
+    component: () => import('../pages/course/learn/index.vue')
+  },
+  // 课程学习详情
+  {
+    path: '/course/learn/:id',
+    name: 'courseLearnItem',
+    component: () => import('../pages/course/learn/item.vue')
+  }
 ]

src/store/index.js

+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    isWeapp: false,
+    user: {}
+  },
+  mutations: {
+    setUser(state, user) {
+      state.user = user
+    }
+  },
+  actions: {}
+})

src/style.scss

-html, body {
-  font-size: 14px; // 防止html根元素 影响本身DOM元素字体大小继承
-  padding: 0;
+html * {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  outline: none;
+  -webkit-text-size-adjust: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+p,
+blockquote,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+pre,
+form,
+fieldset,
+legend,
+button,
+input,
+textarea,
+th,
+td {
   margin: 0;
-  height: 100%;
-  width: 100%;
-  background: #eee;
-}
-/* 统一字体样式 */
-* {
-  font-family:
-    "Source Han Sans CN",
-    "PingFang SC",
-    -apple-system,
-    "Microsoft YaHei",
-    "Helvetica",
-    "Arial",
-    Verdana,
-    "Hiragino Sans GB",
-    "Wenquanyi Micro Hei",
-    sans-serif;
+  padding: 0;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 100%;
+}
+ul,
+ol,
+li {
+  list-style: none;
+}
+em,
+i {
+  font-style: normal;
+}
+strong,
+b {
+  font-weight: normal;
+}
+img {
+  border: none;
+}
+input,
+img {
+  vertical-align: middle;
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+input,
+button,
+select,
+textarea {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-appearance: none;
+  border: 0;
+  border-radius: 0;
+}
+textarea:focus {
+  outline: 0;
+}
+html {
+  font-size: 100px;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
+body {
+  font-size: 14px;
+  line-height: 1.4;
+  color: #222;
+  font-family: 'Source Han Sans CN', 'PingFang SC', -apple-system,
+    'Microsoft YaHei', 'Helvetica', 'Arial', Verdana, 'Hiragino Sans GB',
+    'Wenquanyi Micro Hei', sans-serif;
+  background-color: #eee;
 }
 
 /* Extra small devices (portrait phones, less than 576px) */
-@media (max-width: 575px) {}
+@media (max-width: 575px) {
+}
 
 /* Small devices (landscape phones, 576px and up) */
-@media (min-width: 576px) and (max-width: 767px) {}
+@media (min-width: 576px) and (max-width: 767px) {
+}
 
 /* Medium devices (tablets, 768px and up) */
-@media (min-width: 768px) and (max-width: 991px) {}
+@media (min-width: 768px) and (max-width: 991px) {
+}
 
 /* Large devices (desktops, 992px and up) */
-@media (min-width: 992px) and (max-width: 1199px) {}
+@media (min-width: 992px) and (max-width: 1199px) {
+}
 
 /* Extra large devices (large desktops, 1200px and up) */
-@media (min-width: 1200px) {}
+@media (min-width: 1200px) {
+}
 
 /* 改变主题色变量 */
 $--color-primary: #b80037;
 /* 改变 icon 字体路径变量，必需 */
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
 /* 引入element-ui对应scss文件，重新编译 */
-@import "~element-ui/packages/theme-chalk/src/index";
+@import '~element-ui/packages/theme-chalk/src/index';
 /* 引入隐藏显示样式 */
-@import "~element-ui/lib/theme-chalk/display.css";
+@import '~element-ui/lib/theme-chalk/display.css';
 
 /* 引入三方 自定义图标库，方法 vue -> 第三方 自建图标库 中有 */
-@import "~@/assets/font-icons/iconfont.css";
-[class^="el-icon-self-"], [class*="el-icon-self-"] {
-  font-family: "selfAllIcon" !important;
+@import '~@/assets/font-icons/iconfont.css';
+[class^='el-icon-self-'],
+[class*='el-icon-self-'] {
+  font-family: 'selfAllIcon' !important;
   font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+.main-container {
+  margin: 0 0.4rem;
+}
+.main-tabs .van-hairline--top-bottom::after {
+  border-top: 0;
+}