Skip to content

肖康 / cloudSystem

Go to a project
Commit 7cddbc62 by liangjianmin
Options

style(login): 添加登录方式切换功能和优化表单布局 

- 增加账号登录和免密码登录的切换功能，使用标签页展示
- 优化表单输入框的错误提示管理，统一错误状态处理
- 更新短信验证码发送功能，增加倒计时提示
- 调整登录按钮的激活状态逻辑，提升用户体验
- 同步更新CSS样式以支持新功能
parent 8940e1e9
Inline Side-by-side
Showing with 308 additions and 62 deletions
src/assets/css/login/index.less
......@@ -68,8 +68,8 @@ html, body, #app {
right: 0;
top: 133px;
width: 400px;
height: 367px;
background: #FFFFFF;
padding-bottom: 40px;
border-radius: 8px;
.tit {
......@@ -79,6 +79,39 @@ html, body, #app {
margin: 25px 0;
}
.tab-container {
margin: 0 auto 25px;
width: 342px;
display: flex;
background: #F1F4FA;
border-radius: 4px;
padding: 3px;
.tab-item {
flex: 1;
padding: 10px 0;
font-size: 14px;
color: #8391AD;
cursor: pointer;
text-align: center;
border-radius: 3px;
transition: all 0.2s ease;
background: transparent;
font-weight: 400;
&:hover:not(.active) {
color: #5a6c85;
}
&.active {
color: #1969F9;
font-weight: bold !important;
background: #FFFFFF;
box-shadow: 0 2px 4px rgba(25, 105, 249, 0.15);
}
}
}
.bar {
width: 342px;
margin: 0 auto;
......@@ -171,6 +204,33 @@ html, body, #app {
height: 100%;
}
}
.send-sms-btn {
width: 118px;
height: 43px;
line-height: 43px;
text-align: center;
background: #A1ACC1;
border-radius: 2px;
font-size: 14px;
color: #ffffff;
display: block;
transition: all 0.2s ease;
&.active {
background: #1969F9;
cursor: pointer;
&:hover {
background: #0759E8;
}
}
&:not(.active) {
cursor: not-allowed;
opacity: 0.6;
}
}
}
.text {
......
src/assets/css/login/index.min.css
html,body,#app{height:100%}.user-box{height:100%}.user-box .head-box{height:80px;background:#FFFFFF}.user-box .head-box .head-wrap{width:1190px;height:100%;margin:0 auto}.user-box .head-box .head-wrap .logo{width:81px;height:39px}.user-box .head-box .head-wrap .logo img{width:81px;height:39px}.user-box .head-box .head-wrap .line{width:1px;height:22px;color:#e0e0e0;background:#E0E0E0;margin:0 13px 0 15px}.user-box .head-box .head-wrap .text .t1{font-size:15px;color:#333333;line-height:19px;margin-bottom:4px;font-weight:bold}.user-box .head-box .head-wrap .text .t2{font-size:13px;color:#666666;letter-spacing:10px;font-weight:bold}.user-box .section{width:100%;height:calc(100% - 80px);background:url("../../images/bg.png") no-repeat top center;background-size:cover}.user-box .section .section-wrap{position:relative;width:1190px;height:100%;margin:0 auto}.user-box .section .section-wrap .login-box{position:absolute;right:0;top:133px;width:400px;height:367px;background:#FFFFFF;border-radius:8px}.user-box .section .section-wrap .login-box .tit{font-size:20px;color:#333333;text-align:center;margin:25px 0}.user-box .section .section-wrap .login-box .bar{width:342px;margin:0 auto}.user-box .section .section-wrap .login-box .bar .input-box{position:relative;width:328px;height:43px;background:#FFFFFF;border-radius:2px;border:1px solid #BEC9DF;margin-bottom:20px;transition:all .2s ease;padding-left:12px}.user-box .section .section-wrap .login-box .bar .input-box i.iconfont{padding:12px 0;font-size:20px;color:#a1acc1}.user-box .section .section-wrap .login-box .bar .input-box .inp{padding-left:9px;height:34px;font-size:14px;background:transparent;border-left:1px solid #BEC9DF;margin-left:12px;letter-spacing:1px}.user-box .section .section-wrap .login-box .bar .input-box .inp::-webkit-input-placeholder{color:#A1ACC1}.user-box .section .section-wrap .login-box .bar .input-box .eye{position:absolute;right:19px;top:13px;font-size:20px;color:#a1acc1}.user-box .section .section-wrap .login-box .bar .input-box:focus-within{border:1px solid #1969F9}.user-box .section .section-wrap .login-box .bar .input-box.error{border:1px solid #FF1D00}.user-box .section .section-wrap .login-box .bar .code-box .l input{width:210px;height:43px;line-height:43px;border-radius:2px;border:1px solid #BEC9DF;text-indent:17px;font-size:14px}.user-box .section .section-wrap .login-box .bar .code-box .l input::-webkit-input-placeholder{color:#A1ACC1}.user-box .section .section-wrap .login-box .bar .code-box .l input:focus{border:1px solid #1969F9}.user-box .section .section-wrap .login-box .bar .code-box.error .l input{border:1px solid #FF1D00}.user-box .section .section-wrap .login-box .bar .code-box .r{width:118px;height:43px;border-radius:2px;border:1px solid #BEC9DF}.user-box .section .section-wrap .login-box .bar .code-box .r img{width:100%;height:100%}.user-box .section .section-wrap .login-box .bar .text{position:relative;padding:11px 0;line-height:17px}.user-box .section .section-wrap .login-box .bar .text .error{font-size:12px;color:#f10909}.user-box .section .section-wrap .login-box .bar .text a{line-height:17px;font-size:12px;color:#999999}.user-box .section .section-wrap .login-box .bar .btn-submit{width:342px;height:42px;line-height:42px;text-align:center;background:#A1ACC1;border-radius:2px;font-size:20px;color:#ffffff;display:block;letter-spacing:10px;margin:0 auto;transition:all .2s ease}.user-box .section .section-wrap .login-box .bar .btn-submit.active{background:#1969F9}.user-box .section .section-wrap .login-box .bar .btn-submit:hover{background:#0050E0}/*# sourceMappingURL=./index.min.css.map */
\ No newline at end of file
html,body,#app{height:100%}.user-box{height:100%}.user-box .head-box{height:80px;background:#FFFFFF}.user-box .head-box .head-wrap{width:1190px;height:100%;margin:0 auto}.user-box .head-box .head-wrap .logo{width:81px;height:39px}.user-box .head-box .head-wrap .logo img{width:81px;height:39px}.user-box .head-box .head-wrap .line{width:1px;height:22px;color:#e0e0e0;background:#E0E0E0;margin:0 13px 0 15px}.user-box .head-box .head-wrap .text .t1{font-size:15px;color:#333333;line-height:19px;margin-bottom:4px;font-weight:bold}.user-box .head-box .head-wrap .text .t2{font-size:13px;color:#666666;letter-spacing:10px;font-weight:bold}.user-box .section{width:100%;height:calc(100% - 80px);background:url("../../images/bg.png") no-repeat top center;background-size:cover}.user-box .section .section-wrap{position:relative;width:1190px;height:100%;margin:0 auto}.user-box .section .section-wrap .login-box{position:absolute;right:0;top:133px;width:400px;background:#FFFFFF;padding-bottom:40px;border-radius:8px}.user-box .section .section-wrap .login-box .tit{font-size:20px;color:#333333;text-align:center;margin:25px 0}.user-box .section .section-wrap .login-box .tab-container{margin:0 auto 25px;width:342px;display:flex;background:#F1F4FA;border-radius:4px;padding:3px}.user-box .section .section-wrap .login-box .tab-container .tab-item{flex:1;padding:10px 0;font-size:14px;color:#8391AD;cursor:pointer;text-align:center;border-radius:3px;transition:all .2s ease;background:transparent;font-weight:400}.user-box .section .section-wrap .login-box .tab-container .tab-item:hover:not(.active){color:#5a6c85}.user-box .section .section-wrap .login-box .tab-container .tab-item.active{color:#1969F9;font-weight:bold !important;background:#FFFFFF;box-shadow:0 2px 4px rgba(25,105,249,0.15)}.user-box .section .section-wrap .login-box .bar{width:342px;margin:0 auto}.user-box .section .section-wrap .login-box .bar .input-box{position:relative;width:328px;height:43px;background:#FFFFFF;border-radius:2px;border:1px solid #BEC9DF;margin-bottom:20px;transition:all .2s ease;padding-left:12px}.user-box .section .section-wrap .login-box .bar .input-box i.iconfont{padding:12px 0;font-size:20px;color:#a1acc1}.user-box .section .section-wrap .login-box .bar .input-box .inp{padding-left:9px;height:34px;font-size:14px;background:transparent;border-left:1px solid #BEC9DF;margin-left:12px;letter-spacing:1px}.user-box .section .section-wrap .login-box .bar .input-box .inp::-webkit-input-placeholder{color:#A1ACC1}.user-box .section .section-wrap .login-box .bar .input-box .eye{position:absolute;right:19px;top:13px;font-size:20px;color:#a1acc1}.user-box .section .section-wrap .login-box .bar .input-box:focus-within{border:1px solid #1969F9}.user-box .section .section-wrap .login-box .bar .input-box.error{border:1px solid #FF1D00}.user-box .section .section-wrap .login-box .bar .code-box .l input{width:210px;height:43px;line-height:43px;border-radius:2px;border:1px solid #BEC9DF;text-indent:17px;font-size:14px}.user-box .section .section-wrap .login-box .bar .code-box .l input::-webkit-input-placeholder{color:#A1ACC1}.user-box .section .section-wrap .login-box .bar .code-box .l input:focus{border:1px solid #1969F9}.user-box .section .section-wrap .login-box .bar .code-box.error .l input{border:1px solid #FF1D00}.user-box .section .section-wrap .login-box .bar .code-box .r{width:118px;height:43px;border-radius:2px;border:1px solid #BEC9DF}.user-box .section .section-wrap .login-box .bar .code-box .r img{width:100%;height:100%}.user-box .section .section-wrap .login-box .bar .code-box .send-sms-btn{width:118px;height:43px;line-height:43px;text-align:center;background:#A1ACC1;border-radius:2px;font-size:14px;color:#ffffff;display:block;transition:all .2s ease}.user-box .section .section-wrap .login-box .bar .code-box .send-sms-btn.active{background:#1969F9;cursor:pointer}.user-box .section .section-wrap .login-box .bar .code-box .send-sms-btn.active:hover{background:#0759E8}.user-box .section .section-wrap .login-box .bar .code-box .send-sms-btn:not(.active){cursor:not-allowed;opacity:.6}.user-box .section .section-wrap .login-box .bar .text{position:relative;padding:11px 0;line-height:17px}.user-box .section .section-wrap .login-box .bar .text .error{font-size:12px;color:#f10909}.user-box .section .section-wrap .login-box .bar .text a{line-height:17px;font-size:12px;color:#999999}.user-box .section .section-wrap .login-box .bar .btn-submit{width:342px;height:42px;line-height:42px;text-align:center;background:#A1ACC1;border-radius:2px;font-size:20px;color:#ffffff;display:block;letter-spacing:10px;margin:0 auto;transition:all .2s ease}.user-box .section .section-wrap .login-box .bar .btn-submit.active{background:#1969F9}.user-box .section .section-wrap .login-box .bar .btn-submit:hover{background:#0050E0}/*# sourceMappingURL=./index.min.css.map */
\ No newline at end of file
src/assets/css/login/index.min.css.map
{"version":3,"sources":["index.less"],"names":[],"mappings":"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"}
\ No newline at end of file
{"version":3,"sources":["index.less"],"names":[],"mappings":"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"}
\ No newline at end of file
src/views/User/login.vue
......@@ -17,29 +17,56 @@
<div class="section-wrap">
<div class="login-box">
<p class="tit">欢迎登录芯链系统</p>
<!-- Tab切换 -->
<div class="tab-container">
<div class="tab-item" :class="{ active: loginType === 'account' }" @click="switchLoginType('account')">账号登录</div>
<div class="tab-item" :class="{ active: loginType === 'sms' }" @click="switchLoginType('sms')">免密码登录</div>
</div>
<div class="bar">
<form>
<div class="input-box row verCenter" :class="errorClass1 ? 'error' : ''">
<!-- 账号登录表单 -->
<form v-if="loginType === 'account'">
<div class="input-box row verCenter" :class="getErrorClass('mobile')">
<i class="iconfont iconuser va-m"></i>
<input type="text" placeholder="请输入手机号" class="inp va-m" v-model="form.mobile" autocomplete="off" />
<input type="text" placeholder="请输入账号/手机号" class="inp va-m" v-model="form.mobile" autocomplete="off" @input="clearError('mobile')" />
</div>
<div class="input-box row verCenter" :class="errorClass2 ? 'error' : ''">
<div class="input-box row verCenter" :class="getErrorClass('password')">
<i class="iconfont icondenglu-mimabeifen va-m"></i>
<input :type='pwdFlag ? "password" : "text"' placeholder="请输入登录密码" class="inp va-m" v-model="form.password" />
<input :type='pwdFlag ? "password" : "text"' placeholder="请输入登录密码" class="inp va-m" v-model="form.password" @input="clearError('password')" />
<a href="javascript:;" class="iconfont eye" :class="pwdFlag ? 'iconyincang' : 'iconyanjing'" @click="changePwd()"></a>
</div>
<div class="code-box row bothSide verCenter" :class="errorClass3 ? 'error' : ''">
<div class="code-box row bothSide verCenter" :class="getErrorClass('captcha')">
<div class="l">
<input type="text" placeholder="请输入验证码" v-model="form.captcha" />
<input type="text" placeholder="请输入验证码" v-model="form.captcha" @input="clearError('captcha')" />
</div>
<a class="r" href="javascript:;" title="换一张" @click="updateCp()">
<img :src="imgSrc" alt="">
</a>
</div>
<p class="text">
<span class="error">{{ errror_text }}</span>
<span class="error">{{ errorMessage }}</span>
</p>
<a href="javascript:;" class="btn-submit" :class="active ? 'active' : ''" @click="submit()" :loading="true">登录</a>
<a href="javascript:;" class="btn-submit" :class="{ active: isAccountLoginActive }" @click="submit()">登录</a>
</form>
<!-- 免密码登录表单 -->
<form v-if="loginType === 'sms'">
<div class="input-box row verCenter" :class="getErrorClass('smsMobile')">
<i class="iconfont iconuser va-m"></i>
<input type="text" placeholder="请输入手机号" class="inp va-m" v-model="smsForm.mobile" autocomplete="off" @input="clearError('smsMobile')" />
</div>
<div class="code-box row bothSide verCenter" :class="getErrorClass('smsCode')">
<div class="l">
<input type="text" placeholder="请输入短信验证码" v-model="smsForm.smsCode" @input="clearError('smsCode')" />
</div>
<a class="r send-sms-btn" :class="{ active: canSendSms && isMobileValid }" href="javascript:;" @click="sendSmsCode()">
{{ smsText }}
</a>
</div>
<p class="text">
<span class="error">{{ errorMessage }}</span>
</p>
<a href="javascript:;" class="btn-submit" :class="{ active: isSmsLoginActive }" @click="smsSubmit()">登录</a>
</form>
</div>
</div>
......@@ -57,58 +84,98 @@
name: "index",
data() {
return {
loginType: 'account', // 登录类型：account账号登录，sms免密码登录
pwdFlag: true,
active: false,
errror_text: '',
status1: false,
status2: false,
loading: true,
imgSrc: '',
errorClass1: false,
errorClass2: false,
errorClass3: false,
cp: false,
form: {
mobile: '',
password: '',
captcha: '',
captcha_key: ''
}
},
smsForm: {
mobile: '',
smsCode: ''
},
// 错误状态统一管理
errors: {},
errorMessage: '',
// 短信相关
canSendSms: true,
smsText: '发送验证码',
countdown: 60
};
},
watch: {
form: {
deep: true,
handler: function (newV, oldV) {
let obj = newV;
let myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
if (!this.cp) {
if (obj.captcha || obj.password || obj.mobile) {
this.errror_text = '';
this.errorClass1 = false;
this.errorClass2 = false;
this.errorClass3 = false;
}
} else {
this.cp = false;
}
computed: {
// 手机号格式验证
isMobileValid() {
var myreg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
return this.loginType === 'account' ? myreg.test(this.form.mobile) : myreg.test(this.smsForm.mobile);
},
// 账号登录按钮激活状态
isAccountLoginActive() {
return this.isMobileValid && this.form.password && this.form.captcha;
},
if (myreg.test(obj.mobile)) {
this.active = true;
} else {
this.active = false;
}
}
// 短信登录按钮激活状态
isSmsLoginActive() {
return this.isMobileValid && this.smsForm.smsCode;
},
// 通用错误样式类
getErrorClass() {
return (fieldName) => {
return this.errors[fieldName] ? 'error' : '';
};
}
},
created() {
this.updateCp();
},
computed: {},
methods: {
/**
* 设置错误状态
*/
setError(field, message) {
this.$set(this.errors, field, true);
this.errorMessage = message;
},
/**
* 清除指定字段错误状态
*/
clearError(field) {
this.$set(this.errors, field, false);
if (!Object.values(this.errors).some(Boolean)) {
this.errorMessage = '';
}
},
/**
* 清除所有错误状态
*/
clearAllErrors() {
this.errors = {};
this.errorMessage = '';
},
/**
* 手机号格式验证
*/
validateMobile(mobile) {
var myreg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
return myreg.test(mobile);
},
/**
* 切换登录方式
*/
switchLoginType(type) {
this.loginType = type;
this.clearAllErrors();
},
/**
* 更新验证码
*/
updateCp() {
......@@ -122,6 +189,67 @@
})
},
/**
* 发送短信验证码
*/
sendSmsCode() {
if (!this.smsForm.mobile) {
this.setError('smsMobile', '请输入手机号');
return false;
}
if (!this.validateMobile(this.smsForm.mobile)) {
this.setError('smsMobile', '请输入正确的手机号');
return false;
}
if (!this.canSendSms) {
return false;
}
this.$http('post', "/auth/send-sms", {
mobile: this.smsForm.mobile
}).then(res => {
if (res.code === 0) {
this.$message({
message: '验证码发送成功',
type: 'success'
});
this.startCountdown();
} else {
this.setError('smsMobile', res.msg);
this.$message({
message: res.msg,
type: 'warning'
});
}
}).catch(err => {
this.setError('smsMobile', '发送失败，请稍后重试');
this.$message({
message: '发送失败，请稍后重试',
type: 'error'
});
});
},
/**
* 开始倒计时
*/
startCountdown() {
this.canSendSms = false;
this.countdown = 60;
this.smsText = this.countdown + 's';
var timer = setInterval(() => {
this.countdown--;
this.smsText = this.countdown + 's';
if (this.countdown <= 0) {
clearInterval(timer);
this.canSendSms = true;
this.smsText = '发送验证码';
}
}, 1000);
},
/**
* 切换密码显示
*/
changePwd: function () {
......@@ -131,28 +259,23 @@
* 登录
*/
submit() {
var myreg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
if (!this.form.mobile) {
this.errror_text = '请输入手机号';
this.errorClass1 = true;
this.setError('mobile', '请输入手机号');
return false;
}
if (!myreg.test(this.form.mobile)) {
this.errror_text = '请输入正确的手机号';
this.errorClass1 = true;
if (!this.validateMobile(this.form.mobile)) {
this.setError('mobile', '请输入正确的手机号');
return false;
}
if (!this.form.password) {
this.errror_text = '请输入登录密码';
this.errorClass2 = true;
this.setError('password', '请输入登录密码');
return false;
}
if (!this.form.captcha) {
this.errror_text = '请输入验证码';
this.errorClass3 = true;
this.setError('captcha', '请输入验证码');
return false;
}
......@@ -194,16 +317,14 @@
window.location.href = '/';
}
} else if (res.code === 102) {
this.errror_text = res.msg;
this.cp = true;
this.setError('captcha', res.msg);
this.updateCp();
this.$message({
message: res.msg,
type: 'warning'
});
} else {
this.errror_text = res.msg;
this.cp = true;
this.errorMessage = res.msg;
this.updateCp();
this.$message({
message: res.msg,
......@@ -213,6 +334,71 @@
}).catch(err => {
loadingInstance.close();
});
},
/**
* 短信验证码登录
*/
smsSubmit() {
if (!this.smsForm.mobile) {
this.setError('smsMobile', '请输入手机号');
return false;
}
if (!this.validateMobile(this.smsForm.mobile)) {
this.setError('smsMobile', '请输入正确的手机号');
return false;
}
if (!this.smsForm.smsCode) {
this.setError('smsCode', '请输入短信验证码');
return false;
}
var loadingInstance = Loading.service({
background: 'rgba(0, 0, 0, 0)'
});
this.$http('post', "/auth/sms-login", {
mobile: this.smsForm.mobile,
sms_code: this.smsForm.smsCode
}).then(res => {
loadingInstance.close();
if (res.code === 0) {
sessionStorage.removeItem('tabs');
localStorage.removeItem('supplier_id');
localStorage.removeItem('cp_time_day');
localStorage.removeItem('futures_cp_time_day');
localStorage.setItem('supplier_id', res.data.supplier_id);
localStorage.setItem('cp_time_day', res.data.cp_time_day);
localStorage.setItem('futures_cp_time_day', res.data.futures_cp_time_day);
Util.setCookie("token", res.data.api_token, 1);
//强制要求微信绑定
if (!res.data.is_bind_wechat) {
this.$http('get', "/api/login/getwxqrcode").then(res => {
if (res.code === 0) {
window.location.href = res.data.wx_login_url;
} else {
this.$message({
message: res.msg,
type: 'warning'
});
}
})
} else {
window.location.href = '/';
}
} else {
this.errorMessage = res.msg;
this.$message({
message: res.msg,
type: 'warning'
});
}
}).catch(err => {
loadingInstance.close();
});
}
}
};
......
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 sign in to comment