登录页修改
This commit is contained in:
lnn19986213
parent
910633eb13
commit
79560c2a51
|
|
@ -1,113 +1,215 @@
|
||||||
<template>
|
<template>
|
||||||
<view style="">
|
<view style="">
|
||||||
<u--form :model="userInfo" ref="loginForm">
|
<u-gap height="60" bgColor="#FFF"></u-gap>
|
||||||
<view class="content_main">
|
<u--form :model="userInfo" ref="loginForm">
|
||||||
<view class="copyright_iocn">
|
<view class="content_main">
|
||||||
<image style="width: 80rpx; height: 60rpx;" src="../../static/icon10.png" mode=""></image>
|
<view class="copyright_iocn">
|
||||||
<image style="width: 156rpx; height: 50rpx;margin-left: 16rpx;" src="../../static/icon11.png"
|
<image style="width: 80rpx; height: 60rpx;" src="../../static/icon10.png" mode=""></image>
|
||||||
mode="">
|
<image style="width: 156rpx; height: 50rpx;margin-left: 16rpx;" src="../../static/icon11.png"
|
||||||
</image>
|
mode="">
|
||||||
</view>
|
</image>
|
||||||
|
</view>
|
||||||
|
|
||||||
<u-form-item prop="number" ref="item1" class="data_itm">
|
<view class="tab_op">
|
||||||
<u--input placeholder="请输入手机号" border="bottom" clearable v-model="userInfo.number"></u--input>
|
<view :class="tab == 0?'choosed':'unchoosed'" @click="pwdLog()">
|
||||||
</u-form-item>
|
密码登录
|
||||||
<u-form-item prop="pasw" ref="item1" class="data_itm">
|
</view>
|
||||||
<u--input type="password" placeholder="请输入密码" border="bottom" clearable v-model="userInfo.pasw">
|
<view :class="tab == 1?'choosed':'unchoosed'" @click="codeLog()">
|
||||||
</u--input>
|
验证码登录
|
||||||
</u-form-item>
|
</view>
|
||||||
<u-button text="登录" size="large" throttleTime=1000 color="#99241B" style="margin-top: 84rpx;" @click="login()">
|
</view>
|
||||||
</u-button>
|
<u-form-item prop="number" ref="item1" class="data_itm" v-if="tab == 0">
|
||||||
<view class="other_op">
|
<u--input placeholder="请输入手机号" border="bottom" clearable v-model="userInfo.number"></u--input>
|
||||||
<text @click="goRegist">注册账号</text>
|
</u-form-item>
|
||||||
<text @click="goRemeber">忘记密码？</text>
|
<u-form-item prop="pasw" ref="item1" class="data_itm" v-if="tab == 0">
|
||||||
</view>
|
<u--input type="password" placeholder="请输入密码" border="bottom" clearable v-model="userInfo.pasw">
|
||||||
</view>
|
</u--input>
|
||||||
</u--form>
|
</u-form-item>
|
||||||
</view>
|
<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="goRemeber">忘记密码？</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u--form>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
userInfo: {
|
tips: '',
|
||||||
number: null,
|
userInfo: {
|
||||||
pasw: null
|
number: null,
|
||||||
},
|
pasw: null,
|
||||||
rules: {
|
phone: null,
|
||||||
'number': [{
|
code: null,
|
||||||
type: 'number',
|
},
|
||||||
required: true,
|
rules: {
|
||||||
message: '请填写手机号',
|
'number': [{
|
||||||
trigger: ['blur']
|
type: 'number',
|
||||||
}, {
|
required: true,
|
||||||
validator: (rule, value, callback) => {
|
message: '请填写账号',
|
||||||
return uni.$u.test.mobile(value);
|
trigger: ['blur']
|
||||||
},
|
}],
|
||||||
message: '请输入格式正确的手机号',
|
'pasw': [{
|
||||||
trigger: ['blur'],
|
required: true,
|
||||||
}],
|
message: '请填写密码',
|
||||||
'pasw': [{
|
trigger: ['blur']
|
||||||
required: true,
|
}],
|
||||||
message: '请填写密码',
|
},
|
||||||
trigger: ['blur']
|
tab: 0,
|
||||||
}],
|
};
|
||||||
}
|
},
|
||||||
};
|
methods: {
|
||||||
},
|
pwdLog() {
|
||||||
methods: {
|
this.tab = 0
|
||||||
goRegist() {
|
},
|
||||||
uni.navigateTo({
|
codeLog() {
|
||||||
url: '/pages/Login/Register'
|
this.tab = 1
|
||||||
})
|
},
|
||||||
},
|
goRegist() {
|
||||||
goRemeber() {
|
uni.navigateTo({
|
||||||
uni.navigateTo({
|
url: '/pages/Login/Register'
|
||||||
url: '/pages/Login/RemeberPW'
|
})
|
||||||
})
|
},
|
||||||
},
|
goRemeber() {
|
||||||
login(){
|
uni.navigateTo({
|
||||||
let data = {
|
url: '/pages/Login/RemeberPW'
|
||||||
phone: this.userInfo.number,
|
})
|
||||||
pwd: this.userInfo.pasw
|
},
|
||||||
}
|
login() {
|
||||||
this.http.request('/auth/loginByPwd', {phone: this.userInfo.number,pwd: this.userInfo.pasw}, "POST").then(res => {
|
if(this.tab == 0){
|
||||||
|
this.http.request('/auth/loginByPwd', {
|
||||||
|
phone: this.userInfo.number,
|
||||||
|
pwd: this.userInfo.pasw
|
||||||
|
}, "POST").then(res => {
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/pageHome/pageHome'
|
url: '/pages/pageHome/pageHome'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}).catch(e => {
|
}).catch(e => {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title:e.data.message,
|
title: e.data.message,
|
||||||
icon:"none",
|
icon: "none",
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
}
|
}else if(this.tab == 1){
|
||||||
},
|
this.http.request('/auth/loginByPhone', {
|
||||||
onReady() {
|
phone: this.userInfo.phone,
|
||||||
this.$refs.loginForm.setRules(this.rules);
|
code: this.userInfo.code
|
||||||
},
|
}, "POST").then(res => {
|
||||||
}
|
if (res.code == 200) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/pageHome/pageHome'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}).catch(e => {
|
||||||
|
uni.showToast({
|
||||||
|
title: e.data.message,
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
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);
|
||||||
|
},
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.content_main {
|
.content_main {
|
||||||
margin: 0rpx 76rpx;
|
margin: 0rpx 76rpx;
|
||||||
|
|
||||||
.copyright_iocn {
|
.copyright_iocn {
|
||||||
margin: 120rpx 0rpx;
|
margin: 0rpx 0rpx 120rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.other_op {
|
.other_op {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 24rpx 0rpx;
|
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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -52,7 +52,6 @@ export default {
|
||||||
options.complete = (response) => {
|
options.complete = (response) => {
|
||||||
// console.log(response, 'response----')
|
// console.log(response, 'response----')
|
||||||
let statusCode = response.statusCode
|
let statusCode = response.statusCode
|
||||||
console.log(statusCode)
|
|
||||||
response.config = _config
|
response.config = _config
|
||||||
if (process.env.NODE_ENV === 'development') {
|
if (process.env.NODE_ENV === 'development') {
|
||||||
if (statusCode === 200) {
|
if (statusCode === 200) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue