下面是代码：
login.wxml：
<!--pages/login/login.wxml-->
<view class="container">
<view class="login-icon">
<image class="login-img" src="/images/logo.png"></image>
</view>
<view class="login-from">
<form bindsubmit="formSubmit" class='form'>
<view class="myno">
<!-- 学号 -->
<view class="weui-cell weui-cell_input">
<image class="nameImage" src="/images/name.png"></image>
<!-- <view class="weui-cell__hd">
<view class="weui-label">学号</view>
</view> -->
<view class="weui-cell__bd">
<input class="weui-input" name="no" bindinput="noinput" value='{{no}}' placeholder="请输入学号" />
</view>
</view>
</view>
<view class="mypwd">
<!-- 密码 -->
<view class="weui-cell weui-cell_input">
<image class="nameImage" src="/images/key.png"></image>
<!-- <view class="weui-cell__hd">
<view class="weui-label">密码</view>
</view> -->
<view class="weui-cell__bd">
<input class="weui-input" type="password" name="pwd" bindinput="pwdinput" placeholder="请输入密码" value='{{pwd}}'/>
</view>
</view>
</view>
<!--按钮-->
<view class="loginBtnView">
<button class="loginBtn" size="{{primarySize}}" form-type='submit' disabled='{{disabled}}'>登录</button>
</view>
</form>
</view>
</view>
login.wxss：
/* pages/login/login.wxss */
page{
height: 100%;
background-size:100%;
background-image: url('http://songlijuan.top/bk2.jpg');
}
.container {
height: 100%;
display: flex;
flex-direction: column;
padding: 0;
box-sizing: border-box;
/* background-color: #f2f2f2; */
}
/*登录图片*/
.login-icon{
flex: none;
margin: 0 auto;
margin-top: 200rpx;
}
.login-img{
width: 220rpx;
height: 220rpx;
border-radius: 110rpx;
opacity: 0.6;
}
/*表单内容*/
.login-from {
margin-top: 90px;
flex: auto;
height:100%;
}
/* 输入框 */
.myno{
width: 90%;
height: 80rpx;
margin: 0 auto;
border:1px solid #ccc;
border-radius: 50rpx;
}
.mypwd{
width: 90%;
height: 80rpx;
margin: 0 auto;
border:1px solid #ccc;
border-radius: 50rpx;
margin-top: 20rpx;
}
/*按钮*/
.loginBtnView {
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
}
.loginBtn {
width: 90%;
height: 80rpx;
line-height: 80rpx;
margin-top: 35px;
color: #fff;
background-color:#7e8ef0;
border: 0.1rpx solid #ccc;
border-radius: 40rpx;
}
.nameImage, .keyImage {
margin-right: 10px;
width: 14px;
height: 14px
}
login.js：
// pages/login/login.js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
disabled:false,
no:'',
pwd:'',
noinput:false,
pwdinput:false,
},
noinput:function(e){
this.setData({no:e.detail.value});
this.setData({noinput:true});
if(this.data.noinput==true && this.data.pwdinput==true){
this.setData({ disabled: false });
}
},
pwdinput: function (e) {
this.setData({ pwd: e.detail.value });
this.setData({ pwdinput: true });
if (this.data.noinput == true && this.data.pwdinput == true) {
this.setData({ disabled: false });
}
},
formSubmit: function (e) {
wx.showLoading({
title: '登录中...',
})
console.log(e);
this.setData({ disabled: true});
wx.request({
url: app.globalData.url.login, //仅为示例，并非真实的接口地址
data: {
no: e.detail.value.no,
pwd: e.detail.value.pwd
},
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
console.log(res);
if (res.statusCode == 200) {
if (res.data.error == true) {
wx.showToast({
title: res.data.msg,
icon: 'none',
duration: 2000
})
} else {
wx.setStorageSync('student', res.data.data);
wx.showToast({
title: res.data.msg,
icon: 'success',
duration: 2000
})
setTimeout(function(){
wx.switchTab({
url: '../teacher/teacher',
})
},2000)
}
}else{
wx.showToast({
title: '服务器出现错误',
icon: 'none',
duration: 2000
})
}
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({disabled:false});
var student = wx.getStorageSync('student');
if (typeof (student) == 'object' && student.no != '' && student.classid != '') {
wx.switchTab({
url: '../teacher/teacher',
})
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
if(this.data.no=='' || this.data.pwd==''){
this.setData({ disabled: true });
}else{
this.setData({ disabled: false });
}
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
我引用了weui的样式，大家可以参考下weui的样式，下载weui并引用。
|
