KindergartenAppletUI/pages/index/index.vue

<template>
	<view class="content">
		<view class="" style="width:100%">
			<view class="top" v-show="top"></view>
			<view class="nicheng" v-if="login" @tap='wxGetUserInfo'>
				<view class="tx-w">
					<view class="tx">
						<image class="tx-img" src="/static/dl.png" v-if="yonghuwx.length==0"></image>
						<image class="tx-img" src="/static/dl.png" v-else-if="yonghuwx.avatarUrl==''"></image>
						<image class="tx-img" :src="yonghuwx.avatarUrl" v-else></image>
						<view class="zx"></view>
					</view>
					<view class="infos">
						<view class="studentName" v-if="parentList.parentName==''">姓名:{{yonghuwx.nickName}}</view>
						<view class="studentName" v-else>姓名:{{parentList.parentName}}</view>
						<view class="name" v-if="yonghuwx.length==0">昵称:{{parentList.parentName}} </view>
						<view class="name" v-else-if="yonghuwx.nickName==''">昵称:{{parentList.parentName}} </view>
						<view class="name" v-else>昵称:{{yonghuwx.nickName}} </view>
					</view>
				</view>
			</view>
			<view class="nicheng2" v-else>
				<view class="tx-w">
					<view class="tx" style="margin-left: 130rpx;">
						<image class="tx-img" src="/static/dl.png"></image>
						<view class="zx"></view>
					</view>
					<view class="login" style="margin-left:45% ;">
						<view class="" :src="yonghuwx.avatarUrl">
							暂未登录
						</view>
					</view>
				</view>
			</view>
			<view class="top2" v-show="top2"></view>
			<view class="tip" v-show="tip">
				<!-- <button @tap='wxGetUserInfo'>授权登录</button> -->
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumberp">授权登录</button>
			</view>
			<view class="stuinfos" v-show="stuinfos">
				<view class="student">
					<view class="stinfo">
						<img src="/static/student.png" alt="" sizes="" srcset="">
						<view class="st">学生信息</view>
					</view>
					<view class="th">
						<view class="stname">姓名</view>
						<view class="sex">性别</view>
						<view class="age">年龄</view>
						<view class="class">班级</view>
						<view class="score">成绩</view>

					</view>
					<view class="tr" v-for="item in studentList">
						<view class="stname">{{item.studentName}}</view>
						<view class="sex">{{item.studentSex | formatSex}} </view>
						<view class="age">{{item.studentAge}}岁</view>
						<view class="class">{{item.className}}</view>
						<view class="read">
							<navigator :url="`/pages/home/home?studentId=${item.studentId}`
						">查看</navigator>
						</view>
					</view>
				</view>
				<view class="kindergarten">
					<view class="stinfo">
						<img src="/static/children.png" alt="" sizes="" srcset="">
						<text>幼儿园信息</text>
					</view>
					<view class="th">
						<view class="kinderclass" style="line-height: 100rpx;height: 100rpx;">幼儿园</view>
						<view class="teacher" style="line-height: 100rpx;height: 100rpx;">班主任</view>
					</view>
					<view class="tr" v-for="item in classList">
						<view class="kinderclass">{{item.kindergartenName}}</view>
						<view class="teacher">
							<span class='teachername'> {{item.classTeacher}}</span>
						</view>
					</view>
				</view>
				<view class="parentinfo">
					<view class="stinfo">
						<img src="/static/parent.png" alt="" sizes="" srcset="">
						<text>家长信息</text>
					</view>
					<view class="th">
						<view class="parent">家长</view>
						<view class="phone">电话</view>
					</view>
					<view class="tr">
						<view class="parent">{{parentList.parentName}}</view>
						<view class="phone">{{parentList.phone}}</view>
					</view>
				</view>
			</view>
			<view class="masks" style="" v-if="mask">
				<view class="mask">
					<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='gophone()'>确定</view>
					</view>
				</view>
			</view>
			<!-- <view class="masks" style="" v-if="mask2">
				<view class="mask2">
					<view class="title">
						微信授权
					</view>
					<view class="sq">
						 <img src="/static/sq.png" alt="" sizes="" srcset="">
						<img src="/static/sq1.png" alt="" sizes="" srcset="">
					</view>
					<view class="text">
						授权绑定您的手机号码
					</view>
					<view class="btns">
						<button class="btn1" @tap='mask2=false'>拒绝</button>
						<button class="btn2" open-type="getPhoneNumber" @getphonenumber="getPhoneNumberp">允许</button>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>
