ylrz_scrm_uniapp/pages_course/learningPage.vue

<template>
	
	<view class="item_content">
		<mescroll-body  @init="mescrollInit"  top="0"  bottom="0"  :down="downOption" @down="downCallback" :up="upOption"
			 @up="upCallback" @emptyclick="emptyClick">
			    <view class="myjt-box" v-for="(citem,index) in dataList" :key="index" >
			    	 <view class="title-inner">{{citem.date}}</view>
			    	 <view class="collection-list">
			    			<view class="item"  v-for="(item,index) in citem.courses"  @tap="goToInfo(item)" :key="index">
			    				<view class="top">
			    					<view class="img-box">
			    						<image :src="item.imgUrl" mode="aspectFill"></image>
			    						<view class="playIcon">
			    							<image src="@/static/images/course/play_icon.png"></image>
			    						</view>
			    						<view v-if="item.isIntegral!=1" class="vip">VIP</view>
			    					</view>
			    					<view class="info-box">
			    						<view class="title ellipsis2">{{item.courseName}}</view>
			    						<view class="tips ellipsis2">{{item.videoName}}</view>
			    						<view class="time es-fs-24 es-c-66">{{ utils.formatDate(item.studyTime) }}</view>
			    					</view>
			    					<view class="arrow">
			    						<image  src="/static/images/more_icon_12.png" mode=""></image>
			    					</view>
			    				</view>
			    				<view class="progress-bar">  
			    					<view class="focus-bar" :style="{width:getProgress(item)+'%'}"></view>
			    					<view class="number">{{ getProgress(item)+'%' }}</view>
			    				</view>
			    			</view>
			    			
			    	 </view>
			   
				</view>  	
		</mescroll-body>
	</view>
</template>


<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
    import { getCourseStudyList } from '@/api/course'
	
	export default {
		mixins: [MescrollMixin,MescrollMoreItemMixin], 
		props: {
			cataType:Number,
			i:Number,
			index:Number,
			itemData: {
				type: Object,
				default() {
					return { };
				}
			},
		},
		watch:{
			
		},
		onLoad() {
			
		},
		onUnload() {
			
		},
		onShow() {
			this.refreshPage();
		},
		data() {
			return {
				bottomBlackLineHeight: uni.getStorageSync('bottomBlackLineHeight'),
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: false, // 不自动加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				    toTop:{
				    	width:0,
				    }
				},
				keyword:"",
				dataList: [] //列表数据
			}
		},
		mounted() {
			//this.refreshPage();
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback() {
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll(true);
			},
			/*上拉加载的回调 */
			upCallback(page) {
				//联网加载数据
				var that = this;
				var params = {"keyword":this.keyword};
				getCourseStudyList(params,page.num).then(res => {
					if(res.code==200){
						setTimeout(()=>{
							this.mescroll.endByPage(res.data.list.length, res.data.pages); 
							if(page.num == 1) this.dataList = []; //如果是第一页需手动制空列表
							this.dataList=this.dataList.concat(res.data.list); //追加新数据
						},400);
					}else{
						uni.showToast({
							icon:'none',
							title: "请求失败",
						});
						that.dataList = null;
						that.mescroll.endErr();
					}
				});
			},
			getProgress(item){
				let value=(item.currentTimes/item.times*1.0*100).toFixed(2);
			    return value;
			},
			goToInfo(item){
				let url='/pages_course/info?courseId='+item.courseId+'&times='+item.currentTimes+'&videoId='+item.videoId+'&isLearning=true';
				 this.$navTo(url);
			},
			//点击空布局按钮的回调
			emptyClick() {
				
			},
			hasPrimession(){
			   let primession=this.isMyCts;
			   return primession;
		   },
		   refreshPage(){
			   this.mescroll.hideTopBtn();
			   this.mescroll.resetUpScroll(true);
		   }
		},
		created(){
			let that = this;
			uni.$on('refreshStudyTime', function(data) {
				that.refreshPage();
			});
			uni.$on('refreshFollowLog', function(data){
				//that.refreshPage();
				that.$emit('resetUpScroll');
			});
			
		},
		destroyed() {
			// 注销全局配置监听
			uni.$off("refreshFollowLog");
			uni.$off('refreshStudyTime');
		}
	}


</script>



<style lang="scss" scoped>
	
	.item_content .content:last-child .sline{
		height: 100%;
	}
	.item_content{
		background-color: #f7f7f7;
		margin-top: 10rpx;
	}
	
	.myjt-box{
		  margin:0 20rpx;
		  margin-top: 20rpx;
		  border-radius: 20rpx;
		  padding-right: 0rpx;
		  background-color: #fff;
		  .title-inner{
				margin-left: 20rpx;
				height: 60rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				color: #666;
		  }
		  .collection-list{
				display: flex;
				flex-wrap: wrap;
				border-radius: 8rpx;
				margin: 0 16rpx;
				margin-top:20rpx;
		  	.item{
				display: flex;
				flex-direction: column;
				// align-items: center;
				justify-content: center;
		  		width: calc(100%);
		  		margin-bottom: 20rpx;
				.top{
					display: flex;
					flex: 1;
					flex-direction: row;
					.img-box{
						  position: relative;
						  width: 40%; /* 或者任何你想要的宽度 */
						  padding-bottom: 25%; /* 高度等于宽度 */
						  overflow: hidden; /* 防止图片溢出 */
						  image{
								position: absolute;
								width: 100%;
								height: 100%;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
								border-radius: 20rpx;
						  }
					}
					.playIcon{
								 position: absolute;
								 width: 50rpx;
								 height: 50rpx;
								 background: rgba(0, 0, 0, 0.28);
								 border-radius: 50%;
								 top: 50%;
								 left: 50%;
								 transform: translate(-50%, -50%);
								 image{
									 width:20rpx ;
									 height: 24rpx;
									 border-radius: 0 !important;
								 }
						 }
						 .vip{
								  position: absolute;
								  width: 49rpx;
								  height: 28rpx;
								  background: linear-gradient(94deg, #FFE9D0 0%, #E9BD97 100%);
								  border-radius: 6rpx;
								  top: 16rpx;
								  right: 16rpx;
								  color:#333;
								  font-size:18rpx ;
								  text-align: center;
								  font-weight: 500;
								  font-style: italic;		  
						 }
					}  
					.info-box{
						    width: calc(60%);
							padding:0 20rpx;
							padding-right: 0rpx;
							position: relative;
							.title{
								font-size: 26rpx;
								font-family: PingFang SC;
								font-weight: 470;
								color: #333;
								line-height: 40rpx;
								margin-top: 10rpx;
							}
							.tips,.time{
								font-size: 26rpx;
								color: #666;
								line-height: 40rpx;
								margin-top: 10rpx;
							}
							.time{
								position: absolute;
								left: 20rpx;
								// bottom: 20rpx;
							}
					}
					.arrow{
						width: 30rpx;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 10rpx;
						image{
							width: 26rpx;
							height: 22rpx;
						}
					}
					
				}
				
				.progress-bar{
					border-radius: 20rpx;
					background: #ebebeb;
					height: 20rpx;
					margin:20rpx 0rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					.focus-bar{
						background:#FF5C03;
						border-radius: 20rpx;
						height: 100%;
						
					}  
					.number{
						font-size: 22rpx;
						color: #fff;
						background:#FF5C03;
						border-radius: 10rpx;
						border-left: 2rpx solid #fff;
						padding: 0rpx 12rpx;
						margin-left: -2rpx;
					}
				}
		  }
	}		
	
</style>