FE-lab-xcx/pages_safetyEducationExamination/views/studyHourTask/index.vue

<!-- 学时任务列表 -->
<template>
	<view class="safetyEducationExamination-studyHourTask">
		<!-- 顶部类型标签 -->
		<scroll-view scroll-x class="tag-scroll" enable-flex>
			<view class="tag-scroll-inner">
				<text
					v-for="(tag, index) in typeTags"
					:key="index"
					class="filter-tag"
					:class="{ 'filter-tag-active': activeTagIndex === index }"
					@click="onTagChange(index)"
				>{{ tag.label }}</text>
			</view>
		</scroll-view>

		<!-- 课程列表 -->
		<scroll-view scroll-y class="scroll-content" @scrolltolower="onScrollToLower">
			<view class="panel">
				<view
					v-for="(item, index) in courseList"
					:key="index"
					class="course-card"
					@click="goCourseDetail(item)"
				>
					<view class="course-cover" :style="'background:' + item.coverGradient">
						<image v-if="item.materialType == 1 && item.exampleImg" :src="baseUrl + item.exampleImg" class="cover-image" mode="aspectFill" />
						<text v-else class="cover-icon">{{ item.coverIcon || '📖' }}</text>
					</view>
					<view class="course-info">
						<view class="course-info-top">
							<text class="course-name">{{ item.coursewareName }}</text>
							<text class="status-tag" :class="item.statusClass">{{ item.statusName }}</text>
						</view>
						<text class="course-meta">{{ formatDuration(item.minLearningDuration) }}分钟 | {{ item.creditHours }}学时 | {{ item.points }}积分</text>
					</view>
				</view>
				<view v-if="!courseList[0] && !loading" class="empty-tip">暂无学时任务</view>
				<view v-if="loading" class="loading-tip">加载中...</view>
				<view v-if="noMore && courseList[0]" class="loading-tip">没有更多了</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		goLearning,
	} from '@/pages_safetyEducationExamination/utils/index.js'
	import {
		config
	} from '@/api/request/config.js'
	import {
		examUserCoursewareLearningList,
		examElKnowledgePointTreeList,
	} from '@/pages_safetyEducationExamination/api/index.js'

	// 封面渐变色池
	const COVER_GRADIENTS = [
		'linear-gradient(135deg,#ffd666,#fa8c16)',
		'linear-gradient(135deg,#b37feb,#722ed1)',
		'linear-gradient(135deg,#ff9c6e,#f5222d)',
		'linear-gradient(135deg,#5cdbd3,#13c2c2)',
		'linear-gradient(135deg,#1857d4,#5b8af0)',
		'linear-gradient(135deg,#10a37f,#34d399)',
		'linear-gradient(135deg,#6c63ff,#a78bfa)',
		'linear-gradient(135deg,#95de64,#237804)',
	];

	// 学习状态映射
	function getStatusInfo(status) {
		const map = {
			0: { name: '未开始', cls: 'tag-gray' },
			1: { name: '学习中', cls: 'tag-orange' },
			2: { name: '已完成', cls: 'tag-green' },
		};
		return map[status] || map[0];
	}

	export default {
		data() {
			return {
				baseUrl: config.base_url,
				typeTags: [],
				activeTagIndex: 0,
				courseList: [],
				loading: false,
				page: 1,
				pageSize: 10,
				total: 0,
				noMore: false,
				knowledgePointIds: null, // 从上个页面传来的知识点ID数组
			}
		},
		onLoad(options) {
			console.log('options',options);
			// 接收知识点ID参数
			if (options.knowledgePointId) {
				this.knowledgePointIds = options.knowledgePointId;
			}
		},
		created() {

		},
		async onShow() {
			await this.loadTypeTags();
			this.resetList();
		},
		methods: {
			// 递归扁平化树形结构，提取所有节点
			flattenTree(nodes, result = []) {
				if (!nodes || !Array.isArray(nodes)) return result;

				nodes.forEach(node => {
					result.push(node);
					if (node.children && node.children.length > 0) {
						this.flattenTree(node.children, result);
					}
				});

				return result;
			},

			// 加载知识点标签（根据传入的knowledgePointIds过滤）
			async loadTypeTags() {
				try {
					const { data } = await examElKnowledgePointTreeList({ dataScope: 1 });
					if (data.code === 200 && data.data) {
						// 扁平化树形结构，获取所有节点
						const allNodes = this.flattenTree(data.data);

						let tags = allNodes;

						// 如果有传入的知识点ID，则过滤标签
						if (this.knowledgePointIds) {
							const idsArray = this.knowledgePointIds.split(',').map(id => id.trim());
							tags = allNodes.filter(item => idsArray.includes(String(item.id)));
						}

						const typeTags = tags.map(item => ({
							label: item.knowledgePointName,
							value: item.id,
						}));

						this.$set(this, 'typeTags', typeTags);

						// 默认选中第一个
						if (typeTags.length > 0) {
							this.activeTagIndex = 0;
						}
					}
				} catch (e) {
					console.error('获取知识点类型失败', e);
				}
			},
			onTagChange(index) {
				if (this.activeTagIndex !== index) {
					this.activeTagIndex = index;
					this.resetList();
				}
			},
			resetList() {
				this.page = 1;
				this.noMore = false;
				this.courseList = [];
				this.loadCourseList();
			},
			// 学时任务列表（materialType为空，查询全部类型）
			async loadCourseList() {
				if (this.loading || this.noMore) return;
				this.loading = true;
				try {
					const tag = this.typeTags[this.activeTagIndex];
					const { data } = await examUserCoursewareLearningList({
						page: this.page,
						pageSize: this.pageSize,
						materialType: '', // 空字符串，查询全部类型
						knowledgePointId: tag ? tag.value : undefined,
					});
					if (data.code === 200) {
						const records = (data.data.records || []).map((item, i) => {
							const s = getStatusInfo(item.learnStatus);
							const colorIndex = (this.courseList.length + i) % COVER_GRADIENTS.length;
							return {
								...item,
								coverGradient: COVER_GRADIENTS[colorIndex],
								statusName: s.name,
								statusClass: s.cls,
							};
						});
						const newList = this.page === 1 ? records : [...this.courseList, ...records];
						this.$set(this, 'courseList', newList);
						this.total = data.data.total;
						if (newList.length >= this.total) {
							this.noMore = true;
						} else {
							this.page++;
						}
					}
				} catch (e) {
					console.error('获取学时任务失败', e);
				} finally {
					this.loading = false;
				}
			},
			onScrollToLower() {
				this.loadCourseList();
			},
			// 秒数转分钟
			formatDuration(seconds) {
				return seconds ? Math.ceil(seconds / 60) : 0;
			},
			goCourseDetail(item) {
				// 跳转课程详情，传递 coursewareId
				goLearning(item)
			},
		},
	}
