no message

pages.json

@@ -64,6 +64,13 @@
         "navigationBarTitleText": "",
         "enablePullDownRefresh": false
       }
+    },
+    {
+      "path": "pages/perfect/sexAndAge",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false
+      }
     }
   ],
   "globalStyle": {

pages/perfect/sexAndAge.vue

@@ -0,0 +1,253 @@
+<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" 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" 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" 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" :class="{'sys-unselected-but':!isOK}">登录</view>
+    </view>
+  </view>
+</template>
+
+<script>
+import EnNav from "@/components/en-utils/en-nav/en-nav";
+import tools from "@/service/tools";
+export default {
+  components: {EnNav},
+  data() {
+    return {
+      navHeight:40,
+      isOK:false,
+      isShake:false,
+      age:'',
+      sex:'',
+      ageObj:{
+        year:'',
+        month:'',
+        day:'',
+      },
+      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()
+    },
+  },
+  methods: {
+    verifyAge(){
+      if(this.ageObj.year!=='' ){
+        if(this.ageObj.year > this.maxYear || this.ageObj.year < this.mixYear){
+          this.setShake()
+          this.ageObj.year=''
+        }else {
+          if(this.ageObj.month!=='' ){
+            if(this.ageObj.month > 12 || this.ageObj.month < 1){
+              this.setShake()
+              this.ageObj.month=''
+              this.ageObj.day=''
+            }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=''
+                }else {
+                  this.age=this.ageObj.year+'-'+this.ageObj.month+'-'+this.ageObj.day
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    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{
+  padding: 82rpx 80rpx 0 80rpx;
+  box-sizing: border-box;
+  .login-top{
+    .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>

service/tools.js

@@ -88,6 +88,21 @@ tools.hideLoading = function () {
 tools.getTime = function () {
     return new Date().getTime();
 }
+tools.getCountDays=function (date){
+    let curDate = new Date(date);
+    // 获取当前月份
+    curDate.setDate(32);
+    // 返回当前月份的天数
+    return 32-curDate.getDate();
+}
+
+/**
+ * 获取当前年
+ * @returns {number}
+ */
+tools.getYear=function (){
+    return  new Date().getFullYear()
+}
 
 
 tools.updateVersion = function (sysVersion, appUrl) {

static/css/shake.css

@@ -0,0 +1,22 @@
+@keyframes shake {
+    10%,
+    90% {
+        transform: translate3d(-1px, 0 0);
+    }
+    20%,
+    80% {
+        transform: translate3d(2px, 0, 0);
+    }
+    30%,
+    50%,
+    70% {
+        transform: translate3d(-4px, 0, 0);
+    }
+    40%,
+    60% {
+        transform: translate3d(4px, 0, 0);
+    }
+}
+.apply-shake {
+    animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+}