Page({data: {phone: '',password: '',success: false,text: ''},// 获取输入账号 phoneInput: function (e) {this.setData({phone: e.detail.value})},// 获取输入密码 passwordInput: function (e) {this.setData({password: e.detail.value})},// 登录 login: function () {var that = this;   var warn = null; //warn为当手机号为空或格式不正确时提示用户的文字，默认为空if (that.data.phone.length == 0) {wx.showToast({title: '用户名不能为空',icon: 'loading',duration: 1000})} else if (that.data.password.length == 0) {wx.showToast({title: '密码不能为空',icon: 'loading',duration: 1000})}else {wx.request({url: 'http://192.168.41.40:8002/login',method: "POST",data: {cardNo: that.data.phone,password: that.data.password},header: {'content-type': 'application/x-www-form-urlencoded'},success: function (res) {if (res.data.state == 1) {  //判断是否能正常登录warn = "卡号密码不匹配";wx.showModal({title: '提示',content: warn})return;} else {that.setData({success: true,text: res.data.url})}}})}},// 注册 register: function () {wx.navigateTo({url: '/pages/register/register',})}})

 

<!--pages/login.wxml-->
<view class="container"> <view class="login-icon"> <image class="login-img" src="/images/loginLog.jpg"></image> </view> <view class="login-from"> <!--账号--><view class="inputView"> <image class="nameImage" src="/images/name.png"></image> <label class="loginLab">账号</label> <input class="inputText" placeholder="请输入账号" bindinput="phoneInput" /> </view> <view class="line"></view> <!--密码--><view class="inputView"> <image class="keyImage" src="/images/key.png"></image> <label class="loginLab">密码</label> <input class="inputText" password="true" placeholder="请输入密码" bindinput="passwordInput" /> </view> <!--按钮--><view class="loginBtnView"> <button class="loginBtn" type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="login">登录</button> </view><!--注册--><view class="registerBtnView"> <button class="registerBtn" type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="register">注册</button> </view> </view> </view><view class = 'success' wx:if="{{success}}"><web-view src="{{text}}"></web-view>
</view>

 

/* pages/login.wxss */
page{ height: 100%; 
} .container { height: 100%; display: flex; flex-direction: column; padding: 0; box-sizing: border-box; background-color: #f2f2f2
} /*登录图片*/
.login-icon{ flex: none; 
} 
.login-img{ width: 750rpx; 
} /*表单内容*/
.login-from { margin-top: 20px; flex: auto; height:100%; 
} .inputView { background-color: #fff; line-height: 44px; 
} 
/*输入框*/
.nameImage, .keyImage { margin-left: 22px; width: 14px; height: 14px
} .loginLab { margin: 15px 15px 15px 10px; color: #545454; font-size: 14px
} 
.inputText { flex: block; float: right; text-align: left; margin-right: 22px; margin-top: 11px; color: #cccccc; font-size: 14px
} .line { width: 100%; height: 1px; background-color: #cccccc; margin-top: 1px; 
} 
/*按钮*/
.loginBtnView { width: 100%; height: auto; background-color: #f2f2f2; margin-top: 0px; margin-bottom: 0px; padding-bottom: 0px; 
} .loginBtn { width: 100%; margin-top: 35px; 
}.registerBtn { width: 100%; margin-top: 5px; 
}

最后完成的效果图