update

src/components/headBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="head-container">
-    <div class="back" v-if="isBack"></div>
+    <div class="back" v-if="isBack" @click="back"></div>
     <div class="head-box" :style="{ padding: isBack ? '0 1.5rem' : '0 .5rem' }">
       <slot name="title"></slot>
     </div>
@@ -17,6 +17,12 @@ export default {
   },
   data() {
     return {}
+  },
+  methods: {
+    back() {
+      // this.$router.go(-1)
+      this.$emit('back')
+    }
   }
 }
 </script>

src/components/refresh.vue

@@ -1,89 +1,71 @@
 <template>
-  <div class="home-container">
-    <!-- 头部区域 -->
-    <van-nav-bar title="长列表" fixed />
-
-    <!-- 导入，注册，并使用 ArticleInfo 组件 -->
-    <!-- 在使用组件的时候，如果某个属性名是“小驼峰”形式，则绑定属性的时候，建议改写成“连字符”格式。例如： -->
-    <!-- cmtCount 建议写成 cmt-count -->
-    <van-pull-refresh v-model="isLoading" :disabled="finished" @refresh="onRefresh">
-      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
-        <ArticleInfo
-          v-for="item in artlist"
-          :key="item.id"
-          :title="item.title"
-          :author="item.aut_name"
-          :cmt-count="item.comm_count"
-          :time="item.pubdate"
-          :cover="item.cover"
-        ></ArticleInfo>
+  <div class="refresh-container">
+    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
+      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" style="margin-top:5px">
+        <slot name="data"></slot>
       </van-list>
     </van-pull-refresh>
   </div>
 </template>
 
 <script>
