使用 uview 重构实际登陆
parent
0d8f10cf1f
commit
ccb56b3b99
|
@ -2,26 +2,33 @@ import { request } from '@/common/js/request.js'
|
|||
|
||||
// 手机号 + 密码登陆
|
||||
export function login(mobile, password) {
|
||||
const data = {
|
||||
mobile,
|
||||
password
|
||||
}
|
||||
return request({
|
||||
url: 'login',
|
||||
method: 'post',
|
||||
data: data
|
||||
data: {
|
||||
mobile, password
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 手机号 + 验证码登陆
|
||||
export function smsLogin(mobile, code) {
|
||||
const data = {
|
||||
mobile,
|
||||
code
|
||||
}
|
||||
return request({
|
||||
url: 'sms-login',
|
||||
method: 'post',
|
||||
data: data
|
||||
data: {
|
||||
mobile, code
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 发送手机验证码
|
||||
export function sendSmsCode(mobile, scene) {
|
||||
return request({
|
||||
url: 'send-sms-code',
|
||||
method: 'post',
|
||||
data: {
|
||||
mobile, scene
|
||||
}
|
||||
})
|
||||
}
|
|
@ -1,11 +1,8 @@
|
|||
<template>
|
||||
<view class="app">
|
||||
<!-- 左下角的环 -->
|
||||
<view class="left-bottom-sign"></view>
|
||||
<!-- 右上角的折角 -->
|
||||
<view class="right-top-sign"></view>
|
||||
<!-- 左上角的 x 关闭 -->
|
||||
<view class="back-btn mix-icon icon-guanbi" @click="navBack"></view>
|
||||
|
||||
<!-- 用户协议 -->
|
||||
<view class="agreement center">
|
||||
<text class="mix-icon icon-xuanzhong" :class="{active: agreement}" @click="checkAgreement"></text>
|
||||
|
@ -26,8 +23,8 @@
|
|||
<!-- 判断使用验证码还是密码 -->
|
||||
<u-form-item prop="code" borderBottom v-if="loginType == 'code'">
|
||||
<u--input type="number" v-model="form.code" placeholder="请输入验证码" border="none"></u--input>
|
||||
<u-button slot="right" @tap="getCode" :text="tips" type="success" size="mini" :disabled="disabled1"></u-button>
|
||||
<u-code ref="uCode" @change="codeChange" seconds="60" @start="disabled1 = true" @end="disabled1 = false"></u-code>
|
||||
<u-button slot="right" @tap="getCode" :text="uCode.tips" type="success" size="mini" :disabled="uCode.disabled"></u-button>
|
||||
<u-code ref="uCode" @change="codeChange" seconds="60" @start="uCode.disabled === true" @end="uCode.disabled === false"></u-code>
|
||||
</u-form-item>
|
||||
<u-form-item prop="password" borderBottom v-else>
|
||||
<u--input password v-model="form.password" placeholder="请输入密码" border="none"></u--input>
|
||||
|
@ -69,7 +66,7 @@
|
|||
|
||||
<script>
|
||||
import { checkStr } from '@/common/js/util'
|
||||
import { login, smsLogin } from '@/api/system/auth.js'
|
||||
import { login, smsLogin, sendSmsCode } from '@/api/system/auth.js'
|
||||
import loginMpWx from './mixin/login-mp-wx.js'
|
||||
import loginAppWx from './mixin/login-app-wx.js'
|
||||
|
||||
|
@ -78,7 +75,7 @@
|
|||
data() {
|
||||
return {
|
||||
agreement: true,
|
||||
loginType: 'password', // 登录方式,code 验证码;password 密码
|
||||
loginType: 'code', // 登录方式,code 验证码;password 密码
|
||||
loading: false, // 表单提交
|
||||
rules: {
|
||||
mobile: [{
|
||||
|
@ -98,8 +95,10 @@
|
|||
code: '',
|
||||
password: '',
|
||||
},
|
||||
disabled1: false,
|
||||
tips: '',
|
||||
uCode: {
|
||||
tips: '',
|
||||
disable: false,
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
@ -126,11 +125,10 @@
|
|||
this.loading = false;
|
||||
})
|
||||
}).catch(errors => {
|
||||
debugger;
|
||||
});
|
||||
},
|
||||
// 登陆成功的处理逻辑
|
||||
loginSuccessCallBack(data){
|
||||
loginSuccessCallBack(data) {
|
||||
this.$util.msg('登录成功');
|
||||
this.$store.commit('setToken', data);
|
||||
// TODO 芋艿:如果当前页是第一页,则无法返回。期望是能够回到首页
|
||||
|
@ -139,7 +137,9 @@
|
|||
}, 1000)
|
||||
},
|
||||
navBack() {
|
||||
uni.navigateBack();
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
},
|
||||
setLoginType(loginType) {
|
||||
this.loginType = loginType;
|
||||
|
@ -151,8 +151,8 @@
|
|||
required: true,
|
||||
message: '请输入验证码'
|
||||
}, {
|
||||
min: 1000,
|
||||
max: 999999,
|
||||
min: 4,
|
||||
max: 6,
|
||||
message: '验证码不正确'
|
||||
}];
|
||||
} else {
|
||||
|
@ -181,24 +181,27 @@
|
|||
}))
|
||||
},
|
||||
codeChange(text) {
|
||||
this.tips = text;
|
||||
this.uCode.tips = text;
|
||||
},
|
||||
getCode() {
|
||||
if (this.$refs.uCode.canGetCode) {
|
||||
// 模拟向后端请求验证码
|
||||
uni.showLoading({
|
||||
title: '正在获取验证码'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
// 这里此提示会被this.start()方法中的提示覆盖
|
||||
// 处于发送中,则跳过
|
||||
if (!this.$refs.uCode.canGetCode) {
|
||||
return;
|
||||
}
|
||||
// 校验手机号
|
||||
this.$refs.form.validateField('mobile', errors => {
|
||||
if (errors.length > 0) {
|
||||
uni.$u.toast(errors[0].message);
|
||||
return;
|
||||
}
|
||||
// 发送验证码 TODO 芋艿,枚举类
|
||||
sendSmsCode(this.form.mobile, 1).then(data => {
|
||||
uni.$u.toast('验证码已发送');
|
||||
// 通知验证码组件内部开始倒计时
|
||||
this.$refs.uCode.start();
|
||||
}, 2000);
|
||||
} else {
|
||||
uni.$u.toast('倒计时结束后再发送');
|
||||
}
|
||||
}).catch(erros => {
|
||||
})
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
|
@ -243,41 +246,9 @@
|
|||
.left-top-sign {
|
||||
font-size: 120rpx;
|
||||
color: #f8f8f8;
|
||||
position:relative;
|
||||
position: relative;
|
||||
left: -12rpx;
|
||||
}
|
||||
.left-bottom-sign {
|
||||
position: absolute;
|
||||
left: -270rpx;
|
||||
bottom: -320rpx;
|
||||
border: 100rpx solid #d0d1fd;
|
||||
border-radius: 50%;
|
||||
padding: 180rpx;
|
||||
}
|
||||
.right-top-sign {
|
||||
position:absolute;
|
||||
top: 80rpx;
|
||||
right: -30rpx;
|
||||
z-index: 95;
|
||||
&:before, &:after{
|
||||
display:block;
|
||||
content:"";
|
||||
width: 400rpx;
|
||||
height: 80rpx;
|
||||
background: #b4f3e2;
|
||||
}
|
||||
&:before{
|
||||
transform: rotate(50deg);
|
||||
border-top-right-radius: 50px;
|
||||
}
|
||||
&:after{
|
||||
position: absolute;
|
||||
right: -198rpx;
|
||||
top: 0;
|
||||
transform: rotate(-50deg);
|
||||
border-top-left-radius: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
/** 手机登录部分 */
|
||||
.input-content {
|
||||
|
|
Loading…
Reference in New Issue