training-wx/src/views/Course.vue

<template>
  <div class="Course-box">
    <div class="banner-box-top mglr-10" >
      <van-swipe class="banner-swipe" :autoplay="3000" @change="i => currentItem = i" :show-indicators="false">
        <van-swipe-item v-for="(image, index) in HomeBannerImages" :key="index">
          <ration-div :ratio="0.6">
            <van-image width="100%" height="100%" :src="image.thumb" />
          </ration-div>
        </van-swipe-item>
      </van-swipe>
      <div class="custom-indicator">
        <span v-for="(_, index) in HomeBannerImages" :key="index" :class="{'active': currentItem === index }"></span>
      </div>
    </div>
    
    <!-- list -->
    <van-list class="mglr-10 course-list" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <course-card
        v-for="item in courseList"
        :key="item.courseId"
        v-bind="item"
        @click.native="$router.push({ name: 'ClassInfo', query: { courseId: item.courseId } })"
      ></course-card>
    </van-list>
  </div>
</template>

<script>
import { parseTime } from '@/util/formattingData'
import { getBanner, getCourse } from '@/util/api'

export default {
  components: {
    RationDiv: () => import('@/components/RatioDiv/index.vue'),
    CourseCard: () => import('./components/CourseCard.vue')
  },

  data() {
    return {
      currentItem: -1,
      icon: require('@/assets/icon/courseIcon.svg'),
      loading: false,
      finished: true,
      currentPage: 1,
      pageSize: 10,
      courseList: [],
      HomeBannerImages: []
    }
  },
  mounted() {
    this.onBanner()
    this.kecheng()
  },

  methods: {
    goQuestion(courseId) {
      this.$router.push({ name: 'ClassInfo', params: { courseId: courseId } })
      // this.$router.push('/Questionnaire')
    },
    parseTime, //时间格式化

    kecheng() {
      getCourse().then((e) => {
        // console.log(parseTime(aTime, '{y}年{m}月{d}日 {h}:{i}'))

        this.courseList = e.records
        console.log('----------courseList--------------', this.courseList)
      })
    },
    onBanner() {
      getBanner('Training').then((e) => {
        this.HomeBannerImages = e.records

        console.log(e)
      })
    },
    onLoad() {
      // 异步更新数据
      let params = {
        // type: this.selectedType,
        index: this.currentPage, //页数
        size: this.pageSize //每页个数
      }
      // xxxxxxx(params).then((res) => {
      //   console.log(res)
      //   this.dataTotal = res.total
      //   //进行判断
      //   if (this.dataTotal <= this.pageSize) {
      //     this.Array = res.data.list
      //     console.log(this.Array)
      //   } else {
      //     this.currentPage++
      //     let arr = res.data.data.list
      //     this.Array = this.Array.concat(arr)
      //   }
      //   // 加载状态结束
      //   this.loading = false
      //   // 数据全部加载完成
      //   if (this.Array.length >= this.dataTotal) {
      //     this.finished = true //结束，显示我也是有底线的
      //   }
      // })
    }
  }
}
</script>

<style lang="less" scoped>

.mglr-10 {
  margin-left: 10px;
  margin-right: 10px;
}

.Course-box {
  width: 100vw;
  padding-top: 10px;

  .banner-box-top {
    position: relative;
    width: calc(100% - 20px);

    .banner-swipe {
      border-radius: 6px;
      box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.12);
    }
  }

  .course-list {
    margin-top: 10vw;
  }

  .custom-indicator {
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    right: 0;
    z-index: 10;

    & > span {
      display: inline-block;
      width: 1em;
      height: 2px;
      background: rgba(0, 0, 0, 0.2);

      & + span {
        margin-left: .2em;
      }
    }
    .active {
      background: rgba(0, 0, 0, .65);
    }
  }

}
</style>