KindergartenAppletUI/pages/Parentinformation/Parentinformation.vue

<template>
	<view class="content">
		<view class="top">
			<view class="touxiang">
				<image src="../../static/jiazhang.png" mode=""></image>
			</view>
			<view class="itemsname">
				<view class="parentname">
					家长姓名
				</view>
				<view class="name-item">
					<image src="../../static/name-item.png" mode=""></image>
				</view>
				<view class="inputitem">
					<input type="text" maxlength="50" v-model="data.parentName">
				</view>
			</view>
			<view class="itemphone">
				<view class="parentphone">
					家长电话
				</view>
				<view class="name-items">
					<image src="../../static/phone-item.png" mode=""></image>
				</view>
				<view class="inputitems">
					<input type="text" v-model="data.phone" maxlength="11">
				</view>
			</view>
			<view class="itemidcard">
				<view class="schoolphone">
					学生身份证号
				</view>
				<view class="idcard">
					<image src="../../static/idcard.png" mode=""></image>
				</view>
				<view class="inputidcard">
					<input type="text" v-model="data.cardNo" maxlength="18">
				</view>
			</view>
			<view class=""
				style="display:flex;    position: relative;left:18%; top:70%;  font-size: 28rpx;line-height: 50rpx;">
				<checkbox value="cb" :checked="checked" />
				我已阅读并同意
				<view class="" style="display: inline-block;color:#4D8CE9;border-bottom:1rpx solid #4D8CE9;"
					@tap='maskshow=true'>
					《隐私保护协议》
				</view>
			</view>
			<view class="cancelitem">
				<view class="cancel" @tap="cancel">
					取消
				</view>
				<view class="submit" @tap="bindParent">
					确认
				</view>
			</view>
		</view>
		<view class="masks" style="" v-if="maskshow">
			<view class="mask">
				<view class="title">
					智慧幼儿体质评估与促进系统隐私保护
				</view>
				<view class="text" style="">
					<P>本指引是智慧幼儿体质评估与促进系统小程序开发者为收集、使用和存储您的信息而制定。</P>
					<p>开发者收集信息：</p>
					<ul>
						<li>1、开发者收集您的姓名，用于绑定学生家长信息；</li>
						<li>2、开发者收集学生身份证号，用于确认学生身份及成绩信息；</li>
						<li>3、开发者收集您的手机号，用于查询学生绑定的信息；</li>
					</ul>
					开发者对信息的存储：
					<li>1、存储地点：境内</li>
					<li>2、存储期限：小程序停止运营后及时删除；</li>
					<view class="" style="margin-top: 50rpx;">
						本次操作遵守国家相关法律法规，采集的信息仅用于学生体质评估报告的相关信息查询。
					</view>
				</view>
				<view class="btns">
					<view class="btn1" @tap='maskshow=false'>取消</view>
					<view class="btn2" @tap='checkeds'>阅读并同意</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		bindParent
	} from '@/api/index/index.js'
	import baseurl from '@/api/baseurl.js'
	export default {
		data() {
			return {
				checked: false,
				maskshow: false,
				data: {
					// 370883199909083232
					// 18363008969
					// 小刘
					cardNo: "",
					parentName: "",
					phone: "",
					openId: '',
					// list: [{
					// 	type: 'error',
					// 	icon: false,
					// 	title: '确定',
					// 	message: "",
					// }],
				},
			}
		},
		onLoad(options) {
			this.data.openId = options.openId
		},
		methods: {
			//点击隐私保护的确定
			checkeds() {
				this.checked = true;
				this.maskshow = false
			},
			//点击确定
			bindParent() {
				if (this.checked == false) {
					this.$refs.uToast.show({
						type: 'error',
						title: "请先阅读《隐私保护协议》!",
					})
					setTimeout(() => {
						this.maskshow = true
					}, 500)
				} else {
					uni.removeStorageSync('phone');
					bindParent(this.data).then(res => {
						if (res.code == 200) {
							uni.setStorageSync("phone", res.msg)
							this.$refs.uToast.show({
								title: "添加成功",
								type: 'success'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/index/index'
								})
							}, 500)
						} else if (res.code == 500) {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							})
						}
					})
				}
			},
			//取消按钮
			cancel() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
		}
	}
</script>

