Skip to content

B
beyond-clouds-front
Commit b588fe03 by yanju
Options

Merge branch 'yoona' into 'master' 

Yoona

See merge request pigbigbig/beyond-clouds-front!31
parents d75e9917 e952307d
Showing with 915 additions and 125 deletions
components/pc/loginCard/loginButton.vue 0 → 100644
<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>
components/pc/loginCard/loginInput.vue 0 → 100644
<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>
components/pc/loginCard/loginWrap.vue 0 → 100644
<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>
components/pc/select/selectCard.vue
......@@ -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);
......
pages/users/register.vue
......@@ -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 !== '') {
// 显示为 手机注册
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(password) || password.length < 8) {
this.errMessage = '密码格式错误';
return false
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;
// 注册失败
this.$message({
type: 'error',
message: 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: authResponse.msg
});
}
}
}
}
......@@ -85,10 +240,9 @@ export default {
<style lang="scss" scoped>
.register-wrap{
.register-container{
margin: 136*$length 0;
.register-card-container{
margin: 0 auto;
}
width: 514*$length;
margin: 0 auto;
padding: 136*$length 0;
}
.register-success{
width: 408*$length;
......
pages/users/reset.vue
<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;
// 修改密码失败
this.$message({
type: 'error',
message: 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