KindergartenAppletUI/pages/Personal/Personal.vue

<template>
	<view class="top">
		<view class="content" v-if="!studentId" @tap="goindex">
			<view class="pictures">
				<image src="../../static/toux.png" mode=""></image>
			</view>
			<view class="name">
				点击登录
			</view>
		</view>
		<view class="content" v-else>
			<view class="pictures">
				<image src="../../static/toux.png" mode=""></image>
			</view>
			<view class="name">
				{{parentList.parentName}}
			</view>
			<view class="phone">
				{{parentList.phone}}
			</view>
			<view class="tuichu" @tap="mask=true">
				<image src="../../static/tuichu.png" mode=""></image>
			</view>
		</view>
		<view class="student" v-if="!studentId">
			<view class="studentitem">
				<image src="../../static/renshi.png" mode=""></image>
				<span>学生信息</span>
			</view>
			<view class="backgrounditem">
				<view class="picitem">
					<image src="../../static/zanwu.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="student" v-for="item in studentInfoList" v-else>
			<view class="studentitem">
				<image src="../../static/renshi.png" mode=""></image>
				<span>学生信息</span>
			</view>
			<view class="backgrounditem">
				<view class="nameitem">{{item.studentName}}
				</view>
				<view class="sex">性别.年龄:
					{{item.orderStatus=='PAY'?'已付款':''}}
					<span>{{item.studentSex=='MALE'?'男':''}}
						{{item.studentSex=='FEMALE'?'女':''}} {{item.studentAge}}岁</span>
				</view>
				<view class="sex">所在班级:
					<span>{{item.className}}</span>
				</view>
				<view class="sex">班主任及电话:
					<span>{{item.classTeacher}} {{item.classPhone}}</span>
				</view>
				<view class="sex">所属幼儿园:
					<span>{{item.kindergartenName}}</span>
				</view>
			</view>
		</view>
		<view class="school" v-if="!studentId">
			<view class="studentitem">
				<image src="../../static/xuexiao.png" mode=""></image>
				<span>幼儿园信息</span>
			</view>
			<view class="schoolitem">
				<view class="picitem">
					<image src="../../static/zanwu.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="school" v-for="item in kindergartenInfoList" v-else>
			<view class="gongli" v-if="item.kindergartenType=='public_handle'">
				<image src="../../static/gongli.png" mode=""></image>
			</view>
			<view class="gongli" v-else>
				<image src="../../static/sili.png" mode=""></image>
			</view>
			<view class="studentitem">
				<image src="../../static/xuexiao.png" mode=""></image>
				<span>幼儿园信息</span>
			</view>
			<view class="schoolitem">
				<view class="nameitem">{{item.kindergartenName}}
				</view>
				<view class="sex">学校地址:
					<span>{{item.kindergartenAddress}}</span>
				</view>
				<view class="sex">园长及电话:
					<span>{{item.principalName}} {{item.kindergartenPhone}}</span>
				</view>
			</view>
		</view>
		<view class="masks" style="" v-if="mask">
			<view class="mask">
				<view class="imageitem">
					<img src="/static/tishiimage.png" alt="" sizes="" srcset="">
				</view>
				<view class="title">
					退出提醒
				</view>
				<view class="text" style="margin-top:40rpx">
					确定要推出此账号吗？
				</view>
				<view class="btns">
					<view class="btn1" @tap='mask=false'>拒绝</view>
					<view class="btn2" @tap='gohome'>同意</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getInfoByPhone
	} from '@/api/index/index.js'
	import baseurl from '@/api/baseurl.js'
	export default {
		data() {
			return {
				studentId: null,
				mask: false,
				phone: '',
				studentInfoList: [],
				kindergartenInfoList: [],
				parentList: {},
			}
		},
		onShow() {
			let that = this;
			this.studentId = uni.getStorageSync('studentId');
			if (this.studentId) {
				uni.getStorage({
					key: 'phone',
					success: function(res) {
						that.phone = res.data
						that.getInfoByPhoneinfo();
					},
					fail: function(err) {
						that.login = false
						that.stuinfos = false
						that.tip = true
						that.top2 = false
						that.top = true
					}
				});
				uni.getStorage({
					key: 'user',
					success: function(res) {
						that.yonghuwx = res.data
						// that.mask = true
					},
					fail: function(err) {}
				});
			}
		},
		methods: {
			goindex() {
				uni.navigateTo({
					url: "/pages/index/index"
				})
			},
			getInfoByPhoneinfo() {
				var that = this
				getInfoByPhone(this.phone).then(res => {
					if (res.code == 200) {
						this.studentInfoList = res.data.studentInfoList;
						this.kindergartenInfoList = res.data.kindergartenInfoList;
						this.parentList = res.data;
					} else {}
				})
			},

			gohome() {
				let that = this
				const value = uni.getStorageSync('phone');
				const value2 = uni.getStorageSync('studentId');
				if (value && value2) {
					uni.removeStorageSync('phone');
					uni.removeStorageSync('openid');
					uni.removeStorageSync('this.DATAList');
					uni.removeStorageSync('studentId');
					this.mask = false
					that.$refs.uToast.show({
						message: "退出成功",
						type: 'success',
						duration: '1500'
					})
					if (that.timer) {
						clearTimeout(that.timer)
					}
					that.timer = setTimeout(e => {
						uni.reLaunch({
							url: '/pages/homepage/homepage'
						})
					}, 1000)
				}
			},
		}
	}
