peihaoyu/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 优化用户体验

Browse Source
This commit is contained in:
x ronger 2020-09-15 21:12:10 +08:00
parent 6516ce1e57
commit 1a0416c980
2 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
pages/login.vue
View File

@ -15,7 +15,7 @@
<el-link rel="nofollow" style="float: right;" :underline="false" @click="forgetPassword">忘记密码</el-link> <el-link rel="nofollow" style="float: right;" :underline="false" @click="forgetPassword">忘记密码</el-link>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button style="width: 60%;" type="primary" @click="login">立即登录</el-button> <el-button style="width: 60%;" type="primary" @click="login" :loading="loginLoading">立即登录</el-button>
<el-button style="width: 32%;" @click="register">注册</el-button> <el-button style="width: 32%;" @click="register">注册</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -68,7 +68,8 @@
email: '' email: ''
}, },
forget: false, forget: false,
loading: false loading: false,
loginLoading: false
} }
}, },
computed: { computed: {
@ -81,12 +82,18 @@
let _ts = this; let _ts = this;
_ts.$refs.user.validate((valid) => { _ts.$refs.user.validate((valid) => {
if (valid) { if (valid) {
_ts.$set(_ts, 'loginLoading', true);
setTimeout(function () {
_ts.$set(_ts, 'loginLoading', false);
}, 10000);
let data = { let data = {
account: _ts.user.account, account: _ts.user.account,
password: _ts.user.password password: _ts.user.password
} }
_ts.$axios.$post('/api/console/login', data).then(function (res) { _ts.$axios.$post('/api/console/login', data).then(function (res) {
_ts.$set(_ts, 'loginLoading', false);
if (res) { if (res) {
if (res.message) { if (res.message) {
_ts.$message(res.message); _ts.$message(res.message);

19
pages/register.vue
View File

@ -24,7 +24,7 @@
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button style="width: 60%;" type="primary" @click="register">立即注册</el-button> <el-button style="width: 60%;" type="primary" @click="register" :loading="registerLoading">立即注册</el-button>
<el-button style="width: 32%;" @click="login">登录</el-button> <el-button style="width: 32%;" @click="login">登录</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -51,6 +51,7 @@
password: '', password: '',
confirmPassword: '' confirmPassword: ''
}, },
registerLoading: false,
loading: false, loading: false,
loadText: '发送验证码', loadText: '发送验证码',
timeClock: null timeClock: null
@ -70,20 +71,21 @@
_ts.$axios.$get('/api/console/get-email-code', { _ts.$axios.$get('/api/console/get-email-code', {
params: data params: data
}).then(response => { }).then(response => {
if (response.data) { if (response.message) {
_ts.$message(response.data.message) _ts.$message(response.message);
} }
}).catch(error => { }).catch(error => {
console.log(error) console.log(error);
_ts.$message("邮件发送失败,请检查邮箱是否正确!");
}) })
}, },
timerHandler() { timerHandler() {
let _ts = this; let _ts = this;
_ts.$set(_ts, 'loading', true); _ts.$set(_ts, 'loading', true);
let times = 60; let times = 30;
_ts.timeClock = setInterval(function (){ _ts.timeClock = setInterval(function (){
times --; times --;
_ts.$set(_ts, 'loadText', times + 's'); _ts.$set(_ts, 'loadText', times + ' s');
if (times == 0) { if (times == 0) {
clearInterval(_ts.timeClock); clearInterval(_ts.timeClock);
_ts.$set(_ts, 'loading', false); _ts.$set(_ts, 'loading', false);
@ -95,12 +97,17 @@
let _ts = this; let _ts = this;
_ts.$refs.user.validate((valid) => { _ts.$refs.user.validate((valid) => {
if (valid) { if (valid) {
_ts.$set(_ts, 'registerLoading', true);
setTimeout(function () {
_ts.$set(_ts, 'registerLoading', false);
}, 10000);
let data = { let data = {
email: _ts.user.email, email: _ts.user.email,
password: _ts.user.password, password: _ts.user.password,
code: _ts.user.code code: _ts.user.code
} }
_ts.$axios.$post('/api/console/register', data).then(function (res) { _ts.$axios.$post('/api/console/register', data).then(function (res) {
_ts.$set(_ts, 'registerLoading', false);
if (res) { if (res) {
_ts.$message(res.message); _ts.$message(res.message);
if (res.flag && res.flag === 1) { if (res.flag && res.flag === 1) {