lcoco/pages/perfect/sexAndAge.vue

<template>
  <view class="sex-box">
    <en-nav @navHeight="setNavHeight" ></en-nav>
    <view class="login-box"  :style="{'height':'calc(100vh - '+navHeight+'px)'}">
      <view class="login-top">
        <view class="login-title">
          <text class="title-item sys-color-black sys-weight-600">性别&年龄</text>
        </view>
        <view  class="local-txt sys-color-gray-9">注册完成，您的性别将无法修改</view>
        <view class="sex-data" >
          <view class="sex-item" @click="setSex(1)">
            <view class="item-img">
              <view class="sex-img-box">
                <image class="sex-img" :src="'/static/img/perfect/boy-'+(sex===1?'ok':'no')+'.png'" mode="aspectFill"></image>
              </view>
              <view class="ok-img-box">
                <image class="ok-img" :src="'/static/img/common/'+(sex===1?'ok':'no')+'.png'" mode="aspectFill"></image>
              </view>
            </view>
            <view class="item-text sys-color-gray-9">我是男生</view>
          </view>

          <view class="sex-item" @click="setSex(2)">
            <view class="item-img">
              <view class="sex-img-box">
                <image class="sex-img" :src="'/static/img/perfect/girl-'+(sex===2?'ok':'no')+'.png'" mode="aspectFill"></image>
              </view>
              <view class="ok-img-box">
                <image class="ok-img" :src="'/static/img/common/'+(sex===2?'ok':'no')+'.png'" mode="aspectFill"></image>
              </view>
            </view>
            <view class="item-text sys-color-gray-9">我是女生</view>
          </view>


        </view>
        <view  class="local-txt sys-color-gray-9">设置生日（年龄大于18岁）</view>
        <view class="age-data"   :class="{'apply-shake':isShake}" >
          <view class="age-item">
            <view class="age-input">
              <input class="input-one" :focus="yearFocus" v-model="ageObj.year"   type="number" :min="mixYear" :max="maxYear" placeholder="1999" @blur="verifyAge"></input>
            </view>
            <view class="age-text sys-color-black">年</view>
          </view>
          <view class="age-item">
            <view class="age-input">
              <input type="number"  :focus="monthFocus" v-model="ageObj.month" min="1" max="12" placeholder="01" @blur="verifyAge"></input>
            </view>
            <view class="age-text sys-color-black">月</view>
          </view>
          <view class="age-item">
            <view class="age-input">
              <input type="number"  :focus="dayFocus"  v-model="ageObj.day" min="1943" max="2006" placeholder="01" @blur="verifyAge"></input>
            </view>
            <view class="age-text sys-color-black">日</view>
          </view>
        </view>
      </view>
    </view>
    <view class="login-bottom">
      <view class="login-but sys-color-white sys-background-black sys-selected-but" @click="setNextStep"
            :class="{'sys-unselected-but':!isOK,'apply-shake':isShakeBut}">下一步</view>
    </view>
  </view>
</template>

<script>
import EnNav from "@/components/en-utils/en-nav/en-nav";
import tools from "@/service/tools";
import $ from 'jquery'
export default {
  components: {EnNav},
  data() {
    return {
      navHeight:40,
      isOK:false,
      isShake:false,
      isShakeBut:false,
      age:'',
      sex:'',
      ageObj:{
        year:'',
        month:'',
        day:'',
      },
      yearFocus:false,
      monthFocus:false,
      dayFocus:false,
      mixYear:2003,
      maxYear:2003,
      placeholderYear:1990,
      maxDay:31,
    }
  },
  onLoad(query) {
    let year=tools.getYear()
    this.mixYear=year-80
    this.maxYear=year-18
    this.placeholderYear=year-24
  },
  watch:{
    'age':function (){
      this.verifyIsOK()
    },
    'sex':function (){
      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: {
    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(){
      if(this.isOK){
        uni.navigateTo({
          'url':'/pages/perfect/nickname'
        })
      }else {
        tools.error('请完善信息')
        this.isShakeBut=true
        setTimeout(()=>{
          this.isShakeBut=false
        },500)
      }
    },
    verifyAge(){
      if(this.ageObj.year!=='' ){
        if(this.ageObj.year > this.maxYear || this.ageObj.year < this.mixYear){
          this.setShake()
          this.ageObj.year=''
          this.setFocus(1)
        }else {
          if(this.ageObj.month!=='' ){
            if( this.ageObj.month > 12 || this.ageObj.month < 1){
              this.setShake()
              this.ageObj.month=''
              this.ageObj.day=''
              this.setFocus(2)
            }else {
              this.maxDay=tools.getCountDays(this.ageObj.year+'-'+this.ageObj.month)
              if(this.ageObj.day!==''){
                if(this.ageObj.day > this.maxDay || this.ageObj.day < 1){
                  this.setShake()
                  this.ageObj.day=''
                  this.setFocus(3)
                }else {
                  this.age=this.ageObj.year+'-'+this.ageObj.month+'-'+this.ageObj.day
                }
              }else {
                this.age=''
              }
            }
          }else {
            this.age=''
          }
        }
      }else {
        this.age=''
      }
    },
    setShake(){
      this.isShake=true
      setTimeout(()=>{
        this.isShake=false
      },500)
    },
    setSex(sex){
      this.sex=sex
    },
    verifyIsOK(){
      this.isOK = this.age!=='' && this.sex !== '';
    },
    setNavHeight(navHeight){
      this.navHeight=navHeight+41
    },
  }
}
</script>

<style scoped lang="scss">
@import "/static/css/shake.css";
.sex-box{
  .login-top{
    padding:0 80rpx;
    margin-top: 80rpx;
    .login-title{
      .title-item{
        font-size: 48rpx;
      }
    }
    .sex-data{
      padding: 80rpx 64rpx;
      display: flex;
      justify-content: space-between;
      .sex-item{
        .item-img{
          width: 160rpx;
          height: 160rpx;
          position: relative;
          .sex-img-box{
            .sex-img{
              width: 160rpx;
              height: 160rpx;
            }
          }
          .ok-img-box{
            position: absolute;
            bottom: 0;
            right: 10rpx;
            .ok-img{
              width: 32rpx;
              height: 32rpx;
            }
          }
        }
        .item-text{
          width: 160rpx;
          height: 44rpx;
          line-height: 44rpx;
          text-align: center;
          font-size: 28rpx;
        }
      }
    }
    .age-data{
      margin-top: 32rpx;
      display: flex;
      justify-content: space-between;
      .age-item{
        display: flex;
        justify-content: flex-start;
        .age-input{
          height: 44rpx;
          margin-right: 24rpx;
          .input-one{
            width: 80rpx;
          }
          input{
            width: 40rpx;
            line-height: 44rpx;
            font-size: 32rpx;
            font-weight: 400;
          }
          input::placeholder{
            color: #BDBDBD;
            font-size: 32rpx;
            font-weight: 400;
          }
        }

        .age-text{
          font-size: 32rpx;
          font-weight: 400;
          line-height: 44rpx;
          height: 44rpx;
        }
      }
    }




    .local-txt{
      padding-top: 24rpx;
      font-size: 28rpx;
      text-align: left;
    }
  }
  .login-bottom{
    padding-bottom: calc(58rpx + env(safe-area-inset-bottom));
    position: absolute;
    bottom: 0;
    left: 68rpx;
    width:calc(100vw - 136rpx);
    .login-but{
      margin-top: 120rpx;
    }
  }
}
</style>