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 404 additions and 114 deletions
components/pc/loginCard.vue
......@@ -5,41 +5,43 @@
<span style="color:#2F2F2F;">忘记密码</span>
</div>
<div class="login-card__header" v-if="title1 !== undefined && title2 !== undefined">
<span :class="{headerTitle: isPassword}" @click="handleLoginPassword">{{title1}}</span>
<span class="headerTitle" :style="{color: fontColor1}" @click="handleLoginPassword">{{title1}}</span>
<span> · </span>
<span :class="{headerTitle: !isPassword}" @click="handleLoginCode">{{title2}}</span>
<span class="headerTitle" :style="{color: fontColor2}" @click="handleLoginCode">{{title2}}</span>
</div>
<div class="login-card__main">
<input type="text" placeholder="请输入手机号或邮箱" maxlength="20" v-model="account" :class="{active: isError}" v-if="isPassword">
<input type="text" placeholder="请输入手机号" maxlength="20" v-model="account" :class="{active: isError}" v-if="!isPassword">
<p class="error-prompt" v-if="isError">{{errorMessage}}</p>
<p style="height: 21px" v-if="!isError"></p>
<input type="text" :placeholder="placeholder" maxlength="20" v-model="account" :class="{active: isError}">
<transition>
<p class="error-prompt">{{errorMessage}}</p>
</transition>
<div class="input-box__wrap" v-if="isPassword">
<div class="input-box">
<input type="password" placeholder="请输入密码" maxlength="18" v-model="password" v-if="!isShow" :class="{active: isPasswordError}">
<input type="text" placeholder="请输入密码" maxlength="18" v-model="password" v-if="isShow" :class="{active: isPasswordError}">
<div class="input-box" :class="{active: passwordError !== ''}">
<input type="password" placeholder="请输入密码" maxlength="16" v-model="password" v-if="!isShow">
<input type="text" placeholder="请输入密码" maxlength="16" v-model="password" v-if="isShow">
<div class="icon-box" @click="handleShow">
<yun-icon name="visible" size="13px" v-if="isShow" ></yun-icon>
<yun-icon name="visible" size="13px" v-if="isShow"></yun-icon>
<yun-icon name="invisible" size="13px" v-if="!isShow"></yun-icon>
</div>
</div>
<p style="height: 21px" v-if="!isPasswordError"></p>
<p class="error-prompt" v-if="isPasswordError">您输入的密码有误</p>
<transition>
<p class="error-prompt">{{passwordError}}</p>
</transition>
</div>
<div class="input-box__wrap" v-if="!isPassword">
<div class="input-box" v-if="!isPassword">
<div class="input-box__wrap" v-if="!isPassword || isRegister">
<div class="input-box" :class="{active: validEntityCode !== ''}">
<input type="password" placeholder="请输入验证码" v-model="verification ">
<span class="input-box__right" v-if="!isCountdown" @click="handleCountdown">发送验证码</span>
<span class="input-box__right" v-if="isCountdown">{{countdown}}秒后重试</span>
</div>
<p style="height: 21px" v-if="!isValidEntityCode"></p>
<p class="error-prompt" v-if="isValidEntityCode">您输入的验证码有误</p>
<transition>
<p class="error-prompt">{{validEntityCode}}</p>
</transition>
</div>
<button @click="handelLogin">{{button}}</button>
<div class="main-footer">
<div class="input-box">
<input id="automatic" type="checkbox">
<label for="automatic"></label >
<label for="automatic"></label>
<p v-if="commitment === '1'">下次自动登录</p>
<p v-if="commitment === '2'">我已阅读并同意<span>用户协议</span>和<span>隐私政策</span></p>
</div>
......@@ -67,6 +69,7 @@
</template>
<script>
import config from "../../action/config";
export default {
name: "loginCard",
......@@ -74,41 +77,135 @@ export default {
title1: String,
title2: String,
button: String,
commitment: String // 承诺协议
commitment: String, // 承诺协议
errMessage: {
type: String,
default: ''
} // 错误信息
},
data(){
return{
data() {
return {
isRegister: false, // 是否用于注册
isPassword: true, // 用于判断短信 还是 密码登录 默认 密码登录
isShow: false, // 密码是否显示
isCountdown: false, // 倒计时是否显示
isError: false, // 判断手机号 或 邮箱 格式是否正确
isPasswordError: false, // 判断密码是否正确
isValidEntityCode: false, // 判断验证码是否正确
passwordError: '', // 密码错误提示信息
validEntityCode: '', // 验证码错误提示信息
account: '', // 储存手机号或邮箱
phone: '', // 储存手机号
password: '', // 储存密码
verification: '', // 储存验证码
countdown: 60, // 倒计时时长
errorMessage: '' // 错误提示信息
errorMessage: '', // 错误提示信息
fontColor1: '#2F2F2F',
fontColor2: '#999'
}
},
computed: {
placeholder: function () {
if (this.title1 === '密码登录' && this.isPassword) {
return '请输入手机号或邮箱'
} else if (this.title1 === '密码登录' && !this.isPassword) {
return '请输入手机号'
} else if (this.title1 === '手机号注册' && this.isRegister) {
return '请输入手机号'
} else if (this.button === '重置账号') {
return '请输入手机号'
} else {
return '请输入邮箱账号'
}
}
},
created() {
if (this.title1 === undefined && this.title2 === undefined) {
this.isPassword = false;
if (this.button === '登录') {
this.isPassword = true;
this.isRegister = false;
} else if (this.button === '注册') {
this.isPassword = true;
this.isRegister = true;
} else if (this.button === '重置账号') {
this.isPassword = true;
this.isRegister = true;
}
},
methods: {
// 检测手机格式是否正确
checkAccount() {
if (this.account === '') {
this.errorMessage = '手机号不能为空';
this.isError = true;
setTimeout(() => {
this.errorMessage = '';
this.isError = false;
}, 1500);
} else if (this.account.length < 11 || !(/^1[3456789]\d{9}$/.test(this.account))) {
this.errorMessage = '手机号格式错误';
this.isError = true;
setTimeout(() => {
this.errorMessage = '';
this.isError = false;
}, 1500);
}
// if (this.account.includes('@')) {
// let reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(this.account);
// this.isError = !reg;
// this.errorMessage = '请输入正确的邮箱';
// }
},
// 检测验证码
checkVerification() {
if (this.verification === '') {
this.validEntityCode = '验证码不能为空';
setTimeout(() => {
this.validEntityCode = '';
}, 1500)
}
},
// 检查密码
checkPassword() {
if (this.password === '') {
this.passwordError = '密码不能为空';
setTimeout(() => {
this.passwordError = '';
}, 1500)
}
},
// 控制密码显示
handleShow(){
handleShow() {
this.isShow = !this.isShow;
},
// 发送短信
async getSms() {
this.checkAccount();
if (this.isError) {
return false
}
let smsResponse = await this.$axios.$get(config.api.get.Sms.send, {
params: {
mobile: this.account
}
});
if (smsResponse.code === 0) {
this.$message({
type: 'success',
message: '短信发送成功！'
});
} else {
this.$message({
type: 'info',
message: '短信发送失败！'
});
}
return smsResponse
},
// 控制倒计时函数
handleCountdown(){
this.isCountdown = !this.isCountdown;
handleCountdown() {
this.getSms();
this.isCountdown = true;
this.countdown = 5;
let interval = setInterval(() =>{
this.countdown --;
let interval = setInterval(() => {
this.countdown--;
}, 1000);
setTimeout(() => {
clearInterval(interval);
......@@ -116,40 +213,53 @@ export default {
}, 5000);
},
// 选择登录方式
handleLoginPassword(){
handleLoginPassword() {
Object.assign(this.$data, this.$options.data());
this.fontColor1 = '#2F2F2F';
this.fontColor2 = '#999';
if (this.button === '登录') {
if (!this.isPassword) {
this.isPassword = true;
}
} else if (this.button === '注册') {
this.isRegister = true
}
},
handleLoginCode(){
handleLoginCode() {
Object.assign(this.$data, this.$options.data());
this.fontColor2 = '#2F2F2F';
this.fontColor1 = '#999';
if (this.button === '登录') {
if (this.isPassword) {
this.isPassword = false;
}
} else if (this.button === '注册') {
this.isRegister = false
}
},
// 登录
handelLogin(){
if (this.account.includes('@')) {
let reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(this.account);
this.isError = !reg;
this.errorMessage = '请输入正确的邮箱';
return;
}
this.$emit('login',this.isPassword, this.account, this.password ,this.phone, this.verification)
handelLogin() {
this.checkAccount();
this.checkPassword();
this.checkVerification();
this.$emit('login', this.isPassword, this.account, this.password, this.phone, this.verification)
},
// 跳转忘记密码
handleReset(){
handleReset() {
this.$router.push('/users/reset');
},
// 跳转登录
handleLogin(){
handleLogin() {
this.$router.push('/users/login');
},
// 跳转注册
handleRegister(){
handleRegister() {
this.$router.push('/users/register');
}
},
watch:{
watch: {
'account': function (value) {
// 检查手机号和邮箱
if (this.account.includes('@')) {
......@@ -157,9 +267,54 @@ export default {
// console.log('检查邮箱格式');
// let reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(value);
// this.isError = !reg;
} else {
this.isError = this.account.length >= 11 && !(/^1[34578]\d{9}$/.test(value));
} else if (this.account.length >= 11) {
this.isError = !(/^1[3456789]\d{9}$/.test(value));
if (this.isError) {
this.errorMessage = '请输入正确的手机号';
} else {
this.errorMessage = '';
}
} else {
this.isError = false;
this.errorMessage = '';
}
},
password: function (value) {
if (value.length >= 8) {
let reg = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{8,16}$/;
if (!reg.test(value)) {
this.passwordError = '密码格式错误'
} else {
this.passwordError = ''
}
} else {
this.passwordError = ''
}
},
errMessage: function (value) {
console.log( typeof value);
if (value === "不存在该用户") {
this.errorMessage = '不存在该用户';
this.isError = true;
setTimeout(() => {
this.errorMessage = '';
this.isError = false;
}, 2000);
} else if (value === "密码不匹配") {
this.passwordError = '账号与密码不匹配';
setTimeout(() => {
this.passwordError = '';
}, 2000);
} else if (value === "验证码错误") {
this.validEntityCode = '验证码错误';
setTimeout(() => {
this.validEntityCode = '';
}, 2000);
} else if (value === "密码格式错误") {
this.passwordError = '密码格式错误';
setTimeout(() => {
this.passwordError = '';
}, 2000);
}
}
}
......@@ -167,28 +322,36 @@ export default {
</script>
<style lang="scss" scoped>
.login-card__wrap{
.active {
@extend %animate-transition;
border: 1*$length solid #FF7474 !important;
}
.login-card__wrap {
width: 514*$length;
height: 500*$length;
padding-bottom: 57*$length;
text-align: center;
background-color: #fff;
@include border-radius(10*$length);
.login-card{
.login-card {
width: 334*$length;
margin: 0 auto;
.login-card__header{
.login-card__header {
display: inline-block;
margin-top: 45*$length;
margin-bottom: 43*$length;
@include fontStyle(20,28,500,#999,center);
margin-top: 44*$length;
margin-bottom: 45*$length;
@include fontStyle(20, 27, 500, #999, center);
@extend %cursorPointer;
.headerTitle{
.headerTitle {
@extend %animate-transition;
color: #2F2F2F;
}
}
.login-card__main{
> input{
.login-card__main {
> input {
width: 100%;
height: 48*$length;
box-sizing: border-box;
......@@ -199,16 +362,17 @@ export default {
color: #999;
background-color: #F4F8FA;
}
.active{
border: 1*$length solid #FF7474;
}
.error-prompt{
.error-prompt {
padding-top: 4*$length;
@include fontStyle(12,17,500,#FF7474,left);
margin-bottom: 9*$length;
@extend %animate-transition;
@include fontStyle(12, 17, 500, #FF7474, left);
}
> .input-box__wrap{
> .input-box{
margin: 9*$length auto 0;
> .input-box__wrap {
> .input-box {
margin: 0 auto;
width: 100%;
height: 48*$length;
line-height: 48*$length;
......@@ -217,7 +381,8 @@ export default {
border: 1*$length solid transparent;
@include border-radius(4*$length);
@extend %flex-row-spb;
> input{
> input {
width: 100%;
max-width: 228*$length;
padding-left: 16*$length;
......@@ -225,20 +390,22 @@ export default {
color: #999;
background-color: #F4F8FA;
}
.icon-box{
.icon-box {
margin-right: 16*$length;
}
> .input-box__right{
> .input-box__right {
margin-right: 16*$length;
@include fontStyle(14,20,500,#75D098,left);
@include fontStyle(14, 20, 500, #75D098, left);
@extend %cursorPointer;
}
}
}
> button{
> button {
width: 100%;
height: 56*$length;
margin-top: 9*$length;
font-size: 16*$length;
background-color: #CCEEFA;
color: #fff;
......@@ -246,22 +413,26 @@ export default {
cursor: pointer;
@include border-radius(4*$length);
@extend %animate-transition;
&:hover{
&:hover {
background-color: #00AAE6;
}
}
.main-footer{
.main-footer {
margin: 16*$length auto;
width: 100%;
@extend %flex-row-spb;
@include fontStyle(12,17,500,#999,left);
> div{
@include fontStyle(12, 17, 500, #999, left);
> div {
@extend %cursorPointer;
}
> .input-box{
> .input-box {
text-align: left;
/*label标签的大小、位置、背景颜色更改，在css选择时，“+”代表相邻元素，即当前元素的下一元素*/
#automatic +label{
#automatic + label {
display: block;
width: 12*$length;
height: 12*$length;
......@@ -272,7 +443,8 @@ export default {
border: 1*$length solid #999;
box-sizing: border-box;
}
#automatic:checked +label::before{
#automatic:checked + label::before {
display: block;
width: 12*$length;
height: 12*$length;
......@@ -284,35 +456,43 @@ export default {
color: #fff;
@include border-radius(2*$length);
}
#automatic:checked + label{
#automatic:checked + label {
border: none;
}
input[type=checkbox]{
input[type=checkbox] {
display: none;
}
@extend %flex-row-spb;
> p{
> p {
padding-left: 8*$length;
> span{
> span {
color: #666;
}
}
}
}
}
.login-card__footer{
.login-card__footer {
width: 100%;
margin: 0 auto;
padding-top: 26*$length;
@extend %flex-row-center;
.img-box{
.img-box {
width: 40*$length;
height: 40*$length;
line-height: 40*$length;
background-color: #F4F8FA;
@include border-radius(50%);
@extend %cursorPointer;
> embed{
> embed {
display: inline-block;
vertical-align: middle;
padding-bottom: 5*$length;
......@@ -321,5 +501,5 @@ export default {
}
}
}
}
}
</style>
pages/users/login.vue
......@@ -4,7 +4,7 @@
<div class="login-header">
<embed src="../../assets/svg/whiteLogo.svg" width="111" height="26"
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>
<login-card
......@@ -13,6 +13,7 @@
title2="短信登录"
commitment="1"
button="登录"
:errMessage="errMessage"
@login="handleLogin"
></login-card>
<div class="login-footer">Copyright © 2019 云里云外开源社区 All Rights Reserved · 京ICP备 1234567891号-11</div>
......@@ -25,26 +26,50 @@
const Cookie = process.client ? require('js-cookie') : null
import LoginCard from '../../components/pc/loginCard';
import config from "../../action/config";
export default {
name: "index",
layout: 'blank',
components: {
LoginCard
},
methods:{
data() {
return {
errMessage: ''
}
},
methods: {
async handleLogin(way, account, password, phone, verification) {
this.errMessage = '';
console.log(way);
console.log(account);
console.log(password);
console.log(phone);
console.log(verification);
console.log(way && account !== '' && password !== '');
console.log(!way && account !== '' && verification !== '');
let authResponse;
const authResponse = await this.$axios.$post(config.api.post.Authentication.accountAuth, {
// 密码登录 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);
// 认证成功
if (authResponse.code === 0) {
if (authResponse !== undefined && authResponse.code === 0) {
// 获取token
const token = authResponse.data.accessToken
const store = this.$store
......@@ -64,22 +89,23 @@ export default {
this.$message({
type: 'success',
message: '登录成功！'
})
});
this.$router.push('/')
} else {
store.commit('auth/logout')
store.commit('userProfile/removeUser')
}
} else {
} else if (authResponse !== undefined) {
// 认证失败
this.errMessage = authResponse.msg
this.$message({
type: 'error',
message: authResponse.msg
})
});
}
},
// 跳转注册页面
handleRegister(){
handleRegister() {
this.$router.push('/users/register');
}
}
......@@ -87,7 +113,7 @@ export default {
</script>
<style lang="scss" scoped>
.login-container{
.login-container {
position: absolute;
top: 0;
bottom: 0;
......@@ -96,23 +122,27 @@ export default {
background-image: url("../../assets/img/background.png");
background-repeat: no-repeat;
background-size: cover;
.login-center{
.login-center {
width: $pageWidth;
height: 100%;
margin: 0 auto;
@extend %flex-column-spb;
.login-header{
.login-header {
width: 100%;
margin-top: 20*$length;
@extend %flex-row-spb;
@include fontStyle(14,20,500,#fff,left);
.header-register{
@include fontStyle(14, 20, 500, #fff, left);
.header-register {
@extend %cursorPointer;
}
}
.login-footer{
.login-footer {
margin-bottom: 30*$length;
@include fontStyle(12,17,500,#fff,center);
@include fontStyle(12, 17, 500, #fff, center);
cursor: default;
}
}
......
pages/users/register.vue
<template>
<transition>
<div class="register-wrap">
<div class="register-container" v-if="!success">
<login-card
......@@ -7,22 +8,23 @@
title2="邮箱号注册"
commitment="2"
button="注册"
:errMessage="errMessage"
@login="handleRegister"
></login-card>
</div>
<transition>
<div class="register-success" v-if="success">
<yun-icon name="success" size="40px" color="#75D098"></yun-icon>
<p style="color: #75D098;">注册成功</p>
<p>请查看邮箱收件箱验证账号</p>
<button>前往验证</button>
</div>
</transition>
</div>
</transition>
</template>
<script>
import LoginCard from '../../components/pc/loginCard';
import config from "../../action/config";
export default {
name: "register",
......@@ -31,17 +33,50 @@ export default {
},
data(){
return{
success: false
success: false,
errMessage: ''
}
},
methods:{
handleRegister(way, account, password, phone, verification) {
async handleRegister(way, account, password, phone, verification) {
this.errMessage = '';
console.log(way);
console.log(account);
console.log(password);
console.log(phone);
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,6 +5,7 @@
class="login-card-container"
button="重置账号"
commitment="2"
:errMessage="errMessage"
@login="handleReset"
></login-card>
</div>
......@@ -13,37 +14,81 @@
<script>
import PageHeader from '../../components/pc/pageHeader';
import LoginCard from '../../components/pc/loginCard';
import config from "../../action/config";
export default {
name: "index",
layout: 'blank',
components: {
LoginCard, PageHeader
},
methods:{
handleReset(way, account, password, phone, verification) {
data() {
return {
errMessage: ''
}
},
methods: {
async handleReset(way, account, password, phone, verification) {
this.errMessage = '';
console.log(way);
console.log(account);
console.log(password);
console.log(phone);
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>
<style lang="scss" scoped>
.login-container{
.login-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: $bgImage;
.login-card-container{
.login-card-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
}
}
</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