KindergartenAppletUI/pages/phone/phone.vue

<template>
	<view class="content">
		<uni-section class="card">
			<view class="test">家长信息绑定</view>
			<uni-card>
				<view class="bind">
					<view class="name">
						<view class="bindtitle">
							家长姓名:
						</view>
						<input type="text" v-model="data.parentName">
					</view>
					<view class="phone">
						<view class="bindtitle">
							家长电话:
						</view>
						<input type="text" v-model="data.phone" maxlength="11">
					</view>
					<view class="id">
						<view class="bindtitle">
							学生身份证:
						</view>
						<input type="text" v-model="data.cardNo" maxlength="18">
					</view>
					<view class="" style="margin:50rpx 0 0 15rpx;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>
						<!-- <u-checkbox-group @change="checkboxGroupChange">
							<u-checkbox  @change="checkboxChange" v-model="checkeds.checked" :name="checkeds.name">
								{{checkeds.name}}
							</u-checkbox>
						</u-checkbox-group> -->
					</view>
					<view class="btn">
						<button @tap="cancel()">取消</button>
						<button @tap="bindParent">确定</button>
					</view>
				</view>
			</uni-card>
		</uni-section>
		<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>
		<!-- <img src="/static/name.png" alt="" sizes="" srcset=""> -->
		<!-- <text v-model="data.parentName">{{data.parentName}}</text> -->
		<!-- <input type="text" v-model="data.phone">-->
		<u-toast ref="uToast" />
	</view>

</template>

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


			},
			//取消按钮
			cancel() {
				uni.removeStorageSync('user');
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},

		},
		//开局获取
		onLoad(options) {
			this.data.openId = options.openId
		}
	}
</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 {
		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: rgba(246, 247, 248, 0.5);
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		z-index: 999;
	}

	.mask {
		width: 90%;
		padding: 0 30rpx 0 30rpx;
		background-color: #fff;
		margin: 150rpx 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 {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 100vh;
		background-image: linear-gradient(#8CCDDF, #fff);
		color: #707374;
		// height: 1230rpx;
		// margin-top: 50rpx;
	}

	::v-deep .u-checkbox__icon-wrap {
		border: 1rpx solid #000000;
	}

	.bind {

		// background-color: #eeeeee;
		width: 670rpx;
		height: 750rpx;
		border-radius: 20rpx;
		font-size: 37rpx;
		// margin-right: -50rpx;
	}

	.test {
		line-height: 104rpx;
		margin: 0 auto;
		color: #4486e8;
		font-size: 45rpx;
		margin-top: 80rpx;
		text-align: center;
		margin-bottom: 50rpx;
	}

	img {
		width: 40rpx;
		height: 40rpx;
		float: left;
		margin-top: 30rpx;
		margin-left: 30rpx;
		margin-right: 40rpx;
	}

	.name,
	.id,
	.phone {
		font-size: 34rpx;
		width: 100%;
		margin: 0 auto;
		display: flex;
		height: 130rpx;
		line-height: 130rpx;
		border-bottom: mediumaquamarine 2rpx solid;

		input {
			height: 130rpx;
			width: 65%;
			line-height: 130rpx;
			// padding-left: 30rpx;
		}

		.bindtitle {
			width: 35%;
		}
	}

	.btn {
		width: 500rpx;
		height: 90rpx;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		margin-top: 140rpx;
	}

	button {
		width: 220rpx;
		// height: 100rpx;
		background-color: #79E7E1;
		color: #fff;
	}
</style>