微信小程序开发---京东登录页面(mobile)

页面效果

mobile.wxml

<!--pages/mobile/mobile.wxml-->
<view class="content">
    <view class="hr"></view>
    <view class="numbg">
      <view>+86</view>
      <view><input placeholder="请输入手机号" maxlenge="11" bindblur="mobileblur"/></view>
    </view>
    <view>
      <view class="xieyi">
       <icon type="success" color="green" size="18"></icon>
       <text class="agree">同意</text>
       <text class="opinion">中国用户注册协议</text>
      </view>
      </view>
   <button class="btn" disabled="{{disabled}}" type="{{btnstate}}" bindtap="login">下一步</button>
      </view>

mobile.wxss

/* pages/mobile/mobile.wxss */
.content{
     width: 100%;
     height: 600px;
     background-color: #f2f2f2;
   }
   .hr{
     padding-top: 20px;
   }
  .numbg{
    border: 1px solid #cccccc;
    width: 90%;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    height: 50px;
  }
  .numbg view{
    margin-left: 20px;
    margin-top: 14px;
  }
  .xieyi{
       margin-top: 15px;
       margin-left: 15px;
     }
     .agree{
       font-size: 13px;
       margin-left: 5px;
       color: #666666;
     }
     .opinion{
       font-size: 13px;
       color: #000000;
       font-weight: bold;
     }
     .btn{
       width: 90%;
       margin-top: 30px;
     }

mobile.js

// pages/mobile/mobile.js
Page({
     data: {
       disabled: true,
       btnstate: "default",
       mobile:""
     },
     mobileblur: function (e) {
       var content= e.detail.value;
      if(content!=""){
        this.setData({ disabled: false, btnstate: "primary", account: content });
      }
      else{
        this.setData({disabled:true,btnstate:"default",mobile:""});
      }
    }
  })

mobile.json

{
  "usingComponents": {},
  "navigationBarTitleText": "手机快速注册"
}