<template> <view> <status-container titlet="课程列表" returnc="#FFFFFF"> <view slot="content" style="margin-top: -20rpx;"> <view class="pad-zy30 bacf pad-x30" v-if="total"> <view class="pad-sx30 disac fon24 bbot" v-for="(item,index) in dataList" :key="index"> <image class="flexs" :src="hostapi + item.cover" mode="aspectFill" style="width: 228rpx;height: 160rpx;"></image> <view class="disjbac fc width100 mar-z20" style="height: 160rpx;"> <view class="fon26 col26 width100"> <view class="clips2">{{item.title}}</view> <view class="fon20 mar-s10" style="color: #7f7f7f;">{{item.summary}}</view> </view> <view class="disjbac width100" style="justify-content: flex-end;"> <view @tap="getVideoInfo(item.id)" class="disjcac fon22 radius26" style="width: 144rpx;height: 52rpx;color: #f37717;border: 2rpx solid #f37717;">点击查看</view> </view> </view> </view> </view> <view class="" v-if="loading"> <pitera :textStr="`${noMore && total > dataList.length?'上滑加载更多':'到底了'}~~`" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera> </view> </view> </status-container> </view> </template> <script> import swiperTab from '@/components/swiper-tab/swiper-tab.vue'; import pitera from '@/components/nothing/pitera.vue'; export default { components:{ swiperTab, pitera }, data() { return { dataList:[], course_id:'', hostapi:'', page:1, size:20, total:0, noMore:false, loading:false } }, onLoad(e) { this.course_id = e.id; this.hostapi = getApp().globalData.hostapi; // 获取课程列表 this.getCouresList(); }, onReachBottom() { if(this.total!=this.dataList.length){ this.page++; this.getCouresList(); } }, methods: { // 获取课程列表 getCouresList(){ this.loading = false; let params = { page:this.page, size:this.size, course_id:this.course_id, } this.$requst.post('/api/course/get-course-video',params).then(res=>{ this.total = res.data.list; if(this.page==1){this.dataList=[];} this.dataList = [...this.dataList,...res.data.list]; if(this.total==this.dataList.length && this.page!=1){ this.noMore = true; } this.loading = true; }) }, getVideoInfo(id) { this.$requst.post('/api/course/get-course-video-info',{course_video_id:id}).then(res=>{ console.log(res.code,'课程视频') if(res.code == 0) { uni.navigateTo({ url:`/pagesB/course-video/course-video?id=${id}` }) }else { uni.showToast({ title: res.msg,//标题 必填 icon: 'error',//图标 }) } }) } } } </script> <style> .used-item{ border-top: 2rpx solid ; } .noshow{ transform: rotate(-90deg); transition: all .3s linear; } .isshow{ transform: rotate(90deg); transition: all .3s linear; } </style>