yicangzongtai_app_240321/pages/learningClassroom/recentWatching.vue

<template>
	<view>
		<view class="class-list">
			<view class="item-box" v-for="(item,index) in list" :key="index">
				<view class="item" @click="goDetail(item)">
					<view class="tag" v-if="item.has_vip">会员专享</view>
					<image class="cover" :src="item.study_url" mode="aspectFill"></image>
					<view class="box">
						<view class="desc">{{item.study_name}}</view>
						<view class="author"><text class="label">讲师：</text>{{item.study_teacher}}</view>
						<view class="count">
							<text class="iconfont2">&#xe709;</text>
							<text class="num">学习人次：{{item.studying_count}}次</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view>
			<noData v-if="list<=0"></noData>
			<u-loadmore v-else :status="status" />
		</view>
	</view>
</template>

<script>
	import noData from "@/components/noData/nodata.vue"
	export default{
		components:{noData},
		data(){
			return{
				param:{
					page:1,
					limit:10
				},
				list:[],
				totalCount:0,
				status:"nomore", //加载前值为loadmore，加载中为loading，没有数据为nomore
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom(){
			if(this.status=='loadmore'){
				this.param.page++
				this.getList()
			}
		},
		onPullDownRefresh(){
			this.getList('reset')
		},
		methods:{
			// 获取课程列表
			getList(reset) {
				if (reset) this.param.page = 1;
				this.status='loading';
				this.$http.get('/studying/studyingLately/page', this.param).then(res => {
					if (res && res.code == 200) {
						if (reset) this.list = []
						this.list.push(...res.page.list);
						this.totalCount=res.page.totalCount;
						uni.stopPullDownRefresh();
						if(this.list.length<this.totalCount) this.status='loadmore';
						else this.status='nomore';
					}
				})
			},
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/learningClassroom/detail?id='+item.id
				})
			},
		}
	}
</script>

<style lang="scss">
	.class-list {
		display: flex;
		justify-content: space-between;
		padding: 27rpx 30rpx 30rpx 30rpx;
		flex-wrap: wrap;
	
		.item-box {
			width: 336rpx;
		}
	
		.item {
			display: block;
			width: 100%;
			border-radius: 16rpx;
			overflow: hidden;
			margin: 0 20rpx 35rpx 0;
			background-color: white;
			filter: drop-shadow(1px 2px 4px rgba(26, 58, 70, 0.1));
			box-shadow: 0rpx 4rpx 8rpx 0rpx #f1f1f1;
			position: relative;
	
			.tag {
				background: #138e46;
				color: white;
				border-radius: 0px 16rpx 0px 16rpx;
				padding: 0 10rpx;
				height: 41rpx;
				width: fit-content;
				line-height: 41rpx;
				font-size: 24rpx;
				position: absolute;
				top: 0;
				right: 0;
				z-index: 1;
			}
	
			.cover {
				width: 100%;
				height: 240rpx;
				background-color: #f2f2f2;
			}
	
			.box {
				padding: 5rpx 26rpx 38rpx 26rpx;
	
				.desc {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: left;
					color: #333333;
					line-height: 36rpx;
					height: 72rpx;
					margin-bottom: 5rpx;
					white-space: normal;
				}
	
				.author {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #808080;
					line-height: 34rpx;
	
					.label {
						color: #1a1a1a;
					}
				}
	
				.count {
					.iconfont2 {
						font-size: 35rpx;
						color: #2DB62B;
						vertical-align: middle;
					}
	
					.num {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						text-align: left;
						color: #999999;
						line-height: 24rpx;
						vertical-align: middle;
					}
				}
			}
		}
	}
</style>