</script>

<style lang="scss">
	.studentitem {
		padding: 3%;

		image {
			width: 34rpx;
			height: 34rpx;
		}

		span {
			margin: 2%;
			font-size: 30rpx;

		}
	}

	.nameitem {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #292828;
		// margin: 3%;
		width: 90%;
		border-bottom: 1rpx solid #CDC9C9;
		line-height: 60rpx;
		padding-left: 3%;
		padding-top: 3%;
		margin: 0 auto;
	}

	.sex {
		// width: 139px;
		// height: 25px;
		font-size: 26rpx;
		padding-left: 7%;
		padding-top: 3%;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #9B9A9A;
		line-height: 50rpx;

		span {
			color: #292828;
			font-size: 28rpx;
			padding-left: 5%;
		}
	}

	.top {
		background-image: linear-gradient(#D7EEE8, #fff);
		width: 100%;
		// background-color: red;
		height: 600rpx;

		// margin-top: 10%;
		// padding: 3%;
		.content {
			width: 100%;
			height: 376rpx;
			background: #37A97B;
			position: relative;

			.name {
				position: absolute;
				top: 40%;
				left: 35%;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;

			}

			.phone {
				top: 50%;
				position: absolute;
				left: 35%;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
			}

			.tuichu {
				// width: 35rpx;
				// height: 35rpx;
				top: 45%;
				// float: right;
				left: 90%;
				position: absolute;

				image {

					width: 35rpx;
					height: 35rpx;
				}
			}

			.pictures {
				top: 30%;
				left: 15%;
				position: absolute;

				image {
					width: 139rpx;
					height: 139rpx;


				}
			}
		}

		.masks {
			/* width: 600rpx;
		height: 434rpx;
		background: #FFFFFF;
		border-radius: 10rpx; */

			background-color: #f0f0f0;
			height: 100%;
			width: 100%;
			position: absolute;
			opacity: 0.9;
			top: 0;
			z-index: 999;

			.mask {
				border-radius: 10rpx;
				width: 80%;
				height: 400rpx;
				background-color: #fff;
				margin: 400rpx auto;
				position: relative;

				.title {

					/* height: 80rpx; */
					/* line-height: 100rpx; */

					margin-top: 3%;
					/* border-bottom: 1px solid #eeeeee; */
					/* background-color: red; */
					font-size: 36rpx;
					margin: 0px auto;
					width: 100%;
					text-align: center;
					/* line-height: 80rpx; */

				}

				.text {
					font-size: 30rpx;
					width: 100%;
					text-align: left;
					/* padding-top: 40rpx; */
					text-align: center;

				}
			}

			image {
				width: 136rpx;
				height: 136rpx;
				top: -10%;
				position: relative;
			}

		}

		.btns {
			display: flex;
		}

		.imageitem {
			width: 136rpx;
			height: 136rpx;
			margin: 0 auto;
			/* position: relative; */
		}

		.btn1,
		.btn2 {
			top: 75%;
			width: 254rpx;
			height: 69rpx;
			background: #F4F5F9;
			border-radius: 10rpx;
			/* width: 50%;
		height: 80rpx; */
			line-height: 80rpx;
			text-align: center;
			display: inline-block;
			position: absolute;
			bottom: 0;
		}

		.btn2 {
			/* border-top: 1px solid #eeeeee; */
			background-color: #35A97A;
			right: 3%;
			font-size: 24rpx;
		}

		.btn1 {
			background: #F4F5F9;
			color: #000;
			left: 3%;
			font-size: 24rpx;
		}

		.school {
			width: 95%;
			margin: 0 auto 20rpx;
			height: 420rpx;
			// background-color: red;
			box-shadow: 0rpx 3rpx 18rpx 0rpx rgba(161, 220, 211, 0.43);
			border-radius: 10rpx;
			transform: translateY(-40px);
			// margin-top: 3%;

			.gongli {
				float: right;

				image {
					width: 94rpx;
					height: 84rpx;
				}
			}

			.schoolitem {
				width: 90%;
				margin: 0 auto;
				height: 317rpx;
				background: #F9F9FA;
				border-radius: 10rpx;
				position: relative;

				.picitem {
					position: absolute;
					top: 25%;
					left: 40%;

					image {
						width: 164rpx;
						height: 150rpx;
						margin: 0 auto;
					}
				}
			}

		}

		.student {
			width: 90%;
			height: 573rpx;
			margin: 0 auto;
			transform: translateY(-50px);
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 18rpx 0rpx rgba(161, 220, 211, 0.43);
			border-radius: 10rpx;
			padding: 3%;

			.backgrounditem {
				width: 665rpx;
				height: 445rpx;
				background: #F9F9FA;
				border-radius: 10rpx;
				position: relative;

				.picitem {
					position: absolute;
					top: 25%;
					left: 40%;

					image {
						width: 164rpx;
						height: 150rpx;
						margin: 0 auto;
					}
				}





			}


		}
	}
</style>