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;" v-if="freeCourseList.length>0">
          <span>今日更新</span>
        </div>
        <div class="freeContent" 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>
        </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'
import wx from 'weixin-js-sdk'
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:[]
    };
  },
  created() {
    setDocumentTitle('首页')
    this.init();
    if(this.$isWx){
      let info = {
        title:'公道云课程',// 分享标题
        desc:'公道云',// 分享描述
        link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: this.logo, // 分享图标
      }
      setWxConfig(info);
    }
  },
  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;
      .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>