登录页修改
This commit is contained in:
lnn19986213
parent
910633eb13
commit
79560c2a51
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<view style="">
|
||||
<u-gap height="60" bgColor="#FFF"></u-gap>
|
||||
<u--form :model="userInfo" ref="loginForm">
|
||||
<view class="content_main">
|
||||
<view class="copyright_iocn">
|
||||
|
|
@ -9,17 +10,38 @@
|
|||
</image>
|
||||
</view>
|
||||
|
||||
<u-form-item prop="number" ref="item1" class="data_itm">
|
||||
<view class="tab_op">
|
||||
<view :class="tab == 0?'choosed':'unchoosed'" @click="pwdLog()">
|
||||
密码登录
|
||||
</view>
|
||||
<view :class="tab == 1?'choosed':'unchoosed'" @click="codeLog()">
|
||||
验证码登录
|
||||
</view>
|
||||
</view>
|
||||
<u-form-item prop="number" ref="item1" class="data_itm" v-if="tab == 0">
|
||||
<u--input placeholder="请输入手机号" border="bottom" clearable v-model="userInfo.number"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item prop="pasw" ref="item1" class="data_itm">
|
||||
<u-form-item prop="pasw" ref="item1" class="data_itm" v-if="tab == 0">
|
||||
<u--input type="password" placeholder="请输入密码" border="bottom" clearable v-model="userInfo.pasw">
|
||||
</u--input>
|
||||
</u-form-item>
|
||||
<u-button text="登录" size="large" throttleTime=1000 color="#99241B" style="margin-top: 84rpx;" @click="login()">
|
||||
<u-form-item prop="phone" ref="item1" class="data_itm" v-if="tab == 1">
|
||||
<u--input placeholder="请输入手机号" border="bottom" clearable v-model="userInfo.phone"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item prop="code" ref="item1" class="data_itm" v-if="tab == 1">
|
||||
<u-input placeholder="请输入验证码" border="bottom" clearable v-model="userInfo.code">
|
||||
<template slot="suffix">
|
||||
<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
|
||||
<u-button @click="getCode" :text="tips" :hairline="false" plain style="border: 0px;">
|
||||
</u-button>
|
||||
</template>
|
||||
</u-input>
|
||||
</u-form-item>
|
||||
<u-button text="登录" size="large" throttleTime=1000 color="#99241B" style="margin-top: 84rpx;"
|
||||
@click="login()">
|
||||
</u-button>
|
||||
<view class="other_op">
|
||||
<text @click="goRegist">注册账号</text>
|
||||
<!-- <text @click="goRegist">注册账号</text> -->
|
||||
<text @click="goRemeber">忘记密码？</text>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -31,32 +53,36 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
tips: '',
|
||||
userInfo: {
|
||||
number: null,
|
||||
pasw: null
|
||||
pasw: null,
|
||||
phone: null,
|
||||
code: null,
|
||||
},
|
||||
rules: {
|
||||
'number': [{
|
||||
type: 'number',
|
||||
required: true,
|
||||
message: '请填写手机号',
|
||||
message: '请填写账号',
|
||||
trigger: ['blur']
|
||||
}, {
|
||||
validator: (rule, value, callback) => {
|
||||
return uni.$u.test.mobile(value);
|
||||
},
|
||||
message: '请输入格式正确的手机号',
|
||||
trigger: ['blur'],
|
||||
}],
|
||||
'pasw': [{
|
||||
required: true,
|
||||
message: '请填写密码',
|
||||
trigger: ['blur']
|
||||
}],
|
||||
}
|
||||
},
|
||||
tab: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
pwdLog() {
|
||||
this.tab = 0
|
||||
},
|
||||
codeLog() {
|
||||
this.tab = 1
|
||||
},
|
||||
goRegist() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/Login/Register'
|
||||
|
|
@ -68,11 +94,27 @@
|
|||
})
|
||||
},
|
||||
login() {
|
||||
let data = {
|
||||
if(this.tab == 0){
|
||||
this.http.request('/auth/loginByPwd', {
|
||||
phone: this.userInfo.number,
|
||||
pwd: this.userInfo.pasw
|
||||
}, "POST").then(res => {
|
||||
if (res.code == 200) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/pageHome/pageHome'
|
||||
})
|
||||
}
|
||||
this.http.request('/auth/loginByPwd', {phone: this.userInfo.number,pwd: this.userInfo.pasw}, "POST").then(res => {
|
||||
}).catch(e => {
|
||||
uni.showToast({
|
||||
title: e.data.message,
|
||||
icon: "none",
|
||||
});
|
||||
})
|
||||
}else if(this.tab == 1){
|
||||
this.http.request('/auth/loginByPhone', {
|
||||
phone: this.userInfo.phone,
|
||||
code: this.userInfo.code
|
||||
}, "POST").then(res => {
|
||||
if (res.code == 200) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/pageHome/pageHome'
|
||||
|
|
@ -85,6 +127,42 @@
|
|||
});
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
codeChange(text) {
|
||||
this.tips = text;
|
||||
},
|
||||
getCode() {
|
||||
uni.hideKeyboard()
|
||||
if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.userInfo.phone))) { //校验手机号码是否有误
|
||||
uni.showToast({
|
||||
title: '请填写正确手机号码',
|
||||
icon: "none"
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.$refs.uCode.canGetCode) {
|
||||
// 模拟向后端请求验证码
|
||||
uni.showLoading({
|
||||
title: '正在获取验证码'
|
||||
})
|
||||
this.http.request('/auth/getCode?phone=' + this.userInfo.phone, {}, "GET").then(res => {
|
||||
if (res.code == 200) {
|
||||
uni.hideLoading();
|
||||
uni.$u.toast('验证码已发送');
|
||||
this.$refs.uCode.start();
|
||||
}
|
||||
}).catch(e => {
|
||||
uni.showToast({
|
||||
title: e.data.message,
|
||||
icon: "none",
|
||||
});
|
||||
})
|
||||
} else {
|
||||
uni.$u.toast('倒计时结束后再发送');
|
||||
}
|
||||
},
|
||||
},
|
||||
onReady() {
|
||||
this.$refs.loginForm.setRules(this.rules);
|
||||
|
|
@ -97,7 +175,7 @@
|
|||
margin: 0rpx 76rpx;
|
||||
|
||||
.copyright_iocn {
|
||||
margin: 120rpx 0rpx;
|
||||
margin: 0rpx 0rpx 120rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -109,5 +187,29 @@
|
|||
align-items: center;
|
||||
padding: 24rpx 0rpx;
|
||||
}
|
||||
|
||||
.tab_op {
|
||||
height: 60rpx;
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
overflow: hidden;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
|
||||
.choosed {
|
||||
width: 200rpx;
|
||||
text-align: center;
|
||||
color: #99241B;
|
||||
float: left;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.unchoosed {
|
||||
width: 200rpx;
|
||||
text-align: center;
|
||||
color: #32333B;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -52,7 +52,6 @@ export default {
|
|||
options.complete = (response) => {
|
||||
// console.log(response, 'response----')
|
||||
let statusCode = response.statusCode
|
||||
console.log(statusCode)
|
||||
response.config = _config
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
if (statusCode === 200) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue