update

package.json

@@ -26,7 +26,7 @@
     "lodash": "^4.17.15",
     "nprogress": "^0.2.0",
     "regenerator-runtime": "^0.13.5",
-    "vant": "^2.4.7",
+    "vant": "^2.12.7",
     "vconsole": "^3.3.4",
     "vue": "^2.6.11",
     "vue-calendar-component": "^2.8.2",

src/assets/css/index.scss

@@ -10,7 +10,7 @@ body .app {
 }
 
 .app-container {
-  padding-bottom: 50px;
+  // padding-bottom: 50px;
 }
 
 #__vconsole {

src/components/headBar.vue

@@ -29,7 +29,7 @@ export default {
 
 <style lang="scss" scoped>
 .head-container {
-  height: 1.5rem;
+  height: 55px;
   width: 100%;
   background-image: url(../assets/images/course/head-back.png);
   position: fixed;

src/components/refresh.vue

@@ -11,9 +11,14 @@
 <script>
 export default {
   name: 'Refresh',
+  props: {
+    page: {
+      type: Number,
+      default: 1
+    }
+  },
   data() {
     return {
-      page: 1,
       limit: 10,
       alist: [],
       loading: false, // 是否正在加载下一页数据
@@ -27,7 +32,7 @@ export default {
   methods: {
     // 封装获取文章列表数据的方法
     async getData(isRefresh) {
-      await this.$emit('getData', this.page, this.limit, res => {
+      await this.$emit('getData', res => {
         // 拼接列表数据
         if (isRefresh) {
           this.isLoading = false
@@ -50,14 +55,14 @@ export default {
     onLoad() {
       this.loading = true
       console.log('触发了 load 事件！')
-      this.page++
+      this.$emit('update:page', this.page + 1)
       this.getData()
     },
     // 下拉刷新
     onRefresh() {
       this.isLoading = true
       console.log('触发了下拉刷新！')
-      this.page = 1
+      this.$emit('update:page', 1)
       this.getData(true)
     }
   }

src/plugins/vant.js

@@ -1,6 +1,19 @@
 // 按需全局引入 vant组件
 import Vue from 'vue'
-import { Button, List, Cell, Tabbar, TabbarItem, Notify, Field, CellGroup, Toast, Dialog } from 'vant'
+import {
+  Button,
+  List,
+  Cell,
+  Tabbar,
+  TabbarItem,
+  Notify,
+  Field,
+  CellGroup,
+  Toast,
+  Dialog,
+  PullRefresh,
+  Empty
+} from 'vant'
 Vue.use(Button)
   .use(Cell)
   .use(List)
@@ -11,3 +24,5 @@ Vue.use(Button)
   .use(CellGroup)
   .use(Toast)
   .use(Dialog)
+  .use(PullRefresh)
+  .use(Empty)

src/views/courseDetail/components/courseChap.vue

@@ -21,8 +21,7 @@
 export default {
   props: {
     chInfo: {
-      type: Array,
-      default: []
+      type: Array
     },
     brief: {
       type: String,
@@ -108,4 +107,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/views/courseDetail/components/courseMessage.vue

@@ -51,28 +51,23 @@
 export default {
   props: {
     cDetail: {
-      type: Object,
-      default: {}
+      type: Object
     },
     cInfo: {
-      type: Array,
-      default: []
+      type: Array
     },
     rwLength: {
       type: Number,
       default: 0
     },
     cType: {
-      type: Array,
-      default: []
+      type: Array
     },
     cJson: {
-      type: Object,
-      default: {}
+      type: Object
     },
     tName: {
-      type: Array,
-      default: []
+      type: Array
     }
   },
   data() {
@@ -180,4 +175,4 @@ $font: 14px;
     }
   }
 }
-</style>
+</style>

src/views/courseDetail/index.vue

@@ -47,6 +47,7 @@ export default {
       this.$router.push({ path: '/home' })
     },
     goToStudy() {
+      // eslint-disable-next-line object-curly-spacing
       this.$router.push({ path: '/course', query: { courseid: this.courseid } })
     },
     getCourse() {
@@ -61,7 +62,7 @@ export default {
           var c = res[2]
           for (var i = 0; i < b.length; i++) {
             for (var j = 0; j < a.length; j++) {
-              if (b[i].id == a[j].pid) {
+              if (b[i].id === a[j].pid) {
                 if (!this.courseTypeJson[b[i].name]) {
                   this.courseType.push(b[i].name)
                   this.courseTypeJson[b[i].name] = []

src/views/home/components/classFilter.vue

@@ -1,28 +1,28 @@
 <template>
   <div class="classBox">
     <div class="allType">
-      <div :class="{ isClickCss: isClick == 0 }" @click="cleanAllType">全部</div>
+      <div :class="{ isClickCss: isClick === 0 }" @click="cleanAllType">全部</div>
       <div v-for="(item, index) in CourseType[0]" :key="index" class="tNameBox">
-        <div :class="{ isClickCss: isClick == index + 1 }" @click="typeClick(item.id)">{{ item.name }}</div>
+        <div :class="{ isClickCss: isClick === index + 1 }" @click="typeClick(item.id)">{{ item.name }}</div>
       </div>
     </div>
-    <div v-if="isClick != 0 && isOpen == true">
+    <div v-if="isClick !== 0 && isOpen === true">
       <div class="childTypeBox">
         <div
           v-for="(item1, index1) in CourseTypeJson[cTypeId]"
           :key="index1"
-          :class="{ iscTypeClickCss: CourseChildType[cTypeId] == item1.id }"
+          :class="{ iscTypeClickCss: CourseChildType[cTypeId] === item1.id }"
         >
           <div @click="chooseChildType(item1.id)">
             {{ item1.name }}
           </div>
-          <div v-if="CourseChildType[cTypeId] == item1.id" class="checkIcon">
+          <div v-if="CourseChildType[cTypeId] === item1.id" class="checkIcon">
             <img src="../../../assets/images/home/checkIcon.png" alt="" />
           </div>
         </div>
       </div>
     </div>
-    <div v-if="isOpen == true" @click="isOpen = false"></div>
+    <div v-if="isOpen === true" @click="isOpen = false"></div>
   </div>
 </template>
 
@@ -47,7 +47,7 @@ export default {
   methods: {
     typeClick(id) {
       for (var i = 0; i < this.CourseType[0].length; i++) {
-        if (id == this.CourseType[0][i].id) {
+        if (id === this.CourseType[0][i].id) {
           this.isOpen = true
           this.isClick = i + 1
         }
@@ -55,7 +55,7 @@ export default {
       this.cTypeId = id
     },
     chooseChildType(id) {
-      if (this.CourseChildType[this.cTypeId] == id) {
+      if (this.CourseChildType[this.cTypeId] === id) {
         this.CourseChildType[this.cTypeId] = ''
       } else {
         this.CourseChildType[this.cTypeId] = id
@@ -69,12 +69,13 @@ export default {
       this.getAll()
     },
     getAll() {
+      this.$emit('update:zoneClass', [])
       this.$emit('getAll', this.CourseChildType)
     },
     getType() {
       const params = {
-        org: this.userinfo.org && this.userinfo.org != '' ? this.userinfo.org : '',
-        oid: this.userinfo.organizeid && this.userinfo.organizeid != '' ? this.userinfo.organizeid : ''
+        org: this.userinfo.org && this.userinfo.org !== '' ? this.userinfo.org : '',
+        oid: this.userinfo.organizeid && this.userinfo.organizeid !== '' ? this.userinfo.organizeid : ''
       }
       selectAllType(params)
         .then(res => {
@@ -83,15 +84,15 @@ export default {
             if (!this.CourseTypeJson[res[0][i].id]) {
               this.CourseTypeJson[res[0][i].id] = []
             }
-            if (this.userinfo.organizeid == '69893dca-1d47-11ed-8c78-005056b86db5') {
-              if (res[0][i].name == '栏目') {
+            if (this.userinfo.organizeid === '69893dca-1d47-11ed-8c78-005056b86db5') {
+              if (res[0][i].name === '栏目') {
                 this.CourseType[0][i].name = '主题'
               }
             }
 
-            if (res[2].length == 0 && res[3].length == 0) {
+            if (res[2].length === 0 && res[3].length === 0) {
               for (var j = 0; j < res[1].length; j++) {
-                if (res[0][i].id == res[1][j].pid) {
+                if (res[0][i].id === res[1][j].pid) {
                   if (!this.CourseTypeJson[res[0][i].id]) {
                     this.CourseTypeJson[res[0][i].id] = []
                   }
@@ -100,16 +101,16 @@ export default {
               }
             } else {
               if (res[2].length > 0) {
-                for (var j = 0; j < res[2].length; j++) {
-                  if (res[0][i].id == res[2][j].pid) {
-                    this.CourseTypeJson[res[0][i].id].push(res[2][j]) // 去除公共分类
+                for (var js = 0; js < res[2].length; js++) {
+                  if (res[0][i].id === res[2][js].pid) {
+                    this.CourseTypeJson[res[0][i].id].push(res[2][js]) // 去除公共分类
                   }
                 }
               }
               if (res[3].length > 0) {
-                for (var j = 0; j < res[3].length; j++) {
-                  if (res[0][i].id == res[3][j].pid) {
-                    this.CourseTypeJson[res[0][i].id].push(res[3][j]) // 去除公共分类
+                for (var jc = 0; jc < res[3].length; jc++) {
+                  if (res[0][i].id === res[3][jc].pid) {
+                    this.CourseTypeJson[res[0][i].id].push(res[3][jc]) // 去除公共分类
                   }
                 }
               }
@@ -129,7 +130,9 @@ export default {
 
 <style lang="scss" scoped>
 .classBox {
+  height: 40px;
   padding-bottom: 10px;
+  box-sizing: border-box;
   position: relative;
   > div:nth-child(2) {
     position: absolute;
@@ -145,7 +148,7 @@ export default {
     min-height: 700px;
   }
   .allType {
-    margin-top: 60px;
+    // margin-top: 60px;
     display: flex;
     width: 100%;
     flex-direction: row;
@@ -200,4 +203,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/views/home/components/courseAll.vue

@@ -37,13 +37,12 @@
 export default {
   props: {
     courseList: {
-      type: Array,
-      default: []
+      type: Array
     }
   },
   methods: {
     goTo(cid) {
-      this.$router.push({ path: '/courseDetail', query: { courseid: cid } })
+      this.$router.push({ path: '/courseDetail', query: { courseid: cid }})
     }
   }
 }
@@ -137,4 +136,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/views/home/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <div>
+  <div class="home-container">
     <head-bar :isBack="false">
       <template #title>
         <div style="width: 100%">
           <div class="rightSearch">
-            <div class="searchImg" @click="selectAll1">
+            <div class="searchImg" @click="search">
               <img src="../../assets/images/home/search.png" alt="" />
             </div>
             <el-input v-model="courseName" auto-complete="off" placeholder="搜索课程..."></el-input>
@@ -12,8 +12,48 @@
         </div>
       </template>
     </head-bar>
-    <class-filter @getAll="selectAll"> </class-filter>
-    <course-all :courseList="zoneClass"></course-all>
+    <div class="home-box">
+      <class-filter @getAll="search" :zoneClass.sync="zoneClass"> </class-filter>
+      <van-pull-refresh v-model="isLoading" @refresh="onRefresh" class="rheight">
+        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" class="vheight">
+          <!-- <course-all :courseList="zoneClass"></course-all> -->
+          <van-empty description="暂无课程" v-if="!zoneClass.length" />
+          <div v-for="(c, cIndex) in zoneClass" :key="cIndex" class="courseItem" @click="goTo(c.courseId)">
+            <div class="cDetail">
+              <div class="courseImg">
+                <img
+                  :src="c.cover ? JSON.parse(c.cover)[0].url : require('../../assets/images/home/wheel.png')"
+                  alt=""
+                />
+              </div>
+              <div class="cRight">
+                <div>{{ c.title }}</div>
+                <div>创建者：{{ c.uname }}</div>
+                <div class="jdBox">
+                  <div class="jdImg"><img src="../../assets/images/home/jd.png" alt="" /></div>
+                  <div>{{ JSON.parse(c.chapters).length }}阶段</div>
+                </div>
+                <div>{{ c.typename ? c.typename : '暂无分类' }}</div>
+              </div>
+            </div>
+            <div class="cButtonBox" v-show="false">
+              <div class="cButton">
+                <div class="bImg"><img src="../../assets/images/home/courseEvaIcon.png" alt="" /></div>
+                <div>评课</div>
+              </div>
+              <div class="cButton">
+                <div class="bImg"><img src="../../assets/images/home/evaIcon.png" alt="" /></div>
+                <div>评价</div>
+              </div>
+              <div class="cButton">
+                <div class="bImg"><img src="../../assets/images/home/analysisIcon.png" alt="" /></div>
+                <div>分析</div>
+              </div>
+            </div>
+          </div>
+        </van-list>
+      </van-pull-refresh>
+    </div>
   </div>
 </template>
 
@@ -22,56 +62,83 @@ import { selectTypeCourse2 } from '@/api/home'
 import { mapGetters } from 'vuex'
 import headBar from '@/components/headBar.vue'
 import classFilter from './components/classFilter.vue'
-import courseAll from './components/courseAll.vue'
+// import courseAll from './components/courseAll.vue'
 export default {
   components: {
     headBar,
-    classFilter,
-    courseAll
+    classFilter
   },
   data() {
     return {
       courseName: '',
-      zoneClass: []
+      zoneClass: [],
+      typea: '',
+      typeb: '',
+      typec: '',
+      page: 1,
+      isLoading: false,
+      loading: false,
+      finished: false
     }
   },
   computed: {
     ...mapGetters(['userinfo'])
   },
   methods: {
-    selectAll1(){
-      this.selectAll({})
+    goTo(cid) {
+      // eslint-disable-next-line prettier/prettier
+      this.$router.push({ path: '/courseDetail', query: { courseid: cid }})
     },
-    selectAll(tList) {
-      var a = '',b = '',c = ''
-      if (tList != undefined) {
-        var typeList = Object.values(tList);
-        a = typeList[0]
-        b = typeList[2]
-        c = typeList[1]
+    search(tList) {
+      this.page = 1
+      if (tList !== undefined) {
+        var typeList = Object.values(tList)
+        this.typea = typeList[0]
+        this.typeb = typeList[2]
+        this.typec = typeList[1]
       }
+      this.selectAll(true)
+    },
+    onRefresh() {
+      this.page = 1
+      this.finished = false
+      this.selectAll(true)
+    },
+    onLoad() {
+      this.page++
+      this.selectAll()
+    },
+    async selectAll(isRefresh) {
       const params = {
         uid: this.userinfo.userid,
         oid: this.userinfo.organizeid,
-        typea: a != undefined ? a : '',
-        typeb: b != undefined ? a : '',
+        typea: this.typea !== undefined ? this.typea : '',
+        typeb: this.typeb !== undefined ? this.typeb : '',
         typec: '',
-        typed: c != undefined ? a : '',
+        typed: this.typec !== undefined ? this.typec : '',
         typeE: '',
         cu: '',
         cn: this.courseName,
         classid: this.userinfo.classid,
         org: this.userinfo.org,
-        page: 1,
+        page: this.page,
         pageSize: 10
       }
-      selectTypeCourse2(params)
-        .then(res => {
-          this.zoneClass = res[0]
-        })
-        .catch(err => {
-          console.log(err)
-        })
+      const res = await selectTypeCourse2(params)
+      if (isRefresh) {
+        this.isLoading = false
+        // 下拉刷新
+        this.zoneClass = res[0]
+      } else {
+        this.loading = false
+        // 上拉加载
+        this.zoneClass = [...this.zoneClass, ...res[0]]
+      }
+      this.$emit('update:list', this.zoneClass)
+      if (res[0].length === 0) {
+        // 证明没有下一页数据了
+        this.finished = true
+      }
     }
   },
   mounted() {
@@ -81,6 +148,118 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.home-container {
+  height: 100%;
+  overflow: hidden;
+  .home-box {
+    height: calc(100% - 55px);
+    margin-top: 55px;
+    overflow: hidden;
+  }
+  .rheight {
+    height: calc(100% - 40px);
+    overflow: auto;
+    background: #e8ebf2;
+
+    /deep/.van-pull-refresh__track {
+      height: 100%;
+    }
+  }
+  .vheight {
+    padding: 10px 0;
+    // height: 100%;
+    // overflow: auto;
+  }
+
+  // .courseBox {
+  // background: #e8ebf2;
+  // padding: 15px 0;
+  .courseItem {
+    background: #fff;
+    width: 90%;
+    margin: 0 auto 15px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px 1px #dcdfe6;
+    padding: 10px;
+    .cDetail {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      align-items: flex-start;
+      .courseImg {
+        width: 110px;
+        height: 80px;
+        > img {
+          width: 100%;
+          height: 100%;
+          border-radius: 5px;
+        }
+      }
+      .cRight {
+        margin-left: 20px;
+        > div {
+          margin: 2px 0;
+        }
+        > div:nth-child(1) {
+          font-size: 18px;
+          font-weight: bold;
+          max-width: 225px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          word-break: break-word;
+        }
+        .jdBox {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          align-items: center;
+          justify-content: flex-start;
+          .jdImg {
+            width: 15px;
+            margin-top: 1px;
+            height: 15px;
+            > img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
+    }
+    .cButtonBox {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      align-items: center;
+      padding: 10px 0 0 0;
+      .cButton {
+        width: 100px;
+        height: 30px;
+        margin: 0 10px 0 0;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+        border: 1px solid #587ff3;
+        color: #587ff3;
+        border-radius: 5px;
+        justify-content: center;
+        .bImg {
+          width: 20px;
+          height: 20px;
+          > img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+  }
+  // }
+}
+
 /deep/.rightSearch {
   display: flex;
   flex-direction: row;

src/views/layouts/index.vue

@@ -48,10 +48,13 @@ export default {
 </script>
 <style lang="scss" scoped>
 .app-container {
-  height: 100%;
+  height: 100vh;
   .layout-content {
+    height: calc(100% - 50px);
   }
   .layout-footer {
+    display: block;
+    height: 50px;
   }
 }
-</style>
+</style>