04-拉钩教育移动端项目实战 - 选课功能 - 《front-baise》

[TOC]

顶部logo

src/views/course/components/CourseHeader.vue

<template>
<div class="course-header">
  <van-image :src="require('@/assets/logo.png')"></van-image>
</div>
</template>
<script>
export default {
name: 'CourseHeader'
}
</script>
<style lang="scss" scoped>
.course-header {
height: 50px;
display: flex;
align-items: center;
}
.van-image {
width: 180px;
margin-left: -20px;
}
</style>

广告轮播图

src/views/course/components/CourseContent.vue ```vue


<a name="yd69i"></a>
## 课程列表基础布局

- `src/views/course/components/CourseContentList.vue`
```vue
<template>
  <div class="course-content-list">
    <!-- 课程列表 -->
    <van-list v-model="loading" :finished='finished' finished-text='没有更多了' @load='onLoad'>
      <van-cell v-for='item in list' :key='item.id' :title='item'>

      </van-cell>
    </van-list>
  </div>
</template>
<script>
export default {
  name: 'CourseContentList',
  data () {
    return {
      // 数据列表
      list: [1, 2, 3],
      // 是否要进行加载
      loading: false,
      // 是否加载完毕
      finished: false
    }
  },
  methods: {
    async onLoad () {
      console.log('发送数据')
    }
  }
}
</script>

固定列表处理

src/views/course/components/CourseContentList.vue

<style lang="scss" scoped>
.course-content-list {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-y: auto;
}
</style>

src/views/course/components/CourseContent.vue ```vue


<a name="p17lg"></a>
## 封装接口

- [接口文档](http://eduboss.lagou.com/boss/doc.html#/home)
```javascript
// src/services/course.js

// 分页查询查询课程内容
export const getQueryCourses = data => {
  return request({
    method: 'POST',
    url: '/boss/course/getQueryCourses',
    data
  })
}

src/views/course/components/CourseContentList.vue

<script>
import { getQueryCourses } from '@/services/course'
export default {
name: 'CourseContentList',
data () {
  return {
    // 数据列表
    list: [],
    // 是否要进行加载
    loading: false,
    // 是否加载完毕
    finished: false,
    // 数据页数
    currentPage: 1
  }
},
methods: {
  async onLoad () {
    // 请求数据
    const { data } = await getQueryCourses({
      currentPage: this.currentPage,
      pageSize: 10,
      status: 1
    })
    console.log(data)

    // 下一次请求下一页
    this.currentPage++
    // 加载状态结束
    this.loading = false
    // 数据全部加载完成
    if (data.data.records.length < 10) {
      this.finished = true
    }
  }
}
}
</script>

布局与数据绑定

src/views/course/components/CourseContentList.vue ```vue


<a name="DVSm3"></a>
## 下拉刷新

- `src/views/course/components/CourseContentList.vue`
```vue
<template>
  <div class="course-content-list">
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isRefreshing" @refresh='onRefresh'>
    <!-- 课程列表 -->
    ...
    </van-pull-refresh>
  </div>
</template>
<script>
import { getQueryCourses } from '@/services/course'
export default {
  name: 'CourseContentList',
  data () {
    return {
      // 数据列表
      list: [],
      // 是否要进行加载
      loading: false,
      // 是否加载完毕
      finished: false,
      // 数据页数
      currentPage: 1,
      // 下拉刷新状态
      isRefreshing: false
    }
  },
  methods: {
    async onRefresh () {
      // 还原数据页数为 1
      this.currentPage = 1
      // 重新请求数据
      const { data } = await getQueryCourses({
        currentPage: this.currentPage,
        pageSize: 10
      })
      // 如果存在数据，清空并课程数据，否则结束
      if (data.data && data.data.records && data.data.records.length !== 0) {
        this.list = data.data.records
      }
      // 提示
      this.$toast('刷新成功')
      // 重新赋值课程数据
      this.list = data.data.records

      // 关闭下拉提示框
      this.isRefreshing = false
    },
    async onLoad () {
      // 请求数据
      const { data } = await getQueryCourses({
        currentPage: this.currentPage,
        pageSize: 10,
        status: 1
      })
      // 检测，如果没有数据了，结束，如果有，保存
      if (data.data && data.data.records && data.data.records.length !== 0) {
        this.list.push(...data.data.records)
      }


    }
  }
}
</script>