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">
						家长姓名：<input type="text" v-model="data.parentName">
					</view>
					<view class="id">
						学生身份证：<input type="text" v-model="data.cardNo" maxlength="18">
					</view>
					<view class="phone">
						家长电话：<input type="text" v-model="data.phone" maxlength="11">
					</view>
					<view class="btn">
						<button @tap="cancel()">取消</button>
						<button @tap="show=true">确定</button>
					</view>
				</view>
			</uni-card>
		</uni-section>
		<view class="masks" style="" v-if="show">
			<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>
				<view class="btns">
					<view class="btn1" @tap='show=false'>取消</view>
					<view class="btn2" @tap='bindParent'>确定</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">-->
	</view>

</template>

<script>
	import {
		bindParent
	} from '@/api/index/index.js'
	export default {
		data() {
			return {
				show: false,
				data: {
					// 370883199909083232
					// 18363008969
					// 小刘
					cardNo: "",
					parentName: "",
					phone: "",
					openId: '',
				},

			}
		},
		methods: {
			bindParent() {
				this.show = false;
				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'
						})
						uni.showToast({
							title: '添加成功',
							icon: 'none',
							duration: 2000
						});
					} else if (res.code == 500) {
						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(#55C5E3, #fff);
		color: #707374;
		// height: 1230rpx;
		// margin-top: 50rpx;
	}

	input:nth-child(2) {
		margin-left: 300rpx;
	}

	input {
		margin-top: -100rpx;
		margin-left: 220rpx;
	}


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

		height: 160rpx;
		line-height: 160rpx;
		// background-color: red;
		border-bottom: mediumaquamarine 2rpx solid;
	}

	.id {
		height: 160rpx;
		line-height: 160rpx;
		border-bottom: mediumaquamarine 2rpx solid;
	}

	.phone {
		height: 160rpx;
		line-height: 160rpx;
		border-bottom: mediumaquamarine 2rpx solid;
	}

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