微信小程序用户名、密码页面设计

.wxml页面

 

    日期选择
   
      {{dateValue}}
     


   
    申请人信息
   
      用户名：
       
     
     
      密码：
       
     
     
   
    登 录
 

  {{tip}}
  {{userName}}

.wxss文件

.textareaT {
  margin-top: 10px;
  height: 60rpx;
  width: 90%;
  font-size: 15px;
  display: flex;
  margin-left: 5%;
  justify-content: space-between;
  border: 1px solid darkgrey;
  border-radius: 3px;
}


.textareaT2 {
  margin-top: 10px;
  width: 90%;
  height: 340rpx;
  margin-left: 5%;
  border: 1px solid darkgrey;
  border-radius: 3px;
}


text {
  margin-top: 40rpx;
  font-size: 13px;
  color: darkgrey;
  width: 90%;
  margin-left: 5%;
}


.submitClick {
  width: 80%;
  color: white;
  background: #06a6e4;
  font-size: 14px;
  margin-top: 10px;
}


.imgrili {
  margin-right: 20rpx;
  margin-top: 10rpx;
  width: 40rpx;
  height: 40rpx;
}


.textriqi {
  margin-top: 15rpx;
  width: 60%;
  height: 30rpx;
}


.itemView {


  height: 60rpx;
  display: flex;
  justify-content: space-around;
  font-size: 13.0px;
  margin-top: 20rpx;
}
.lineV{
  width: 95%;
  height: 2rpx;
  background: darkgrey;
  display: flex;
  margin-left: 2.5%;
  justify-content: space-around;
}

.js文件

Page({
  data: {
    userName: '',
    pasWInput: '',
    dateValue:'2016-10-13'
  },
   datePickerBindchange:function(e){
    this.setData({
      dateValue:e.detail.value
    })
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
  },


  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  },
  imgClick: function () {


  },
  // 用户名和密码输入框事件
  userNameInput: function (e) {
    this.setData({
      userName: e.detail.value
    })
  },
  pasWInput: function (e) {
    this.setData({
      SFZ: e.detail.value
    })
  },
 
  bindFormSubmit: function (e) {
    if (e.detail.value.userName.length == 0||e.detail.value.pasWInput.length == 0) {
      this.setData({
        tip: '提示：用户信息！',
        userName: '',
        psw: ''
      })
    } else {


    }
  },


})