登录短信验证登录增加校验

src/main/resources/static/css/account/login.css

@@ -10,8 +10,7 @@ li{list-style:none}
  .login-image{ width: 460px;height: 348px;float: left;margin-top: 60px; }
  .login-image img{ width: 460px;height: 348px;display: block; }
  .loginForm{float:right;width:400px;padding:0px 24px;font-size:14px;position:relative;height: 100%;box-sizing: border-box;}
- .loginForm h1{color:#22272e;font-size:14px;font-weight:normal;line-height:24px;}
- .loginForm h2{color:#E15616;font-size:24px;font-weight:bold;line-height:30px;}
+ .loginForm h2{color:#E15616;font-size:24px;font-weight:bold;line-height:30px;text-align: center;}
  .loginForm .formLine-tabs{ width: 100%;height: 66px;box-sizing: border-box;padding: 21px 0;float: left;margin-bottom: 10px;}
  .loginForm .formLine-tabs .tabs-item{ width: 50%;height: 24px;box-sizing: border-box;float: left;display: block;line-height: 24px;font-size: 18px;color: #22272E;position: relative;text-align: center;}
  .loginForm .formLine-tabs .tabs-item:before{content: '';width: 24px;height: 4px;background: #FFFFFF;position: absolute;bottom: -5px;left: 50%;margin-left: -12px;}
@@ -74,6 +73,7 @@ li{list-style:none}
  .verify-wrap{margin-top: 0;float: left;height: 46px;}
  .verify-wrap .drag-btn{top: 0;height: 43px;}
  .verify-wrap .fix-tips, .verify-msg{line-height: 44px;}
+ .verify-wrap .drag-progress{ top: 2px;}
 
 }
 

src/main/resources/static/css/base/base.pc.css

@@ -46,7 +46,7 @@ iframe{width:320px !important;height: 280px !important}
 .content-model .model-title .icon{display: block;width: 16px;height: 16px;position: absolute;right: 13px;top: 13px;z-index: 999;cursor: pointer;}
 .content-model .model-title .icon:before{width: 16px;height: 16px;background-position:-315px -2px;}
 .content-model .model-content{width: 100%;height: 128px;box-sizing: border-box;padding: 16px 12px;}
-.content-model .model-content .model-form{width: 100%;height: 48px;float: left;}
+.content-model .model-content .model-form{width: 100%;height: 48px;float: left;position: relative;}
 .content-model .model-content .model-form .input{width: 134px;height: 46px;outline: none;float: left;border: 1px solid #b8bfca;border-radius: 2px;padding: 0 10px;font-size: 14px;}
 .content-model .model-content .model-form .image{width: 120px;height: 48px;float: left;margin-left: 10px;border-radius: 2px;}
 .content-model .model-content .model-form .image img{width: 100%;height: 47px;display: block;border-radius: 2px;}

src/main/resources/static/css/base/form.css

@@ -24,6 +24,9 @@
 .formLine .checked.show{display:block}
 .formLine .errTips.show{visibility:visible}
 .formLine .errTips:before{width:20px;height:20px;background-position:-172px -296px;vertical-align:top}
+.model-form .errTips{display:block;height:20px;line-height:20px;white-space:nowrap;color:red;font-size:12px;visibility:hidden;position: absolute;bottom: -22px;}
+.model-form .errTips.show{visibility:visible}
+.model-form .errTips:before{width:20px;height:20px;background-position:-172px -296px;vertical-align:top}
 .formLine .showPwd{position:absolute;right:22px;top:42px;width:22px;height:16px;cursor:pointer}
 .formLine .showPwd:before{width:22px;height:20px;background-position:-240px -299px}
 .formLine .showPwd.on:before{width:22px;height:20px;background-position:-205px -299px}
@@ -80,8 +83,11 @@
 .formLine .checked:before{width:4.4vw;height:4.4vw;background-position:-18vw -10vw;}
 .formLine .errTips{display:block;height:4.4vw;line-height:4.4vw;white-space:nowrap;color:red;font-size:3vw;text-align:left;visibility:hidden}
 .formLine .checked.show{display:block}
+.model-form .checked.show{display:block}
 .formLine .errTips.show{visibility:visible}
+.model-form .errTips.show{visibility:visible}
 .formLine .errTips:before{width:4.4vw;height:4.4vw;background-position:-26.2vw -9.2vw;vertical-align:top}
+.model-form .errTips:before{width:4.4vw;height:4.4vw;background-position:-26.2vw -9.2vw;vertical-align:top}
 .formLine .showPwd{display:none;}
 .formLine.code input{width:57.4vw}
 .formLine.code .checked{right:auto;left:50vw;}

src/main/resources/static/js/account/login.js

@@ -1,6 +1,6 @@
 var loginPage = new Vue({
     el: "#loginPage",
-    mixins: [cmSysVitaMixins],
+    mixins: [cmSysVitaMixins,loginMixins],
     data: {
         maxtime:60,
         loginLoading: false,
@@ -31,71 +31,34 @@ var loginPage = new Vue({
             shopId: '',
             token:'',
         },
-        accountParams: {// 账号密码登录
-            mobileOrEmail: '', //用户登录账号
-            password: '', //用户登录密码
-        },
-        codeParams:{// 验证码登录
-            mobile:'',
-            code:''
-        },
-        smsCodeParams:{// 获取手机短信验证码
-            mobile: '', //用户登录手机号
-        },
         isWeChat: false,
         text:'',
         stautsfalse:false,
         infofalse:false,
         isSlideFinishState:true,
-        loginTabs:1,
+        loginTabs:0,
         mobilCount:0,
         mobileCodeText:'获取验证码',
         mobilTime:null,
         isMobileDisabled:false,
+        slideVerify:null
     },
     computed: {
 
     },
     methods: {
         handleTabsClick(index){
+            const _self = this;
             this.loginTabs = index;
             clearAllErrorTxt($('input'));
+            if(index === 1){
+                this.isSlideFinishState = true
+                this.initSlideVerify()
+            }
         },
         handleHideBg(){
             this.stautsfalse=false;
         },
-        handleCodeMobileInput(e){// 监听输入手机号
-            this.codeParams.mobile = this.smsCodeParams.mobile = e.target.value;
-        },
-        handleSubLogin(){// 点击登录
-            if(this.loginTabs === 0){
-                this.userPasswordLogin();
-            }else{
-                this.userCodeLogin();
-            }
-        },
-        userCodeLogin(){// 短信验证码登录
-            const _self = this;
-            if (this.loginLoading) { return false; }
-            this.$nextTick(function(){
-                if (!verifyForm()) { return false; }
-                _self.loginLoading = true;
-                UserApi.userCodeLogin(_self.codeParams,function(response){
-                    _self.userUpdataeStatus(response)
-                });
-            });
-        },
-        userPasswordLogin(){// 账号登录
-            const _self = this;
-            if (this.loginLoading) { return false; }
-            this.$nextTick(function(){
-                if (!verifyForm()) { return false; }
-                _self.loginLoading = true;
-                UserApi.PostLoginAccount(_self.accountParams,function(response){
-                    _self.userUpdataeStatus(response)
-                });
-            });
-        },
         userUpdataeStatus(response){// 更新登录
             const _self = this;
             _self.loginLoading = false;
@@ -146,37 +109,6 @@ var loginPage = new Vue({
                 CAIMEI.Alert(response.msg,'确定',false);
             }
         },
-        handleMobileCode(){// 点击获取短信验证码
-            const _self = this;
-            if( this.isMobileDisabled){ return }
-            this.$nextTick(function() {
-                if (!verifyCheack('.massageBtn')) { return false; }
-                UserApi.userLoginCode(_self.smsCodeParams,function (response) {
-                    if(response.code === 0){
-                        CAIMEI.dialog('获取验证码成功~',false,function () {});
-                        var TIME_COUNT = 60;
-                        if (!_self.mobilTime) {
-                            _self.mobilCount = TIME_COUNT;
-                            _self.isMobileDisabled = true;
-                            _self.mobilTime = setInterval(function(){
-                                if (_self.mobilCount > 1 && _self.mobilCount <= TIME_COUNT) {
-                                    _self.mobilCount--;
-                                    _self.mobileCodeText = _self.mobilCount +'s';
-                                } else {
-                                    _self.isMobileDisabled = false;
-                                    clearInterval(_self.mobilTime);
-                                    _self.mobilTime = null;
-                                    _self.mobileCodeText = '获取验证码';
-                                }
-                            },1000)
-                        }
-                    }else{
-                        CAIMEI.Alert(response.msg,'确定',false);
-                        _self.isMobileDisabled = false;
-                    }
-                })
-            })
-        },
         toQrCodeLogin(){//切换微信登录二维码
             const _self = this;
             let timeClock = null;
@@ -333,30 +265,35 @@ var loginPage = new Vue({
         information(){
             window.location.href='/supplier/information.html';
             this.SetSoragesInfo( this.applyUse);
+        },
+        initSlideVerify(){
+            const _self = this
+            this.$nextTick(function (){
+                const SlideVerifyPlug = window.slideVerifyPlug;
+                $('#verify-wrap').html('')
+                const slideVerify = new SlideVerifyPlug('#verify-wrap', {
+                    wrapWidth: '350',//设置 容器的宽度 ,不设置的话，会设置成100%，需要自己在外层包层div,设置宽度，这是为了适应方便点；
+                    initText: '请向右滑动滑块',  //设置  初始的 显示文字
+                    sucessText: '验证通过',//设置 验证通过 显示的文字
+                    getSuccessState: function (res) {
+                        //当验证完成的时候 会 返回 res 值 true，只留了这个应该够用了
+                        if (slideVerify.slideFinishState) {
+                            $('.value').html(slideVerify.slideFinishState)
+                            $('#resetBtn').removeClass('prohibit')
+                            _self.isSlideFinishState = false;
+                        }
+                    }
+                });
+            })
         }
     },
     created: function () {
         const userAgent = navigator.userAgent.toLowerCase();
         this.isWeChat = userAgent.match(/MicroMessenger/i);
-        // this.weChatAutoLogin();
+        this.initSlideVerify();
     },
     mounted: function () {
         const _self = this;
-        const SlideVerifyPlug = window.slideVerifyPlug;
-        const slideVerify = new SlideVerifyPlug('#verify-wrap', {
-            wrapWidth: '350',//设置 容器的宽度 ,不设置的话，会设置成100%，需要自己在外层包层div,设置宽度，这是为了适应方便点；
-            initText: '请向右滑动滑块',  //设置  初始的 显示文字
-            sucessText: '验证通过',//设置 验证通过 显示的文字
-            getSuccessState: function (res) {
-                //当验证完成的时候 会 返回 res 值 true，只留了这个应该够用了
-                console.log(res);
-                if (slideVerify.slideFinishState) {
-                    $('.value').html(slideVerify.slideFinishState)
-                    $('#resetBtn').removeClass('prohibit')
-                    _self.isSlideFinishState = false;
-                }
-            }
-        });
         $('body').on("focus",'[needverify]:visible',function(){
             $(this).siblings('.errTips').removeClass("show").siblings('.checked').removeClass("show");
         });

src/main/resources/static/js/account/mixins/loginMixins.js

@@ -0,0 +1,128 @@
+// 登录
+var loginMixins = function () {
+    return {
+        data() {
+            return {
+                isCodeModel:false,
+                isInputsTrue:true,
+                codeImagePath:'',
+                codeImageToken:'',
+                accountParams: {// 账号密码登录
+                    mobileOrEmail: '', //用户登录账号
+                    password: '', //用户登录密码
+                },
+                codeParams:{// 验证码登录
+                    mobile:'',
+                    code:''
+                },
+                smsCodeParams:{// 获取手机短信验证码
+                    mobile: '', //用户登录手机号
+                    token:'',
+                    imgCode:'',
+                    platformType:0,
+                    isCheckCaptcha:0,
+                    activateCodeType:7
+                },
+            }
+        },
+        methods: {
+            handleSubLogin(){// 点击账号密码登录
+                const _self = this;
+                if (this.loginLoading) { return false; }
+                this.$nextTick(function(){
+                    if (!verifyForm()) { return false; }
+                    _self.loginLoading = true;
+                    UserApi.PostLoginAccount(_self.accountParams,function(response){
+                        _self.userUpdataeStatus(response)
+                    });
+                });
+            },
+            handleCodeLogin(){// 短信验证码登录
+                const _self = this;
+                if (this.loginLoading) { return false; }
+                this.$nextTick(function(){
+                    if (!verifyForm()) { return false; }
+                    _self.loginLoading = true;
+                    UserApi.userCodeLogin(_self.codeParams,function(response){
+                        _self.userUpdataeStatus(response)
+                    });
+                });
+            },
+            handleCheckMobile(){// 校验手机是否已注册
+                const _self = this;
+                if (!verifyCheack('.massageBtn')) { return false; }
+                if (this.isMobileDisabled) { return false; }
+                UserApi.userCheckePhone({mobile: this.smsCodeParams.mobile},function(response){
+                    if(response.code === 0){
+                        _self.handleShowImage();
+                    }else{
+                        setErrorTxt($('.massageBtn'),response.msg)
+                    }
+                })
+            },
+            handleShowImage() {//获取图形验证码
+                const _self = this;
+                PublicApi.getImgVerifyCode({platformType: 0},function(response){
+                    if(response.code === 0){
+                        _self.smsCodeParams.imgCode = '';
+                        _self.codeImagePath = response.data.baseImage;
+                        _self.smsCodeParams.token = response.data.token;
+                        _self.isCodeModel = true;
+                    }else{
+                        CAIMEI.Alert(response.msg,'确定',false);
+                    }
+                })
+            },
+            handleMobileCode(){// 点击获取短信验证码
+                const _self = this;
+                if( this.isMobileDisabled){ return }
+                this.$nextTick(function() {
+                    if (!verifyCheack('.codeMsgButton')) { return false; }
+                    UserApi.getRegisterMobileCode(_self.smsCodeParams,function (response) {
+                        if(response.code === 0){
+                            _self.isCodeModel = false;
+                            CAIMEI.dialog('获取验证码成功~',false,function () {});
+                            var TIME_COUNT = 60;
+                            if (!_self.mobilTime) {
+                                _self.mobilCount = TIME_COUNT;
+                                _self.isMobileDisabled = true;
+                                _self.mobilTime = setInterval(function(){
+                                    if (_self.mobilCount > 1 && _self.mobilCount <= TIME_COUNT) {
+                                        _self.mobilCount--;
+                                        _self.mobileCodeText = _self.mobilCount +'s';
+                                    } else {
+                                        _self.isMobileDisabled = false;
+                                        clearInterval(_self.mobilTime);
+                                        _self.mobilTime = null;
+                                        _self.mobileCodeText = '获取验证码';
+                                    }
+                                },1000)
+                            }
+                        }else{
+                            _self.handleShowImage();
+                            _self.isMobileDisabled = false;
+                            setErrorTxt($('.codeMsgButton'),response.msg)
+                        }
+                    })
+                })
+            },
+            handleRefreshCodeImage:function(){
+                this.handleShowImage()
+            },
+            handleCodeMobileInput(e){// 监听输入手机号
+                this.codeParams.mobile = this.smsCodeParams.mobile = e.target.value;
+                this.handleCheckInput()
+            },
+            handleCodeInput(e){// 监听输入短信验证码
+                this.codeParams.code = e.target.value;
+                this.handleCheckInput()
+            },
+            handleCheckInput() {// 控制按钮按钮高亮
+                this.isInputsTrue = !(this.codeParams.mobile !== '' && this.codeParams.code !== '')
+            },
+            handleCloseCodeModel:function(){
+                this.isCodeModel = false;
+            },
+        }
+    }
+}();

src/main/resources/static/js/account/register-club.js

@@ -11,7 +11,7 @@ var registerPage = new Vue({
         mobilTime:null,
         isMobileDisabled:false,
         isCodeModel:false,
-        codeImagePath:'https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1819816496.jpg',
+        codeImagePath:'',
         codeImageToken:'',
         imageCode:'',
         clubUser: {
@@ -134,66 +134,60 @@ var registerPage = new Vue({
                 });
             });
         },
-        getMobileImage:function() {//获取图形验证码
-            var _self = this;
-            var pass = verifyCheack('.massageBtn');
-            if (_self.isMobileDisabled) { return false; }
-            this.$nextTick(function() {
-                if (!pass) {
-                    return false;
+        handleShowImage:function() {//获取图形验证码
+            const _self = this;
+            if (!verifyCheack('.massageBtn')) { return false; }
+            if (this.isMobileDisabled) { return false; }
+            PublicApi.getImgVerifyCode({platformType: 0},function(response){
+                if(response.code === 0){
+                    _self.imageCode = '';
+                    _self.codeImagePath = response.data.baseImage;
+                    _self.codeImageToken = response.data.token;
+                    _self.isCodeModel = true;
+                }else{
+                    CAIMEI.Alert(response.msg,'确定',false);
                 }
-                PublicApi.getImgVerifyCode({platformType: 0},function(response){
-                    if(response.code == 0){
-                        _self.imageCode = '';
-                        _self.codeImagePath = response.data.baseImage;
-                        _self.codeImageToken = response.data.token;
-                        _self.isCodeModel = true;
-                    }else{
-                        CAIMEI.Alert(response.msg,'确定',false);
-                    }
-                })
-            });
+            })
         },
         getMobileCodeFn:function(){//机构注册获取注册短信验证码
-            var _self = this;
-            if(_self.imageCode == ''){
-                CAIMEI.dialog('请输入图形验证码',false,function () {});
-                return
-            }
-            var params = {
-                    mobile:_self.clubUser.phone,
-                    isCheckCaptcha:0,
-                    imgCode:_self.imageCode,
-                    token:_self.codeImageToken,
-                    activateCodeType:2,
-                    platformType:0
-                };
-            _self.isMobileDisabled = true;
-            UserApi.getRegisterMobileCode(params,function (response) {
-                if(response.code == 0){
-                    _self.isCodeModel = false;
-                    CAIMEI.dialog('验证短信已发送',false,function () {});
-                    var TIME_COUNT = 60;
-                    if (!_self.mobilTime) {
-                        _self.mobilCount = TIME_COUNT;
-                        _self.isMobileDisabled = true;
-                        _self.mobilTime = setInterval(function(){
-                        if (_self.mobilCount > 1 && _self.mobilCount <= TIME_COUNT) {
-                            _self.mobilCount--;
-                            _self.mobileCodeText = _self.mobilCount +'s重新发送';
-                        } else {
-                            _self.isMobileDisabled = false;
-                            clearInterval(_self.mobilTime);
-                            _self.mobilTime = null;
-                            _self.mobileCodeText = '获取验证码';
+            const _self = this;
+            const params = {
+                mobile: _self.clubUser.phone,
+                isCheckCaptcha: 0,
+                imgCode: _self.imageCode,
+                token: _self.codeImageToken,
+                activateCodeType: 2,
+                platformType: 0
+            };
+            if( this.isMobileDisabled){ return }
+            this.$nextTick(function() {
+                if (!verifyCheack('.codeMsgButton')) { return false; }
+                UserApi.getRegisterMobileCode(params,function (response) {
+                    if(response.code == 0){
+                        _self.isCodeModel = false;
+                        CAIMEI.dialog('验证短信已发送',false,function () {});
+                        var TIME_COUNT = 60;
+                        if (!_self.mobilTime) {
+                            _self.mobilCount = TIME_COUNT;
+                            _self.isMobileDisabled = true;
+                            _self.mobilTime = setInterval(function(){
+                                if (_self.mobilCount > 1 && _self.mobilCount <= TIME_COUNT) {
+                                    _self.mobilCount--;
+                                    _self.mobileCodeText = _self.mobilCount +'s重新发送';
+                                } else {
+                                    _self.isMobileDisabled = false;
+                                    clearInterval(_self.mobilTime);
+                                    _self.mobilTime = null;
+                                    _self.mobileCodeText = '获取验证码';
+                                }
+                            },1000)
                         }
-                    },1000)
+                    }else{
+                        _self.handleShowImage();
+                        _self.isMobileDisabled = false;
+                        setErrorTxt($('.codeMsgButton'),response.msg);
                     }
-                }else{
-                    CAIMEI.Alert(response.msg,'确定',false);
-                    _self.isMobileDisabled = false;
-                    _self.isCodeModel = false;
-                }
+                })
             })
         },
         clubUpgrade:function() {//升级会员机构
@@ -296,7 +290,7 @@ var registerPage = new Vue({
             $('#userNameType').siblings('.errTips').removeClass("show");
         },
         refreshCodeImage:function(){
-            this.getMobileImage()
+            this.handleShowImage()
         },
         closeCodeModel:function(){
             this.isCodeModel = false;

src/main/resources/static/js/common/serviceapi/user.service.js

@@ -28,7 +28,7 @@ var UserApi = {
                 callback(res)
             });
         },
-        userLoginCode : function (params,callback) {//获取登录短信验证码
+        userCheckePhone : function (params,callback) {//获取登录短信验证码
             Http.AjaxService({
                 url:'/user/login/code',
                 type:'get',

src/main/resources/templates/account/login.html

@@ -14,21 +14,36 @@
 
 <!-- 二级页面 -->
 <div id="loginPage">
-    <div class="loginWrap clear">
+    <div class="loginWrap clear" v-cloak>
         <div class="login-image">
             <img src="/img/account/login.png" alt="">
         </div>
         <div class="loginForm">
             <div class="title">
-                <h1>欢迎登录~</h1>
                 <h2>生美 / 医美采购服务平台</h2>
             </div>
             <form v-show="!qrCodeLogin">
                 <div class="formLine-tabs">
-                    <a class="tabs-item" :class="{ current: loginTabs === 1 }" href="javascript:void(0);" @click="handleTabsClick(1)">验证码登录</a>
-                    <a class="tabs-item" :class="{ current: loginTabs === 0 }" href="javascript:void(0);" @click="handleTabsClick(0)">密码登录</a>
+                    <a class="tabs-item" :class="{ current: loginTabs === 0 }" href="javascript:void(0);" @click="handleTabsClick(0)">验证码登录</a>
+                    <a class="tabs-item" :class="{ current: loginTabs === 1 }" href="javascript:void(0);" @click="handleTabsClick(1)">密码登录</a>
                 </div>
-                <template v-if="loginTabs === 0">
+                <div v-show="loginTabs === 0">
+                    <div class="formLine" >
+                        <input  class="massageBtn"  type="text" @input="handleCodeMobileInput" v-model.trim="codeParams.mobile" placeholder="请输入手机号码" :rule="rule.mobile" maxlength="11" @blur="blurHandle($event)" needverify>
+                        <i class="checked icon mIcon"></i>
+                        <span class="errTips icon mIcon" tips="请输入正确格式的手机号"></span>
+                    </div>
+                    <div class="formLine smscode">
+                        <input type="text" class="smscode" @input="handleCodeInput" v-model.trim="codeParams.code" autocomplete="off" placeholder="请输入短信验证码" :rule="rule.code"  maxlength="6" @blur="blurHandle($event)" needverify>
+                        <i class="checked icon mIcon"></i>
+                        <span class="errTips icon mIcon" tips="请输入短信验证码"></span>
+                        <a class="code-btn" href="javascript:void(0);" @click="handleCheckMobile" :class="[isMobileDisabled  ? 'disabled' : '']">{{ mobileCodeText }}</a>
+                    </div>
+                    <div class="submit clear">
+                        <button class="btn" type="button" @click="handleCodeLogin" :disabled="isInputsTrue" :class="[isInputsTrue ?'disabled':'']">登录</button>
+                    </div>
+                </div>
+                <div v-show="loginTabs === 1">
                     <div class="formLine">
                         <input type="text" v-model.trim="accountParams.mobileOrEmail" placeholder="请输入邮箱或手机号" :rule="rule.account" maxlength="30" @blur="blurHandle($event)" needverify>
                         <i class="checked icon mIcon"></i>
@@ -40,28 +55,15 @@
                         <span class="errTips icon mIcon" tips="请输入正确的密码"></span>
                         <i class="icon showPwd" @click="showPassword($event)"></i>
                     </div>
-                </template>
-                <template v-if="loginTabs === 1">
-                    <div class="formLine" >
-                        <input  class="massageBtn"  type="text" @input="handleCodeMobileInput" v-model.trim="codeParams.mobile" placeholder="请输入手机号码" :rule="rule.mobile" maxlength="11" @blur="blurHandle($event)" needverify>
-                        <i class="checked icon mIcon"></i>
-                        <span class="errTips icon mIcon" tips="请输入正确格式的手机号"></span>
-                    </div>
-                    <div class="formLine smscode">
-                        <input type="text" class="smscode" v-model.trim="codeParams.code" autocomplete="off" placeholder="请输入短信验证码" :rule="rule.code"  maxlength="6" @blur="blurHandle($event)" needverify>
-                        <i class="checked icon mIcon"></i>
-                        <span class="errTips icon mIcon" tips="请输入短信验证码"></span>
-                        <a class="code-btn" href="javascript:void(0);" @click="handleMobileCode" :class="[isMobileDisabled  ? 'disabled' : '']">{{ mobileCodeText }}</a>
+                    <!-- 滑动验证 -->
+                    <div class="verify-wrap" id="verify-wrap"></div>
+                    <div class="submit clear">
+                        <button class="btn" type="button" @click="handleSubLogin" :disabled="isSlideFinishState" :class="[isSlideFinishState ?'disabled':'']">登录</button>
                     </div>
-                </template>
-                <!-- 滑动验证 -->
-                <div class="verify-wrap" id="verify-wrap"></div>
-                <div class="submit clear">
-                    <button class="btn" type="button" @click="handleSubLogin" :disabled="isSlideFinishState" :class="[isSlideFinishState ?'disabled':'']">登录</button>
                 </div>
                 <div class="forget">
                     <a class="btn" href="/register.html" rel="nofollow" onclick="_czc.push(['_trackEvent','登录页面','注册','点击','','Um_Event_Regirster'])">免费注册</a>
-                    <a href="/forget.html" v-if="loginTabs === 0" style="z-index: 99999">忘记密码？</a>
+                    <a href="/forget.html" v-if="loginTabs === 1" style="z-index: 99999">忘记密码？</a>
                 </div>
                 <template  v-if="!isPC && isWeChat" >
                     <div class="login-line">
@@ -102,6 +104,26 @@
             </div>
         </div>
     </div>
+    <div class="content-model"  :class="isCodeModel ? 'active' : ''">
+        <div class="model-main">
+            <div class="model-title"><p>获取短信验证码</p><i class="icon mIcon icon-close"  @click="handleCloseCodeModel"></i></div>
+            <div class="model-content">
+                <div class="model-form">
+                    <input class="input codeMsgButton" type="text" placeholder="请输入图形验证码" v-model="smsCodeParams.imgCode" maxlength="4" needverify>
+                    <div class="image"><img :src="codeImagePath" alt=""></div>
+                    <div class="refresh" @click="handleRefreshCodeImage">
+                        <i class="icon mIcon"></i>
+                        <span>刷新</span>
+                    </div>
+                    <i class="checked icon mIcon"></i>
+                    <span class="errTips icon mIcon" tips="请输入图形验证码"></span>
+                </div>
+                <div class="model-button">
+                    <div class="button"  @click="handleMobileCode">获取短信验证码</div>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 
 <!-- 引入底部 -->
@@ -110,6 +132,7 @@
 <script charset="utf-8" type="text/javascript" src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/lib/slideVerify.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/user.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/account/mixins/loginMixins.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/account/login.js(v=${version})}"></script>
 </body>
 </html>

src/main/resources/templates/account/register-club.html

@@ -36,7 +36,7 @@
                     <input type="text" v-model.trim="clubUser.code" autocomplete="off" placeholder="请输入短信验证码" :rule="rule.code"  maxlength="6" @blur="blurHandle($event)" needverify>
                     <i class="checked icon mIcon"></i>
                     <span class="errTips icon mIcon" tips="请输入有效短信验证码"></span>
-                    <a class="getCode" href="javascript:void(0);" @click="getMobileImage" :class="[isMobileDisabled  ? 'disabled' : '']">{{ mobileCodeText }}</a>
+                    <a class="getCode" href="javascript:void(0);" @click="handleShowImage" :class="[isMobileDisabled  ? 'disabled' : '']">{{ mobileCodeText }}</a>
                 </div>
                 <div class="formLine">
                     <p><em>*</em>登录密码：</p>
@@ -241,12 +241,14 @@
             <div class="model-title"><p>获取短信验证码</p><i class="icon mIcon icon-close"  @click="closeCodeModel"></i></div>
             <div class="model-content">
                 <div class="model-form">
-                    <input class="input" type="text" placeholder="请输入图形验证码" v-model="imageCode" maxlength="4">
+                    <input class="input codeMsgButton" type="text" placeholder="请输入图形验证码" v-model="imageCode" maxlength="4">
                     <div class="image"><img :src="codeImagePath" alt=""></div>
                     <div class="refresh" @click="refreshCodeImage">
                         <i class="icon mIcon"></i>
                         <span>刷新</span>
                     </div>
+                    <i class="checked icon mIcon"></i>
+                    <span class="errTips icon mIcon" tips="请输入图形验证码"></span>
                 </div>
                 <div class="model-button">
                     <div class="button"  @click="getMobileCodeFn">获取短信验证码</div>