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="bindParent()">确定</button>
					</view>
				</view>
			</uni-card>
		</uni-section>
		<!-- <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 {
				data: {
					// 370883199909083232
					// 18363008969
					// 小刘

					cardNo: "",
					parentName: "",
					phone: "",
				},

			}
		},
		methods: {
			bindParent() {
				bindParent(this.data).then(res => {
					console.log((res))
					if (res.code == 200) {
						uni.navigateTo({
							url: '/pages/index/index'
						})
						// uni.showToast({
						// 	title: res.msg,
						// 	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'
				})
			},

		}
	}
</script>

<style lang="scss">
	.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: 80rpx;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		margin-top: 140rpx;
	}

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