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