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

<!-- 学时任务列表 -->
<template>
	<view class="safetyEducationExamination-studyHourTask">
		<!-- 顶部类型标签 -->
		<scroll-view scroll-x class="tag-scroll">
			<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">
			<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">
						<text class="cover-icon">{{ item.coverIcon || '📖' }}</text>
					</view>
					<view class="course-info">
						<view class="course-info-top">
							<text class="course-name">{{ item.courseName }}</text>
							<text class="status-tag" :class="item.statusClass">{{ item.statusName }}</text>
						</view>
						<text class="course-meta">{{ item.courseDuration }}分钟 | {{ item.studyHours }}学时 | {{ item.points }}积分</text>
					</view>
				</view>
				<view v-if="!courseList[0] && !loading" class="empty-tip">暂无学时任务</view>
				<view v-if="loading" class="loading-tip">加载中...</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		examUserCourseLearningList,
		examUserExamTypeSelectExamType,
	} 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 {
				typeTags: [{ label: '全部', value: null }],
				activeTagIndex: 0,
				courseList: [],
				loading: false,
			}
		},
		created() {
			this.loadTypeTags();
		},
		onShow() {
			this.loadCourseList();
		},
		methods: {
			// 加载考试类型标签
			async loadTypeTags() {
				try {
					const { data } = await examUserExamTypeSelectExamType({});
					if (data.code === 200 && data.data) {
						const tags = (data.data || []).map(item => ({
							label: item.examTypeName,
							value: item.examTypeId,
						}));
						this.$set(this, 'typeTags', [{ label: '全部', value: null }, ...tags]);
					}
				} catch (e) {
					console.error('获取考试类型失败', e);
				}
			},
			onTagChange(index) {
				this.activeTagIndex = index;
				this.loadCourseList();
			},
			// 学时任务列表（courseType=1）
			async loadCourseList() {
				if (this.loading) return;
				this.loading = true;
				try {
					const tag = this.typeTags[this.activeTagIndex];
					const { data } = await examUserCourseLearningList({
						page: 1,
						pageSize: 50,
						courseType: 1,
						examTypeId: tag.value || undefined,
					});
					if (data.code === 200) {
						const list = (data.data.records || []).map((item, i) => {
							const s = getStatusInfo(item.learnStatus);
							return {
								...item,
								coverGradient: COVER_GRADIENTS[i % COVER_GRADIENTS.length],
								statusName: s.name,
								statusClass: s.cls,
							};
						});
						this.$set(this, 'courseList', list);
					}
				} catch (e) {
					console.error('获取学时任务失败', e);
				} finally {
					this.loading = false;
				}
			},
			goCourseDetail(item) {
				// 跳转课程详情，传递 courseId
			},
		},
	}
</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

	.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>