同时兼容两套验证码

This commit is contained in:
木鱼(iFish) 2015-07-31 19:54:22 +08:00
parent bf65ab84be
commit 0d71b701d7
8 changed files with 105 additions and 74 deletions

View File

@ -68,19 +68,18 @@
padding: 0;
overflow: hidden;
position: relative;
min-height: 190px;
}
/*#user-login-dialog .verify-code input {
#user-login-dialog .verify-code input {
float: left;
padding: 12px;
line-height: 14px;
border: 1px solid #bfbfbf;
width: 90px;
margin: 0;
}*/
}
/*#user-login-dialog .verify-code span {
#user-login-dialog .verify-code span.verify-code-image {
border: 1px solid #bebebe;
background-color: #fff;
width: 86px;
@ -93,21 +92,17 @@
background-position: 50% 50%;
background-size: auto;
cursor: pointer;
}*/
#user-login-dialog .verify-code span {
cursor: pointer;
}
#user-login-dialog .verify-code a {
display: block;
width: auto;
line-height: 16px;
/*margin-top: 24px;
margin-top: 24px;
float: left;
margin-left: 10px;*/
margin-left: 10px;
color: #2c90ed;
text-decoration: underline;
position: absolute;
right: 0;
top: 0;
@ -116,3 +111,18 @@
#user-login-dialog .verify-code a:hover {
color: #1988ee;
}
/*触摸*/
#user-login-dialog .verify-code-touch input[type=text] {
display: none;
}
#user-login-dialog .verify-code-touch span.verify-code-image {
margin-left: 0;
width: 293px;
height: 190px;
}
#user-login-dialog .verify-code-touch a {
margin-top: 5px;
}

View File

@ -201,7 +201,7 @@
float: left;
}
/*#ticket-submit-info .ticket-submit-vc span {
#ticket-submit-info .ticket-submit-vc span.verify-code-image {
margin-left: 15px;
width: 85px;
height: 36px;
@ -212,7 +212,7 @@
background-position: 50% 50%;
background-color: #fff;
cursor: pointer;
}*/
}
#ticket-submit-info .ticket-submit-vc a {
/*vertical-align: bottom;
@ -303,3 +303,13 @@
color: #4169E1;
}
/*点触验证码*/
#ticket-submit-info .ticket-submit-info-vc .verify-code-touch input {
display: none;
}
#ticket-submit-info .ticket-submit-info-vc .verify-code-touch span.verify-code-image {
width: 293px;
height: 190px;
margin-left: 0;
}

View File

@ -827,14 +827,9 @@
<input type="password" value="" id="" placeholder="请输入登录密码" />
<a href="https://kyfw.12306.cn/otn/forgetPassword/initforgetMyPassword" target="_blank" class="help-link">忘记密码</a>
</div>
<!--<div class="verify-code" data-target="login">
<input type="text" value="" id="" placeholder="验证码" />
<span></span>
<a href="javascript:;" class="refresh-vc">看不清?换一张</a>
</div>-->
<div class="verify-code" data-target="login">
<input type="hidden" value="" id="" placeholder="验证码" />
<img src="/images/loading.gif" class="vc-touchclick" />
<input type="text" value="" id="" placeholder="验证码" />
<span class="verify-code-image"></span>
<a href="javascript:;" class="refresh-vc">换一张</a>
</div>
<footer data-col="2">
@ -885,8 +880,8 @@
<i class="fa fa-times cancel-button"></i>
</header>
<p class="ticket-submit-vc verify-code" data-target="order">
<input type="hidden" value="" id="" placeholder="验证码" />
<img src="/images/loading.gif" class="vc-touchclick" />
<input type="text" value="" id="" placeholder="验证码" />
<span class="verify-code-image"></span>
<a href="javascript:;" class="refresh-vc">换一张</a>
</p>
<p class="ticket-submit-status">

View File

