KindergartenAppletUI/pages/index/index.vue

<template>
	<view class="content">
		<view class="top" v-show="top"></view>
		<view class="tucengstyle">
			<image src="/static/tuceng.png"></image>
		</view>
		<view class="zhihui">幼儿体质健康</br>促进系统
		</view>
		<button class="denglu" open-type="getPhoneNumber" @getphonenumber='getPhoneNumberp'>微信一键登录</button>
		<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='gophone()'>同意</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	import {
		getPreOrderById,
		getInfoByPhone,
		loginLogging,
		prescriptionLogging
	} from '@/api/index/index.js'
	import baseurl from '@/api/baseurl.js'
	export default {
		components: {},
		data() {
			return {
				top: true,
				mask: false,
				DATAList: [],
				logincode: '',
				phonecode: '',
				phone: '',
				openId: '',
			}
		},
		methods: {
			gophone() {
				const openid = this.openId
				uni.navigateTo({
					url: `/pages/Parentinformation/Parentinformation?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.phone = res.data.phone
							uni.setStorageSync("phone", res.data.phone)
							if (this.phone != '') {
								this.getInfoByPhoneinfo()
							}
							this.$refs.uToast.show({
								message: "登录成功",
								type: 'success',
								duration: '5000'
							})
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/homepage/homepage'
								})
							}, 1000)
							this.top = false
						}
					} else {
						this.$refs.uToast.show({
							message: "登录失败",
							type: 'error',
							duration: '5000'
						})
					}
				})
			},
			getPhoneNumberp(val) {
				this.phonecode = val.detail.code
				let that = this;
				wx.login({
					provider: 'weixin',
					success: function(loginRes) {
						that.logincode = loginRes.code
						that.getPreOrderById();
					}
				});
			},
			info() {
				const items = uni.getStorageSync("this.DATAList");
				loginLogging(items).then(res => {})
			},
			getInfoByPhoneinfo() {
				var that = this
				getInfoByPhone(this.phone).then(res => {
					if (res.code == 200) {
						this.DATAList = res.data
						let items = JSON.stringify(this.DATAList);
						uni.setStorageSync("this.DATAList", items)
						this.info();
					} else {}
				})
			}
		},
		filters: {
			// 格式化性别
			formatSex(str) {
				const sexEnum = {
					"FEMALE": "女",
					"MALE": "男"
				}
				return sexEnum[str];
			},
		},
		onShow() {
			let that = this;
			that.phone = uni.getStorageSync('phone');
			if (that.phone) {
				that.getInfoByPhoneinfo();
			} else {
				that.top = true
			}
		},
	}
</script>

<style>
	button {
		line-height: 97rpx;
		width: 357rpx;
		bottom: 30%;
		height: 97rpx;
		background: linear-gradient(90deg, #6ACAA3, #37A97B);
		border-radius: 10rpx;
		color: #fff;
		top: 58%;
		position: absolute;
	}

	.zhihui {
		width: 381rpx;
		font-size: 48rpx;
		text-align: center;
		color: #000000;
		line-height: 72rpx;
		top: 38%;
		position: absolute;
	}

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

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

	}

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

	.masks img {
		width: 136rpx;
		height: 136rpx;
		top: -10%;
		position: relative;
	}

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

	}

	.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; */
	}

	.mask {
		width: 80%;
		height: 400rpx;
		background-color: #fff;
		margin: 500rpx 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(#D7EEE8, #fff);
		width: 100%;
		height: 600rpx;
		float: left;
		/* display:inline-block; */
	}



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

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

	}

	.tx {
		margin-left: 90rpx;
	}

	.tucengstyle image {
		width: 50%;
		height: 400rpx;
		position: absolute;
		left: 38%;
		top: 15%;
		/* background-color: red; */
		width: 200rpx;
		height: 189rpx;
		text-align: center;
		/* 	vertical-align:middle;
		top:-50%;left:-50%; */
		/* position:relative; */
		/* margin-top: 10%; */
	}

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

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

		margin-top: 360rpx;
		box-shadow: 0rpx 2rpx 0rpx 0rpx #e6ebfe;
		border-radius: 10rpx;
		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>