</script>

<style lang="stylus" scoped>
	.safetyEducationExamination-studyHourTask
		height 100%
		display flex
		flex-direction column
		overflow hidden
		background-color #f0f4fb

	// 类型标签横滚
	.tag-scroll
		background #fff
		white-space nowrap
		padding 16rpx 24rpx
		border-bottom 1rpx solid #e8edf3
		flex-shrink 0

	.tag-scroll-inner
		display inline-flex
		gap 16rpx

	.filter-tag
		display inline-block
		font-size 22rpx
		padding 8rpx 20rpx
		border-radius 30rpx
		background #eef1f6
		color #666
		border 1rpx solid transparent
		white-space nowrap

	.filter-tag-active
		background #e6f0ff
		color #1677ff
		border-color #91caff
		font-weight 600

	// 滚动区
	.scroll-content
		flex 1
		overflow hidden

	.panel
		padding 24rpx

	// 课程卡片
	.course-card
		background #fff
		border-radius 20rpx
		margin-bottom 20rpx
		overflow hidden
		box-shadow 0 2rpx 12rpx rgba(0,0,0,0.04)
		border 1rpx solid #dde3ed

	.course-cover
		width 100%
		height 180rpx
		display flex
		align-items center
		justify-content center

	.cover-icon
		font-size 64rpx

	.cover-image
		width 100%
		height 100%

	.course-info
		padding 20rpx 24rpx

	.course-info-top
		display flex
		justify-content space-between
		align-items center
		margin-bottom 8rpx

	.course-name
		flex 1
		font-size 28rpx
		font-weight 600
		color #222
		margin-right 12rpx

	.course-meta
		font-size 22rpx
		color #999

	// 状态标签
	.status-tag
		font-size 20rpx
		padding 4rpx 12rpx
		border-radius 8rpx
		border 1rpx solid transparent
		flex-shrink 0

	.tag-gray
		background #f5f5f5
		color #999
		border-color #e8e8e8

	.tag-orange
		background #fff7e6
		color #d46b08
		border-color #ffd591

	.tag-green
		background #f6ffed
		color #389e0d
		border-color #b7eb8f

	// 提示
	.empty-tip
		text-align center
		line-height 80rpx
		color #aaa
		font-size 24rpx

	.loading-tip
		text-align center
		line-height 60rpx
		color #aaa
		font-size 22rpx
</style>