@ -25,10 +25,10 @@
var resubmitBtn = $("#ticket-submit-info .ticket-submit-info-status-failed button.button-primary");
var init = function () {
//$("#ticket-submit-info .ticket-submit-vc input:text").keyup(function () {
// if (this.value.length === 4)
// that.submitOrder();
//});
$("#ticket-submit-info .ticket-submit-vc input:text").keyup(function () {
if (this.value.length === 4)
that.submitOrder();
});
submitBtn.click(that.submitOrder);
//重新提交
@ -85,7 +85,7 @@
this.submitOrder = function () {
media.stop();
var randCode = $("#ticket-submit-info .ticket-submit-vc input:hidden").val();
var randCode = $("#ticket-submit-info .ticket-submit-vc input").val();
if (!param.fastSubmitOrderSkipVc && !randCode.length) {
mp.showMessagePopup("error", "请完成验证...");
return;

View File

@ -100,11 +100,11 @@
};
//监听文档级别事件,显示悬浮窗
$(document).on("refreshDialog.widget", function () {
var e = $(this);
$(document).on("refreshDialog.widget", function (ev) {
var e = $(ev.target);
var height = e.height();
e.animate({ top: "-" + (height / 2) + "px" }, 'fast', 'linear');
e.animate({ marginTop: "-" + (height / 2) + "px" }, 'fast', 'linear');
});
$(document).on("click.widget", ".float-dialog .cancel-button", function () {
exports.hideFloatDialog($(this).closest(".float-dialog"));

View File

@ -137,34 +137,35 @@
closeOnAction: false
});
};
exports.showSecurityAlert = function () {
$.showModalDialog("<div style='font-size: 14px;line-height:22px; width:430px;'><span style='color:red;font-size:120%;'>12306账号密码发生大规模泄露请尽快修改密码</span>\
<br /><span style='color:green;'>猎豹不会上传保存您的密码请放心使用</span><br />\
<span style=''>如使用过其它第三方抢票含离线抢票建议修改密码</span>\
<span style=''>此事警方已介入<a href='https://kyfw.12306.cn/otn/gonggao/t20141225_2448.html' style='text-decoration:underline;' target='_blank'>点此查看详情</a></span></div>", {
image: "/images/cat1.png",
buttons: [
{
text: "立刻修改密码",
type: "primary",
callback: function () {
window.open("https://kyfw.12306.cn/otn/userSecurity/init");
localStorage["tip_showSecurityAlert"] = "1";
return true;
}
}, {
text: "我知道了",
callback: function () {
localStorage["tip_showSecurityAlert"] = "1";
return true;
}
}
],
closeOnAction: false
});
};
if (localStorage["tip_showSecurityAlert"] != "1")
exports.showSecurityAlert();
//exports.showSecurityAlert = function () {
// $.showModalDialog("<div style='font-size: 14px;line-height:22px; width:430px;'><span style='color:red;font-size:120%;'>12306账号密码发生大规模泄露请尽快修改密码。</span>\
// <br /><span style='color:green;'>猎豹不会上传保存您的密码,请放心使用。</span><br />\
// <span style=''>如使用过其它第三方抢票(含离线抢票),建议修改密码。</span>\
// <span style=''>此事警方已介入,<a href='https://kyfw.12306.cn/otn/gonggao/t20141225_2448.html' style='text-decoration:underline;' target='_blank'>点此查看详情</a>。</span></div>",
// {
// image: "/images/cat1.png",
// buttons: [
// {
// text: "立刻修改密码",
// type: "primary",
// callback: function () {
// window.open("https://kyfw.12306.cn/otn/userSecurity/init");
// localStorage["tip_showSecurityAlert"] = "1";
// return true;
// }
// }, {
// text: "我知道了",
// callback: function () {
// localStorage["tip_showSecurityAlert"] = "1";
// return true;
// }
// }
// ],
// closeOnAction: false
// });
//};
//if (localStorage["tip_showSecurityAlert"] != "1")
// exports.showSecurityAlert();
exports.showNonExtensionInstall = function () {
var isLb = navigator.userAgent.indexOf("LBBROWSER") != -1;

View File

@ -25,11 +25,11 @@
exports.load = function (target) {
var type = target.attr("data-target");
var config = exports.data[type];
var imageEle = target.find("img");
//var imageEle = target.find("span");
//var imageEle = target.find("img");
var imageEle = target.find("span");
//imageEle.css({ "background-image": "url(/images/loading.gif)", "background-size": "auto" });
imageEle.attr({ "src": "/images/loading.gif" });
imageEle.css({ "background-image": "url(/images/loading.gif)", "background-size": "auto" });
//imageEle.attr({ "src": "/images/loading.gif" });
imageEle.trigger("verifyCodeOnLoad");
ajax.loadImage(config.url, config.refer, function (e) {
if (this.url.indexOf("base64,eyJ2YWxpZGF0ZU1lc3") !== -1 || this.url.indexOf("data:image/jpeg;base64,=") !== -1) {
@ -38,15 +38,28 @@
setTimeout(function () {
exports.load(target);
}, 1000);
} else {
//imageEle.css({ "background-image": "url(" + this.url + ")", "background-size": "100% 100%" });
imageEle.attr({ "src": this.url });
return;
}
var x = new Image();
x.onload = function () {
var isTraditional = x.naturalHeight < 60;
imageEle.parent().removeClass("verify-code-touch");
!isTraditional && imageEle.parent().addClass("verify-code-touch");
isTraditional && imageEle.parent().find("input")[0].focus();
imageEle.closest(".float-dialog").trigger("refreshDialog.widget");
imageEle.css({ "background-image": "url(" + x.src + ")", "background-size": "100% 100%" });
//imageEle.attr({ "src": this.url });
imageEle.trigger("verifyCodeLoaded");
(target.is(".verify-code") ? target.closest("div, p, td") : target).find(":text, :hidden").val("");//.each(function () { this.focus(); });
}
};
x.src = this.url;
}, function () {
//imageEle.css({ "background-image": "url(/images/loading.gif)", "background-size": "auto" });
imageEle.attr({ "src": "/images/loading.gif" });
imageEle.css({ "background-image": "url(/images/loading.gif)", "background-size": "auto" });
//imageEle.attr({ "src": "/images/loading.gif" });
document.dispatchEvent(new CustomEvent("verifyCodeLoadFailed"));
});
};

View File

@ -3,10 +3,10 @@
var init = function () {
$(document)
.on("verifyCodeLoaded", "img.vc-touchclick", initEle)
.on("verifyCodeOnLoad", "img.vc-touchclick", initEle)
.on("click", "img.vc-touchclick", touchClick)
.on("click", "span.vc-touchclick-marker", removeClickMarker);
.on("verifyCodeLoaded", ".verify-code span", initEle)
.on("verifyCodeOnLoad", ".verify-code span", initEle)
.on("click", ".verify-code-touch span", touchClick)
.on("click", ".vc-touchclick-marker", removeClickMarker);
}
var initEle = function () {
@ -21,7 +21,7 @@
var removeClickMarker = function() {
var marker = $(this);
var parent = marker.parent();
var img = parent.find("img");
var img = parent.find("span");
var poslist = img.data("poslist");
for (var i = 0; i < poslist.length; i++) {
@ -29,7 +29,7 @@
poslist.splice(i, 1);
}
marker.remove();
parent.find(":hidden").val(_.map(poslist, function (e) { return e.x + "," + e.y; }).join(","));
parent.find("input").val(_.map(poslist, function (e) { return e.x + "," + e.y; }).join(","));
};
var touchClick = function (e) {
@ -68,8 +68,10 @@
parent.append(marker);
//set input
parent.find(":hidden").val(_.map(poslist, function (x) { return x.x + "," + x.y; }).join(","));
parent.find("input").val(_.map(poslist, function (x) { return x.x + "," + x.y; }).join(","));
};
init();
exports.clearMarks = initEle;
});