Skip to content

T
techbook
Commit 189cdae5 authored by zhangyanni's avatar zhangyanni
Browse files
Options

验证码登录提示

parent 7504bdce
Hide whitespace changes
Inline Side-by-side
Showing with 93 additions and 10 deletions
public/css/common.scss
View file @ 189cdae5
......@@ -540,4 +540,37 @@ i{
.el-input.is-active .el-input__inner, .el-input__inner:focus{
border-color: #5D78FF !important;
}
//动画
@-webkit-keyframes fadeInOut{0%{opacity: 1}100%{opacity: 0}}
@-moz-keyframes fadeInOut{0%{opacity: 1}100%{opacity: 0}}
@-ms-keyframes fadeInOut{0%{opacity: 1}100%{opacity: 0}}
@-o-keyframes fadeInOut{0%{opacity: 1}100%{opacity: 0}}
@keyframes fadeInOut{0%{opacity: 1}100%{opacity: 0}}
//tag
.el-tag--plain.el-tag--success{
width: 320px;
background-color: #FFF8EF !important;
color: #FF9E29 !important;
border-color: #FF9E29 !important;
height: 40px;
line-height: 40px;
-webkit-animation: slidetounlock 3s infinite;
-moz-animation: slidetounlock 3s infinite;
-ms-animation: slidetounlock 3s infinite;
-o-animation: slidetounlock 3s infinite;
}
.el-tag--plain.el-tag--danger{
width: 320px;
background-color: #FFEFEF !important;
color: #FF5D5D !important;
border-color: #FF5D5D !important;
height: 40px;
line-height: 40px;
-webkit-animation: fadeInOut 3s;
-moz-animation: fadeInOut 3s;
-ms-animation: fadeInOut 3s;
-o-animation: fadeInOut 3s;
}
\ No newline at end of file
src/components/login/emailLoginCmpt.vue
View file @ 189cdae5
......@@ -42,6 +42,13 @@
<el-form-item v-if="isShowSlider">
<sliderCmpt @sendVerification="getVerification"></sliderCmpt>
</el-form-item>
<el-form-item v-if="showMessageInfo" class="message-item">
<el-tag
:type="messageObj.type"
effect="plain">
{{ messageObj.message }}
</el-tag>
</el-form-item>
<el-form-item>
<el-button type="primary" class="loginButton" :disabled="flag>0" @click="handleLogin(2,'emailYzCodeForm')">{{$t('commonTips.login')}}
</el-button>
......@@ -73,7 +80,8 @@
checked:false,
emailForm: {
email: "",
password: ""
password: "",
},
emailYzCodeForm: {
email: "",
......@@ -90,11 +98,16 @@
bool:false,
errorInfo:"",
isShowSlider:false,
showMessageInfo:false,
sliderSuccess:false,
timer:null,
showCount:true,
count:'',
flag:0,
messageObj:{
type:"success",
message:null
}
}
},
methods:{
......@@ -119,6 +132,7 @@
if(tab.name==="first") {
this.$refs["emailYzCodeForm"].resetFields();
this.isShowSlider =false;
this.showMessageInfo = false;
}
else this.$refs["emailForm"].resetFields();
},
......@@ -230,12 +244,18 @@
valiType:2
}, that =this;
api.getYZEmailCodeAxios(params).then((res)=>{
that.showMessageInfo =true;
if(res.code==0){
that.$message.success(that.$t("commonTips.successEmailCodeMessage"));
that.messageObj.type = "success";
that.messageObj.message = that.$t("commonTips.successEmailCodeMessage");
that.timeoutFunc();
}else{
this.$message.error(res.msg)
that.messageObj.type = "danger";
that.messageObj.message = res.msg;
}
setTimeout(function(){
that.showMessageInfo =false;
},3000)
}).catch((err)=>{
that.$message.error(err)
})
......
src/components/login/mobileLoginCmpt.vue
View file @ 189cdae5
......@@ -43,6 +43,13 @@
<el-form-item v-if="isShowSlider" style="margin-top:20px;">
<sliderCmpt @sendVerification="getVerification"></sliderCmpt>
</el-form-item>
<el-form-item v-if="showMessageInfo" class="message-item">
<el-tag
:type="messageObj.type"
effect="plain">
{{ messageObj.message }}
</el-tag>
</el-form-item>
<el-form-item style="margin-top: 27px;">
<el-button type="primary" :disabled="flag>0" class="loginButton" @click="handleLogin(2,'yzCodeForm')">{{$t('commonTips.login')}}
</el-button>
......@@ -92,11 +99,16 @@
bool:false,
errorInfo:"",
isShowSlider:false,
showMessageInfo:false,
sliderSuccess:false,
timer:null,
showCount:true,
count:'',
flag:0
flag:0,
messageObj:{
type:"success",
message:null
}
}
},
methods: {
......@@ -106,6 +118,7 @@
if(tab.name==="first"){
this.$refs["yzCodeForm"].resetFields();
this.isShowSlider = false;
this.showMessageInfo = false;
}
else this.$refs["loginForm"].resetFields();
......@@ -221,12 +234,18 @@
valiType:3
}, that =this;
api.getYZPhoneCodeAxios(params).then((res)=>{
that.showMessageInfo =true;
if(res.code==0){
that.$message.success(that.$t("commonTips.successPhoneCodeMessage"));
that.messageObj.type = "success";
that.messageObj.message = that.$t("commonTips.successPhoneCodeMessage");
that.timeoutFunc();
}else{
this.$message.error(res.msg)
that.messageObj.type = "danger";
that.messageObj.message = res.msg;
}
setTimeout(function(){
that.showMessageInfo =false;
},3000)
}).catch((err)=>{
that.$message.error(err)
})
......@@ -330,4 +349,7 @@
right: 0;
}
}
.message-item{
margin-top: 20px;
}
</style>
\ No newline at end of file
src/components/login/slider.vue
View file @ 189cdae5
......@@ -161,10 +161,12 @@
&>i{
font-style: normal;
background: -webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
-webkit-animation: slidetounlock 3s infinite;
-webkit-text-size-adjust: none;
-moz-animation: slidetounlock 3s infinite;
-ms-animation: slidetounlock 3s infinite;
-o-animation: slidetounlock 3s infinite;
display: inline-block;
width: 320px !important;
height: 40px;
......@@ -207,5 +209,8 @@
display: none;
}
@-webkit-keyframes slidetounlock{0%{background-position:-320px 0}100%{background-position:320px 0}}
@-moz-keyframes slidetounlock{0%{background-position:-320px 0}100%{background-position:320px 0}}
@-ms-keyframes slidetounlock{0%{background-position:-320px 0}100%{background-position:320px 0}}
@-o-keyframes slidetounlock{0%{background-position:-320px 0}100%{background-position:320px 0}}
@keyframes slidetounlock{0%{background-position:-320px 0}100%{background-position:320px 0}}
</style>
\ No newline at end of file
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