wxml文件：
<view class="container"> <view class="login-icon"> <image class="login-img" src="../../img/loginLog.jpg"></image> </view> <view class="login-from"> <!--账号--><view class="inputView"> <image class="nameImage" src="../../img/name.png"></image> <label class="loginLab">账号</label> <input class="inputText" placeholder="请输入账号" bindinput="usernameInput" /> </view> <view class="line"></view> <!--密码--><view class="inputView"> <image class="keyImage" src="../../img/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> </view>
wxss文件：
page{ height: 100%; } .container { height: 100%; display: flex; flex-direction: column; padding: 0; box-sizing: border-box; /* background-color: rgb(156, 23, 78) */} /*登录图片*/.login-icon{ flex: none; } .login-img{ width: 750rpx;} /*表单内容*/.login-from { margin-top: 20px; flex: auto; height:100%; } .inputView { /* background-color: #fff; */line-height: 45px; border-radius:20px;border:1px solid #999999;} /*输入框*/.nameImage, .keyImage { margin-left: 22px; width: 18px; height: 16px} .loginLab { margin: 15px 15px 15px 10px; color: #545454; font-size: 14px} .inputText { flex: block; float: right; text-align: right; margin-right: 22px; margin-top: 11px;color: #cccccc; font-size: 14px} .line { margin-top: 8px; } /* .line { width: 100%; height: 1px; background-color: #cccccc; margin-top: 1px; } *//*按钮*/.loginBtnView { width: 100%; height: auto; /* background-color:#DCDCDC; */margin-top: 0px; margin-bottom: 0px; padding-bottom: 0px; } .loginBtn { width: 90%; margin-top: 40px; border-radius:10px;}
js文件：
//index.js//获取应用实例const app = getApp()Page({data: {username: '',password: ''},//事件处理函数bindViewTap: function() {wx.navigateTo({url: '../logs/logs'})},onShow: function () {// 生命周期函数--监听页面显示wx.hideTabBar({})},onLoad: function () {},// 获取输入账号 usernameInput: function (e) {this.setData({username: e.detail.value})},// 获取输入密码 passwordInput: function (e) {this.setData({password: e.detail.value})},// 登录处理login: function () {var that = this;if (this.data.username.length == 0 || this.data.password.length == 0) {wx.showToast({title: '账号或密码不能为空',icon: 'none',duration: 2000})} else {wx.request({url: app.globalData.globalReqUrl +'/login/login', // 仅为示例，并非真实的接口地址method: 'post',data: {username: that.data.username,password: that.data.password},header: {'content-type': 'application/x-www-form-urlencoded' // 默认值},success(res) {if (res.data.code == "OK") {var unitName = res.data.data.User.unitName;var unitId = res.data.data.User.unitId;wx.setStorageSync('unitId', unitId);wx.setStorageSync('unitName', unitName);wx.switchTab({url: '../overviewData/realTimeData'})} else {wx.showToast({title: res.data.message,icon: 'none',duration: 2000})}}})}}})
效果图：
这里界面里用到的两个图标
---------------长按二维码关注程序媛小姐姐公众号有更多彩蛋哦---------------
