zhjwxt/uniapp/pages/coach/my/due_soon.vue

<!--即将到期-->
<template>
	<view class="main_box">

		<view class="main_section">
			<!-- 班级成员列表-->
			<view class="section_4">
				<view class="ul">
					<!-- @click="openViewStudentInfo({id:1})" -->
					<view class="li" v-for="(item, index) in studentList" :key="index">
						<view class="left">
							<view class="box_1">
								<image :src="item.avatar || $util.img('/static/icon-img/avatar.png')" mode="aspectFill" class="pic"></image>
								<view class="tag_box">
									即将到期
								</view>
							</view>
							<view class="box_2">
								<view class="name">{{item.name}}</view>
								<view class="date">课程截止时间：{{item.end_date}}</view>
							</view>
						</view>
						<view class="right">
							<view class="item">
								<view>{{
									(item.use_total_hours + item.use_gift_hours)
								}}节</view>
								<view>已上课时</view>
							</view>
							<view class="item">
								<view>{{
									(item.total_hours + item.gift_hours) - (item.use_total_hours + item.use_gift_hours)
								}}节</view>
								<view>剩余课时</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>

		<!--    底部导航-->
		<!--    <AQTabber/>-->
	</view>
</template>

<script>
	import memberApi from '@/api/member.js';
	import AQTabber from "@/components/AQ/AQTabber.vue"


	export default {
		components: {
			AQTabber,
		},
		data() {
			return {
				formData: {},
				tabType: '1', //1=班级成员,2=作业任务
				studentList: []
			}
		},
		onLoad() {
			this.getStudentList();
		},
		methods: {
			async getStudentList() {
				// 模拟数据，实际开发中应该从API获取
				const res = await memberApi.jlGetStudentList({
					'type': 'daoqi'
				});
				if (res.code == 1) {
					this.studentList = res.data || [];
				} else {
					uni.showToast({
						title: res.msg || '获取学员列表失败',
						icon: 'none'
					});
				}
			},
			//打开课程详情
			openViewCourseInfo(item) {
				uni.navigateTo({
					url: '/pages-coach/coach/course/info'
				})
			},
			//打开学员详情页
			openViewStudentInfo(item) {
				uni.navigateTo({
					url: '/pages-coach/coach/student/info'
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.main_box {
		background: #292929;
	}

	//自定义导航栏
	.navbar_section {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #292929;

		.title {
			padding: 40rpx 0rpx;

			/* 小程序端样式 */
			// #ifdef MP-WEIXIN
			padding: 80rpx 0rpx;
			// #endif

			font-size: 30rpx;
			color: #fff;
		}
	}

	.main_section {
		min-height: 100vh;
		background: #292929 100%;
		padding: 0 24rpx;
		padding-top: 40rpx;
		padding-bottom: 150rpx;
		font-size: 24rpx;
		color: #FFFFFF;

		//班级成员列表
		.section_4 {
			.ul {
				display: flex;
				flex-direction: column;
				gap: 10rpx;

				.li {
					padding: 20rpx 0;
					padding-bottom: 40rpx;
					border-bottom: 2px solid #D7D7D7;
					display: flex;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;
						gap: 30rpx;

						.box_1 {
							padding-left: 20rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							position: relative;

							.pic {
								width: 84rpx;
								height: 84rpx;
								border-radius: 50%;
							}

							.tag_box {
								position: absolute;
								bottom: -30rpx;
								width: 120rpx;
								height: 38rpx;
								background-color: #F59A23;
								border-radius: 4rpx;
								line-height: 35rpx;
								text-align: center;
								font-size: 20rpx;
							}
						}

						.box_2 {
							display: flex;
							flex-direction: column;
							gap: 20rpx;

							.name {
								font-size: 28rpx;
							}

							.date {
								font-size: 24rpx;
							}
						}
					}

					.right {
						display: flex;
						align-items: center;
						gap: 14rpx;

						.item {
							border: 1px solid #00E5BB;
							border-radius: 10rpx;
							width: 102rpx;
							display: flex;
							flex-direction: column;

							view {
								text-align: center;
								height: 50rpx;
								line-height: 50rpx;
							}

							view:nth-child(1) {
								font-size: 32rpx;
								background-color: #fff;
								color: #00e5bb;
							}

							view:nth-child(2) {
								font-size: 20rpx;
								background-color: #00e5bb;
							}
						}
					}
				}
			}
		}
	}
</style>