zhjwxt/uniapp/components/ChildSelector.vue

<!--孩子选择组件-->
<template>
	<view class="child-selector">
		<view class="parent-info">
			<view class="parent-name">{{ parentInfo.name }}</view>
			<view class="parent-phone">{{ parentInfo.phone_number }}</view>
		</view>
		
		<view class="children-tabs">
			<view 
				v-for="child in childrenList" 
				:key="child.id"
				:class="['child-tab', selectedChild && selectedChild.id === child.id ? 'active' : '']"
				@click="selectChild(child)"
			>
				<view class="child-avatar">
					<image :src="child.avatar" mode="aspectFill"></image>
				</view>
				<view class="child-info">
					<view class="child-name">{{ child.name }}</view>
					<view class="child-details">
						<text class="gender">{{ child.gender === 1 ? '男' : '女' }}</text>
						<text class="age">{{ Math.floor(child.age) }}岁</text>
					</view>
					<view class="child-campus">{{ child.campus_name || '未分配校区' }}</view>
					<view class="child-class">{{ child.class_name || '未分配班级' }}</view>
				</view>
				<view class="child-status">
					<view class="courses-info">
						<text>{{ child.remaining_courses || 0 }}课时</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import apiRoute from '@/api/apiRoute.js'

export default {
	name: 'ChildSelector',
	data() {
		return {
			parentInfo: {},
			childrenList: [],
			loading: false
		}
	},
	computed: {
		...mapState(['selectedChild', 'userRole'])
	},
	mounted() {
		this.loadChildrenList()
	},
	methods: {
		...mapMutations(['SET_SELECTED_CHILD', 'SET_CHILDREN_LIST']),
		
		async loadChildrenList() {
			this.loading = true
			try {
				console.log('开始加载孩子列表...')
				const response = await apiRoute.parent_getChildrenList()
				console.log('孩子列表响应:', response)
				
				if (response.code === 1) {
					// Mock数据结构：response.data.data 是孩子列表，response.data.parent_info 是家长信息
					this.childrenList = response.data.data || []
					this.parentInfo = response.data.parent_info || {}
					this.SET_CHILDREN_LIST(this.childrenList)
					
					console.log('加载到的孩子列表:', this.childrenList)
					console.log('家长信息:', this.parentInfo)
					
					// 如果没有选中的孩子且有孩子列表，默认选中第一个
					if (!this.selectedChild && this.childrenList.length > 0) {
						this.selectChild(this.childrenList[0])
					}
				} else {
					console.error('获取孩子列表失败:', response)
					uni.showToast({
						title: response.msg || '获取孩子列表失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('获取孩子列表失败:', error)
				uni.showToast({
					title: '获取孩子列表失败',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},
		
		selectChild(child) {
			this.SET_SELECTED_CHILD(child)
			this.$emit('childSelected', child)
		}
	}
}
</script>

<style lang="less" scoped>
.child-selector {
	background: #fff;
	border-radius: 20rpx;
	padding: 32rpx;
	margin: 24rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.parent-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 24rpx;
	border-bottom: 1px solid #f0f0f0;
	margin-bottom: 24rpx;
	
	.parent-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}
	
	.parent-phone {
		font-size: 24rpx;
		color: #999;
	}
}

.children-tabs {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.child-tab {
	display: flex;
	align-items: center;
	padding: 24rpx;
	border-radius: 16rpx;
	background: #f8f9fa;
	border: 2rpx solid transparent;
	transition: all 0.3s;
	
	&.active {
		background: rgba(41, 211, 180, 0.1);
		border-color: #29d3b4;
	}
	
	.child-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 24rpx;
		
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.child-info {
		flex: 1;
		
		.child-name {
			font-size: 28rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 8rpx;
		}
		
		.child-details {
			display: flex;
			gap: 16rpx;
			margin-bottom: 8rpx;
			
			.gender, .age {
				font-size: 24rpx;
				color: #666;
				background: #e9ecef;
				padding: 4rpx 12rpx;
				border-radius: 12rpx;
			}
		}
		
		.child-campus, .child-class {
			font-size: 22rpx;
			color: #999;
			margin-bottom: 4rpx;
		}
	}
	
	.child-status {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.courses-info {
			background: #29d3b4;
			color: #fff;
			padding: 8rpx 16rpx;
			border-radius: 20rpx;
			font-size: 22rpx;
			font-weight: 600;
		}
	}
}
</style>