tra-app/src/pages/courseRecord/components/practiceRecordItem.vue

<template>
	<view class="scroll_div">
		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower" :show-scrollbar="false">
			<view
				class="item"
				:class="getStatusClass(item.isFinish)"
				v-for="(item, index) in data_list"
				@click="click_item(item)"
			>
				<view class="img_div">
					<image-preview class="img" :src="item.ossAddr" mode="scaleToFill"></image-preview>
				</view>
				<view class="right_div">
					<view class="title">
						{{
							item.crsName
						}}阿斯顿萨达萨达阿斯顿萨达萨达萨达萨达萨达萨达
					</view>
					<view class="prompt_div">
						<image :src="studyDurationIcon()" class="img"></image>
						<view class="prompt">答题正确率：30</view>
					</view>
					<view class="prompt_div">
						<image :src="studyTimeIcon()" class="img"></image>
						<view class="prompt">练习记录：2条</view>
					</view>
				</view>
			</view>
			<list-no-data v-if="total == 0 && status == 'nomore'"></list-no-data>
			<uv-load-more v-if="total != 0" :status="status" loadmore-text="轻轻上拉加载" :height="30"></uv-load-more>
		</scroll-view>
	</view>
</template>
<script setup>
	const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
	const limit = 15;
	const total = ref(-1);
	const page = ref(0);
	const data_list = reactive([]);
	import { setPageCache } from '@/common/common';
	import common from '@/common/common';
	import { ref, reactive, onMounted, nextTick } from 'vue';

	import { queryPracticeRecordPaging, queryPracticeHis } from '@/api/courseRecord.js';
	import { studyDurationIcon, studyTimeIcon } from '@/common/imgSvg';
	const props = defineProps({});

	const getData = (from = '', searchText = '') => {
		if (from == 'first') {
			if (total.value !== -1) {
				return;
			}
			status.value = 'loading';
			total.value = -1;
			page.value = 1;
			data_list.length = 0;
		} else {
			if (status.value !== 'loadmore' && status.value !== '') return;
			status.value = 'loading';
			page.value++;
		}
		setTimeout(() => {
			queryPracticeRecordPaging({
				page: page.value,
				limit: limit
			})
				.then((res) => {
					total.value = res.total;
					data_list.push(...res.body);
				})
				.finally(() => {
					if (data_list.length >= total.value) {
						status.value = 'nomore';
					} else {
						status.value = 'loadmore';
					}
				});
		}, 200);
	};
	const getStatusClass = (isFinish) => {
		// 00进行中、01已完成、02已超时
		if (isFinish === '00') return 'in_progress';
		if (isFinish === '01') return 'completed';
		return 'expired';
	};

	// 跳转到详情
	const click_item = (item) => {
		if (item.isTimeOut === '00') {
			common.msg('任务已结束');
			return;
		}
		setPageCache('learning_tasks_details', item);
		common.navigateTo('/pages/learningTasks/details');
	};
	const scrolltolower = (item) => {
		getData();
	};
	const search = (value) => {
		total.value = -1;
		console.log('value', value);
		getData('first', value);
	};
	defineExpose({
		getData,
		search
	});
</script>

<style scoped lang="scss">
	.scroll_div {
		background-color: #f1f5fa;
	}

	.scroll-Y {
		height: calc(100vh - var(--status-bar-height) - 88rpx - 88rpx);
	}

	.scroll-Y {
		.item.in_progress {
			// 进行中
			.subscript {
				color: #0066ff;
				background-color: #daf0ff;
			}

			.blod_color {
				color: #0066ff;
			}
		}

		.item.completed {
			// 已完成
			.subscript {
				color: #ffffff;
				background-color: #33c583 !important;
			}

			.blod_color {
				color: #333333;
			}
		}

		.item.expired {
			// 已超时
			.subscript {
				color: #ffffff;
				background-color: #ef5705;
			}

			.blod_color {
				color: #d70c18;
			}
		}
	}

	.scroll-Y .item {
		margin: 17rpx 20rpx;
		display: flex;

		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx 22rpx;
		.img_div {
			position: relative;
			width: 224rpx;
			height: 168rpx;
			overflow: hidden;
			border-radius: 22rpx;

			.img {
				width: 226rpx;
				height: 168rpx;
			}

			.subscript {
				position: absolute;
				right: 0;
				top: 0;
				width: 92rpx;
				height: 46rpx;
				border-radius: 0px 0px 0px 22rpx;
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 22rpx;
				line-height: 32px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.right_div {
			flex: 1;
			overflow: hidden;
			margin-left: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title {
				font-family: PingFangSC;
				color: #333333;
				text-align: left;
				font-style: normal;
				font-weight: 600;
				font-size: 28rpx; /* 字体大小30rpx */
				display: -webkit-box; /* 启用弹性盒模型 */
				-webkit-box-orient: vertical; /* 设置盒子内子元素的排列方向为垂直 */
				-webkit-line-clamp: 2; /* 限制最多显示2行 */
				overflow: hidden; /* 超出部分隐藏 */
				text-overflow: ellipsis; /* 超出部分显示省略号（多行时可能不显示，但建议保留） */
				line-height: 1.5; /* 可选：设置行高，优化多行显示效果 */
			}

			.prompt_div {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 23rpx;
				color: #666;
				line-height: 23rpx;
				display: flex;
				align-items: center;
				overflow: hidden;
				.img{
					width: 33rpx;
					height: 33rpx;
				}
				.prompt{
					margin-left: 14rpx;
					font-weight: 400;
					font-size: 22rpx;
					color: #666666;
					line-height: 32rpx;
					text-align: left;
					font-style: normal;
					
				}
				
			}

			.people_progress_div {
				display: flex;
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 23rpx;
				color: #666;
				margin-bottom: 23rpx;

				line-height: 23rpx;
				flex-wrap: nowrap;
				height: 23rpx;
				overflow: hidden;
			}
		}
	}
</style>