<!--login.wxml-->
<view class="container">
<view class="content">
<view class="logo"></view>
<view class="info">
<form class="loginForm" bindsubmit="login" wx:if="{{pageType==0}}">
<view class="inputGroup">
<label><text class="fa fa-user"></text></label>
<input type="text" name="username" placeholder="请输入用户名" value="root" />
</view>
<view class="inputGroup">
<label><text class="fa fa-unlock-alt"></text></label>
<input type="password" name="password" placeholder="请输入密码" value="rootpass" />
</view>
<button type="primary" formType="submit">登陆</button>
<text class="tips">{{tips}}</text>
</form>
<form class="loginForm" bindsubmit="register" wx:if="{{pageType==1}}">
<view class="inputGroup">
<label><text class="fa fa-user"></text></label>
<input type="text" name="username" placeholder="请输入用户名" />
</view>
<view class="inputGroup">
<label><text class="fa fa-envelope-o"></text></label>
<input type="text" name="email" placeholder="请输入邮箱" />
</view>
<view class="inputGroup">
<label><text class="fa fa-unlock-alt"></text></label>
<input type="password" name="password" placeholder="请输入密码" />
</view>
<view class="inputGroup">
<label><text class="fa fa-unlock-alt"></text></label>
<input type="password" name="rePassword" placeholder="请再次输入密码" />
</view>
<button type="primary" formType="submit">注册</button>
<text class="tips">{{tips}}</text>
</form>
<view class="version" wx:if="{{pageType==2}}">版本：{{version}}</view>
</view>
</view>
<view wx:if="{{pageType==0}}" class="bottom-bar bottom2">
<view data-page="2" class="bottom-list" bindtap="turnPage">关于</view>
<view data-page="1" class="bottom-list" bindtap="turnPage">注册</view>
</view>
<view wx:if="{{pageType==1}}" class="bottom-bar bottom1">
<view data-page="0" class="bottom-list" bindtap="turnPage">已有账号？直接登陆</view>
</view>
<view wx:if="{{pageType==2}}" class="bottom-bar bottom1">
<view data-page="0" class="bottom-list" bindtap="turnPage">返回登陆</view>
</view>
</view>
|
.container {
background: url('../../image/background.jpg') center center no-repeat;
background-size: cover;
}
.content{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.logo {
width: 100%;
height: 60px;
background: url('../../image/logo.png') center center no-repeat;
background-size: 180px 60px;
}
.version {
margin: 10px 0;
height: 30px;
line-height: 30px;
text-align: center;
}
.content .info{
height: 300px;
margin: 20px auto 0;
display: block;
}
.content .loginForm button{
width: 85%;
margin: 20px auto 0;
background: #00a5cf;
color: #FFF;
font-size: 16px;
border: 0px;
border-radius: 5px;
display: block;
}
/* 输入框 */
.inputGroup{
width: 100%;
height: 40px;
border-top: 1px solid #CCC;
background: #fff;
}
.inputGroup::first-child{
border-top: 0px;
}
.inputGroup .fa {
color: #00a5cf;
}
.inputGroup label{
width: 15%;
height: 40px;
font-size: 16px;
line-height: 40px;
overflow-x: hidden;
float: left;
text-align: center;
display: block;
}
.inputGroup input{
width: 85%;
height: 40px;
padding: 0;
border: 0;
font-size: 16px;
line-height: 40px;
float: right;
}
.tips {
width: 85%;
margin: 20px auto 0;
line-height: 20px;
font-size: 12px;
color: red;
word-break: break-all;
display: block;
}
button {
margin-top: 10px;
}
/* 底部栏 */
.bottom-bar {
border-top: 0px;
background: rgba(255, 255, 255, 0.5);
}
.bottom1 .bottom-list{
color: #000;
width: 100%;
}
.bottom2 .bottom-list{
color: #000;
width: 50%;
}
|
var app = getApp();
Page({
data: {
version: '',
tips: '',
pageType: 0, //0为登陆，1为注册，2为关于
},
onReady: function(){
var that = this;
wx.request({
url: app.url.host + 'apis/v2/',
success: function(res) {
that.setData({
version: res.data.version
});
}
});
},
login: function(e){
console.log(e.detail.value);
var that = this;
that.data.tips = '登录中';
wx.request({
url: app.url.host + app.url.logInUrl,
method: 'POST',
header: {
//默认content-type为json，登陆时不允许
'content-type': 'application/x-www-form-urlencoded'
},
data: e.detail.value,
success: function(res) {
if(res.statusCode != '200') {
console.log(res);
that.setData({tips: res.data.Message});
} else {
that.setData({tips: '登陆成功'});
wx.setStorageSync('Authorization',app.bearer+' '+res.data.token);
wx.switchTab({url: '../index'})
}
}
});
},
register: function(e){
console.log(e.detail.value);
var rData = e.detail.value;
var that = this;
that.setData({tips: '请稍后'});
if(rData.password != rData.rePassword) {
that.setData({tips: '两次密码输入不一样，请检查'});
return;
} else {
wx.request({
url: app.url.host + app.url.registerUrl,
method: 'POST',
data: {
username: rData.username,
email: rData.email,
password: rData.password
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function(res) {
var data = res.data;
if(res.statusCode != '200') {
console.log(res);
that.setData({tips: data.Message});
} else {
that.setData({tips: '注册成功，正在登陆'});
wx.request({
url: app.url.host + app.url.logInUrl,
method: 'POST',
header: {
//默认content-type为json，登陆时不允许
'content-type': 'application/x-www-form-urlencoded'
},
data: {
username: rData.username,
password: rData.password
},
success: function(res) {
if(res.statusCode == '200') {
that.setData({tips: '登陆成功'});
wx.setStorageSync('Authorization',app.bearer+' '+res.data.token);
wx.switchTab({url: '../index'})
}
}
});
}
}
});
}
},
turnPage: function(e){
console.log(e.currentTarget.dataset.page);
this.setData({pageType:e.currentTarget.dataset.page});
}
});
|
模板简介：该模板名称为【微信小程序开发会学猫会员蓝色登陆注册页面制作与设计教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
