Commit b588fe03 by yanju

Merge branch 'yoona' into 'master'

Yoona

See merge request pigbigbig/beyond-clouds-front!31
parents d75e9917 e952307d
<template>
<div class="login-card__wrap">
<div class="login-card">
<div class="login-card__header" v-if="!(title1 !== undefined && title2 !== undefined)">
<span style="color:#2F2F2F;">忘记密码</span>
</div>
<div class="login-card__header" v-if="title1 !== undefined && title2 !== undefined">
<span class="headerTitle" :style="{color: fontColor1}" @click="handleLoginPassword">{{title1}}</span>
<span> · </span>
<span class="headerTitle" :style="{color: fontColor2}" @click="handleLoginCode">{{title2}}</span>
</div>
<div class="login-card__main">
<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" :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="invisible" size="13px" v-if="!isShow"></yun-icon>
</div>
</div>
<transition>
<p class="error-prompt">{{passwordError}}</p>
</transition>
</div>
<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>
<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>
<p v-if="commitment === '1'">下次自动登录</p>
<p v-if="commitment === '2'">我已阅读并同意<span>用户协议</span><span>隐私政策</span></p>
</div>
<div>
<span @click="handleReset">忘记密码</span>
<span> · </span>
<span v-if="button !== '注册'" @click="handleRegister">注册</span>
<span v-if="button === '注册'" @click="handleLogin">登录</span>
</div>
</div>
</div>
<div class="login-card__footer">
<div class="img-box">
<embed src="../../assets/svg/qq.svg" type="image/svg+xml"/>
</div>
<div class="img-box" style="margin: 0 24px;">
<embed src="../../assets/svg/wechat.svg" type="image/svg+xml"/>
</div>
<div class="img-box">
<embed src="../../assets/svg/dingding.svg" type="image/svg+xml"/>
</div>
</div>
</div>
</div>
</template>
<script>
import config from "../../action/config";
export default {
name: "loginCard",
props: {
title1: String,
title2: String,
button: String,
commitment: String, // 承诺协议
errMessage: {
type: String,
default: ''
} // 错误信息
},
data() {
return {
isRegister: false, // 是否用于注册
isPassword: true, // 用于判断短信 还是 密码登录 默认 密码登录
isShow: false, // 密码是否显示
isCountdown: false, // 倒计时是否显示
isError: false, // 判断手机号 或 邮箱 格式是否正确
passwordError: '', // 密码错误提示信息
validEntityCode: '', // 验证码错误提示信息
account: '', // 储存手机号或邮箱
phone: '', // 储存手机号
password: '', // 储存密码
verification: '', // 储存验证码
countdown: 60, // 倒计时时长
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.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() {
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.getSms();
this.isCountdown = true;
this.countdown = 5;
let interval = setInterval(() => {
this.countdown--;
}, 1000);
setTimeout(() => {
clearInterval(interval);
this.isCountdown = false;
}, 5000);
},
// 选择登录方式
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() {
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() {
this.checkAccount();
this.checkPassword();
this.checkVerification();
this.$emit('login', this.isPassword, this.account, this.password, this.phone, this.verification)
},
// 跳转忘记密码
handleReset() {
this.$router.push('/users/reset');
},
// 跳转登录
handleLogin() {
this.$router.push('/users/login');
},
// 跳转注册
handleRegister() {
this.$router.push('/users/register');
}
},
watch: {
'account': function (value) {
// 检查手机号和邮箱
if (this.account.includes('@')) {
// 检查邮箱格式
// 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 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);
}
}
}
}
</script>
<style lang="scss" scoped>
.active {
@extend %animate-transition;
border: 1*$length solid #FF7474 !important;
}
.login-card__wrap {
width: 514*$length;
padding-bottom: 57*$length;
text-align: center;
background-color: #fff;
@include border-radius(10*$length);
.login-card {
width: 334*$length;
margin: 0 auto;
.login-card__header {
display: inline-block;
margin-top: 44*$length;
margin-bottom: 45*$length;
@include fontStyle(20, 27, 500, #999, center);
@extend %cursorPointer;
.headerTitle {
@extend %animate-transition;
}
}
.login-card__main {
> input {
width: 100%;
height: 48*$length;
box-sizing: border-box;
border: 1*$length solid transparent;
@include border-radius(4*$length);
padding-left: 16*$length;
font-size: 14*$length;
color: #999;
background-color: #F4F8FA;
}
.error-prompt {
padding-top: 4*$length;
margin-bottom: 9*$length;
@extend %animate-transition;
@include fontStyle(12, 17, 500, #FF7474, left);
}
> .input-box__wrap {
> .input-box {
margin: 0 auto;
width: 100%;
height: 48*$length;
line-height: 48*$length;
background-color: #F4F8FA;
box-sizing: border-box;
border: 1*$length solid transparent;
@include border-radius(4*$length);
@extend %flex-row-spb;
> input {
width: 100%;
max-width: 228*$length;
padding-left: 16*$length;
font-size: 14*$length;
color: #999;
background-color: #F4F8FA;
}
.icon-box {
margin-right: 16*$length;
}
> .input-box__right {
margin-right: 16*$length;
@include fontStyle(14, 20, 500, #75D098, left);
@extend %cursorPointer;
}
}
}
> button {
width: 100%;
height: 56*$length;
font-size: 16*$length;
background-color: #CCEEFA;
color: #fff;
border: none;
cursor: pointer;
@include border-radius(4*$length);
@extend %animate-transition;
&:hover {
background-color: #00AAE6;
}
}
.main-footer {
margin: 16*$length auto;
width: 100%;
@extend %flex-row-spb;
@include fontStyle(12, 17, 500, #999, left);
> div {
@extend %cursorPointer;
}
> .input-box {
text-align: left;
/*label标签的大小、位置、背景颜色更改,在css选择时,“+”代表相邻元素,即当前元素的下一元素*/
#automatic + label {
display: block;
width: 12*$length;
height: 12*$length;
margin-top: 1*$length;
cursor: pointer;
background-color: #fff;
@include border-radius(2*$length);
border: 1*$length solid #999;
box-sizing: border-box;
}
#automatic:checked + label::before {
display: block;
width: 12*$length;
height: 12*$length;
line-height: 12*$length;
content: "\2713";
text-align: center;
font-size: 12*$length;
background-color: #75D098;
color: #fff;
@include border-radius(2*$length);
}
#automatic:checked + label {
border: none;
}
input[type=checkbox] {
display: none;
}
@extend %flex-row-spb;
> p {
padding-left: 8*$length;
> span {
color: #666;
}
}
}
}
}
.login-card__footer {
width: 100%;
margin: 0 auto;
padding-top: 26*$length;
@extend %flex-row-center;
.img-box {
width: 40*$length;
height: 40*$length;
line-height: 40*$length;
background-color: #F4F8FA;
@include border-radius(50%);
@extend %cursorPointer;
> embed {
display: inline-block;
vertical-align: middle;
padding-bottom: 5*$length;
@extend %cursorPointer;
}
}
}
}
}
</style>
<template>
<div class="main-footer__container">
<button @click="handel">{{button}}</button>
<div class="main-footer">
<div class="input-box">
<input id="automatic" type="checkbox">
<label for="automatic"></label>
<p v-if="button === '登录'">下次自动登录</p>
<p v-if="button !== '登录'">我已阅读并同意<span>用户协议</span><span>隐私政策</span></p>
</div>
<div>
<span @click="handleReset">忘记密码</span>
<span> · </span>
<span v-if="button === '注册'" @click="handleLogin">登录</span>
<span v-if="button !== '注册'" @click="handleRegister">注册</span>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
button: String
},
methods: {
// 按钮点击
handel() {
this.$emit('handle');
},
// 跳转忘记密码
handleReset() {
this.$router.push('/users/reset');
},
// 跳转登录
handleLogin() {
this.$router.push('/users/login');
},
// 跳转注册
handleRegister() {
this.$router.push('/users/register');
}
}
}
</script>
<style lang="scss" scoped>
.main-footer__container{
> button {
width: 100%;
background-color: #CCEEFA;
border: none;
cursor: pointer;
@include border-radius(4*$length);
@extend %animate-transition;
@include fontStyle(16,56,500,#fff,center);
&:hover {
background-color: #00AAE6;
}
}
.main-footer {
width: 100%;
margin: 16*$length auto;
@extend %flex-row-spb;
@extend %cursorPointer;
@include fontStyle(12, 17, 500, #999, left);
.input-box {
text-align: left;
/*label标签的大小、位置、背景颜色更改,在css选择时,“+”代表相邻元素,即当前元素的下一元素*/
#automatic + label {
display: block;
width: 12*$length;
height: 12*$length;
margin-top: 1*$length;
cursor: pointer;
background-color: #fff;
@include border-radius(2*$length);
border: 1*$length solid #999;
box-sizing: border-box;
}
#automatic:checked + label::before {
display: block;
width: 12*$length;
height: 12*$length;
line-height: 12*$length;
content: "\2713";
text-align: center;
font-size: 12*$length;
background-color: #75D098;
color: #fff;
@include border-radius(2*$length);
}
#automatic:checked + label {
border: none;
}
input[type=checkbox] {
display: none;
}
@extend %flex-row-spb;
> p {
padding-left: 8*$length;
> span {
color: #666;
}
}
}
}
}
</style>
<template>
<div class="login-input__container">
<label>
<input
:class="{active: errMessage !== ''}"
:type="type"
:placeholder="placeholder"
:maxlength="maxlength"
:value="value"
@input="onInput"
@focus="cancelCheck"
@blur="handleCheck"
>
</label>
<div class="icon-box" @click="handleShow" v-if="inputType === '2'">
<yun-icon :name="iconName" size="13px" color="#666"></yun-icon>
</div>
<div class="code-box" v-if="inputType === '3'">
<span class="input-box__right" v-if="!isCount" @click="handleCountdown">发送验证码</span>
<span class="input-box__right" v-if="isCount">{{countdown}} 秒后重试</span>
</div>
<p class="error-prompt">{{errMessage}}</p>
</div>
</template>
<script>
export default {
props: {
inputType: {
type: String,
default: '1'
},
type: {
type: String,
default: 'text'
},
isCount: {
type: Boolean,
default: false
},
placeholder: String,
errorMessage: String,
value: String
},
data() {
return {
iconName: 'invisible',
countdown: 60,
errMsg: '' // 错误信息
}
},
computed: {
maxlength: function () {
if (this.inputType === '3') {
return 6
} else if (this.inputType === '2') {
return 16
} else {
return 20
}
},
errMessage: function () {
if (this.errorMessage !== '') {
return this.errorMessage
} else {
return this.errMsg
}
}
},
methods: {
onInput(e) {
let value = e.target.value;
this.$emit('input', value);
},
// 光标移开触发事件
handleCheck() {
this.$emit('handleCheck');
},
// 光标focus触发事件
cancelCheck() {
this.$emit('cancelCheck');
},
// 控制密码 显隐
handleShow() {
this.iconName = this.iconName === 'visible' ? 'invisible' : 'visible';
this.type = this.type === 'password' ? 'text' : 'password';
},
// 短信倒计时
handleCountdown() {
this.$emit('sendSms'); // 发送短信
}
},
watch: {
isCount: function (val) {
if (val) {
this.countdown = 60;
let interval = setInterval(() => {
this.countdown--;
}, 1000);
setTimeout(() => {
clearInterval(interval);
}, 60000);
}
}
}
}
</script>
<style lang="scss" scoped>
.active {
@extend %animate-transition;
border: 1*$length solid #FF7474 !important;
}
.login-input__container{
position: relative;
input {
width: 100%;
height: 48*$length;
box-sizing: border-box;
border: 1*$length solid transparent;
@include border-radius(4*$length);
padding-left: 16*$length;
font-size: 14*$length;
color: #999;
background-color: #F4F8FA;
}
.icon-box{
position: absolute;
right: 16*$length;
top: 14*$length;
@extend %cursorPointer;
}
.code-box{
position: absolute;
right: 16*$length;
top: 14*$length;
@extend %cursorPointer;
@include fontStyle(14, 20, 500, #75D098, left);
}
.error-prompt{
padding-top: 4*$length;
padding-left: 4*$length;
margin-bottom: 10*$length;
@extend %animate-transition;
@include fontStyle(12, 16, 500, #FF7474, left);
}
}
</style>
<template>
<div class="login-card__wrap">
<div class="login-card-container">
<div class="login-card__header">
<span class="header-title" :style="{color: fontColor1}" @click="handleFist">{{title1}}</span>
<span v-if="title2"> · </span>
<span class="header-title" :style="{color: fontColor2}" @click="handleSecond">{{title2}}</span>
</div>
<div class="login-card__main">
<slot name="mainContent"></slot>
<slot name="mainFooter"></slot>
</div>
<div class="login-card__footer">
<div class="img-box">
<embed src="../../../assets/svg/qq.svg" type="image/svg+xml"/>
</div>
<div class="img-box" style="margin: 0 24px;">
<embed src="../../../assets/svg/wechat.svg" type="image/svg+xml"/>
</div>
<div class="img-box">
<embed src="../../../assets/svg/dingding.svg" type="image/svg+xml"/>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
title1: String,
title2: String
},
data() {
return {
fontColor1: '#2F2F2F',
fontColor2: '#999'
}
},
methods: {
handleFist() {
this.fontColor1 = '#2F2F2F';
this.fontColor2 = '#999';
this.$emit('firstWay')
},
handleSecond() {
this.fontColor2 = '#2F2F2F';
this.fontColor1 = '#999';
this.$emit('secondWay')
}
}
}
</script>
<style lang="scss" scoped>
.login-card__wrap {
width: 514*$length;
text-align: center;
padding-bottom: 57*$length;
background-color: #fff;
@include border-radius(10*$length);
.login-card-container {
width: 334*$length;
margin: 0 auto;
.login-card__header {
display: inline-block;
margin-top: 44*$length;
margin-bottom: 45*$length;
@include fontStyle(20, 27, 500, #999, center);
@extend %cursorPointer;
.header-title {
@extend %animate-transition;
&:hover {
color: #2F2F2F;
}
}
}
.login-card__main {
}
.login-card__footer {
width: 100%;
margin: 0 auto;
padding-top: 26*$length;
@extend %flex-row-center;
.img-box {
width: 40*$length;
height: 40*$length;
line-height: 40*$length;
background-color: #F4F8FA;
@include border-radius(50%);
@extend %cursorPointer;
> embed {
display: inline-block;
vertical-align: middle;
padding-bottom: 5*$length;
@extend %cursorPointer;
}
}
}
}
}
</style>
......@@ -168,7 +168,7 @@ export default {
this.$emit('handleTag', this.result);
},
handleChange2(e){
this.value = e;
this.value.tag = e;
this.isShow =false;
this.isShow2 = false;
this.$emit('handleClass', this.value);
......
<template>
<div class="login-container">
<div class="login-center">
<div class="login-header">
<embed src="../../assets/svg/whiteLogo.svg" width="111" height="26"
<div class="login-center__header">
<embed src="../../assets/svg/whiteLogo.svg"
width="111" height="26"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/"/>
<div class="header-register" @click="handleRegister">注册</div>
</div>
<login-card
class="login-card-container"
<login-wrap
title1="密码登录"
title2="短信登录"
commitment="1"
button="登录"
:errMessage="errMessage"
@login="handleLogin"
></login-card>
<div class="login-footer">Copyright © 2019 云里云外开源社区 All Rights Reserved · 京ICP备 1234567891号-11</div>
</div>
@firstWay="handleLoginPassword"
@secondWay="handleLoginCode"
>
<template #mainContent>
<login-input
:error-message="accountErrMsg"
:placeholder="placeholder"
v-model="account"
@handleCheck="handleCheckAccount"
@cancelCheck="cancelCheckAccount"
></login-input>
<login-input
:error-message="passwordErrMsg"
placeholder="请输入密码"
input-type="2"
type="password"
v-model="password"
v-if="isPassword"
@handleCheck="handleCheckPassword"
@cancelCheck="cancelCheckPassword"
></login-input>
<login-input
:error-message="verifyErrMsg"
:isCount="isCount"
placeholder="请输入验证码"
input-type="3"
v-model="verifyCode"
v-if="!isPassword"
@sendSms="checkVerification"
@cancelCheck="cancelCheckVerify"
></login-input>
</template>
<template #mainFooter>
<login-button @handle="handleLogin" button="登录"></login-button>
</template>
</login-wrap>
<div class="login-footer">
Copyright © 2019 云里云外开源社区 All Rights Reserved · 京ICP备 1234567891号-11
</div>
</div>
</div>
</template>
<script>
const Cookie = process.client ? require('js-cookie') : null
import LoginCard from '../../components/pc/loginCard';
import config from "../../action/config";
import loginWrap from '../../components/pc/loginCard/loginWrap'
import LoginInput from "../../components/pc/loginCard/loginInput";
import LoginButton from "../../components/pc/loginCard/loginButton";
import config from '../../action/config';
const Cookie = process.client ? require('js-cookie') : null;
export default {
name: "index",
layout: 'blank',
components: {
LoginCard
LoginButton,
LoginInput,
loginWrap
},
// created() {
// this.$router.replace('/users/login');
// }
data() {
return {
errMessage: ''
account: '', // 保存 手机号 邮箱
password: '', // 保存 密码
verifyCode: '', // 保存 验证码
isPassword: true, // 判断验证码
placeholder: '请输入手机号或邮箱',
accountErrMsg: '', // 手机号 邮箱 错误提示
passwordErrMsg: '', // 密码错误 提示信息
verifyErrMsg: '', // 验证码错误 提示信息
isCount: false // 是否开始倒计时
}
},
methods: {
async handleLogin(way, account, password, phone, verification) {
this.errMessage = '';
console.log(way);
console.log(account);
console.log(password);
console.log(way && account !== '' && password !== '');
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 = '密码格式错误';
// 显示为密码登录
handleLoginPassword() {
Object.assign(this.$data, this.$options.data());
this.isPassword = true;
this.placeholder = '请输入手机号或邮箱';
},
// 显示为 验证码登录
handleLoginCode() {
Object.assign(this.$data, this.$options.data());
this.isPassword = false;
this.placeholder = '请输入手机号';
},
// 跳转注册页面
handleRegister() {
this.$router.push('/users/register');
},
// 检测手机号
checkPhone() {
if (this.account === '') {
this.accountErrMsg = '手机号不能为空';
return false
} else if (this.account.length < 11 || !(/^1[3456789]\d{9}$/.test(this.account))) {
this.accountErrMsg = '手机号格式错误';
return false
}
return true
},
// 检测 邮箱
checkEmail() {
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.accountErrMsg = '请输入正确的邮箱';
},
// 检测account 手机 邮箱
checkAccount() {
if (this.account.includes('@')) {
this.checkEmail();
} else {
this.checkPhone();
}
},
// 检测 密码
checkPassword() {
if (this.password === '') {
this.passwordErrMsg = '密码不能为空';
} else {
let reg = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{8,16}$/;
if (!reg.test(this.password)) {
this.passwordErrMsg = '您输入的密码有误';
}
}
},
// 检测验证码
checkVerification() {
this.isCount = false;
let result = this.checkPhone();
if (result) {
this.getSms();
this.isCount = true;
setTimeout(() => {
this.isCount = false;
}, 60000);
}
},
// 获取焦点后 清空提示信息
handleCheckAccount() {
this.checkAccount();
},
cancelCheckAccount() {
this.accountErrMsg = '';
},
handleCheckPassword() {
this.checkPassword();
},
cancelCheckPassword() {
this.passwordErrMsg = '';
},
cancelCheckVerify() {
this.verifyErrMsg = '';
},
// 发送短信
async getSms() {
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.verifyErrMsg = smsResponse.msg;
setTimeout(() => {
this.verifyErrMsg = '';
}, 1500);
this.$message({
type: 'info',
message: smsResponse.msg
});
}
},
// 进行登录
async handleLogin() {
// 防止全部未输入就点击
this.checkAccount();
this.checkPassword();
let authResponse;
// 两种登录方式
if (this.isPassword && this.passwordErrMsg === '' && this.accountErrMsg === '') {
authResponse = await this.$axios.$post(config.api.post.Authentication.accountAuth, {
account: account,
password: password
account: this.account,
password: this.password
});
} else if (!way && account !== '' && verification !== '') {
} else if (!this.isPassword && this.verifyErrMsg === '' && this.accountErrMsg === '') {
authResponse = await this.$axios.$post(config.api.post.Authentication.smsAuth, {
account: account,
verifyCode: verification
mobile: this.account,
verifyCode: this.verifyCode
});
}
// console.log(authResponse);
// 认证成功
if (authResponse !== undefined && authResponse.code === 0) {
// 获取token
const token = authResponse.data.accessToken
const store = this.$store
const token = authResponse.data.accessToken;
const store = this.$store;
// 设置认证信息
store.commit('auth/login', token)
store.commit('auth/login', token);
// 获取用户信息
const userInfoResponse = await this.$axios.$get(config.api.get.User.myInfo)
const userInfoResponse = await this.$axios.$get(config.api.get.User.myInfo);
if (userInfoResponse.code === 0) {
// 存储用户信息
store.commit('userProfile/setUser', userInfoResponse.data)
store.commit('userProfile/setUser', userInfoResponse.data);
// 若登录和获取用户信息都成功,则存储认证信息到cookie
Cookie.set(config.default_data.KEY_COOKIE_TOKEN, token)
Cookie.set(config.default_data.KEY_COOKIE_TOKEN, token);
// 跳转到主页
this.$message({
......@@ -92,23 +234,28 @@ export default {
});
this.$router.push('/')
} else {
store.commit('auth/logout')
store.commit('auth/logout');
store.commit('userProfile/removeUser')
}
} else if (authResponse !== undefined) {
// 认证失败
this.errMessage = authResponse.msg
console.log(authResponse);
if (authResponse.code === 1002) {
this.passwordErrMsg = authResponse.msg;
} else if (authResponse.code === 1001) {
this.accountErrMsg = authResponse.msg;
}else if (authResponse.code === 1003) {
this.verifyErrMsg = authResponse.msg;
} else {
this.$message({
type: 'error',
message: authResponse.msg
});
}
},
// 跳转注册页面
handleRegister() {
this.$router.push('/users/register');
}
}
}
}
</script>
......@@ -129,7 +276,7 @@ export default {
margin: 0 auto;
@extend %flex-column-spb;
.login-header {
.login-center__header {
width: 100%;
margin-top: 20*$length;
@extend %flex-row-spb;
......
......@@ -2,15 +2,44 @@
<transition>
<div class="register-wrap">
<div class="register-container" v-if="!success">
<login-card
class="register-card-container"
<login-wrap
title1="手机号注册"
title2="邮箱号注册"
commitment="2"
button="注册"
:errMessage="errMessage"
@login="handleRegister"
></login-card>
@firstWay="handlePhoneRegister"
@secondWay="handleEmailRegister"
>
<template #mainContent>
<login-input
:error-message="accountErrMsg"
:placeholder="placeholder"
v-model="account"
@handleCheck="handleCheckAccount"
@cancelCheck="cancelCheckAccount"
></login-input>
<login-input
:error-message="passwordErrMsg"
placeholder="请输入密码"
input-type="2"
type="password"
v-model="password"
@handleCheck="handleCheckPassword"
@cancelCheck="cancelCheckPassword"
></login-input>
<login-input
:error-message="verifyErrMsg"
:isCount="isCount"
placeholder="请输入验证码"
input-type="3"
v-model="verifyCode"
v-if="isVerifyCode"
@sendSms="checkVerification"
@cancelCheck="cancelCheckVerify"
></login-input>
</template>
<template #mainFooter>
<login-button @handle="handleRegister" button="注册"></login-button>
</template>
</login-wrap>
</div>
<div class="register-success" v-if="success">
<yun-icon name="success" size="40px" color="#75D098"></yun-icon>
......@@ -23,42 +52,160 @@
</template>
<script>
import LoginCard from '../../components/pc/loginCard';
import loginWrap from '../../components/pc/loginCard/loginWrap'
import LoginInput from "../../components/pc/loginCard/loginInput";
import LoginButton from "../../components/pc/loginCard/loginButton";
import config from "../../action/config";
export default {
name: "register",
components: {
LoginCard
LoginButton,
LoginInput,
loginWrap
},
data(){
return{
return {
success: false,
errMessage: ''
account: '', // 保存 手机号 邮箱
password: '', // 保存 密码
verifyCode: '', // 保存 验证码
isVerifyCode: true, // 判断验证码
placeholder: '请输入手机号或邮箱',
accountErrMsg: '', // 手机号 邮箱 错误提示
passwordErrMsg: '', // 密码错误 提示信息
verifyErrMsg: '', // 验证码错误 提示信息
isCount: false // 是否开始倒计时
}
},
watch: {
account: function (val) {
if (val.length > 8) {
this.checkAccount();
}
},
password: function (val) {
if (val.length > 7) {
this.checkPassword();
}
}
},
methods:{
async handleRegister(way, account, password, phone, verification) {
this.errMessage = '';
console.log(way);
console.log(account);
console.log(password);
console.log(phone);
console.log(verification);
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 = '密码格式错误';
// 显示为 手机注册
handlePhoneRegister() {
Object.assign(this.$data, this.$options.data());
this.isVerifyCode = true;
this.placeholder = '请输入手机号';
},
// 显示为 邮箱注册
handleEmailRegister() {
Object.assign(this.$data, this.$options.data());
this.isVerifyCode = false;
this.placeholder = '请输入邮箱账号';
},
// 检测手机号
checkPhone() {
if (this.account === '') {
this.accountErrMsg = '手机号不能为空';
return false
} else if (this.account.length < 11 || !(/^1[3456789]\d{9}$/.test(this.account))) {
this.accountErrMsg = '手机号格式错误';
return false
} else {
this.accountErrMsg = ''
}
return true
},
// 检测 邮箱
checkEmail() {
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.accountErrMsg = '请输入正确的邮箱';
},
// 检测account 手机 邮箱
checkAccount() {
if (this.account.includes('@')) {
this.checkEmail();
} else {
this.checkPhone();
}
},
// 检测 密码
checkPassword() {
if (this.password === '') {
this.passwordErrMsg = '密码不能为空';
} else {
let reg = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{8,16}$/;
if (!reg.test(this.password)) {
this.passwordErrMsg = '密码要求长度未8-16位,包含数字和字母';
} else {
this.passwordErrMsg = ''
}
}
},
// 检测验证码
checkVerification() {
this.isCount = false;
let result = this.checkPhone();
if (result) {
this.getSms();
this.isCount = true;
setTimeout(() => {
this.isCount = false;
}, 60000);
}
},
// 获取焦点后 清空提示信息
handleCheckAccount() {
this.checkAccount();
},
cancelCheckAccount() {
this.accountErrMsg = '';
},
handleCheckPassword() {
this.checkPassword();
},
cancelCheckPassword() {
this.passwordErrMsg = '';
},
cancelCheckVerify() {
this.verifyErrMsg = '';
},
// 发送短信
async getSms() {
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.verifyErrMsg = smsResponse.msg;
setTimeout(() => {
this.verifyErrMsg = '';
}, 1500);
this.$message({
type: 'info',
message: smsResponse.msg
});
}
},
async handleRegister() {
this.checkAccount();
this.checkPassword();
let registerResponse;
if (this.isVerifyCode && this.passwordErrMsg === '' && this.accountErrMsg === '' && this.verifyErrMsg === '') {
registerResponse = await this.$axios.$post(config.api.post.User.register, {
mobile: account,
password: password,
verifyCode: verification
mobile: this.account,
password: this.password,
verifyCode: this.verifyCode
})
} else if (account !== '' && password !== '') {
} else if (!this.isVerifyCode && this.passwordErrMsg === '' && this.accountErrMsg === '') {
// 邮箱注册
}
console.log(registerResponse);
......@@ -72,10 +219,18 @@ export default {
} else if(registerResponse !== undefined) {
this.errMessage = registerResponse.msg;
// 注册失败
if (registerResponse.code === 1002) {
this.passwordErrMsg = registerResponse.msg;
} else if (registerResponse.code === 1001) {
this.accountErrMsg = registerResponse.msg;
}else if (registerResponse.code === 1003) {
this.verifyErrMsg = registerResponse.msg;
} else {
this.$message({
type: 'error',
message: registerResponse.msg
})
message: authResponse.msg
});
}
}
}
}
......@@ -85,10 +240,9 @@ export default {
<style lang="scss" scoped>
.register-wrap{
.register-container{
margin: 136*$length 0;
.register-card-container{
width: 514*$length;
margin: 0 auto;
}
padding: 136*$length 0;
}
.register-success{
width: 408*$length;
......
<template>
<div class="login-container">
<page-header></page-header>
<login-card
class="login-card-container"
button="重置账号"
commitment="2"
:errMessage="errMessage"
@login="handleReset"
></login-card>
<div class="login-card-container">
<login-wrap
title1="忘记密码"
>
<template #mainContent>
<login-input
:error-message="accountErrMsg"
:placeholder="placeholder"
v-model="account"
@handleCheck="handleCheckAccount"
@cancelCheck="cancelCheckAccount"
></login-input>
<login-input
:error-message="passwordErrMsg"
placeholder="请输入密码"
input-type="2"
type="password"
v-model="password"
@handleCheck="handleCheckPassword"
@cancelCheck="cancelCheckPassword"
></login-input>
<login-input
:error-message="verifyErrMsg"
:isCount="isCount"
placeholder="请输入验证码"
input-type="3"
v-model="verifyCode"
@sendSms="checkVerification"
@cancelCheck="cancelCheckVerify"
></login-input>
</template>
<template #mainFooter>
<login-button @handle="handleReset" button="重制账号"></login-button>
</template>
</login-wrap>
</div>
</div>
</template>
<script>
import PageHeader from '../../components/pc/pageHeader';
import LoginCard from '../../components/pc/loginCard';
import config from "../../action/config";
import pageHeader from '../../components/pc/pageHeader';
import loginWrap from '../../components/pc/loginCard/loginWrap'
import LoginInput from "../../components/pc/loginCard/loginInput";
import LoginButton from "../../components/pc/loginCard/loginButton";
import config from '../../action/config';
export default {
name: "index",
layout: 'blank',
components: {
LoginCard, PageHeader
LoginButton,
LoginInput,
loginWrap,
pageHeader
},
data() {
return {
errMessage: ''
account: '', // 保存 手机号 邮箱
password: '', // 保存 密码
verifyCode: '', // 保存 验证码
isPassword: true, // 判断验证码
placeholder: '请输入手机号或邮箱',
accountErrMsg: '', // 手机号 邮箱 错误提示
passwordErrMsg: '', // 密码错误 提示信息
verifyErrMsg: '', // 验证码错误 提示信息
isCount: false // 是否开始倒计时
}
},
watch: {
account: function (val) {
if (val.length > 8) {
this.checkPhone();
}
},
password: function (val) {
if (val.length > 7) {
this.checkPassword();
}
}
},
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);
// 检测手机号
checkPhone() {
if (this.account === '') {
this.accountErrMsg = '手机号不能为空';
return false
} else if (this.account.length < 11 || !(/^1[3456789]\d{9}$/.test(this.account))) {
this.accountErrMsg = '手机号格式错误';
return false
} else {
this.accountErrMsg = ''
}
return true
},
// 检测 密码
checkPassword() {
if (this.password === '') {
this.passwordErrMsg = '密码不能为空';
} else {
let reg = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{8,16}$/;
if (!reg.test(this.password)) {
this.passwordErrMsg = '密码要求长度未8-16位,包含数字和字母';
} else {
this.passwordErrMsg = ''
}
}
},
// 检测验证码
checkVerification() {
this.isCount = false;
let result = this.checkPhone();
if (result) {
this.getSms();
this.isCount = true;
setTimeout(() => {
this.isCount = false;
}, 60000);
}
},
// 获取焦点后 清空提示信息
handleCheckAccount() {
this.checkPhone();
},
cancelCheckAccount() {
this.accountErrMsg = '';
},
handleCheckPassword() {
this.checkPassword();
},
cancelCheckPassword() {
this.passwordErrMsg = '';
},
cancelCheckVerify() {
this.verifyErrMsg = '';
},
// 发送短信
async getSms() {
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.verifyErrMsg = smsResponse.msg;
setTimeout(() => {
this.verifyErrMsg = '';
}, 1500);
this.$message({
type: 'info',
message: smsResponse.msg
});
}
},
async handleReset() {
this.checkPhone();
this.checkPassword();
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
}
if (this.passwordErrMsg === '' && this.accountErrMsg === '' && this.verifyErrMsg === '') {
resetResponse = await this.$axios.$put(config.api.put.User.revisePassword, {
mobile: account,
password: password,
verifyCode: verification
mobile: this.account,
password: this.password,
verifyCode: this.verifyCode
});
}
console.log(resetResponse);
......@@ -63,12 +185,19 @@ export default {
this.$router.push('/users/login');
}, 2500)
} else if(resetResponse !== undefined) {
this.errMessage = resetResponse.msg;
// 修改密码失败
if (resetResponse.code === 1002) {
this.passwordErrMsg = resetResponse.msg;
} else if (resetResponse.code === 1001) {
this.accountErrMsg = resetResponse.msg;
}else if (resetResponse.code === 1003) {
this.verifyErrMsg = resetResponse.msg;
} else {
this.$message({
type: 'error',
message: resetResponse.msg
})
});
}
}
}
}
......
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