-import { getArticleListAPI } from '@/api/articleAPI.js'
-import ArticleInfo from '@/components/Article/ArticleInfo.vue'
-
 export default {
-  name: 'Home',
+  name: 'Refresh',
   data() {
     return {
       page: 1,
       limit: 10,
-      artlist: [],
-      loading: true, // 是否正在加载下一页数据
+      alist: [],
+      loading: false, // 是否正在加载下一页数据
       finished: false, // 所有数据是否加载完毕
       isLoading: false // 是否正在下拉刷新
     }
   },
   created() {
-    this.initArticleList()
+    this.getData()
   },
   methods: {
     // 封装获取文章列表数据的方法
-    async initArticleList(isRefresh) {
-      const { data: res } = await getArticleListAPI(this.page, this.limit)
-
-      // 拼接列表数据
-      if (isRefresh) {
-        // 下拉刷新
-        this.artlist = [...res, ...this.artlist]
-        this.isLoading = false
-      } else {
-        // 上拉加载
-        this.artlist = [...this.artlist, ...res]
-        this.loading = false
-      }
-
-      if (res.length === 0) {
-        // 证明没有下一页数据了
-        this.finished = true
-      }
+    async getData(isRefresh) {
+      await this.$emit('getData', this.page, this.limit, res => {
+        // 拼接列表数据
+        if (isRefresh) {
+          this.isLoading = false
+          // 下拉刷新
+          this.alist = res
+        } else {
+          this.loading = false
+          // 上拉加载
+          this.alist = [...this.alist, ...res]
+        }
+        this.$emit('update:list', this.alist)
+        if (res.length === 0) {
+          // 证明没有下一页数据了
+          this.finished = true
+        }
+      })
     },
 
     // 上拉加载
     onLoad() {
+      this.loading = true
       console.log('触发了 load 事件！')
       this.page++
-      this.initArticleList()
+      this.getData()
     },
     // 下拉刷新
     onRefresh() {
+      this.isLoading = true
       console.log('触发了下拉刷新！')
-      this.page++
-      this.initArticleList(true)
+      this.page = 1
+      this.getData(true)
     }
-  },
-  components: {
-    ArticleInfo
   }
 }
 </script>
 
-<style lang="less" scoped>
-.home-container {
-  padding: 46px 0 50px 0;
+<style lang="scss" scoped>
+.refresh-container {
+  padding: 0px 0 10px 0;
 }
 </style>

src/permission.js

@@ -40,7 +40,11 @@ router.beforeEach(async(to, from, next) => {
           await store.commit('user/SET_USERINFO', data)
           const courseId = store.getters.courseId
           // // 根据角色生成可访问的路线图
-          next({ ...to, query: { courseid: courseId }, replace: true })
+          if (courseId) {
+            next({ ...to, query: { courseid: courseId }, replace: true })
+          } else {
+            next({ ...to, replace: true })
+          }
         } catch (error) {
           // remove token and go to login page to re-login
           await store.dispatch('user/resetToken')

src/router/router.config.js

@@ -5,7 +5,7 @@
 export const constantRouterMap = [
   {
     path: '/',
-    redirect: '/course'
+    redirect: '/home'
   },
   {
     path: '/login',
@@ -22,5 +22,26 @@ export const constantRouterMap = [
       title: '课程',
       keepAlive: false
     }
+  },
+  {
+    path: '/',
+    component: () => import('@/views/layouts'),
+    meta: { title: '课程中心', keepAlive: false },
+    children: [
+      {
+        path: 'home',
+        name: 'home',
+        component: () => import('@/views/home/index'),
+        meta: { title: '课程中心', keepAlive: false }
+      }
+    ]
+  },
+  {
+    path: '/courseDetail',
+    component: () => import('@/views/courseDetail/index'),
+    meta: {
+      title: '课程详情',
+      keepAlive: false
+    }
   }
 ]

src/store/modules/user.js

@@ -75,9 +75,9 @@ const actions = {
           resolve(_user.userid)
         })
         .catch(error => {
-          // var _user = { userid: '5943e08c-b7d4-11ed-8d51-005056b86db5' }
-          // setToken(_user.userid)
-          // resolve(_user.userid)
+          var _user = { userid: '5943e08c-b7d4-11ed-8d51-005056b86db5' }
+          setToken(_user.userid)
+          resolve(_user.userid)
           reject(error)
         })
     })

src/views/course/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="course-container">
-    <head-bar :isBack="false">
+    <head-bar @back="back">
       <template #title>
         <div class="course-nav-box">
           <span class="list" @click="navCheck"></span>
@@ -133,6 +133,10 @@ export default {
     },
     nextOrpreSteps(t) {
       this.$refs.navbox.nextOrpreSteps(t)
+    },
+    back() {
+      // eslint-disable-next-line prettier/prettier
+      this.$router.push({ path: '/courseDetail', query: { courseid: this.courseid }})
     }
   },
   created() {
@@ -155,7 +159,7 @@ export default {
     // padding-left: 0.8rem;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
     font-size: 16px;
     > span {
       cursor: pointer;
@@ -166,11 +170,11 @@ export default {
       // background: #fff;
       background-image: url(../../assets/images/course/list.png);
       background-size: cover;
-      position: absolute;
-      left: 0;
+      // position: absolute;
+      // left: 0;
     }
     .next {
-      margin: 0 1rem;
+      // margin: 0 1rem;
     }
   }
   .course-box {

src/views/courseDetail/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <head-bar @back="back">
+      <template #title>
+        <div>
+          课程名字
+        </div>
+      </template>
+    </head-bar>
+  </div>
+</template>
+
+<script>
+import headBar from '@/components/headBar.vue'
+export default {
+  components: {
+    headBar
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    back() {
+      this.$router.push({ path: '/home' })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/home/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <head-bar :isBack="false">
+      <template #title>
+        <div>
+          搜索框样式
+        </div>
+      </template>
+    </head-bar>
+  </div>
+</template>
+
+<script>
+import headBar from '@/components/headBar.vue'
+export default {
+  components: {
+    headBar
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/layouts/index.vue

@@ -20,19 +20,19 @@ export default {
     return {
       tabbars: [
         {
-          title: '首页',
+          title: '学习中心',
           to: {
-            name: 'Home'
+            path: '/home'
           },
           icon: 'home-o'
-        },
-        {
-          title: '关于我',
-          to: {
-            name: 'About'
-          },
-          icon: 'user-o'
         }
+        // {
+        //   title: '关于我',
+        //   to: {
+        //     path: 'About'
+        //   },
+        //   icon: 'user-o'
+        // }
       ]
     }
   },