gdy_app_8/src/view/course/home.vue

<template>
  <div class="homePage">
    <div class="homeContent">
      <scroller 
      :isInitRefresh="false" 
      ref="recordScroller"
      :list="courseList"
      noDataText="没有更多..."
      :on-refresh='resetList'
      :on-infinite="getMoreList">
        <div class="tit" style="margin-top: .3rem;">
          <span>今日更新</span>
        </div>
        <div class="freeContent">
          <template v-if="freeCourseList.length>0">
            <div class="freeLi" v-for="(item,index) in freeCourseList" :key="index" @click="toUrl(item)">
              <div class="liIcon">
                <van-icon name="play-circle-o" />
              </div>
              <div class="freeR">
                <p>{{ item.name }}</p>
                <span>{{ Math.floor(Math.random()*100) }}人浏览</span>
              </div>
            </div>
          </template>
          <template v-else>
            <p>暂无数据</p>
          </template>
        </div>
        <div class="tit">
          <span>课程推荐</span>
        </div>
        <courseList :dataList="courseList" :showNum="4"></courseList>
      </scroller>
      <van-tabbar v-model="active" @change="activeChange">
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import { getUserAllCourseList ,getFreeCourseList} from "./api";
import courseList from "./components/courseList.vue";
import {setDocumentTitle} from '../../components/vueHashCalendar/utils/util'
import {setWxConfig} from './utils'
export default {
  name: "courseHome",
  components: {
    courseList
  },
  data() {
    return {
      active:0,
      canReq: true,
      noDate: false,
      logo:require('../../../static/images/logo.png'),
      page: {
        cur: 1,
        size: 10,
        total: 0
      },
      courseList: [],
      freeCourseList:[]
    };
  },
  activated(){
    this.init();
  },
  deactivated(){
    this.page.cur = 1;
    this.courseList = []
  },
  created() {
    if(this.$isWx){
      setWxConfig();
    }
  },
  methods: {
    //跳转免费课程
    toUrl(item){
      this.$router.push({
        path:`/freeCourse`,
        query:item
      })
    },
    // 触底加载
    getMoreList(done) {
      if (!this.noDate) {
        setTimeout(() => {
          this.getList(done);
        }, 300);
      } else {
        this.$refs.recordScroller.finishInfinite(true);
      }
    },
    //上拉刷新
    resetList(done){
      this.page.cur = 1;
      this.getList(done,1)
    },
    //底部导航变化
    activeChange(){
      if(this.active != 0){
        this.$router.push('/courseUser')
        this.active = 0
      }
    },
    // 初始化
    init() {
      this.getList();
      this.getFreeList();
    },
    // 获取免费课程列表
    getFreeList(){
      getFreeCourseList().then(res=>{
        this.freeCourseList = res.sections
      })
    },
    // 获取所有课程列表
    getList(done,type) {
      let data = {
        page: this.page.cur,
        pageSize: this.page.size,
        enable: 1
      };
      getUserAllCourseList(data).then(res => {
        let list = []
        res.list.forEach(item => {
          let data = {
              subjectName: item.name,
              subjectId: item.id,
              subjectPrice: item.price,
              subjectThumb: item.thumb,
              subjectEnable: item.enable,
              sectionsNum: item.sectionsNum,
              clickNum:Number(item.baseClick) + Number(item.clickNum)
            };
            list.push(data);
        });
        if(type == 1){
          this.courseList = list;
        }else{
          this.courseList = this.courseList.concat(list);
        }
        this.page.total = res.total;
        this.page.cur = res.current;
        if (res.pages == res.current || res.pages == 0) {
          if (done) done(true);
          this.noDate = true;
        } else {
          if (done) done();
          this.page.cur++; //下拉一次页数+1
          this.noDate = false;
        }
      });
    },
  }
};
</script>
<style scoped lang="scss">
*{
  margin: 0;
  padding: 0;
}
.homePage {
  background: #f3f2ee;
  background: linear-gradient(90deg, #f3f2ee, #e7eff9);
  .homeContent {
    height: calc(100vh - 1rem);
    margin: 0 .2rem;
    box-sizing: border-box;
    position: relative;
    .tit{
      display: flex;
      span{
        font-size: .32rem;
        color: #000;
        font-weight: 600;
        line-height: .6rem;
      }
    }
    .freeContent{
      margin-bottom: .3rem;
      &>p{
        font-size: .26rem;
        color: #888;
        line-height: 1rem;
        text-align: center;
      }
      .freeLi{
        background-color: #FFF;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 0.1rem;
        margin-bottom: 0.1rem;
        padding: 0.15rem;
        .liIcon{
          background: #DBECFE;
          width: .8rem;
          height: .8rem;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: .1rem;
          i{
            font-size: .62rem;
            color:#609DFF;
          }
        }
        .freeR{
          flex: 1;
          margin-left: .2rem;
          width: calc(100% - 1.2rem);
          p{
            font-size: .3rem;
            color: #333;
            line-height: .35rem;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            white-space: nowrap;
          }
          span{
            font-size: .22rem;
            color: #999;
            line-height: .3rem;
          }
        }
      }
    }
  }
}
</style>