Skip to content

B
beyond-clouds-front
Commit f99c6417 by yanju
Options

Merge branch 'master' of coding.yundingshuyuan.com:pigbigbig/beyond-clouds-front

parents d56487e8 3018df17
Showing with 187 additions and 210 deletions
action/config.js
......@@ -107,7 +107,8 @@ export default {
User:{
shielding:'/api/my/blacklist/',//拉黑 +{userId}
follow:'/api/user/',//关注 +{userId}/follower
register:'/api/user/register/mobile'//用户注册
registerPhone:'/api/user/register/mobile',//用户注册
registerEmail:'/api/user/register/email'//邮箱注册
},
Authentication:{
......
components/pc/loginCard/loginButton.vue
......@@ -2,13 +2,13 @@
<div class="main-footer__container">
<button @click="handel">{{button}}</button>
<div class="main-footer">
<div class="input-box">
<input id="automatic" type="checkbox">
<div class="input-box" v-if="button !== '重置账号'">
<input id="automatic" type="checkbox" v-model="isSelect">
<label for="automatic"></label>
<p v-if="button === '登录'">下次自动登录</p>
<p v-if="button !== '登录'">我已阅读并同意<span>用户协议</span>和<span>隐私政策</span></p>
</div>
<div>
<div class="switch-box">
<span @click="handleReset">忘记密码</span>
<span> · </span>
<span v-if="button === '注册'" @click="handleLogin">登录</span>
......@@ -23,10 +23,15 @@ export default {
props: {
button: String
},
data() {
return {
isSelect: ''
}
},
methods: {
// 按钮点击
handel() {
this.$emit('handle');
this.$emit('handle', this.isSelect);
},
// 跳转忘记密码
handleReset() {
......@@ -48,30 +53,31 @@ export default {
.main-footer__container{
> button {
width: 100%;
background-color: #CCEEFA;
background-color: rgba(0, 170, 230, .8);
border: none;
cursor: pointer;
@include border-radius(4*$length);
@extend %animate-transition;
@include fontStyle(16,56,500,#fff,center);
&:hover {
background-color: #00AAE6;
background-color: rgba(0, 170, 230, 1);
}
}
.main-footer {
width: 100%;
margin: 16*$length auto;
@extend %flex-row-spb;
@extend %clearFix;
@extend %cursorPointer;
@include fontStyle(12, 17, 500, #999, left);
.input-box {
float: left;
text-align: left;
@extend %flex-row-spb;
/*label标签的大小、位置、背景颜色更改，在css选择时，“+”代表相邻元素，即当前元素的下一元素*/
#automatic + label {
display: block;
display: inline-block;
width: 12*$length;
height: 12*$length;
margin-top: 1*$length;
cursor: pointer;
background-color: #fff;
@include border-radius(2*$length);
......@@ -96,14 +102,17 @@ export default {
input[type=checkbox] {
display: none;
}
@extend %flex-row-spb;
> p {
display: inline-block;
padding-left: 8*$length;
> span {
color: #666;
}
}
}
.switch-box{
float: right;
}
}
}
</style>
components/pc/loginCard/loginInput.vue
......@@ -27,27 +27,26 @@
export default {
props: {
inputType: {
inputType: { // 控制 密码框 短信框
type: String,
default: '1'
},
type: {
type: { // 输入框 默认type
type: String,
default: 'text'
},
isCount: {
isCount: { // 开启倒计时
type: Boolean,
default: false
},
placeholder: String,
errorMessage: String,
errorMessage: String, // 错误信息
value: String
},
data() {
return {
iconName: 'invisible',
countdown: 60,
errMsg: '' // 错误信息
countdown: 60
}
},
computed: {
......@@ -60,11 +59,9 @@ export default {
return 20
}
},
errMessage: function () {
if (this.errorMessage !== '') {
errMessage: {
get: function () {
return this.errorMessage
} else {
return this.errMsg
}
}
},
......
pages/users/checkfrom.js 0 → 100644
// 检测手机号
function checkPhone(phone) {
// console.log(phone === '');
if (phone === '') {
return '手机号不能为空';
} else if (phone.length < 11 || !(/^1[3456789]\d{9}$/.test(phone))) {
return'手机号格式错误';
}
return ''
}
// 检测邮箱号
function checkEmail(email) {
let reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(email);
if (email === '') {
return '邮箱不能为空'
} else if (!reg) {
return '请输入正确的邮箱';
}
return ''
}
// 检测account 手机 邮箱
function checkAccount(account) {
if(/[a-zA-Z]+/.test(account)) {
return checkEmail(account)
} else {
return checkPhone(account);
}
}
// 检测密码
function checkPassword(password, isLogin=false) {
if (password === '') {
return '密码不能为空';
} else if (!isLogin) {
let reg = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{8,16}$/;
return !reg.test(password) ? '密码要求长度为8-16位，包含数字和字母' : '';
}
return ''
}
// 检测验证码
function checkVerification(verifyCode) {
if (verifyCode === '') {
return '验证码不能为空'
}
return ''
}
// function errorCode(res) {
// switch (res.code) {
// case 1001:
// return res.msg;
// case 1002:
// return res.msg;
// case 1003:
// return res.msg;
// }
// }
export {
checkPhone,
checkEmail,
checkAccount,
checkPassword,
checkVerification
}
pages/users/login.vue
......@@ -20,8 +20,8 @@
:error-message="accountErrMsg"
:placeholder="placeholder"
v-model="account"
@handleCheck="handleCheckAccount"
@cancelCheck="cancelCheckAccount"
@handleCheck="checkAccount"
@cancelCheck="accountErrMsg = ''"
></login-input>
<login-input
:error-message="passwordErrMsg"
......@@ -30,8 +30,8 @@
type="password"
v-model="password"
v-if="isPassword"
@handleCheck="handleCheckPassword"
@cancelCheck="cancelCheckPassword"
@handleCheck="checkPassword"
@cancelCheck="passwordErrMsg = ''"
></login-input>
<login-input
:error-message="verifyErrMsg"
......@@ -41,7 +41,7 @@
v-model="verifyCode"
v-if="!isPassword"
@sendSms="checkVerification"
@cancelCheck="cancelCheckVerify"
@cancelCheck="verifyErrMsg = ''"
></login-input>
</template>
<template #mainFooter>
......@@ -60,6 +60,7 @@ 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';
import {checkAccount, checkPhone, checkPassword, checkVerification} from './checkfrom';
const Cookie = process.client ? require('js-cookie') : null;
......@@ -70,9 +71,6 @@ export default {
LoginInput,
loginWrap
},
// created() {
// this.$router.replace('/users/login');
// }
data() {
return {
account: '', // 保存 手机号 邮箱
......@@ -83,7 +81,7 @@ export default {
accountErrMsg: '', // 手机号 邮箱 错误提示
passwordErrMsg: '', // 密码错误 提示信息
verifyErrMsg: '', // 验证码错误 提示信息
isCount: false // 是否开始倒计时
isCount: false, // 是否开始倒计时
}
},
methods: {
......@@ -103,69 +101,31 @@ export default {
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();
if (this.isPassword) {
this.accountErrMsg = checkAccount(this.account) === '' ? '' : '账号格式错误';
} else {
this.checkPhone();
this.accountErrMsg = checkPhone(this.account);
}
},
// 检测 密码
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 = '您输入的密码有误';
}
}
this.passwordErrMsg = checkPassword(this.password, true);
},
// 检测验证码
checkVerification() {
this.isCount = false;
let result = this.checkPhone();
if (result) {
this.accountErrMsg = checkPhone(this.account);
if (this.accountErrMsg === '') {
this.getSms();
this.verifyErrMsg = '';
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, {
......@@ -180,9 +140,6 @@ export default {
});
} else {
this.verifyErrMsg = smsResponse.msg;
setTimeout(() => {
this.verifyErrMsg = '';
}, 1500);
this.$message({
type: 'info',
message: smsResponse.msg
......@@ -194,6 +151,7 @@ export default {
// 防止全部未输入就点击
this.checkAccount();
this.checkPassword();
this.verifyErrMsg = checkVerification(this.verifyCode);
let authResponse;
// 两种登录方式
......@@ -239,6 +197,7 @@ export default {
}
} else if (authResponse !== undefined) {
// 认证失败
// errorCode(authResponse);
console.log(authResponse);
if (authResponse.code === 1002) {
this.passwordErrMsg = authResponse.msg;
......
pages/users/register.vue
......@@ -13,8 +13,8 @@
:error-message="accountErrMsg"
:placeholder="placeholder"
v-model="account"
@handleCheck="handleCheckAccount"
@cancelCheck="cancelCheckAccount"
@handleCheck="checkAccount"
@cancelCheck="accountErrMsg = ''"
></login-input>
<login-input
:error-message="passwordErrMsg"
......@@ -22,8 +22,8 @@
input-type="2"
type="password"
v-model="password"
@handleCheck="handleCheckPassword"
@cancelCheck="cancelCheckPassword"
@handleCheck="checkPassword"
@cancelCheck="passwordErrMsg = ''"
></login-input>
<login-input
:error-message="verifyErrMsg"
......@@ -31,9 +31,9 @@
placeholder="请输入验证码"
input-type="3"
v-model="verifyCode"
v-if="isVerifyCode"
v-if="!isEmail"
@sendSms="checkVerification"
@cancelCheck="cancelCheckVerify"
@cancelCheck="verifyErrMsg = ''"
></login-input>
</template>
<template #mainFooter>
......@@ -56,6 +56,8 @@ 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";
import {checkPhone, checkEmail, checkPassword, checkVerification} from './checkfrom';
export default {
name: "register",
......@@ -70,8 +72,8 @@ export default {
account: '', // 保存 手机号 邮箱
password: '', // 保存 密码
verifyCode: '', // 保存 验证码
isVerifyCode: true, // 判断验证码
placeholder: '请输入手机号或邮箱',
isEmail: false, // 判断 邮箱 手机 注册
placeholder: '请输入手机号',
accountErrMsg: '', // 手机号 邮箱 错误提示
passwordErrMsg: '', // 密码错误 提示信息
verifyErrMsg: '', // 验证码错误 提示信息
......@@ -80,7 +82,7 @@ export default {
},
watch: {
account: function (val) {
if (val.length > 8) {
if (val.length > 10) {
this.checkAccount();
}
},
......@@ -94,82 +96,40 @@ export default {
// 显示为 手机注册
handlePhoneRegister() {
Object.assign(this.$data, this.$options.data());
this.isVerifyCode = true;
this.isEmail = false;
this.placeholder = '请输入手机号';
},
// 显示为 邮箱注册
handleEmailRegister() {
Object.assign(this.$data, this.$options.data());
this.isVerifyCode = false;
this.isEmail = true;
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();
if (this.isEmail) {
this.accountErrMsg = checkEmail(this.account);
} else {
this.checkPhone();
this.accountErrMsg = checkPhone(this.account);
}
},
// 检测 密码
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 = ''
}
}
this.passwordErrMsg = checkPassword(this.password);
},
// 检测验证码
checkVerification() {
this.isCount = false;
let result = this.checkPhone();
if (result) {
this.accountErrMsg = checkPhone(this.account);
if (this.accountErrMsg === '') {
this.getSms();
this.verifyErrMsg = '';
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, {
......@@ -184,28 +144,44 @@ export default {
});
} else {
this.verifyErrMsg = smsResponse.msg;
setTimeout(() => {
this.verifyErrMsg = '';
}, 1500);
this.$message({
type: 'info',
message: smsResponse.msg
});
}
},
async handleRegister() {
// 判断是否同意协议
checkAgreement(isAgreement) {
if (isAgreement) return true;
else {
this.$message({
type: 'info',
message: '请同意用户协议和隐私政策'
})
}
},
async handleRegister(isAgree) {
this.checkAccount();
this.checkPassword();
this.verifyErrMsg = checkVerification(this.verifyCode);
let registerResponse;
if (this.isVerifyCode && this.passwordErrMsg === '' && this.accountErrMsg === '' && this.verifyErrMsg === '') {
registerResponse = await this.$axios.$post(config.api.post.User.register, {
mobile: this.account,
password: this.password,
verifyCode: this.verifyCode
})
} else if (!this.isVerifyCode && this.passwordErrMsg === '' && this.accountErrMsg === '') {
if (!this.isEmail && this.passwordErrMsg === '' && this.accountErrMsg === '' && this.verifyErrMsg === '') {
if (this.checkAgreement(isAgree)) {
registerResponse = await this.$axios.$post(config.api.post.User.registerPhone, {
mobile: this.account,
password: this.password,
verifyCode: this.verifyCode
})
}
} else if (this.isEmail && this.passwordErrMsg === '' && this.accountErrMsg === '') {
if (this.checkAgreement(isAgree)) {
registerResponse = await this.$axios.$post(config.api.post.User.registerEmail, {
email: this.account,
password: this.password
})
}
// 邮箱注册
}
console.log(registerResponse);
......@@ -220,7 +196,11 @@ export default {
this.errMessage = registerResponse.msg;
// 注册失败
if (registerResponse.code === 1002) {
this.passwordErrMsg = registerResponse.msg;
if (this.isEmail) {
this.accountErrMsg = registerResponse.msg
} else {
this.passwordErrMsg = registerResponse.msg;
}
} else if (registerResponse.code === 1001) {
this.accountErrMsg = registerResponse.msg;
}else if (registerResponse.code === 1003) {
......@@ -228,7 +208,7 @@ export default {
} else {
this.$message({
type: 'error',
message: authResponse.msg
message: registerResponse.msg
});
}
}
......@@ -242,7 +222,7 @@ export default {
.register-container{
width: 514*$length;
margin: 0 auto;
padding: 136*$length 0;
padding: 40*$length 0;
}
.register-success{
width: 408*$length;
......
pages/users/reset.vue
......@@ -10,17 +10,17 @@
:error-message="accountErrMsg"
:placeholder="placeholder"
v-model="account"
@handleCheck="handleCheckAccount"
@cancelCheck="cancelCheckAccount"
@handleCheck="checkAccount"
@cancelCheck="accountErrMsg = ''"
></login-input>
<login-input
:error-message="passwordErrMsg"
placeholder="请输入密码"
placeholder="请输入新的密码"
input-type="2"
type="password"
v-model="password"
@handleCheck="handleCheckPassword"
@cancelCheck="cancelCheckPassword"
@handleCheck="checkPassword"
@cancelCheck="passwordErrMsg = ''"
></login-input>
<login-input
:error-message="verifyErrMsg"
......@@ -29,11 +29,11 @@
input-type="3"
v-model="verifyCode"
@sendSms="checkVerification"
@cancelCheck="cancelCheckVerify"
@cancelCheck="verifyErrMsg = ''"
></login-input>
</template>
<template #mainFooter>
<login-button @handle="handleReset" button="重制账号"></login-button>
<login-button @handle="handleReset" button="重置账号"></login-button>
</template>
</login-wrap>
</div>
......@@ -46,6 +46,7 @@ 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';
import {checkPhone, checkPassword, checkVerification} from './checkfrom';
export default {
......@@ -63,7 +64,7 @@ export default {
password: '', // 保存 密码
verifyCode: '', // 保存 验证码
isPassword: true, // 判断验证码
placeholder: '请输入手机号或邮箱',
placeholder: '请输入手机号',
accountErrMsg: '', // 手机号 邮箱 错误提示
passwordErrMsg: '', // 密码错误 提示信息
verifyErrMsg: '', // 验证码错误 提示信息
......@@ -72,8 +73,8 @@ export default {
},
watch: {
account: function (val) {
if (val.length > 8) {
this.checkPhone();
if (val.length > 10) {
this.checkAccount();
}
},
password: function (val) {
......@@ -83,60 +84,27 @@ export default {
}
},
methods: {
// 检测手机号
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
// 检测account 手机
checkAccount() {
this.accountErrMsg = checkPhone(this.account);
},
// 检测 密码
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 = ''
}
}
this.passwordErrMsg = checkPassword(this.password);
},
// 检测验证码
checkVerification() {
this.isCount = false;
let result = this.checkPhone();
if (result) {
this.accountErrMsg = checkPhone(this.account);
if (this.accountErrMsg === '') {
this.getSms();
this.verifyErrMsg = '';
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, {
......@@ -151,9 +119,6 @@ export default {
});
} else {
this.verifyErrMsg = smsResponse.msg;
setTimeout(() => {
this.verifyErrMsg = '';
}, 1500);
this.$message({
type: 'info',
message: smsResponse.msg
......@@ -161,9 +126,9 @@ export default {
}
},
async handleReset() {
this.checkPhone();
this.checkAccount();
this.checkPassword();
this.verifyErrMsg = checkVerification(this.verifyCode);
let resetResponse;
if (this.passwordErrMsg === '' && this.accountErrMsg === '' && this.verifyErrMsg === '') {
......@@ -181,9 +146,7 @@ export default {
type: 'success',
message: resetResponse.msg
});
setTimeout(() => {
this.$router.push('/users/login');
}, 2500)
this.$router.push('/users/login');
} else if(resetResponse !== undefined) {
// 修改密码失败
if (resetResponse.code === 1002) {
......
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