登录增加图形验证码

app/login/login.html

@@ -42,6 +42,10 @@
                                        <input class="form-control" :type="eyeIsOpen?'text':'password'" v-model="password" placeholder="初始密码为手机号码后六位">
                                        <i class="fa" :class="eyeIsOpen? 'fa-eye': 'fa-eye-slash'"></i>
                                    </div>
									<div class="form-group" style="display: -webkit-flex;display: flex;">
									    <input class="form-control" type="text" v-model="imgCaptcha" placeholder="请输入图形验证码" style="-webkit-flex: 1;flex: 1;">
										<img :src="imgCode" style="width: 120px;height: 34px;" @click="getImgCode"/>
									</div>
                                    <button type="submit" class="btn btn-success block full-width m-b" @click="login">登 录</button>                 
                                </form>
                            </div>
@@ -56,6 +60,10 @@
                                        <input class="form-control" type="text" v-model="captcha" placeholder="请输入短信验证码">
                                        <a class="getCaptcha" :class="{'disabled': countdown}" @click="getCaptcha">{{infoText}}</a>
                                    </div>
									<div class="form-group" style="display: -webkit-flex;display: flex;">
									    <input class="form-control" type="text" v-model="imgCaptcha" placeholder="请输入图形验证码" style="-webkit-flex: 1;flex: 1;">
										<img :src="imgCode" style="width: 120px;height: 34px;" @click="getImgCode"/>
									</div>
                                    <button type="submit" class="btn btn-success block full-width m-b" @click="login">登 录</button>
                                </form>    
                            </div>

app/login/login.js

@@ -1,3 +1,4 @@
new Vue({
    el: "#main",
    data: {
@@ -7,8 +8,13 @@ new Vue({
        captcha: '',
        eyeIsOpen: false,
        infoText: '获取验证码',
        countdown: false //是否在倒计时
        countdown: false, //是否在倒计时
		imgCode: "",
		imgCaptcha: ""
    },
	mounted() {
		this.getImgCode()
	},
    methods: {
        changeType: function(val){
            this.type = val;
@@ -17,14 +23,13 @@ new Vue({
            //先校验手机号码是否正确
            var isMobile = isMobilePhone(this.mobile);
            if(!isMobile){
                tip('请输入正确的手机号码！');
                toastr.error('请输入正确的手机号码！');
                return false;
            }
            setTimer(this);
            //发送请求
            sendToGetCaptcha(this);
			this.sendSmsCode()
        },
        login: function(){
			var vm = this
            if(this.type == 1){
                var validation = $("#form1").valid();
                if(validation){
@@ -36,14 +41,49 @@ new Vue({
                    login({
                        mobile: this.mobile,
                        captcha: this.captcha,
                        platform: 4
                    })
                        platform: 4,
						imgCaptcha: this.imgCaptcha
                    }).catch(function() {
						vm.getImgCode()
					})
                }
            }
        },
		getImgCode: getImgCode,
		sendSmsCode: sendSmsCode
    }
});
function guid() {
	return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
		var r = Math.random() * 16 | 0,
			v = c == 'x' ? r : (r & 0x3 | 0x8);
		return v.toString(16);
	});
}
	
function getImgCode() {
	var vm = this
	httpRequest.get('/weixin/imgCaptcha', {key: guid()}).then(function(res) {
		if(res.status == 200){
			vm.imgCode = res.data.image
		} else {
			toastr.error('获取图形验证码失败');
		}
	})
}
function getSmsImgCode() {
	var vm = this
	httpRequest.get('/weixin/imgCaptcha', {key: guid()}).then(function(res) {
		if(res.status == 200){
			$("#imgSmsCode img").attr('src', res.data.image)
		} else {
			toastr.error('获取图形验证码失败');
		}
	})
}
//验证码定时
function setTimer(vm) {
    var seconds = 59;
@@ -67,13 +107,15 @@ function sendToGetCaptcha(vm){
        params = {
            mobile: vm.mobile,
            type: 5,
            captchaToken: 5
            captchaToken: 5,
			imgCaptcha: vm.imgCaptcha
        };
	setTimer(this);
    httpRequest.post(url, {data: params}).then(function(res){
        if(res.status == 200){
            tip('发送成功','add');
            toastr.success('发送成功');
        }else{
            tip('获取验证码失败');
            toastr.error('获取验证码失败');
        }
    });
}
@@ -90,10 +132,11 @@ function getPublicKey(vm){
                login({
                    mobile: vm.mobile,
                    password: encryedPwd,
                    platform: 4
                    platform: 4,
					imgCaptcha: vm.imgCaptcha
                })
            }else {
               tip("获取数据失败")
               toastr.error("获取数据失败")
               $submit.removeAttr('disabled')
            }
        }else{
@@ -103,7 +146,7 @@ function getPublicKey(vm){
}
function login(data) {
    httpRequest.post('login/doctor', {data: data}).then(function(res){
    return httpRequest.post('login/doctor', {data: data}).then(function(res){
        if(res.status == 200){
            var docInfo = res.data;
            localStorage.setItem(httpRequest.agentName,JSON.stringify({
@@ -122,7 +165,37 @@ function login(data) {
            sessionStorage.setItem("userRole", JSON.stringify(docInfo.userRole));
            window.location.href = "../home/html/index.html";
        }else{
            tip(res.msg);
            toastr.error(res.msg);
			return Promise.reject()
        }
    });
}
function sendSmsCode() {
	var vm = this
	dialog({
		title:'验证码',
		content: '<div id="imgSmsCode" class="form-group" style="display: -webkit-flex;display: flex;">\
					<input id="imgSmsCaptchaCode" class="form-control" type="text" placeholder="请输入图形验证码" style="-webkit-flex: 1;flex: 1;">\
					<img style="width: 120px;height: 34px;" onclick="getSmsImgCode()"/>\
				</div>',
		okValue:'发送',
		cancelValue: "取消",
		ok: function (){
			var imgCaptcha = $('#imgSmsCaptchaCode').val()
			if(!imgCaptcha) {
				toastr.error('请输入图形验证码')
				return false
			}
			vm.imgCaptcha = imgCaptcha
			sendToGetCaptcha(vm)
		},
		cancel: function() {
			
		}
	 }).showModal();
	 
	 setTimeout(function() {
		 getSmsImgCode()
	 }, 100)
}