Skip to content

B
beyond-clouds-front
Commit 53a203aa by yanju
Options

Merge branch 'yoona' into 'master' 

登录注册修改密码

See merge request pigbigbig/beyond-clouds-front!24
parents e95b9a05 515f5e32
Showing with 154 additions and 44 deletions
layouts/blank.vue
<template> <template>
<transition name="fade-transform" mode="out-in"> <transition name="fade-transform" mode="out-in">
<nuxt/> <nuxt/>
</transition> </transition>
</template> </template>
......
pages/users/login.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="login-header"> <div class="login-header">
<embed src="../../assets/svg/whiteLogo.svg" width="111" height="26" <embed src="../../assets/svg/whiteLogo.svg" width="111" height="26"
type="image/svg+xml" type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" /> pluginspage="http://www.adobe.com/svg/viewer/install/"/>
<div class="header-register" @click="handleRegister">注册</div> <div class="header-register" @click="handleRegister">注册</div>
</div> </div>
<login-card <login-card
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
title2="短信登录" title2="短信登录"
commitment="1" commitment="1"
button="登录" button="登录"
:errMessage="errMessage"
@login="handleLogin" @login="handleLogin"
></login-card> ></login-card>
<div class="login-footer">Copyright © 2019 云里云外开源社区 All Rights Reserved · 京ICP备 1234567891号-11</div> <div class="login-footer">Copyright © 2019 云里云外开源社区 All Rights Reserved · 京ICP备 1234567891号-11</div>
...@@ -25,26 +26,50 @@ ...@@ -25,26 +26,50 @@
const Cookie = process.client ? require('js-cookie') : null const Cookie = process.client ? require('js-cookie') : null
import LoginCard from '../../components/pc/loginCard'; import LoginCard from '../../components/pc/loginCard';
import config from "../../action/config"; import config from "../../action/config";
export default { export default {
name: "index", name: "index",
layout: 'blank', layout: 'blank',
components: { components: {
LoginCard LoginCard
}, },
methods:{ data() {
return {
errMessage: ''
}
},
methods: {
async handleLogin(way, account, password, phone, verification) { async handleLogin(way, account, password, phone, verification) {
this.errMessage = '';
console.log(way); console.log(way);
console.log(account); console.log(account);
console.log(password); console.log(password);
console.log(phone); console.log(way && account !== '' && password !== '');
console.log(verification); console.log(!way && account !== '' && verification !== '');
let authResponse;
// 密码登录 way为 true 验证码 way 为 false
if (way && account !== '' && password !== '') {
let reg = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{8,16}$/;
if (!reg.test(password) || password.length < 8) {
this.errMessage = '密码格式错误';
return false
}
authResponse = await this.$axios.$post(config.api.post.Authentication.accountAuth, {
mobile: account,
password: password
});
} else if (!way && account !== '' && verification !== '') {
authResponse = await this.$axios.$post(config.api.post.Authentication.smsAuth, {
mobile: account,
verifyCode: verification
});
}
// console.log(authResponse);
const authResponse = await this.$axios.$post(config.api.post.Authentication.accountAuth, {
mobile: account,
password: password
});
// 认证成功 // 认证成功
if (authResponse.code === 0) { if (authResponse !== undefined && authResponse.code === 0) {
// 获取token
const token = authResponse.data.accessToken const token = authResponse.data.accessToken
const store = this.$store const store = this.$store
...@@ -64,22 +89,23 @@ export default { ...@@ -64,22 +89,23 @@ export default {
this.$message({ this.$message({
type: 'success', type: 'success',
message: '登录成功！' message: '登录成功！'
}) });
this.$router.push('/') this.$router.push('/')
} else { } else {
store.commit('auth/logout') store.commit('auth/logout')
store.commit('userProfile/removeUser') store.commit('userProfile/removeUser')
} }
} else { } else if (authResponse !== undefined) {
// 认证失败 // 认证失败
this.errMessage = authResponse.msg
this.$message({ this.$message({
type: 'error', type: 'error',
message: authResponse.msg message: authResponse.msg
}) });
} }
}, },
// 跳转注册页面 // 跳转注册页面
handleRegister(){ handleRegister() {
this.$router.push('/users/register'); this.$router.push('/users/register');
} }
} }
...@@ -87,7 +113,7 @@ export default { ...@@ -87,7 +113,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.login-container{ .login-container {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
...@@ -96,23 +122,27 @@ export default { ...@@ -96,23 +122,27 @@ export default {
background-image: url("../../assets/img/background.png"); background-image: url("../../assets/img/background.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
.login-center{
.login-center {
width: $pageWidth; width: $pageWidth;
height: 100%; height: 100%;
margin: 0 auto; margin: 0 auto;
@extend %flex-column-spb; @extend %flex-column-spb;
.login-header{
.login-header {
width: 100%; width: 100%;
margin-top: 20*$length; margin-top: 20*$length;
@extend %flex-row-spb; @extend %flex-row-spb;
@include fontStyle(14,20,500,#fff,left); @include fontStyle(14, 20, 500, #fff, left);
.header-register{
.header-register {
@extend %cursorPointer; @extend %cursorPointer;
} }
} }
.login-footer{
.login-footer {
margin-bottom: 30*$length; margin-bottom: 30*$length;
@include fontStyle(12,17,500,#fff,center); @include fontStyle(12, 17, 500, #fff, center);
cursor: default; cursor: default;
} }
} }
......
pages/users/register.vue
<template> <template>
<div class="register-wrap"> <transition>
<div class="register-container" v-if="!success"> <div class="register-wrap">
<login-card <div class="register-container" v-if="!success">
class="register-card-container" <login-card
title1="手机号注册" class="register-card-container"
title2="邮箱号注册" title1="手机号注册"
commitment="2" title2="邮箱号注册"
button="注册" commitment="2"
@login="handleRegister" button="注册"
></login-card> :errMessage="errMessage"
</div> @login="handleRegister"
<transition> ></login-card>
</div>
<div class="register-success" v-if="success"> <div class="register-success" v-if="success">
<yun-icon name="success" size="40px" color="#75D098"></yun-icon> <yun-icon name="success" size="40px" color="#75D098"></yun-icon>
<p style="color: #75D098;">注册成功</p> <p style="color: #75D098;">注册成功</p>
<p>请查看邮箱收件箱验证账号</p> <p>请查看邮箱收件箱验证账号</p>
<button>前往验证</button> <button>前往验证</button>
</div> </div>
</transition> </div>
</div> </transition>
</template> </template>
<script> <script>
import LoginCard from '../../components/pc/loginCard'; import LoginCard from '../../components/pc/loginCard';
import config from "../../action/config";
export default { export default {
name: "register", name: "register",
...@@ -31,17 +33,50 @@ export default { ...@@ -31,17 +33,50 @@ export default {
}, },
data(){ data(){
return{ return{
success: false success: false,
errMessage: ''
} }
}, },
methods:{ methods:{
handleRegister(way, account, password, phone, verification) { async handleRegister(way, account, password, phone, verification) {
this.errMessage = '';
console.log(way); console.log(way);
console.log(account); console.log(account);
console.log(password); console.log(password);
console.log(phone); console.log(phone);
console.log(verification); console.log(verification);
this.success = true let registerResponse;
if (verification !== '' && password !== '' && account !== '') {
let reg = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{8,16}$/;
if (!reg.test(password) || password.length < 8) {
this.errMessage = '密码格式错误';
return false
}
registerResponse = await this.$axios.$post(config.api.post.User.register, {
mobile: account,
password: password,
verifyCode: verification
})
} else if (account !== '' && password !== '') {
// 邮箱注册
}
console.log(registerResponse);
// 注册成功
if (registerResponse !== undefined && registerResponse.code === 0) {
this.success = true;
setTimeout(() => {
this.$router.push('/users/login');
}, 2500)
} else if(registerResponse !== undefined) {
this.errMessage = registerResponse.msg;
// 注册失败
this.$message({
type: 'error',
message: registerResponse.msg
})
}
} }
} }
} }
......
pages/users/reset.vue
...@@ -5,45 +5,90 @@ ...@@ -5,45 +5,90 @@
class="login-card-container" class="login-card-container"
button="重置账号" button="重置账号"
commitment="2" commitment="2"
:errMessage="errMessage"
@login="handleReset" @login="handleReset"
></login-card> ></login-card>
</div> </div>
</template> </template>
<script> <script>
import PageHeader from '../../components/pc/pageHeader'; import PageHeader from '../../components/pc/pageHeader';
import LoginCard from '../../components/pc/loginCard'; import LoginCard from '../../components/pc/loginCard';
import config from "../../action/config";
export default { export default {
name: "index", name: "index",
layout: 'blank', layout: 'blank',
components: { components: {
LoginCard, PageHeader LoginCard, PageHeader
}, },
methods:{ data() {
handleReset(way, account, password, phone, verification) { return {
errMessage: ''
}
},
methods: {
async handleReset(way, account, password, phone, verification) {
this.errMessage = '';
console.log(way); console.log(way);
console.log(account); console.log(account);
console.log(password); console.log(password);
console.log(phone); console.log(phone);
console.log(verification); console.log(verification);
let resetResponse;
if (account !== '' && password !== '' && verification !== '') {
let reg = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{8,16}$/;
if (!reg.test(password) || password.length < 8) {
this.errMessage = '密码格式错误';
return false
}
resetResponse = await this.$axios.$put(config.api.put.User.revisePassword, {
mobile: account,
password: password,
verifyCode: verification
});
}
console.log(resetResponse);
// 修改密码成功
if (resetResponse !== undefined && resetResponse.code === 0) {
this.$message({
type: 'success',
message: resetResponse.msg
});
setTimeout(() => {
this.$router.push('/users/login');
}, 2500)
} else if(resetResponse !== undefined) {
this.errMessage = resetResponse.msg;
// 修改密码失败
this.$message({
type: 'error',
message: resetResponse.msg
})
}
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.login-container{ .login-container {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background-image: $bgImage; background-image: $bgImage;
.login-card-container{
.login-card-container {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
} }
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment