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>