|
@@ -1,13 +1,13 @@
|
|
|
<template>
|
|
<template>
|
|
|
<view class="sex-box">
|
|
<view class="sex-box">
|
|
|
<en-nav @navHeight="setNavHeight" ></en-nav>
|
|
<en-nav @navHeight="setNavHeight" ></en-nav>
|
|
|
- <view class="login-box" :style="{'height':'calc(100vh - '+navHeight+'px)'}">
|
|
|
|
|
|
|
+ <view class="login-box" :style="{'height':'calc(100vh - '+navHeight+'px)'}">
|
|
|
<view class="login-top">
|
|
<view class="login-top">
|
|
|
<view class="login-title">
|
|
<view class="login-title">
|
|
|
<text class="title-item sys-color-black sys-weight-600">性别&年龄</text>
|
|
<text class="title-item sys-color-black sys-weight-600">性别&年龄</text>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="local-txt sys-color-gray-9">注册完成,您的性别将无法修改</view>
|
|
<view class="local-txt sys-color-gray-9">注册完成,您的性别将无法修改</view>
|
|
|
- <view class="sex-data">
|
|
|
|
|
|
|
+ <view class="sex-data" >
|
|
|
<view class="sex-item" @click="setSex(1)">
|
|
<view class="sex-item" @click="setSex(1)">
|
|
|
<view class="item-img">
|
|
<view class="item-img">
|
|
|
<view class="sex-img-box">
|
|
<view class="sex-img-box">
|
|
@@ -35,22 +35,22 @@
|
|
|
|
|
|
|
|
</view>
|
|
</view>
|
|
|
<view class="local-txt sys-color-gray-9">设置生日(年龄大于18岁)</view>
|
|
<view class="local-txt sys-color-gray-9">设置生日(年龄大于18岁)</view>
|
|
|
- <view class="age-data " :class="{'apply-shake':isShake}" >
|
|
|
|
|
|
|
+ <view class="age-data" :class="{'apply-shake':isShake}" >
|
|
|
<view class="age-item">
|
|
<view class="age-item">
|
|
|
<view class="age-input">
|
|
<view class="age-input">
|
|
|
- <input class="input-one" v-model="ageObj.year" type="number" :min="mixYear" :max="maxYear" placeholder="1999" @blur="verifyAge"></input>
|
|
|
|
|
|
|
+ <input class="input-one" :focus="yearFocus" v-model="ageObj.year" type="number" :min="mixYear" :max="maxYear" placeholder="1999" @blur="verifyAge"></input>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="age-text sys-color-black">年</view>
|
|
<view class="age-text sys-color-black">年</view>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="age-item">
|
|
<view class="age-item">
|
|
|
<view class="age-input">
|
|
<view class="age-input">
|
|
|
- <input type="number" v-model="ageObj.month" min="1" max="12" placeholder="01" @blur="verifyAge"></input>
|
|
|
|
|
|
|
+ <input type="number" :focus="monthFocus" v-model="ageObj.month" min="1" max="12" placeholder="01" @blur="verifyAge"></input>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="age-text sys-color-black">月</view>
|
|
<view class="age-text sys-color-black">月</view>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="age-item">
|
|
<view class="age-item">
|
|
|
<view class="age-input">
|
|
<view class="age-input">
|
|
|
- <input type="number" v-model="ageObj.day" min="1943" max="2006" placeholder="01" @blur="verifyAge"></input>
|
|
|
|
|
|
|
+ <input type="number" :focus="dayFocus" v-model="ageObj.day" min="1943" max="2006" placeholder="01" @blur="verifyAge"></input>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="age-text sys-color-black">日</view>
|
|
<view class="age-text sys-color-black">日</view>
|
|
|
</view>
|
|
</view>
|
|
@@ -67,6 +67,7 @@
|
|
|
<script>
|
|
<script>
|
|
|
import EnNav from "@/components/en-utils/en-nav/en-nav";
|
|
import EnNav from "@/components/en-utils/en-nav/en-nav";
|
|
|
import tools from "@/service/tools";
|
|
import tools from "@/service/tools";
|
|
|
|
|
+import $ from 'jquery'
|
|
|
export default {
|
|
export default {
|
|
|
components: {EnNav},
|
|
components: {EnNav},
|
|
|
data() {
|
|
data() {
|
|
@@ -82,6 +83,9 @@ export default {
|
|
|
month:'',
|
|
month:'',
|
|
|
day:'',
|
|
day:'',
|
|
|
},
|
|
},
|
|
|
|
|
+ yearFocus:false,
|
|
|
|
|
+ monthFocus:false,
|
|
|
|
|
+ dayFocus:false,
|
|
|
mixYear:2003,
|
|
mixYear:2003,
|
|
|
maxYear:2003,
|
|
maxYear:2003,
|
|
|
placeholderYear:1990,
|
|
placeholderYear:1990,
|
|
@@ -101,8 +105,35 @@ export default {
|
|
|
'sex':function (){
|
|
'sex':function (){
|
|
|
this.verifyIsOK()
|
|
this.verifyIsOK()
|
|
|
},
|
|
},
|
|
|
|
|
+ 'ageObj.year':function (){
|
|
|
|
|
+ if(this.ageObj.year.length>=4){
|
|
|
|
|
+ this.setFocus(2)
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ 'ageObj.month':function (){
|
|
|
|
|
+ if(this.ageObj.month.length>=2){
|
|
|
|
|
+ this.setFocus(3)
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ 'ageObj.day':function (){
|
|
|
|
|
+ if(this.ageObj.day.length>=2){
|
|
|
|
|
+ this.setFocus(0)
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
|
|
+ setFocus(type){
|
|
|
|
|
+ this.yearFocus=false
|
|
|
|
|
+ this.monthFocus=false
|
|
|
|
|
+ this.dayFocus=false
|
|
|
|
|
+ if(type===1){
|
|
|
|
|
+ this.yearFocus=true
|
|
|
|
|
+ }else if(type===2){
|
|
|
|
|
+ this.monthFocus=true
|
|
|
|
|
+ }else if(type===3){
|
|
|
|
|
+ this.dayFocus=true
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
setNextStep(){
|
|
setNextStep(){
|
|
|
if(this.isOK){
|
|
if(this.isOK){
|
|
|
uni.navigateTo({
|
|
uni.navigateTo({
|
|
@@ -121,18 +152,21 @@ export default {
|
|
|
if(this.ageObj.year > this.maxYear || this.ageObj.year < this.mixYear){
|
|
if(this.ageObj.year > this.maxYear || this.ageObj.year < this.mixYear){
|
|
|
this.setShake()
|
|
this.setShake()
|
|
|
this.ageObj.year=''
|
|
this.ageObj.year=''
|
|
|
|
|
+ this.setFocus(1)
|
|
|
}else {
|
|
}else {
|
|
|
if(this.ageObj.month!=='' ){
|
|
if(this.ageObj.month!=='' ){
|
|
|
if(this.ageObj.month > 12 || this.ageObj.month < 1){
|
|
if(this.ageObj.month > 12 || this.ageObj.month < 1){
|
|
|
this.setShake()
|
|
this.setShake()
|
|
|
this.ageObj.month=''
|
|
this.ageObj.month=''
|
|
|
this.ageObj.day=''
|
|
this.ageObj.day=''
|
|
|
|
|
+ this.setFocus(2)
|
|
|
}else {
|
|
}else {
|
|
|
this.maxDay=tools.getCountDays(this.ageObj.year+'-'+this.ageObj.month)
|
|
this.maxDay=tools.getCountDays(this.ageObj.year+'-'+this.ageObj.month)
|
|
|
if(this.ageObj.day!==''){
|
|
if(this.ageObj.day!==''){
|
|
|
if(this.ageObj.day > this.maxDay || this.ageObj.day < 1){
|
|
if(this.ageObj.day > this.maxDay || this.ageObj.day < 1){
|
|
|
this.setShake()
|
|
this.setShake()
|
|
|
this.ageObj.day=''
|
|
this.ageObj.day=''
|
|
|
|
|
+ this.setFocus(3)
|
|
|
}else {
|
|
}else {
|
|
|
this.age=this.ageObj.year+'-'+this.ageObj.month+'-'+this.ageObj.day
|
|
this.age=this.ageObj.year+'-'+this.ageObj.month+'-'+this.ageObj.day
|
|
|
}
|
|
}
|
|
@@ -164,9 +198,9 @@ export default {
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
|
@import "/static/css/shake.css";
|
|
@import "/static/css/shake.css";
|
|
|
.sex-box{
|
|
.sex-box{
|
|
|
- padding: 82rpx 80rpx 0 80rpx;
|
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
.login-top{
|
|
.login-top{
|
|
|
|
|
+ padding:0 80rpx;
|
|
|
|
|
+ margin-top: 80rpx;
|
|
|
.login-title{
|
|
.login-title{
|
|
|
.title-item{
|
|
.title-item{
|
|
|
font-size: 48rpx;
|
|
font-size: 48rpx;
|