jp-education-student/pages/parents/mine/mine.vue

<template>
	<view>
		<view class="head">
			<view class="photo">
				<img src="../../../assets/img/minePhoto.png" alt="">
			</view>
			<view class="infos">
				<view class="name">
					用户191012
				</view>
				<view class="modification">
					点击修改个人信息
				</view>
			</view>
		</view>

		<view class="my-children">
			<view class="top">
				<view class="text">
					我的子女
				</view>
				<view class="add">
					添加
				</view>
			</view>

			<view class="children">
				<view class="check-box" v-for="(item,index) in studentList" :key="item.studentId">
					<view class="photo">
						<img :src="item.headPhoto" alt="">
					</view>
					<view class="infos">
						<view class="name">
							{{item.studentName}}
						</view>
						<view class="age">
							4岁1个月
						</view>
					</view>
					<view class="radio">
						<label class="radio">
							<radio value="" />
						</label>
					</view>
				</view>

				<view class="check-box">
					<view class="photo">
						<img src="../../../assets/img/zixuan.png" alt="">
					</view>
					<view class="infos">
						<view class="name">
							王紫瑄
						</view>
						<view class="age">
							6岁7个月
						</view>
					</view>
					<view class="radio">
						<label class="radio">
							<radio value="" />
						</label>
					</view>
				</view>

				<view class="check-box">
					<view class="photo">
						<img src="../../../assets/img/zixuan.png" alt="">
					</view>
					<view class="infos">
						<view class="name">
							王紫瑄
						</view>
						<view class="age">
							6岁7个月
						</view>
					</view>
					<view class="radio">
						<label class="radio">
							<radio value="" />
						</label>
					</view>
				</view>

			</view>

		</view>

		<view class="class-times">
			<view class="box">
				<view class="times">
					36节
				</view>
				<view class="text">
					购买课次
				</view>
			</view>
			<u-line direction="col" color="rgba(232, 232, 232, 1)" length="80rpx" margin="auto 0"></u-line>
			<view class="box">
				<view class="times">
					4节
				</view>
				<view class="text">
					赠送课次
				</view>
			</view>
		</view>

		<view class="option-group">
			<view class="item">
				<view class="title">
					<view class="icon">
						<img src="../../../assets/img/riLine-user-smile-line@1x.png" alt="">
					</view>
					<view class="text">
						人脸信息采集
					</view>
				</view>

				<view class="value">
					<view class="text">
					</view>
					<view class="icon">
						<u-icon name="arrow-right" color="#cccccc"></u-icon>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="title">
					<view class="icon">
						<img src="../../../assets/img/riLine-smartphone-line@1x(1).png" alt="">
					</view>
					<view class="text">
						绑定手机
					</view>
				</view>

				<view class="value">
					<view class="text">
						155****0000
					</view>
					<view class="icon">
						<u-icon name="arrow-right" color="#cccccc"></u-icon>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="title">
					<view class="icon">
						<img src="../../../assets/img/riLine-file-edit-line@1x.png" alt="">
					</view>
					<view class="text">
						意见反馈
					</view>
				</view>

				<view class="value">
					<view class="icon">
						<u-icon name="arrow-right" color="#cccccc"></u-icon>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="title">
					<view class="icon">
						<img src="../../../assets/img/riLine-customer-service-2-line@1x.png" alt="">
					</view>
					<view class="text">
						联系我们
					</view>
				</view>

				<view class="value">
					<view class="text">
						0716-8888888
					</view>
					<view class="icon">
						<u-icon name="arrow-right" color="#cccccc"></u-icon>
					</view>
				</view>
			</view>
			<view class="item" @click="gotoUrl('pages/parents/mine/logout')">
				<view class="title">
					<view class="icon">
						<img src="../../../assets/img/riLine-spam-3-line@1x.png" alt="">
					</view>
					<view class="text">
						注销账号
					</view>
				</view>

				<view class="value">
					<view class="text">
						注销后无法恢复，请谨慎操作
					</view>
					<view class="icon">
						<u-icon name="arrow-right" color="#cccccc"></u-icon>
					</view>
				</view>
			</view>

			<view class="item" @click="signOut">
				<view class="title">
					<view class="icon">
						<img src="../../../assets/img/riLine-logout-box-r-line@1x(1).png" alt="">
					</view>
					<view class="text">
						退出账号
					</view>
				</view>

				<view class="value">
					<view class="text">

					</view>
					<view class="icon">
						<u-icon name="arrow-right" color="#cccccc"></u-icon>
					</view>
				</view>
			</view>
			<u-modal v-model="show" @confirm="confirm" confirm-color="#FF3D00" :show-cancel-button="true" ref="uModal"
				:asyncClose="true" :title="title" :content="content" :content-style="{color: '#333333'}"></u-modal>

		</view>


		<ParentsTabbar :current="3" ref="tabbarMain"></ParentsTabbar>
	</view>
</template>

