ZhiHuiJiaoWu_UniApp/pages/student/my/my.vue

<!--我的-首页-->
<template>
	<view class="main_box">
		<view class="navbar_section">
			<view class="title">我的</view>
		</view>
		<view style="background:#29D3B4;">
			<!--用户信息-->
			<view class="user_section">
				<view class="box">
					<view class="left" @click="personal_data">
						<image class="pic" :src="$util.img(member_info.headimg)"></image>
						<view class="name">{{member_info.name}}</view>
					</view>
					<view class="right" @click="setup">
						<image src="@/static/images/index/setup.png" style="width: 50rpx;height: 50rpx;"></image>
					</view>
				</view>
			</view>

			<!--统计信息-->
			<view class="count_section">
				<view class="main">
					<view class="course_box">
						<view class="top">
							<view class="item">
								<view class="num">{{member_info.classes_count}}</view>
								<view class="intro">我的课程</view>
							</view>
							<view class="item">
								<view class="num">{{member_info.sign_count}}</view>
								<view class="intro">已上课时</view>
							</view>
							<view class="item">
								<view class="num">{{member_info.stay_sign_count}}</view>
								<view class="intro">待上课时
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom"></view>
				<view class="bg_box bg_top"></view>
				<view class="bg_box bg_bottom"></view>
			</view>
		</view>

		<view class="main_section">
			<view class="section_box">
				<view class="item" style="border-radius: 16rpx 16rpx 0 0;" @click="lesson_consumption">
					<view>课时消耗</view>
				</view>

				<view class="item" @click="my_members">
					<view>我的成员</view>
					<view></view>
				</view>

				<view class="item">
					<view>我的合同</view>
					<view></view>
				</view>
			</view>

			<view class="section_box">
				<view class="item">
					<view>我的教练</view>
					<view></view>
				</view>
				<view class="item">
					<view>负责人</view>
					<view></view>
				</view>
				<view class="item" @click="feedback">
					<view>意见反馈</view>
					<view></view>
				</view>
			</view>
		</view>

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

<script>
	import AQTabber from "@/components/AQ/AQTabber.vue"
	import member from '@/api/member.js';
	export default {
		components: {
			AQTabber,
		},
		data() {
			return {
				member_info: [],
			}
		},
		onLoad() {
			this.member_init();
		},
		methods: {
			//获取学员信息
			member_init() {
				member.member().then(res => {
					if(res.code == 1){
						this.member_info = res.data
					}else{
						this.member_info = []
					}					
				})
			},
			//打开设置
			setup(item) {
				uni.navigateTo({
					url: '/pages/student/my/set_up'
				})
			},
			//意见反馈
			feedback() {
				uni.navigateTo({
					url: '/pages/common/feedback'
				})
			},
			//课时消耗
			lesson_consumption() {
				uni.navigateTo({
					url: '/pages/student/my/lesson_consumption'
				})
			},
			//我的成员
			my_members() {
				uni.navigateTo({
					url: '/pages/student/my/my_members'
				})
			},
			//人人资料
			personal_data() {
				uni.navigateTo({
					url: '/pages/student/my/personal_data'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.main_box {
		background: #292929;
		min-height: 28vh;
	}

	//自定义导航栏
	.navbar_section {
		border: 1px solid #29D3B4;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #29D3B4;

		.title {
			padding: 110rpx 0 20rpx;
			font-size: 30rpx;
			color: #fff;
		}
	}

	//用户信息
	.user_section {
		background-color: #29D3B4;
		padding-top: 58rpx;
		padding-bottom: 42rpx;
		color: #fff;
		font-size: 28rpx;

		.box {
			padding-left: 19rpx;
			padding-right: 29rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 15rpx;

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

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

				.name {
					font-size: 28rpx;
				}
			}

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

				.btn {
					min-height: 28rpx;
					font-size: 28rpx;
				}
			}
		}
	}

	//统计信息
	.count_section {
		position: relative;

		.main {
			position: relative;
			z-index: 2;
			padding: 0rpx 24rpx;
			display: flex;
			justify-content: center;

			.course_box {
				padding: 42rpx 28rpx;
				width: 692rpx;
				border-radius: 20rpx;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				gap: 32rpx;

				.top {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.item {
						display: flex;
						flex-direction: column;
						align-items: center;
						gap: 12rpx;

						.num {
							color: #29D3B4;
							font-size: 56rpx;
						}

						.intro {
							color: #AAAAAA;
							font-size: 24rpx;
						}
					}
				}
			}
		}

		.bg_box {
			z-index: 1;
			width: 100%;
			height: 150rpx;
		}

		.bg_top {
			position: absolute;
			top: 0;
			background-color: #29D3B4;
		}

		.bg_bottom {
			top: 50%;
			position: absolute;
			background-color: #292929;
		}
	}

	.main_section {
		margin-top: 20rpx;
		background: #292929 100%;
		padding: 0 24rpx;
		padding-top: 40rpx;
		padding-bottom: 150rpx;
		font-size: 24rpx;
		color: #333333;
		display: flex;
		flex-direction: column;
		gap: 22rpx;

		.section_box {
			margin-bottom: 10rpx;
			background: #fff;
			border-radius: 16rpx;
			padding: 6rpx 24rpx;
			display: flex;
			flex-direction: column;

			.item {
				padding: 35rpx 78rpx;
				border-top: 1px solid #F2F2F2;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
			}

			.item:nth-child(1) {
				border-top: 0;
			}


		}

	}
</style>