435 lines
10 KiB
Vue
435 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<view class="content">
|
|||
|
|
<view class="head">
|
|||
|
|
<image src="../../static/images/liangbiao-bg.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="con">
|
|||
|
|
<view class="tab-con">
|
|||
|
|
<view :class="['tab', tabCur == 0 ? 'tab-first' : '']" @click="selectAuto">自动选择</view>
|
|||
|
|
<view :class="['tab', tabCur == 1 ? 'tab-second' : '']" @click="selectTab">手动输入</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="info" v-if="tabCur == 0">
|
|||
|
|
<view class="line">
|
|||
|
|
<view class="title">我的儿童:</view>
|
|||
|
|
<input type="text" v-model="child" name="child" placeholder-style="color:#c7c7c7"
|
|||
|
|
placeholder="选择绑定的儿童>" auto-focus @click="popChild" />
|
|||
|
|
</view>
|
|||
|
|
<view class="line">
|
|||
|
|
<view class="title">儿童姓名:</view>
|
|||
|
|
<input type="text" v-model="childName" name="childName" placeholder-style="color:#c7c7c7"
|
|||
|
|
placeholder="选择完儿童自动填写">
|
|||
|
|
</view>
|
|||
|
|
<view class="line">
|
|||
|
|
<view class="title">性别:</view>
|
|||
|
|
<input type="text" v-model="childSexAuto" name="childSex" placeholder-style="color:#c7c7c7"
|
|||
|
|
placeholder="选择完儿童自动填写">
|
|||
|
|
</view>
|
|||
|
|
<view class="line">
|
|||
|
|
<view class="title">出生日期:</view>
|
|||
|
|
<input type="text" v-model="birthday" name="birthday" placeholder-style="color:#c7c7c7"
|
|||
|
|
placeholder="选择完儿童自动填写">
|
|||
|
|
</view>
|
|||
|
|
<view class="line">
|
|||
|
|
<view class="title">联系电话:</view>
|
|||
|
|
<input type="text" v-model="phone" name="phone" placeholder-style="color:#c7c7c7"
|
|||
|
|
placeholder="选择完儿童自动填写">
|
|||
|
|
</view>
|
|||
|
|
<view class="address">
|
|||
|
|
<view class="title">地址(选填):</view>
|
|||
|
|
<textarea class="text" type="text" v-model="address" name="address"
|
|||
|
|
placeholder-style="color:#c7c7c7" placeholder="请输入地址"></textarea>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="hand" v-if="tabCur == 1">
|
|||
|
|
<view class="line">
|
|||
|
|
<view class="title">儿童姓名:</view>
|
|||
|
|
<input type="text" v-model="childName" name="childName" placeholder-style="color:#c7c7c7"
|
|||
|
|
placeholder="请输入儿童真实姓名">
|
|||
|
|
</view>
|
|||
|
|
<view class="line">
|
|||
|
|
<view class="title">性别:</view>
|
|||
|
|
<input type="text" v-model="childSex" name="childSex" placeholder-style="color:#c7c7c7"
|
|||
|
|
placeholder="请选择儿童性别>" @click="popSex">
|
|||
|
|
</view>
|
|||
|
|
<view class="line">
|
|||
|
|
<view class="title">出生日期:</view>
|
|||
|
|
<input type="text" v-model="birthday" name="birthday" placeholder-style="color:#c7c7c7"
|
|||
|
|
placeholder="请选择儿童出生日期>" @click="popBirthday">
|
|||
|
|
</view>
|
|||
|
|
<view class="line">
|
|||
|
|
<view class="title">联系电话:</view>
|
|||
|
|
<input type="text" v-model="phone" name="phone" placeholder-style="color:#c7c7c7"
|
|||
|
|
placeholder="请输入家长手机号">
|
|||
|
|
</view>
|
|||
|
|
<view class="address">
|
|||
|
|
<view class="title">地址(选填):</view>
|
|||
|
|
<textarea class="text" type="text" v-model="address" name="address"
|
|||
|
|
placeholder-style="color:#c7c7c7" placeholder="请输入地址"></textarea>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="treaty">
|
|||
|
|
<checkbox-group @change="checkboxChange" class="checkbox">
|
|||
|
|
<label>
|
|||
|
|
<checkbox value="1" :checked="treatyChecked" style="transform:scale(0.7)" />
|
|||
|
|
</label>
|
|||
|
|
</checkbox-group>
|
|||
|
|
<view class="privacy-policy-text">
|
|||
|
|
<text>同意运营商收集以上信息1，</text>
|
|||
|
|
<text class="privacy-policy-text-btn" @click="goPolicy">《隐私政策》</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="btn" @click="goTest">开始测试</view>
|
|||
|
|
|
|||
|
|
<uni-popup type="bottom" ref="childPop" :animation="true" :maskClick="true">
|
|||
|
|
<view class="agency-popup">
|
|||
|
|
<view class="head">
|
|||
|
|
<button type="default" @tap.stop="close">取消</button>
|
|||
|
|
<button type="default" @tap.stop="sure">确定</button>
|
|||
|
|
</view>
|
|||
|
|
<picker-view :value="value" indicator-style="height: 50px;" @change="bindChange" class="picker-view">
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view class="item" v-for="(item,index) in childList" :key="index">{{item.name}}</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
</picker-view>
|
|||
|
|
</view>
|
|||
|
|
</uni-popup>
|
|||
|
|
<uni-popup type="bottom" ref="sexPop" :animation="true" :maskClick="true">
|
|||
|
|
<view class="agency-popup">
|
|||
|
|
<view class="head">
|
|||
|
|
<button type="default" @tap.stop="closeSex">取消</button>
|
|||
|
|
<button type="default" @tap.stop="sureSex">确定</button>
|
|||
|
|
</view>
|
|||
|
|
<picker-view :value="sex" indicator-style="height: 50px;" @change="bindChangeSex" class="picker-view">
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view class="item" v-for="(item,index) in sexList" :key="index">{{item.name}}</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
</picker-view>
|
|||
|
|
</view>
|
|||
|
|
</uni-popup>
|
|||
|
|
<uni-popup type="bottom" ref="birthdayPop" :animation="true" :maskClick="true">
|
|||
|
|
<view class="agency-popup">
|
|||
|
|
<view class="head">
|
|||
|
|
<button type="default" @tap.stop="closeBirthday">取消</button>
|
|||
|
|
<button type="default" @tap.stop="sureBirthday">确定</button>
|
|||
|
|
</view>
|
|||
|
|
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
|
|||
|
|
<view class="uni-input">{{date}}</view>
|
|||
|
|
</picker>
|
|||
|
|
</view>
|
|||
|
|
</uni-popup>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
const currentDate = this.getDate({
|
|||
|
|
format: true
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
tabList: [{
|
|||
|
|
name: '自动选择',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '手动输入',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
tabCur: 0,
|
|||
|
|
childList: [{
|
|||
|
|
name: '绝对是'
|
|||
|
|
}, {
|
|||
|
|
name: '第三方'
|
|||
|
|
}, {
|
|||
|
|
name: '大范围'
|
|||
|
|
}],
|
|||
|
|
child: '',
|
|||
|
|
childName: '',
|
|||
|
|
childSexAuto: '',
|
|||
|
|
birthday: '',
|
|||
|
|
phone: '',
|
|||
|
|
address: '',
|
|||
|
|
treatyChecked: false, // 用户服务协议与隐私协议
|
|||
|
|
value: [0],
|
|||
|
|
sex: [0],
|
|||
|
|
|
|||
|
|
childSex: '',
|
|||
|
|
sexList: [{
|
|||
|
|
name: '男'
|
|||
|
|
}, {
|
|||
|
|
name: '女'
|
|||
|
|
}],
|
|||
|
|
date: currentDate,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
goPolicy() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: "/loginPackage/pages/PrivacyPolicy"
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
goTest() {
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: "/homePackage/pages/answerDetail"
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
selectAuto() {
|
|||
|
|
this.tabCur = 0;
|
|||
|
|
},
|
|||
|
|
selectTab() {
|
|||
|
|
this.tabCur = 1;
|
|||
|
|
},
|
|||
|
|
checkboxChange(e) {
|
|||
|
|
if (e.detail.value.indexOf('1') == 0) {
|
|||
|
|
this.treatyChecked = true;
|
|||
|
|
} else {
|
|||
|
|
this.treatyChecked = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
popChild() {
|
|||
|
|
this.$refs.childPop.open();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
bindChange(e) { //选择器中的滑动
|
|||
|
|
console.log(e.detail.value)
|
|||
|
|
this.value = e.detail.value;
|
|||
|
|
},
|
|||
|
|
sure() {
|
|||
|
|
this.child = this.childList[this.value].name;
|
|||
|
|
this.close();
|
|||
|
|
},
|
|||
|
|
close() {
|
|||
|
|
this.$refs.childPop.close();
|
|||
|
|
},
|
|||
|
|
bindChangeSex(e) { //选择器中的滑动
|
|||
|
|
console.log(e.detail.value)
|
|||
|
|
this.sex = e.detail.value;
|
|||
|
|
},
|
|||
|
|
popSex() {
|
|||
|
|
this.$refs.sexPop.open();
|
|||
|
|
},
|
|||
|
|
sureSex() {
|
|||
|
|
this.childSex = this.sexList[this.sex].name;
|
|||
|
|
this.closeSex();
|
|||
|
|
},
|
|||
|
|
closeSex() {
|
|||
|
|
this.$refs.sexPop.close();
|
|||
|
|
},
|
|||
|
|
bindChangeBirthday(e) { //选择器中的滑动
|
|||
|
|
console.log(e.detail.value)
|
|||
|
|
// this.sex = e.detail.value;
|
|||
|
|
},
|
|||
|
|
popBirthday() {
|
|||
|
|
this.$refs.birthdayPop.open();
|
|||
|
|
},
|
|||
|
|
sureBirthday() {
|
|||
|
|
// this.childSex = this.sexList[this.sex].name;
|
|||
|
|
// this.closeBirthday();
|
|||
|
|
},
|
|||
|
|
closeBirthday() {
|
|||
|
|
this.$refs.birthdayPop.close();
|
|||
|
|
},
|
|||
|
|
bindDateChange(e) {
|
|||
|
|
this.date = e.detail.value
|
|||
|
|
},
|
|||
|
|
getDate(type) {
|
|||
|
|
console.log('225')
|
|||
|
|
const date = new Date();
|
|||
|
|
let year = date.getFullYear();
|
|||
|
|
let month = date.getMonth() + 1;
|
|||
|
|
let day = date.getDate();
|
|||
|
|
|
|||
|
|
if (type === 'start') {
|
|||
|
|
year = year - 60;
|
|||
|
|
} else if (type === 'end') {
|
|||
|
|
year = year + 2;
|
|||
|
|
}
|
|||
|
|
month = month > 9 ? month : '0' + month;
|
|||
|
|
day = day > 9 ? day : '0' + day;
|
|||
|
|
return `${year}-${month}-${day}`;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
startDate() {
|
|||
|
|
return this.getDate('start');
|
|||
|
|
},
|
|||
|
|
endDate() {
|
|||
|
|
return this.getDate('end');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less">
|
|||
|
|
.privacy-policy-text {
|
|||
|
|
margin-left: 10rpx;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
|
|||
|
|
.privacy-policy-text-btn {
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
.head {
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.con {
|
|||
|
|
line-height: 20px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
background-color: rgba(255, 255, 255, 1);
|
|||
|
|
text-align: center;
|
|||
|
|
box-shadow: 0px 2px 6px 0px rgba(228, 228, 228, 100);
|
|||
|
|
margin: 0rpx 30rpx;
|
|||
|
|
|
|||
|
|
.tab-con {
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
.tab {
|
|||
|
|
width: 50%;
|
|||
|
|
height: 94rpx;
|
|||
|
|
line-height: 94rpx;
|
|||
|
|
|
|||
|
|
&.tab-first {
|
|||
|
|
background-color: rgba(40, 123, 206, 1);
|
|||
|
|
color: #fff;
|
|||
|
|
border-top-left-radius: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.tab-second {
|
|||
|
|
background-color: rgba(40, 123, 206, 1);
|
|||
|
|
color: #fff;
|
|||
|
|
border-top-right-radius: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info,
|
|||
|
|
.hand {
|
|||
|
|
.line {
|
|||
|
|
display: flex;
|
|||
|
|
border-bottom: 2rpx solid #ddd;
|
|||
|
|
padding: 20rpx 0rpx;
|
|||
|
|
margin: 0rpx 40rpx;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
margin-right: 30rpx;
|
|||
|
|
color: rgba(16, 16, 16, 1);
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input {
|
|||
|
|
width: 70%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.address {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
text-align: left;
|
|||
|
|
padding: 20rpx 0rpx;
|
|||
|
|
margin: 0rpx 40rpx;
|
|||
|
|
|
|||
|
|
.text {
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
border: 1px solid rgba(187, 187, 187, 1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.treaty {
|
|||
|
|
display: flex;
|
|||
|
|
margin-left: 60rpx;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
|
|||
|
|
.checkbox {
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
width: 332px;
|
|||
|
|
height: 50px;
|
|||
|
|
border-radius: 30px;
|
|||
|
|
background-color: rgba(40, 123, 206, 1);
|
|||
|
|
color: rgba(255, 255, 255, 1);
|
|||
|
|
font-size: 14px;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 100rpx;
|
|||
|
|
margin: 20rpx auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.agency-popup {
|
|||
|
|
width: 100%;
|
|||
|
|
min-height: 500rpx;
|
|||
|
|
max-height: 700rpx;
|
|||
|
|
// overflow: auto;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.head {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100rpx;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
border-bottom: 2rpx #e2e2e2 solid;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
button {
|
|||
|
|
border: none;
|
|||
|
|
background-color: transparent;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
button::after {
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
button:first-of-type {
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
color: #737171;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
button:last-of-type {
|
|||
|
|
color: #1769ff;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.picker-view {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 300rpx;
|
|||
|
|
margin-top: 50rpx;
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
height: 100rpx;
|
|||
|
|
line-height: 100rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</style>
|