<script>
	import {
		getPreOrderById,
		getInfoByPhone
	} from '@/api/index/index.js'
	export default {
		components: {},
		data() {
			return {
				top: true,
				top2: false,
				login: false,
				mask: false,
				mask2: false,
				before: false,
				stuinfos: false,
				tip: true,
				yonghuwx: [],
				logincode: '',
				phonecode: '',
				phone: '',
				studentList: [],
				classList: [],
				parentList: [],
				msg: '',
				openId: '',
			}
		},
		methods: {
			setitem() {
				let that = this;
				uni.getStorage({
					key: 'user',
					success: function(res) {
						that.yonghuwx = res.data
						that.login = true
						that.stuinfos = true
						that.tip = false
						that.top2 = true
						that.top = false
						that.getPreOrderById();
						// that.mask = true
					}
				});
			},
			gophone() {
				const openid = this.openId
				uni.navigateTo({
					url: `/pages/phone/phone?openId=${openid}`
				})
				this.mask = false;
			},
			getPreOrderById() {
				getPreOrderById(this.logincode, this.phonecode).then(res => {
					if (res.code == 200) {
						if (res.data.flag == "EMPTY") {
							this.mask = true;
							this.openId = res.data.openId
						} else {
							// this.mask = true;
							this.phone = res.data.phone
							uni.setStorage({
								key: 'phone',
								data: res.data.phone
							});
							if (this.phone != '') {
								this.getInfoByPhoneinfo()
							}
							this.login = true
							this.stuinfos = true
							this.tip = false
							this.top2 = true
							this.top = false
							// this.mask2 = false;
						}
					}
				})
			},

			getPhoneNumberp(val) {
				this.phonecode = val.detail.code
				let that = this;
				wx.login({
					provider: 'weixin',
					success: function(loginRes) {
						that.logincode = loginRes.code
						that.getPreOrderById();
						// that.mask2 = false;
					}
				});
			},
			wxGetUserInfo() {
				let that = this;
				uni.getUserProfile({
					desc: "获取用户信息",
					lang: "zh_CN",
					success(res) {
						that.yonghuwx = res.userInfo
						uni.setStorage({
							key: 'user',
							data: res.userInfo
						});
						that.mask2 = true
					},
					fail(res) {
						//失败则返回home页面
					},
				});
			},

			getInfoByPhoneinfo() {
				var that = this
				getInfoByPhone(this.phone).then(res => {
					if (res.code == 200) {
						this.studentList = res.data.studentInfoList;
						this.classList = res.data.classInfoList;
						this.parentList = res.data;
						that.login = true
						that.stuinfos = true
						that.tip = false
						that.top2 = true
						that.top = false
						// this.mask = true;
					} else {

					}
				})
			}
		},
		filters: {
			// 格式化性别
			formatSex(str) {
				const sexEnum = {
					"FEMALE": "女",
					"MALE": "男"
				}
				return sexEnum[str];
			},
		},
		onLoad(options) {
			let that = this;
			uni.getStorage({
				key: 'phone',
				success: function(res) {
					that.phone = res.data
					// that.mask = true
					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) {}
			});






			// this.yonghuwx = JSON.parse(options.userinfo)
			// uni.request({
			//     url: '/kindergarten/applet/appletLogin', //仅为示例，并非真实接口地址。
			// 	method:'GET'
			//     data: {
			//         text: 'uni.request'
			//     },

			//     success: (res) => {
			//         this.text = 'request success';
			//     }
			// });




		},
	}
</script>

