lcoco/pages/perfect/nickname.vue

<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="text" 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,'apply-shake':isShakeBut}">下一步</view>
      </view>
    </view>
  </view>
</template>


<script>
import EnNav from "@/components/en-utils/en-nav/en-nav";
import tools from "@/service/tools";
import {filUserInfo, register} from "@/api/login";
export default {
  components: {EnNav},
  data() {
    return {
      navHeight:40,
      isOK:false,
      isShakeBut:false,
      nickname:'',
      password:'',
    }
  },
  watch:{
    'nickname':function (){
      uni.setStorageSync('nickname', this.nickname)
      this.verifyIsOK()
    },
    'password':function (){
      uni.setStorageSync('password', this.password)
      this.verifyIsOK()
    },
  },
  methods: {
    setNextStep(){
      if(this.isOK){
        let mobile=uni.getStorageSync('mobile')
        let dateOfBirth=uni.getStorageSync('dateOfBirth')
        let gender=uni.getStorageSync('gender')
        filUserInfo({'mobile':mobile,'dateOfBirth':dateOfBirth,'gender':gender,'nickname':this.nickname,'password':this.password}).then((res)=>{
          if(res.code===0){
            uni.navigateTo({
              'url':'/pages/perfect/cards'
            })
          }else {
            tools.error(res.msg)
          }
        })

      }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";
.pass-box{
  .login-box{
    padding: 160rpx 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>