<style lang="scss">
	.text {
		margin-top: 40rpx;
		padding-bottom: 80rpx;
	}

	.btn1,
	.btn2 {
		width: 50%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		display: inline-block;
		position: absolute;
		background-color: #fff;
		bottom: -80rpx;
	}

	.btn2 {
		right: 0;
	}

	.masks {
		background-color: rgba(246, 247, 248, 0.5);
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		z-index: 999;
	}

	.mask {
		width: 80%;
		padding: 0 30rpx 0 30rpx;
		left: -5%;
		background-color: #fff;
		margin: 100rpx auto;
		opacity: 1;
		position: relative;
	}

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

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

		.top {
			margin-top: 5%;
			width: 95%;
			height: 1266rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 18rpx 0rpx rgba(182, 218, 213, 0.43);
			border-radius: 10rpx;
			position: relative;

			.cancelitem {
				position: absolute;
				bottom: 10%;
				display: flex;
				left: 10%;

				.cancel {
					width: 254rpx;
					margin-left: 5%;
					height: 69rpx;
					background: #F4F5F9;
					border-radius: 10rpx;
					line-height: 69rpx;
					font-size: 28rpx;
					text-align: center;
				}

				.submit {
					width: 254rpx;
					margin-left: 5%;
					height: 69rpx;
					font-size: 28rpx;
					background: #35A97A;
					border-radius: 10rpx;
					line-height: 69rpx;
					text-align: center;
					color: #fff;
				}
			}

			.bottombutton {

				span {
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #666666;
					line-height: 36rpx;
					bottom: 18%;
					position: absolute;
					left: 25%;
				}

				// /deep/ .u-radio-group
				// {
				// 	bottom: 18%;
				// 	position: absolute;
				// 	left: 20%;
				// }
			}

			.itemphone {
				.parentphone {
					position: absolute;
					top: 26%;
					left: 5%;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #000000;
					line-height: 48rpx;
					display: flex;

				}

				.inputitems {
					background: #FBFBFD;
					border-radius: 10rpx;
					width: 85%;
					height: 89rpx;
					top: 30%;
					left: 6%;
					position: absolute;
					border: 1px solid #D7EEE8;

					input {
						position: absolute;
						width: 75%;
						top: 30%;
						left: 15%;

					}
				}

				.name-items {
					width: 71rpx;
					height: 71rpx;
					position: absolute;
					top: 30%;
					left: 7%;
					z-index: 999;

					image {
						top: 24%;
						position: absolute;
						left: 7%;
						width: 71rpx;
						height: 71rpx;
					}
				}

			}

			.itemidcard {
				.schoolphone {
					position: absolute;
					top: 40%;
					left: 5%;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #000000;
					line-height: 48rpx;
					display: flex;

				}

				.idcard {
					width: 71rpx;
					height: 71rpx;
					position: absolute;
					top: 45%;
					left: 7%;
					z-index: 999;

					image {
						top: 24%;
						position: absolute;
						left: 7%;
						width: 71rpx;
						height: 71rpx;
					}
				}


				.inputidcard {
					background: #FBFBFD;
					border-radius: 10rpx;
					width: 85%;
					height: 89rpx;
					top: 45%;
					left: 6%;
					position: absolute;
					border: 1px solid #D7EEE8;

					input {
						position: absolute;
						width: 75%;
						top: 37%;
						left: 15%;

					}

				}
			}

			// 姓名
			.itemsname {
				.parentname {
					// width: 300px;
					// height: 26px;
					position: absolute;
					top: 8%;
					left: 5%;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #000000;
					line-height: 48rpx;
					display: flex;




				}

				.name-item {
					width: 71rpx;
					height: 71rpx;
					position: absolute;
					top: 15%;
					left: 7%;
					z-index: 999;

					image {
						position: absolute;
						top: 16%;
						left: 7%;
						width: 71rpx;
						height: 71rpx;
					}
				}

				.inputitem {
					background: #FBFBFD;
					border-radius: 10rpx;
					width: 85%;
					height: 89rpx;
					top: 15%;
					left: 6%;
					position: absolute;
					border: 1px solid #D7EEE8;

					input {
						position: absolute;
						width: 75%;
						top: 25%;
						left: 15%;

					}
				}

			}

			.touxiang {
				// float: right;
				position: absolute;
				right: 3%;
				transform: translateY(-30px);

				image {
					width: 172rpx;
					height: 172rpx;
				}
			}
		}
	}
</style>