ylrz_scrm_uniapp/pages_course/favoritePage.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="collection-list">
					<view class="item" v-for="(item,index) in dataList"  @click="$navTo('/pages_course/info?courseId='+item.courseId)" :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 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">{{utils.formatDate(item.createTime) }}</view>
							</view>
							<view class="arrow">
								<image  src="/static/images/more_icon_12.png" mode=""></image>
							</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 { getMyFavoriteCourseList } from '@/api/course'
	export default {
		mixins: [MescrollMixin,MescrollMoreItemMixin], 
		components: {
			
		},
		props: {
			cataType:Number,
			i:Number,
			index:Number,
			itemData: {
				type: Object,
				default() {
					return { };
				}
			},
			
		},
		watch:{
			
		},
		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.mescroll.resetUpScroll(true);
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback() {
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll(true);
			},
			/*上拉加载的回调 */
			upCallback(page) {
				//联网加载数据
				var that = this;
				var params = {
					"keyword":this.keyword
				};
				getMyFavoriteCourseList(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();
					}
				});
			},
			//点击空布局按钮的回调
			emptyClick() {
				
			},
		   refreshPage(){
			   this.mescroll.hideTopBtn();
			   this.mescroll.resetUpScroll(true);
		   }
		},
		created(){
			let that = this;
			uni.$on('refreshFollowLog', function(data){
				//that.refreshPage();
				that.$emit('resetUpScroll');
			});
		},
		destroyed() {
			// 注销全局配置监听
			uni.$off("refreshFollowLog")
		}
	}


</script>



<style lang="scss" scoped>
	
	.item_content .content:last-child .sline{
		height: 100%;
	}
	.item_content{
		background-color: #f7f7f7;
		margin-top: 20rpx;
		// padding-bottom: 100rpx;
	}	
	.collection-list{
		display: flex;
		flex-wrap: wrap;
		padding: 0 20rpx;
	
		.item{
			display: flex;
			flex-direction: column;
			// align-items: center;
			justify-content: center;
			width: calc(100%);
			margin-bottom: 20rpx;
			padding: 16rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			background-color: #fff;		
			.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;
						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>