使用 uview 重构实际登陆

pull/2/head
YunaiV 2021-11-28 20:48:41 +08:00
parent 0d8f10cf1f
commit ccb56b3b99
2 changed files with 49 additions and 71 deletions

View File

@ -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
}
})
}

View File

@ -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 {