zhjwxt/uniapp/pages/market/clue/class_arrangement.vue

<template>
	<view class="class-arrange-root">
		<!-- 顶部日期选择 -->
		<view class="date-bar">
			<view class="date-item" v-for="(item, idx) in weekList" :key="idx" :class="{active: item.status}" @click="getDate(item.date,item.day)">
				<view class="week">{{ item.week }}</view>
				<view class="day">{{ item.day }}</view>
			</view>
		</view>
		<!-- "查看更多"按钮移到日期条下方 -->
		<view class="more-bar-wrapper">
			<view class="more-bar" @click="openCalendar">
				<text>查看更多</text>
				<uni-icons type="arrowdown" size="18" color="#bdbdbd" />
			</view>
		</view>
		<!-- 日历底部弹窗 -->
		<uni-popup ref="calendarPopup" type="bottom">
			<uni-calendar @change="onCalendarChange" />
		</uni-popup>

		<!-- 课程卡片列表 -->
		<view class="course-list">
			<view class="course-card" v-for="(course, idx) in courseList" :key="idx">
				<view class="card-header">
					<view class="status-end">{{ getStatusText(course.status) }}</view>
				</view>
				<view class="card-body">
					<view class="row">时间：{{ course.course_date }}</view>
					<view class="row">校区：{{ course.campus_name }}</view>
					<view class="row">教室：{{ course.venue.venue_name }}</view>
					<view class="row">课程：{{ course.course.course_name }}</view>
					<view class="row">人数：{{ course.available_capacity }}</view>
				</view>
				<view class="card-footer">
					<view class="sign-info"></view>
					<button class="detail-btn" @click="viewDetail(course)">详情</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import apiRoute from '@/api/apiRoute.js';
	export default {
		data() {
			return {
				weekList: [],
				selectedDayIndex: 4,
				date: '',
				courseList: [],
				resource_id:''
			};
		},
		onLoad(options) {
			this.resource_id = options.resource_id
			this.getDate();
			
		},
		methods: {
			async getDate(date = '', day = '') {
				try {
					let res = await apiRoute.getDate({
						'date': date,
						'day': day
					})
					this.weekList = res.data.dates
					this.date = res.data.date

					let data = await apiRoute.courseAllList({
						'schedule_date': this.date
					})
					this.courseList = data.data


				} catch (error) {
					console.error('获取信息失败:', error);
				}
			},
			openCalendar() {
				this.$refs.calendarPopup.open();
			},
			closeCalendar() {
				console.log(123123)
				this.$refs.calendarPopup.close();
			},
			viewDetail(course) {
				// 跳转到课程详情页
				this.$navigateTo({
					url: '/pages/market/clue/class_arrangement_detail?id=' + course.id+'&resource_id='+this.resource_id
				});
			},
			onCalendarConfirm(e) {

				// 这里可以处理选中的日期 e.fulldate
				uni.showToast({
					title: '选择日期：' + e.fulldate,
					icon: 'none'
				});

				this.closeCalendar();
			},
			onCalendarChange(e) {
				this.getDate(e.fulldate, e.date);
				this.closeCalendar();
			},
			getStatusText(status) {
				const statusMap = {
					pending: '待开始',
					upcoming: '即将开始',
					ongoing: '进行中',
					completed: '已结束'
				};
				return statusMap[status] || status;
			}
		},
	};
</script>

<style lang="less" scoped>
	.class-arrange-root {
		background: #232323;
		min-height: 100vh;
		padding-bottom: 30rpx;
	}

	.date-bar {
		display: flex;
		align-items: center;
		background: #232323;
		padding: 0 0 10rpx 0;
		overflow-x: auto;
		border-bottom: 1px solid #333;

		.date-item {
			flex: 1;
			text-align: center;
			color: #bdbdbd;
			padding: 16rpx 0 0 0;

			.week {
				font-size: 22rpx;
			}

			.day {
				font-size: 28rpx;
				margin-top: 4rpx;
			}

			&.active {
				color: #29d3b4;

				.day {
					border-radius: 50%;
					background: #333;
					color: #29d3b4;
					padding: 2rpx 10rpx;
				}
			}
		}
	}

	.more-bar-wrapper {
		width: 100%;
		display: flex;
		justify-content: center;
		margin: 10rpx 0 0 0;
	}

	.more-bar {
		display: flex;
		align-items: center;
		color: #bdbdbd;
		font-size: 22rpx;
		cursor: pointer;
		background: #333;
		border-radius: 20rpx;
		padding: 8rpx 24rpx;
	}

	.course-list {
		margin-top: 20rpx;

		.course-card {
			background: #434544;
			border-radius: 10rpx;
			margin: 0 0 20rpx 0;
			padding: 0 0 20rpx 0;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);

			.card-header {
				display: flex;
				justify-content: flex-end;
				padding: 10rpx 20rpx 0 0;

				.status-end {
					background: #e95c6b;
					color: #fff;
					border-radius: 10rpx;
					padding: 4rpx 18rpx;
					font-size: 22rpx;
				}
			}

			.card-body {
				padding: 0 20rpx;

				.row {
					color: #fff;
					font-size: 24rpx;
					margin: 8rpx 0;
				}
			}

			.card-footer {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20rpx;

				.sign-info {
					color: #bdbdbd;
					font-size: 22rpx;
				}

				.detail-btn {
					background: transparent;
					border: 2rpx solid #ffd86b;
					color: #ffd86b;
					border-radius: 8rpx;
					padding: 6rpx 24rpx;
					font-size: 24rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>