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

<template>
	<view>
		<view class="head" @click="toEditProfile">
			<view class="photo">
				<u-avatar class="avatar"
					:src="form.headImg != null ? form.headImg : '../../assets/img/head.png'" size="112">
				</u-avatar>
			</view>
			<view class="infos">
				<view class="name">
					{{form.nickName}}
				</view>
				<view class="modification">
					点击修改个人信息
				</view>
			</view>
		</view>

		<view class="my-children">
			<view class="top">
				<view class="text">
					我的子女
				</view>
				<view class="add" @click="toAddChildInformation()">
					添加
				</view>
			</view>


			<view class="children" v-if="studentList.length != 0">
				<view class="check-box" v-for="(item,index) in studentList" :key="item.studentId">
					<view class="photo" @click="toAddChildInformation(item)">
						<u-avatar class="avatar"
							:src="item.headPhoto != null ? item.headPhoto : '../../assets/img/head.png'" size="80">
						</u-avatar>
					</view>
					<view class="infos" @click="toAddChildInformation(item)">
						<view class="name">
							{{item.studentName}}
						</view>
						<view class="age">
							{{item.age}}岁
						</view>
					</view>
					<view class="radio">
						<u-radio-group v-model="studentId" size="40rpx">
							<u-radio @change="radioChange" :key="item.studentId" :name="item.studentId"></u-radio>
						</u-radio-group>
					</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" @click="gotoUrl('pages/parents/mine/changePhoneNumber/changePhoneNumber')">
				<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">
						{{form.phone.slice(0,3) + '****' + form.phone.slice(-4)}}
					</view>
					<view class="icon">
						<u-icon name="arrow-right" color="#cccccc"></u-icon>
					</view>
				</view>
			</view>
			<view class="item" @click="gotoUrl('pages/parents/mine/optionsList')">
				<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 {
				form: {
					id: '',
					headImg: '',
					nickName: '',
					phone: ''
				},
				show: false,
				title: '退出账号',
				content: '是否退出当前账号?',
				studentList: [],
				studentId: '',
			}
		},
		onShow() {
			this.getParentsInfo();
			this.getStudentList();
		},
		onReady() {
			if(this.carhelp.getStudentId()) {
				this.studentId = this.carhelp.getStudentId().studentId;
			} 
		},
		methods: {
			radioChange(e) {
				this.carhelp.setStudentId({studentId: e});
				this.studentId = e;
			},
			toAddChildInformation(item) {
				if(this.form.id) {
					if(item) {
						uni.navigateTo({
							url: '/pages/parents/mine/addChildInformation?id=' + item.studentId
						})
					} else {
						uni.navigateTo({
							url: '/pages/parents/mine/addChildInformation'
						})
					}
				}else {
					uni.navigateTo({
						url: '/pages/parents/login/login'
					})
				}
				
			},
			getAge(str) {
				var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
				if (r == null) return false;
				var d = new Date(r[1], r[3] - 1, r[4]);
				if (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[4]) {
					var date = new Date();
					var Y = date.getFullYear() - r[1];
					var M = date.getMonth() + 1 - r[3];
					var D = date.getDate();
					if (parseInt(D) - parseInt(r[4]) < 0) {
						M--;
						if (M < 0) {
							Y--;
							M = 11;
						}
					}
					if (M < 0) {
						Y--;
						M = 11;
					}
					if(Y != 0 && M != 0) {
						return (Y + "岁" + M + "个月");
					}else if(Y != 0 && M == 0) {
						return (Y + "岁");
					}else {
						return (M + "个月");
					}
				}
				return ("输入的日期格式错误！");
			},
			getParentsInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				loginApi.findByOpenId({
					openId: this.carhelp.getOpenId()
				}).then((response) => {
					uni.hideLoading();
					this.form = response.data.regUser;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getStudentList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				mineApi.studentList().then((res) => {
					uni.hideLoading();
					this.studentList = res.data.studentList;
					if(this.studentList.length == 1) {
						this.carhelp.setStudentId({studentId: this.studentList[0].studentId});
					}
				}).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"
					})
				})
			},
			toEditProfile() {
				if (this.form.id) {
					uni.navigateTo({
						url: '/pages/parents/mine/editProfile'
					})
				} else{
					uni.navigateTo({
						url: '/pages/parents/login/login'
					})
				}
			},
		}
	}
</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: -webkit-box;

			overflow-x: auto;

			position: relative;

			.check-box {
				width: 48%;
				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: -40rpx;
					

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

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

				}
				
				::v-deep.u-radio__icon-wrap {
					background-color: rgba(221, 241, 242, 1);
				}
			}

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

		.children::-webkit-scrollbar {
			display: none;
		}
	}

	.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>