menber-center/pages/goOnEdu/course/courseMine/mineRecord/recordDetail.vue

<template>
	<view class="container">
		<view class="list-box">
			<view class="list-item-box">
				<view class="list-item">
					获得时间
				</view>
				<view class="list-item" style="width: 50%;">
					课程名称
				</view>
				<view class="list-item" style="width: 20%;">
					学分
				</view>
				<!-- <view class="list-item">
					年检情况
				</view>
				<view class="list-item">
					是否完成观看
				</view> -->
			</view>
			<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower" v-if="list.length > 0">
				<view class="list-item-content" v-for="(item, index) in list" :key="index">
					<view class="list-item">
						{{item.date}}
					</view>
					<view class="list-item" style="width: 50%;">
						{{item.source}}
					</view>
					<view class="list-item" style="width: 20%;">
						{{item.credit}}
					</view>
					<!-- <view class="list-item" v-html="item.annIns!=='学分未达标不能申请年检' ? item.annIns : '学分未达标,<br/>不能申请年检'"></view>
					<view class="list-item">
						<view class="button" :class="[item.finish ? 'primary' : 'error']">
							{{item.finish ? '已完成观看' : '未完成'}}
						</view>
					</view> -->
				</view>
			</scroll-view>
			<u-empty v-else text="暂无数据" mode="list" style="margin: 20rpx"></u-empty>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		loadCreditDatial
	} from '@/api/edu.js'
	const list = ref([])
	const currentYear = ref("");
	const pageNumber = ref(1);
	const pageSize = ref(20);
	const count = ref(0);
	const status = ref("loadmore")
	const initList = () => {
		const data = {
			"pageNumber": pageNumber.value,
			"pageSize": pageSize.value,
			"year": currentYear.value
		}
		if(pageNumber.value===1){
			list.value = [] 
		}
		uni.showLoading({
			title: '加载中',
		})
		status.value = 'loading'
		loadCreditDatial(data).then(res => {
			uni.hideLoading()
			if (res && res?.code === 0) {
				count.value = res.count;
				list.value = [...list.value, ...res.data];
				if(list.value.length === count.value){
					status.value = 'nomore'
				}else{
					status.value = 'loadmore'
				}
				pageNumber.value = pageNumber.value + 1;
			}
		})
	}
	const scrolltolower = () => {
		if(status.value === 'nomore'){
			return
		}
		initList()
	}
	onLoad((options) => {
		const {
			year
		} = options;
		// console.log(year)
		currentYear.value = year
		pageNumber.value = 1
		initList()
		// console.log('onLoad')
	})
</script>

<style lang="scss">
	page {
		background-color: $uni-bg-color;
	}

	.container {
		box-sizing: border-box;
		height: 100vh;
		width: 100vw;
		background-color: $uni-bg-color;
		// background-color: #fff;
		// padding: 0 20rpx env(safe-area-inset-bottom, 0);
		padding: 30rpx;
	}

	.scroll-Y {
		flex: 1;
		overflow: hidden;
	}

	.list-box {
		height: 100%;
		display: flex;
		flex-direction: column;
		// margin: 20rpx 20rpx;
		background-color: $uni-bg-color-grey;
		border-radius: $uni-card-border-radius;

		// padding: 20rpx 15rpx;
		// margin-bottom: 30rpx;
		.list-item-box {
			&:first-child {
				border-bottom: 5rpx solid #E6E6E6;
				font-size: 26rpx;
				font-weight: bold;
				flex: 0 0 auto;

				.list-item {
					width: 30%;
					text-align: center;

					&:last-child {
						color: #303133;
						font-weight: bold;
					}
				}
			}

			padding: 25rpx 0;
			text-align: center;
			font-size: 26rpx;
			font-weight: bold;
			display: flex;
			align-items: center;

			.list-item {
				width: 30%;
				text-align: center;

				&:last-child {
					
					font-weight: normal;
				}
			}

			.button {
				width: fit-content;
				border-radius: $uni-card-border-radius;
				margin: 0 auto;
			}

			.primary {
				padding: 5rpx 25rpx;
				background-color: $uni-color-primary;
			}

			.error {
				padding: 5rpx 15rpx;
				background-color: $uni-color-error;
			}
		}

		.list-item-content {
			// &:first-child {
			// 	border-bottom: 5rpx solid #E6E6E6;
			// 	font-size: $uni-font-size-1;
			// 	font-weight: bold;
			// 	.list-item {
			// 		width: 25%;
			// 		text-align: center;
			// 		&:last-child {
			// 			color: #303133;
			// 			font-weight: bold;
			// 		}
			// 	}
			// }
			padding: 25rpx 0;
			text-align: center;
			font-size: 26rpx;
			font-weight: bold;
			display: flex;
			align-items: center;

			.list-item {
				width: 30%;
				text-align: center;

				// &:last-child {
				// 	font-weight: normal;
				// }
			}

			.button {
				width: fit-content;
				border-radius: $uni-card-border-radius;
				margin: 0 auto;
			}

			.primary {
				padding: 5rpx 25rpx;
				background-color: $uni-color-primary;
			}

			.error {
				padding: 5rpx 15rpx;
				background-color: $uni-color-error;
			}
		}
	}
</style>