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

页面效果

代码

company.wxml

<form bindsubmit="formSubmit" bindreset="formReset">
  <view class="content">
    <view class="hr"></view>
    <view class="item">
      <input type="text" name="loginName" placeholder="请设置4-20位用户名" placeholder-class="holder" bingblur="accountblur"/>
    </view>
    <view class="item flex">
      <input type="text" password name="password" placeholder="请设置5-20位登录密码" placeholder-class="holder"/>
     <switch type="switch" name="switch"/>
    </view>
   <view class="item">
     <input type="text" name="company" placeholder="请填写工商局注册名称" placeholder-class="holder"/>
   </view>
   <view class="item">
     <input type="text" name="userName" placeholder="联系人姓名" placeholder-class="holder"/>
   </view>
   <view class="mobileInfo">
     <view class="mobile">
       <input type="text" name="mobile" placeholder="请输入手机号" placeholder-class="holder"/>
     </view>
     <view class="code">发送验证码</view>
     </view>
   <view class="item">
     <input type="text" name="code" placeholder="短信验证码" placeholder-class="holder"/>
   </view>
   <button class="btn" disabled="{{disabled}}" type="{{btnstate}}" form-type="submit">注册</button>
   <view class="xieyi">
     <text class="agree">注册即视为同意</text><text class="opinion">中国用户注册协议</text>
   </view>
 </view>
 </form>

company.wxss

/* pages/company/company.wxss */
.content{
     width: 100%;
     height: 700px;
     background-color: #f2f2f2;
   }
.hr{
     padding-top: 40px;
   }
.item{
    margin: 0 auto;
    border: 1px solid #cccccc;
    height: 40px;
    width: 90%;
    border-radius: 3px;
    background-color: #ffffff;
    margin-bottom: 15px; 
  }
  .item input{
    height: 40px;
    line-height: 40px;
    margin-left: 10px; 
  }
  .holder{
    font-size: 14px;
    color: #999999;
  }
  .flex{
    display: flex;
    flex-direction: row;
  }
  .flex input{
    width: 300px;
  }
  .item switch{
    margin-top: 5px;
    margin-right: 5px;
  }
  .mobileInfo{
    display: flex;
    flex-direction: row;
  }
  .mobile{
    margin: 0 auto;
    border: 1px solid #cccccc;
    height: 40px;
    width: 50%;
    border-radius: 3px;
    background-color: #ffffff;
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    margin-left: 5%; 
  }
  .mobile input{
    margin-top: 8px;
    margin-left: 10px;
  }
  .code{
    border: 1px solid #cccccc;
    height: 40px;
    width: 35%;
    background-color: #edeeec;
    border-radius: 3px;
    text-align: center;
    margin-left: 10px;
    line-height: 40px;
    color: #999999;
    font-size: 15px;
    margin-bottom: 15px;
    margin-right: 5%; 
  }
  .btn{
    width: 90%;
    color: #999999;
    margin-top: 40px;
  }
  .xieyi{
    margin-top: 15px;
    margin-left: 15px;
    font-size: 13px;
  }
  .agree{
    margin-left: 5px;
    color: #666666; 
 }
  .opinion{
    color: red;
    font-weight: bold;
    text-decoration: underline;
  }

company.js 

// pages/company/company.js
Page({
     data: {
       disabled: true,
       btnstate: "default"
    },
     accountblur: function (e) {
       var content= e.detail.value;
       if(content!=""){
        this.setData({disabled:false,btnstate:"primary"});
      }
      else{
        this.setData({disabled:true,btnstate:"default"});
      }
    },
    formSubmit: function (e) {
      console.log(e);
      var user = new Object();
      user.account = e.detail.value.loginName;
      user.password = e.detail.value.password;
      user.company = e.detail.value.company;
      user.userName = e.detail.value.userName;
      user.code = e.detail.value.code;
      user.mobile = e.detail.value.mobile;
      user.switch = e.detail.value.switch;
      wx.setStorageSync("user",user);
      wx.showToast({
        title: "注册成功",
        icon: "success",
        duration: 1000,
        success:function(){
          wx.navigateTo({
            url: "../login/login",
          })
        }
      })
    }
  })

company.json

{
  "usingComponents": {},
  "navigationBarTitleText": "企业用户注册"
}