zhjwxt/uniapp/pages/coach/student/student_list.vue

<template>
	<view class="container">
		<view class="content">
			<view v-if="studentList.length === 0" class="empty-box">
				<image src="/static/icon-img/empty.png" mode="aspectFit" class="empty-img"></image>
				<text class="empty-text">暂无学员数据</text>
			</view>
			<view v-else class="student-list">
				<view v-for="(item, index) in studentList" :key="index" class="student-item" @click="goToDetail(item)">
					<view class="student-card">
						<view class="student-avatar">
							<image :src="item.avatar || '/static/icon-img/avatar.png'" mode="aspectFill" class="avatar-img"></image>
						</view>
						<view class="student-info">
							<view class="student-name">{{item.name}}</view>
							<view class="info-row">
								<text class="info-label">所属校区：</text>
								<text class="info-value">{{item.campus}}</text>
							</view>
							<view class="info-row">
								<text class="info-label">剩余课程：</text>
								<text class="info-value">{{
									(item.total_hours + item.gift_hours) - (item.use_total_hours + item.use_gift_hours)
								}}节</text>
							</view>
							<view class="info-row">
								<text class="info-label">到期时间：</text>
								<text class="info-value">{{item.end_date}}</text>
							</view>
						</view>
						<view class="arrow-right">
							<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
						</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 {
				studentList: []
			}
		},
		onLoad() {
			this.getStudentList();
		},
		methods: {
			navigateBack() {
				uni.navigateBack();
			},
			async getStudentList() {
				// 模拟数据，实际开发中应该从API获取
				const res = await memberApi.jlGetStudentList({});
				if(res.code == 1) {
				  this.studentList = res.data || [];
				} else {
				  uni.showToast({
				    title: res.msg || '获取学员列表失败',
				    icon: 'none'
				  });
				}
				
				// 使用模拟数据
				// this.studentList = [
				// 	{
				// 		id: 1,
				// 		name: '张三',
				// 		avatar: '/static/icon-img/avatar.png',
				// 		campus: '总部校区',
				// 		remainingCourses: 10,
				// 		expiryDate: '2023-12-31'
				// 	},
				// 	{
				// 		id: 2,
				// 		name: '李四',
				// 		avatar: '/static/icon-img/avatar.png',
				// 		campus: '西区校区',
				// 		remainingCourses: 5,
				// 		expiryDate: '2023-11-15'
				// 	},
				// 	{
				// 		id: 3,
				// 		name: '王五',
				// 		avatar: '/static/icon-img/avatar.png',
				// 		campus: '东区校区',
				// 		remainingCourses: 15,
				// 		expiryDate: '2024-01-20'
				// 	},
				// 	{
				// 		id: 4,
				// 		name: '赵六',
				// 		avatar: '/static/icon-img/avatar.png',
				// 		campus: '南区校区',
				// 		remainingCourses: 8,
				// 		expiryDate: '2023-11-30'
				// 	},
				// 	{
				// 		id: 5,
				// 		name: '刘七',
				// 		avatar: '/static/icon-img/avatar.png',
				// 		campus: '北区校区',
				// 		remainingCourses: 20,
				// 		expiryDate: '2024-02-15'
				// 	},
				// 	{
				// 		id: 6,
				// 		name: '陈八',
				// 		avatar: '/static/icon-img/avatar.png',
				// 		campus: '总部校区',
				// 		remainingCourses: 3,
				// 		expiryDate: '2023-10-30'
				// 	}
				// ];
			},
			goToDetail(student) {
				uni.navigateTo({
					url: `/pages/market/clue/clue_info?resource_sharing_id=`+student.resource_sharing_id
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #F5F5F5;
	}
	
	.content {
		padding: 20rpx;
	}
	
	.empty-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 200rpx;
		
		.empty-img {
			width: 200rpx;
			height: 200rpx;
		}
		
		.empty-text {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #999;
		}
	}
	
	.student-list {
		.student-item {
			margin-bottom: 20rpx;
		}
		
		.student-card {
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			border-radius: 12rpx;
			padding: 30rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		}
		
		.student-avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 60rpx;
			overflow: hidden;
			margin-right: 30rpx;
			
			.avatar-img {
				width: 100%;
				height: 100%;
			}
		}
		
		.student-info {
			flex: 1;
		}
		
		.student-name {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
			color: #333;
		}
		
		.info-row {
			display: flex;
			font-size: 26rpx;
			margin-top: 8rpx;
			
			.info-label {
				color: #666;
			}
			
			.info-value {
				color: #333;
			}
		}
		
		.arrow-right {
			padding-left: 20rpx;
		}
	}
</style>