<style>
	.btns {}

	.btn1,
	.btn2 {
		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: #4486e8; */
		right: 0;
	}

	.btn1 {
		border-top: 1px solid #eeeeee;
		border-right: 1px solid #eeeeee;
		background-color: #4486e8;
		color: #fff;
		left: 0;
	}

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

	.mask2 {
		width: 70%;
		height: 400rpx;
		background-color: #fff;
		margin: 200rpx auto;
		position: relative;
	}

	.sq {
		width: 90rpx;
		height: 90rpx;
		/* background-color: red; */
		margin: 0 auto;
		padding-top: 25rpx;
		padding-bottom: 40rpx;
	}

	.masks img {
		width: 90rpx;
		height: 90rpx;
	}

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

	}

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

	.mask {
		width: 70%;
		height: 300rpx;
		background-color: #fff;
		margin: 200rpx auto;
		position: relative;
	}

	.content {

		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #ffffff;
		min-height: 100vh;
	}


	.top {
		/* background-color: #4486e8; */
		/* background: url(@/static/bjt.png) no-repeat; */
		background-image: linear-gradient(#55C5E3, #fff);
		width: 100%;
		height: 600rpx;
		float: left;
		/* display:inline-block; */
	}

	.top2 {
		/* background-color: #4486e8; */
		background-image: linear-gradient(#55C5E3, #fff);
		width: 100%;
		height: 400rpx;
		float: left;

	}


	.info {
		color: #eeeeee;
		text-align: center;
		margin-top: 40rpx;
		font-size: 36rpx;
	}

	/* 头像 */
	.tx-w {
		margin-top: 50rpx;

	}

	.tx {
		margin-left: 90rpx;
	}

	.tx image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		color: #fff;
	}

	.studentName {
		margin-left: 280rpx;
	}

	.infos {
		margin-top: -100rpx;
		color: #707374;
	}

	.name {
		margin-left: 280rpx;
	}

	.name-qm {
		margin-left: ;
		text-align: center;
		margin-top: 40rpx;
		font-size: 60rpx;
	}

	.nicheng {
		width: 700rpx;
		height: 240rpx;
		background-color: rgba(255, 255, 255, 0.8);
		position: absolute;
		margin-top: 50px;
		margin-left: 3.3%;
		/* display: flex;
		flex-direction: column; */

		/* box-shadow: 0rpx 2rpx 0rpx 0rpx #a9caf5; */
		border-radius: 20rpx;
	}

	.nicheng2 {
		width: 90%;
		height: 240rpx;
		background-color: rgba(255, 255, 255, 0.3);
		position: absolute;
		margin-top: 150rpx;
		margin-left: 5%;
		/* display: flex;
		flex-direction: column; */

		/* box-shadow: 0rpx 2rpx 0rpx 0rpx #a9caf5; */
		border-radius: 20rpx;
	}

	/* 登陆 */
	.login {
		width: 200rpx;
		height: 200rpx;
		/* background-color: red; */
		margin: 0 auto;
		margin-top: -100rpx;
		margin-left: 40%;
		font-size: 35rpx;
		color: #fff;
	}

	.stuinfos {
		margin-left: 3.3%;
	}

	.tip button {
		background-color: #79E7E1;
		color: #fff;
	}

	.tip {
		width: 450rpx;
		height: 70rpx;
		/* background-color:orchid; */
		font-size: 50rpx;
		margin: 0 auto;
		color: #515151;
		margin-top: 100%;
	}

	/* 学生信息 */
	.student {
		width: 700rpx;
		/* height: 180px; */

		margin-top: 360rpx;
		box-shadow: 0rpx 2rpx 0rpx 0rpx #e6ebfe;
		border-radius: 20rpx;
		margin-bottom: 16rpx;
		/* color: cornflowerblue; */
		background-color: #eef9fc;
		color: #707374;
		/* display: flex; */
		/* flex-direction: row; */
	}

	img {
		/* margin-top: 10px; */
		width: 40rpx;
		height: 40rpx;
		/* margin-top: 9px; */
		margin-right: 30rpx;
		margin-bottom: -4rpx;
	}

	.st {
		display: inline-block;
		margin-bottom: 3rpx;
		/* width: 20px;
		height: 20px; */
		/* margin-top: 10px; */
		/* background-color: red; */
	}

	.stinfo {
		/* height: 30px; */
		margin-left: 30rpx;
		font-size: 40rpx;
		color: #4486e8;
		/* border-bottom: #eeecec 1px solid; */
		/* text-align: center; */
		font-weight: 500;
	}

	.th {
		/* background-color: orange; */
		display: flex;
		justify-content: flex-start;
		border-top: lightsteelblue 2rpx solid;

	}

	.tr {
		display: flex;
		justify-content: flex-start;
	}

	.stname {
		width: 140rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		/* background-color: red; */
		border-bottom: lightsteelblue 2rpx solid;



	}

	.sex {
		width: 140rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		/* background-color: blueviolet; */
		border-bottom: lightsteelblue 2rpx solid;
	}

	.age {
		width: 140rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		/* background-color: burlywood; */
		border-bottom: lightsteelblue 2rpx solid;
	}

	.class {
		width: 140rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		/* background-color: orange; */
		border-bottom: lightsteelblue 2rpx solid;
	}

	/* 幼儿园 */
	.kindergarten {
		width: 700rpx;
		background-color: #eef9fc;
		box-shadow: 0rpx 2rpx 0px 0px #e6ebfe;
		border-radius: 20rpx;
		margin-bottom: 16rpx;
		color: #707374;
	}

	.kinderclass {
		padding-left: 10rpx;
		width: 400rpx;
		/* height: 100rpx; */
		line-height: 50rpx;
		text-align: center;
		/* background-color: red; */
		border-bottom: lightsteelblue 1px solid;
		/* overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap; */
	}

	.teachername {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.teacher {
		width: 360rpx;
		/* height: 100rpx; */
		/* line-height: 100rpx; */
		text-align: center;
		/* background-color: red; */
		border-bottom: lightsteelblue 2rpx solid;
		/* padding-left: 50px; */
		position: relative;
	}


	.score {
		width: 140rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-bottom: lightsteelblue 2rpx solid;

	}

	.read {
		width: 140rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-bottom: lightsteelblue 2rpx solid;
		color: cornflowerblue;
	}

	/* 家长信息 */
	.parentinfo {
		/* position: absolute; */
		width: 700rpx;
		/* height: 106px; */
		/* margin-top: 510px; */
		background-color: #eef9fc;
		box-shadow: 0rpx 2rpx 0rpx 0rpx #e6ebfe;
		border-radius: 20rpx;
		color: #707374;
	}

	.parent {
		width: 350rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		/* background-color: red; */
		border-bottom: lightsteelblue 2rpx solid;
	}

	.phone {
		width: 350rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		/* background-color: red; */
		border-bottom: lightsteelblue 2rpx solid;
	}
</style>