微信小程序登陆界面

wxss

@import "/style/style.wxss";
/*输入框*/
.keyImage { 
 margin-left: 22px; 
 width: 22px; 
 height: 18px
} 
.pasImage{
  margin-left: 22px; 
 width: 18px; 
 height: 18px
}
.inputPlaClass{
  font-size:15px;
  padding-bottom: 10px;
}
.inputClass{
   font-size:15px;
     padding-bottom: 10px;
}
.inputItem{
  width: 90vw;
  margin-bottom: 10px;
  border-bottom: 1px solid #F7F7F7;
}
  
.bigView{
  margin-top: 80px;
}

js

Page({
  data: {
    userInfo: { 'userName': '18340040502','password':'123456'},
    inputstate: { 'pasInput': true, 'pasIcon':'/images/closeyee.png'}
  },

  // 获取输入账号 
  phoneInput: function (e) {
    this.setData({
      phone: e.detail.value
    })
  },

  // 获取输入密码 
  passwordInput: function (e) {
    this.setData({
      password: e.detail.value
    })
  },

  // 登录 
  login: function () {
    if (this.data.phone.length == 0 || this.data.password.length == 0) {
      wx.showToast({
        title: '用户名和密码不能为空',
        icon: 'loading',
        duration: 2000
      })
    } else {
      // 这里修改成跳转的页面 
      wx.showToast({
        title: '登录成功',
        icon: 'success',
        duration: 2000
      })
    }
  },
  // 清理用户名
  userNameClick:function(){
    this.setData({
      'userInfo.userName':''
    })
  },
  // 是否是密码框
  pasImgClick:function(){
    var inputstate = this.data.inputstate;
    if (inputstate.pasInput)
    {
      inputstate.pasInput=false;
      inputstate.pasIcon = '/images/openyee.png';
    }else{
      inputstate.pasInput = true;
      inputstate.pasIcon = '/images/closeyee.png';
    }
    this.setData({
      inputstate: inputstate
    })
  }
})

wxml

<view class='colonn center_left1 bigView'>

  <!--账号-->
  <view class="roww center_top11 inputItem ">
    <input placeholder="请输入用户名" placeholder-class='inputPlaClass' class='inputClass' style='flex:1;' value='{{userInfo.userName}}' />
    <image class="pasImage" src="/images/close.png" catchtap='userNameClick'></image>
  </view>
  <view class="roww center_top11 inputItem" style='margin-top:20px;'>
    <input placeholder="请输入密码" placeholder-class='inputPlaClass' class='inputClass' style='flex:1;' value='{{userInfo.password}}' password="{{inputstate.pasInput}}"  />
    <image class="keyImage" src="{{inputstate.pasIcon}}" catchtap='pasImgClick' ></image>
  </view>
   <view class="roww center_top11 inputItem" style='font-size:15px;border-bottom:0px solid #ffffff;margin-top:15px;'>
        <view>还没有账号?</view>
        <view style='color:#5DEC69;flex:1;'>去注册</view>
        <view>忘记密码</view>
  </view>

 <view class='roww center_left1'>
      <text class='truebtn'>确定</text>
    </view>

</view>