Skip to content

M
MiyaFrogFastCashApp
Commit d8acae29 authored by jiangjiantao's avatar jiangjiantao
Browse files
Options

登录页面完结 

登录页面完结
parent 8f318776
Show whitespace changes
Inline Side-by-side
Showing with 190 additions and 71 deletions
app.js
View file @ d8acae29
...@@ -5,35 +5,10 @@ App({ ...@@ -5,35 +5,10 @@ App({
var logs = wx.getStorageSync('logs') || [] var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now()) logs.unshift(Date.now())
wx.setStorageSync('logs', logs) wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
}, },
globalData: { globalData: {
userInfo: null userInfo: null,
version: "1.0.6.20200310",
BASE_URL: "https://hhms.miyapay.com/",
} }
}) })
\ No newline at end of file
app.wxss
View file @ d8acae29
...@@ -4,6 +4,9 @@ ...@@ -4,6 +4,9 @@
/* 公共全局属性 */ /* 公共全局属性 */
page{ page{
--main-color: #FF7700; --main-color: #FF7700;
--disable-main-color: #72FF7700;
/* 公共系数px rpx的比值 */
--common-ratio: 0.7;
} }
.container { .container {
......
const/apiurl.js 0 → 100644
View file @ d8acae29
//登陆
export const API_LOGIN = "verify/auth/token";
pages/login/login.js
View file @ d8acae29
// pages/login/login.js // pages/login/login.js
import { API_LOGIN } from '../../const/apiurl'
var app = getApp();
Page({ Page({
/** /**
* 页面的初始数据 * 页面的初始数据
*/ */
data: { data: {
<<<<<<< Updated upstream
=======
account:'',
password:'',
errMsg:'',
loginDisabled:true
}, },
/** /**
* 生命周期函数--监听页面加载 * 账号输入
* @param {}} e
*/ */
onLoad: function (options) { bindAccountInput: function (e) {
this.setData({
account : e.detail.value,
errMsg:''
})
this.updateSubmitState();
},
/**
* 密码输入
* @param {*} e
*/
bindPasswordInput: function (e) {
this.setData({
password: e.detail.value,
errMsg:''
})
this.updateSubmitState();
},
/**
* 登录
*/
formSubmit(e) {
if(this.data.account == '' || this.data.password == ''){
this.setData({
errMsg:"账号或密码为空"
})
return
}
this.login(e.detail.value);
}, },
/** /**
* 生命周期函数--监听页面初次渲染完成 * 刷新submit按钮
* @param {} params
*/ */
onReady: function () { updateSubmitState(){
if(this.data.account == '' || this.data.password == ''){
this.setData({
loginDisabled:true
})
}else{
this.setData({
loginDisabled:false
})
}
},
/**
* 清除账号
* @param {*} params
*/
clearAccount(){
this.setData({
account:""
})
}, },
/** /**
* 生命周期函数--监听页面显示 * 清除密码
* @param {*} params
*/ */
onShow: function () { clearPassword(){
this.setData({
password:""
})
},
/**
* 登录
* @param {}} options
*/
login(params){
wx.showLoading({
title: '请稍后...',
})
wx.request({
url: app.globalData.BASE_URL+API_LOGIN,
data: {
username: params.username,
password: params.password
},
method: 'POST',
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res)
wx.hideLoading({
success: (res) => {},
})
if (res.data.code == 200) {
wx.showToast({
title: '登录成功',
icon: 'success',
duration: 2000
})
wx.setStorageSync('accountInfo', params)
}else{
wx.showToast({
title: res.data.msg,
icon: 'none',
duration: 2000
})
}
}, },
fail(e){
wx.hideLoading({
success: (res) => {},
})
wx.showToast({
title: e,
icon: 'none',
duration: 2000
})
console.log(e)
}
})
>>>>>>> Stashed changes
},
/** /**
* 生命周期函数--监听页面隐藏 * 生命周期函数--监听页面加载
*/ */
onHide: function () { onLoad: function (options) {
}, },
/** /**
* 生命周期函数--监听页面卸载 * 生命周期函数--监听页面初次渲染完成
*/ */
onUnload: function () { onReady: function () {
var accountInfo = wx.getStorageSync('accountInfo') || []
if(accountInfo != null){
this.setData({
account:accountInfo.username,
password:accountInfo.password,
loginDisabled:false
})
this.login(accountInfo)
}
}, },
/** /**
* 页面相关事件处理函数--监听用户下拉动作 * 生命周期函数--监听页面显示
*/ */
onPullDownRefresh: function () { onShow: function () {
}, },
/** /**
* 页面上拉触底事件的处理函数 * 生命周期函数--监听页面隐藏
*/ */
onReachBottom: function () { onHide: function () {
}, },
/** /**
* 用户点击右上角分享 * 生命周期函数--监听页面卸载
*/ */
onShareAppMessage: function () { onUnload: function () {
},
}
}) })
\ No newline at end of file
pages/login/login.wxml
View file @ d8acae29
...@@ -9,8 +9,9 @@ ...@@ -9,8 +9,9 @@
<view class="v-input-container"> <view class="v-input-container">
<view class="v-input-container-top"> <view class="v-input-container-top">
<input class="input-area" placeholder-class="input-placeholder-style" placeholder="输入账号" /> <input name="username" class="input-area" placeholder-class="input-placeholder-style"
<image mode="aspectFill" src="http://hh-oss-picture.miyapay.com/box/ab93973d2d0c01f4f23c18f99e39d05d.png" class="input-clear"></image> placeholder="输入账号" confirm-type="next" bindinput="bindAccountInput" value="{{account}}"/>
<image wx:if="{{account != ''}}" mode="aspectFill" src="http://hh-oss-picture.miyapay.com/box/ab93973d2d0c01f4f23c18f99e39d05d.png" class="input-clear" bindtap="clearAccount"></image>
</view> </view>
<view class="v-input-container-bottom"> <view class="v-input-container-bottom">
<view class="v-input-container-bottom-space"/> <view class="v-input-container-bottom-space"/>
...@@ -20,8 +21,8 @@ ...@@ -20,8 +21,8 @@
<view class="v-input-container"> <view class="v-input-container">
<view class="v-input-container-top"> <view class="v-input-container-top">
<input class="input-area" placeholder-class="input-placeholder-style" placeholder="输入密码" /> <input name="password" password type="text" class="input-area" value='{{password}}'placeholder-class="input-placeholder-style" confirm-type="next" placeholder="输入密码" bindinput="bindPasswordInput" />
<image mode="aspectFill" src="http://hh-oss-picture.miyapay.com/box/ab93973d2d0c01f4f23c18f99e39d05d.png" class="input-clear"></image> <image wx:if="{{password != ''}}" mode="aspectFill" src="http://hh-oss-picture.miyapay.com/box/ab93973d2d0c01f4f23c18f99e39d05d.png" class="input-clear" bindtap="clearPassword"></image>
</view> </view>
<view class="v-input-container-bottom"> <view class="v-input-container-bottom">
<view class="v-input-container-bottom-space"/> <view class="v-input-container-bottom-space"/>
...@@ -29,7 +30,8 @@ ...@@ -29,7 +30,8 @@
</view> </view>
</view> </view>
<button class="btn-submit" formType="submit">登录</button> <view wx:if="{{errMsg != ''}}" class="text-errmsg">{{errMsg}}</view>
<button class="btn-submit" disabled="{{loginDisabled}}" formType="submit">登录</button>
</form> </form>
</view> </view>
</view> </view>
\ No newline at end of file
pages/login/login.wxss
View file @ d8acae29
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
align-content: space-between; align-content: space-between;
background-image: url('http://hh-oss-picture.miyapay.com/box/2d2d11d61622580249ff542c26f589d9.png'); background-color: var(--main-color);
} }
.header{ .header{
...@@ -13,43 +13,42 @@ ...@@ -13,43 +13,42 @@
height: 25%; height: 25%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-left: 16%;
padding-right: 16%;
} }
.body{ .body{
width: 100%; flex: 1;
height: 75%; height: 75%;
background-color: white; background-color: white;
border-radius: 1rem 1rem 0 0; border-radius: 1rem 1rem 0 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-left: 16%;
padding-right: 16%;
} }
.header-title1{ .header-title1{
color: white; color: white;
font-size: 48rpx; font-size: 64rpx;
margin-top: 100rpx; margin-top: 8.5%;
margin-left: 75rpx;
} }
.header-title2{ .header-title2{
color: white; color: white;
font-size: 50rpx; font-size: 64rpx;
margin-left: 75rpx;
} }
.account-login{ .account-login{
font-size: 33rpx; font-size: 44rpx;
margin-top: 40rpx; margin-top: 60rpx;
margin-left: 75rpx;
} }
.v-input-container{ .v-input-container{
height: 60rpx; height: 60rpx;
flex: 1; flex: 1;
display: flex; display: flex;
margin-left: 75rpx;
margin-top: 60rpx; margin-top: 60rpx;
margin-right: 75rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
...@@ -66,10 +65,12 @@ ...@@ -66,10 +65,12 @@
flex: 1; flex: 1;
height: 90%; height: 90%;
margin-right: 20rpx; margin-right: 20rpx;
font-size: 32rpx;
} }
.input-placeholder-style{ .input-placeholder-style{
color: #BCC3CE; color: #BCC3CE;
font-size: 32rpx;
} }
.input-clear{ .input-clear{
...@@ -96,11 +97,24 @@ ...@@ -96,11 +97,24 @@
} }
.btn-submit{ .btn-submit{
height: 80rpx; display: flex;
height: 114rpx;
flex: 1; flex: 1;
margin-left: 75rpx; margin-top: 100rpx;
margin-right: 75rpx;
margin-top: 75rpx;
background-color: var(--main-color); background-color: var(--main-color);
color: white; color: white;
font-size: 40rpx;
align-items: center;
justify-content: center;
}
button[disabled] {
color: white !important;
background: #FF77003f !important;
}
.text-errmsg{
color: tomato;
margin-top: 20rpx;
font-size: 28rpx;
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment