465 lines
8.9 KiB
Vue
465 lines
8.9 KiB
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>
|