|
|
@@ -49,12 +49,10 @@
|
|
|
</el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item prop="cade">
|
|
|
- <el-input v-model="loginForm.cade" type="text" maxlength="6" auto-complete="off" placeholder="短信验证码" id="" onkeydown="enterHandler(event)" style=" width: 120px; ">
|
|
|
+ <el-input v-model="loginForm.cade" type="text" maxlength="" auto-complete="off" placeholder="短信验证码" id="" onkeydown="enterHandler(event)" style=" width: 120px; ">
|
|
|
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
|
|
|
</el-input>
|
|
|
- <el-button :loading="loading" size="min" type="primary" style="width: 120px; margin-left:12px">
|
|
|
- <span >获取动态密码 </span>
|
|
|
- </el-button>
|
|
|
+ <el-button @click="getCode()" :class="{'disabled-style':getCodeBtnDisable}" :disabled="getCodeBtnDisable">{{codeBtnWord}}</el-button>
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-button :loading="loading" size="medium" type="primary" @click.native.prevent="handleLogin" style="width: 190px;border-radius: 50px;margin-left:10%;margin-top:10%">
|
|
|
@@ -91,6 +89,8 @@ export default {
|
|
|
codeUrl: "",
|
|
|
cookiePassword: "",
|
|
|
loginForm: {
|
|
|
+ phoneNumber: '',
|
|
|
+ verificationCode: '',
|
|
|
username: "",
|
|
|
password: "",
|
|
|
phone: "",
|
|
|
@@ -99,6 +99,8 @@ export default {
|
|
|
cade: "",
|
|
|
uuid: "",
|
|
|
},
|
|
|
+ codeBtnWord: '获取验证码', // 获取验证码按钮文字
|
|
|
+ waitTime:2, // 获取验证码按钮失效时间
|
|
|
loginRules: {
|
|
|
username: [
|
|
|
{
|
|
|
@@ -147,7 +149,64 @@ export default {
|
|
|
this.getCookie();
|
|
|
this.getlistDomain();
|
|
|
},
|
|
|
+// computed: {
|
|
|
+// // 用于校验手机号码格式是否正确
|
|
|
+// phoneNumberStyle(){
|
|
|
+// let reg = /^1[3456789]\d{9}$/
|
|
|
+// if(!reg.test(this.loginForm.phoneNumber)){
|
|
|
+// return false
|
|
|
+// }
|
|
|
+// return true
|
|
|
+// },
|
|
|
+// // 控制获取验证码按钮是否可点击
|
|
|
+// getCodeBtnDisable:{
|
|
|
+// get(){
|
|
|
+// if(this.waitTime == 2){
|
|
|
+// if(this.loginForm.phoneNumber){
|
|
|
+// return false
|
|
|
+// }
|
|
|
+// return true
|
|
|
+// }
|
|
|
+// return true
|
|
|
+// },
|
|
|
+// // 注意：因为计算属性本身没有set方法，不支持在方法中进行修改，而下面我要进行这个操作，所以需要手动添加
|
|
|
+// set(){}
|
|
|
+// }
|
|
|
+// },
|
|
|
methods: {
|
|
|
+ getCode(){
|
|
|
+ if(this.phoneNumberStyle){
|
|
|
+ let params = {}
|
|
|
+ params.phone = this.loginForm.phoneNumber
|
|
|
+ // 调用获取短信验证码接口
|
|
|
+ axios.post('/sendMessage',params).then(res=>{
|
|
|
+ res = res.data
|
|
|
+ if(res.status==200) {
|
|
|
+ this.$message({
|
|
|
+ message: '验证码已发送，请稍候...',
|
|
|
+ type: 'success',
|
|
|
+ center:true
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 因为下面用到了定时器，需要保存this指向
|
|
|
+ let that = this
|
|
|
+ that.waitTime--
|
|
|
+ that.getCodeBtnDisable = true
|
|
|
+ this.codeBtnWord = `${this.waitTime}s 后重新获取`
|
|
|
+ let timer = setInterval(function(){
|
|
|
+ if(that.waitTime>1){
|
|
|
+ that.waitTime--
|
|
|
+ that.codeBtnWord = `${that.waitTime}s 后重新获取`
|
|
|
+ }else{
|
|
|
+ clearInterval(timer)
|
|
|
+ that.codeBtnWord = '获取验证码'
|
|
|
+ that.getCodeBtnDisable = false
|
|
|
+ that.waitTime = 61
|
|
|
+ }
|
|
|
+ },1000)
|
|
|
+ }
|
|
|
+},
|
|
|
changeImg(){
|
|
|
this.wxSrc = require("../assets/images/wx.png")
|
|
|
},
|
|
|
@@ -320,5 +379,8 @@ export default {
|
|
|
}
|
|
|
.divider_left{
|
|
|
margin-left: -40px;
|
|
|
+}.el-button.disabled-style {
|
|
|
+ background-color: #EEEEEE;
|
|
|
+ color: #CCCCCC;
|
|
|
}
|
|
|
</style>
|
zhaigk