<script>
	import * as mineApi from '@/apis/parents/mine.js'
	import * as loginApi from '@/apis/login.js'
	import * as API from '@/apis/index.js'
	import ParentsTabbar from '@/components/ParentsTabbar.vue'

	export default {
		components: {
			ParentsTabbar
		},
		data() {
			return {
				parentsInfo: {},
				show: false,
				title: '退出账号',
				content: '是否退出当前账号?',
				studentList: [],
			}
		},
		onReady() {
			this.getStudentList();
		},
		methods: {
			getParentsInfo() {

			},
			getStudentList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				mineApi.studentList().then((res) => {
					uni.hideLoading();
					this.studentList = res.data.studentList;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			signOut() {
				this.show = true;
			},
			confirm() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.logout().then((res) => {
					uni.hideLoading();
					this.show = false;
					this.carhelp.logoff()
					uni.reLaunch({
						url: '/pages/parents/login/login'
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head {
		padding: 48rpx 40rpx;
		display: flex;
		align-items: center;

		.photo {
			width: 120rpx;
			height: 120rpx;
			border-radius: 100rpx;
			border: 4rpx solid rgba(255, 255, 255, 1);
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.infos {
			margin-left: 32rpx;

			.name {
				color: rgba(51, 51, 51, 1);
				font-size: 20px;
				line-height: 20px;
				font-weight: bold;
			}

			.modification {
				color: rgba(119, 119, 119, 1);
				font-size: 24rpx;
				line-height: 24rpx;
				margin-top: 16rpx;
			}
		}
	}


	.my-children {
		margin: 0 32rpx;
		padding: 32rpx 24rpx;
		border-radius: 12px;
		background: linear-gradient(90deg, rgba(13, 186, 199, 1) 0%, rgba(37, 209, 146, 1) 100%);

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

			.text {
				color: rgba(255, 255, 255, 1);
				font-size: 18px;
			}

			.add {
				width: 120rpx;
				line-height: 28px;
				border-radius: 50px;
				background-color: rgba(255, 174, 0, 1);
				color: rgba(255, 255, 255, 1);
				font-size: 28rpx;
				text-align: center;
			}
		}

		.children {
			margin-top: 12px;
			border-radius: 16rpx;
			background-color: rgba(255, 255, 255, 1);
			padding: 24rpx 24rpx 8rpx 24rpx;
		    display: flex;
			flex-wrap: wrap;
          
	     
			.check-box {
				padding: 16rpx 40rpx 16rpx 16rpx;
				border-radius: 100rpx;
				background-color: rgba(13, 186, 199, 0.1);
				border: 1px solid rgba(13, 186, 199, 0.5);
				display: flex;
				position: relative;
				margin-right: 24rpx;
                margin-bottom:16rpx;
				.photo {
					width: 80rpx;
					height: 80rpx;
					border-radius: 100rpx;
					overflow: hidden;

					img {
						width: 100%;
						height: 100%;
					}
				}
				@media screen and(max-width:320px){
					.photo {
						width: 70rpx;
						height: 70rpx;
						border-radius: 999rpx;
						overflow: hidden;
					
						img {
							width: 100%;
							height: 100%;
							vertical-align: middle;
						}
					}
				}

				.infos {
					margin-left: 16rpx;

					.name {
						width: 96rpx;
						overflow: hidden;
						white-space: nowrap;
					    text-overflow: ellipsis;
						color: rgba(51, 51, 51, 1);
						font-size: 32rpx;
						line-height: 48rpx;
					}

					.age {
						color: rgba(119, 119, 119, 1);
						font-size: 24rpx;
						line-height: 28rpx;
					}
				}

				.radio {
					position: absolute;
					bottom: -2rpx;
					right: -8rpx;

					/deep/.uni-radio-input {
						width: 40rpx;
						height: 40rpx;
						background-color: rgba(221, 241, 242, 1);
					}

					/deep/.uni-radio-input-checked {
						background-color: #43C9D3 !important;
						border-color: #43C9D3 !important;
					}

				}
			}
  @media screen and(max-width:320px) {
            	.check-box{
					margin-right:16rpx;
				}
            }
		}
	}

	.class-times {
		border-radius: 12px;
		background-color: rgba(255, 255, 255, 1);
		display: flex;
		padding: 20px 0;
		margin: 12px 16px;

		.box {
			width: 50%;
			text-align: center;

			.times {
				color: rgba(51, 51, 51, 1);
				font-size: 20px;
				font-weight: bold;

			}

			.text {
				color: rgba(119, 119, 119, 1);
				font-size: 14px;
				margin-top: 8px;
			}
		}
	}

	.option-group {
		margin: 0 32rpx;
		background-color: #fff;
		border-radius: 12px;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx;
			border-bottom: 1px solid rgba(244, 244, 244, 1);

			.title {
				display: flex;
				align-items: center;

				img {
					vertical-align: middle;
				}

				.text {
					margin-left: 16rpx;
					color: rgba(119, 119, 119, 1);
					font-size: 28rpx
				}
			}

			.value {
				display: flex;
				align-items: center;

				.icon {
					margin-left: 16rpx;
				}

				.text {
					color: rgba(119, 119, 119, 1);
					font-size: 24rpx;
				}
			}
		}
	}
</style>