sys 2 anni fa
parent
commit
a1478a1a8e
4 ha cambiato i file con 176 aggiunte e 5 eliminazioni
  1. 7 0
      pages.json
  2. 150 0
      pages/perfect/nickname.vue
  3. 16 5
      pages/perfect/sexAndAge.vue
  4. 3 0
      static/css/sys.css

+ 7 - 0
pages.json

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

+ 150 - 0
pages/perfect/nickname.vue

@@ -0,0 +1,150 @@
+<template>
+  <view class="pass-box">
+    <en-nav  ></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="login-from">
+          <view class="from-title">
+            <view class="title-circle sys-background-black" :class="{'sys-background-green':nickname!==''}"></view>
+            <view class="title-text sys-color-black">设置昵称</view>
+          </view>
+          <view class="from-text from-item">
+            <input type="tel" class="from-input sys-color-gray-3" max="11" v-model="nickname" placeholder="请输入昵称"></input>
+          </view>
+          <view class="from-title from-item">
+            <view class="title-circle sys-background-black" :class="{'sys-background-green':password.length>=6}"></view>
+            <view class="title-text sys-color-black">设置密码</view>
+          </view>
+          <view class="from-text from-item">
+            <input type="password" class="from-input sys-color-gray-3" v-model="password" placeholder="请设置密码(6位以上)"></input>
+          </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}">下一步</view>
+      </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,
+      isShakeBut:false,
+      nickname:'',
+      password:'',
+    }
+  },
+  watch:{
+    'nickname':function (){
+      this.verifyIsOK()
+    },
+    'password':function (){
+      this.verifyIsOK()
+    },
+  },
+  methods: {
+    setNextStep(){
+      if(this.isOK){
+        uni.navigateTo({
+          'url':'/pages/perfect/nickname'
+        })
+      }else {
+        tools.error('请完善信息')
+        this.isShakeBut=true
+        setTimeout(()=>{
+          this.isShakeBut=false
+        },500)
+      }
+    },
+    verifyIsOK(){
+      this.isOK = this.nickname!=='' && this.password.length>=6;
+    },
+    setNavHeight(navHeight){
+      this.navHeight=navHeight+41
+    },
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "/static/css/shake.css";
+.login-box{
+  padding: 82rpx 80rpx 0 80rpx;
+  box-sizing: border-box;
+  position: relative;
+  .login-top{
+    .login-title{
+      padding-bottom: 60rpx;
+      .title-item{
+        font-size: 48rpx;
+      }
+    }
+    .login-from{
+      .from-title{
+        display: flex;
+        justify-content: flex-start;
+        height: 44rpx;
+        .title-circle{
+          width: 16rpx;
+          height: 16rpx;
+          border-radius: 50%;
+          margin-top: 14rpx;
+          margin-right: 8rpx;
+        }
+
+
+      }
+      .from-text{
+        width: 100%;
+        padding-bottom: 40rpx;
+        border-bottom: 1rpx solid #E0E0E0;
+        .from-input{
+          font-size: 32rpx;
+          height: 44rpx;
+          line-height: 44rpx;
+        }
+        .from-input::placeholder{
+          color: #999999;
+        }
+      }
+      .from-item{
+        margin-top: 60rpx;
+      }
+
+    }
+
+    .login-but{
+      margin-top: 120rpx;
+    }
+
+    .local-txt{
+      padding-top: 32rpx;
+      font-size: 24rpx;
+      text-align: center;
+    }
+  }
+  .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>

+ 16 - 5
pages/perfect/sexAndAge.vue

@@ -54,15 +54,12 @@
             </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 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>
@@ -77,6 +74,7 @@ export default {
       navHeight:40,
       isOK:false,
       isShake:false,
+      isShakeBut:false,
       age:'',
       sex:'',
       ageObj:{
@@ -105,6 +103,19 @@ export default {
     },
   },
   methods: {
+    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){

+ 3 - 0
static/css/sys.css

@@ -38,6 +38,9 @@
 .sys-background-gray-9{
   background-color: #999999;
 }
+.sys-background-green{
+  background-color: #12CE87;
+}
 /*未选中按钮*/
 .sys-unselected-but{
   opacity: 0.1;