同时兼容两套验证码

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; padding: 0;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
min-height: 190px;
} }
/*#user-login-dialog .verify-code input { #user-login-dialog .verify-code input {
float: left; float: left;
padding: 12px; padding: 12px;
line-height: 14px; line-height: 14px;
border: 1px solid #bfbfbf; border: 1px solid #bfbfbf;
width: 90px; width: 90px;
margin: 0; margin: 0;
}*/ }
/*#user-login-dialog .verify-code span { #user-login-dialog .verify-code span.verify-code-image {
border: 1px solid #bebebe; border: 1px solid #bebebe;
background-color: #fff; background-color: #fff;
width: 86px; width: 86px;
@ -93,21 +92,17 @@
background-position: 50% 50%; background-position: 50% 50%;
background-size: auto; background-size: auto;
cursor: pointer; cursor: pointer;
}*/
#user-login-dialog .verify-code span {
cursor: pointer;
} }
#user-login-dialog .verify-code a { #user-login-dialog .verify-code a {
display: block; display: block;
width: auto; width: auto;
line-height: 16px; line-height: 16px;
/*margin-top: 24px; margin-top: 24px;
float: left; float: left;
margin-left: 10px;*/ margin-left: 10px;
color: #2c90ed; color: #2c90ed;
text-decoration: underline; text-decoration: underline;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
@ -116,3 +111,18 @@
#user-login-dialog .verify-code a:hover { #user-login-dialog .verify-code a:hover {
color: #1988ee; 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; float: left;
} }
/*#ticket-submit-info .ticket-submit-vc span { #ticket-submit-info .ticket-submit-vc span.verify-code-image {
margin-left: 15px; margin-left: 15px;
width: 85px; width: 85px;
height: 36px; height: 36px;
@ -212,7 +212,7 @@
background-position: 50% 50%; background-position: 50% 50%;
background-color: #fff; background-color: #fff;
cursor: pointer; cursor: pointer;
}*/ }
#ticket-submit-info .ticket-submit-vc a { #ticket-submit-info .ticket-submit-vc a {
/*vertical-align: bottom; /*vertical-align: bottom;
@ -303,3 +303,13 @@
color: #4169E1; 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="请输入登录密码" /> <input type="password" value="" id="" placeholder="请输入登录密码" />
<a href="https://kyfw.12306.cn/otn/forgetPassword/initforgetMyPassword" target="_blank" class="help-link">忘记密码</a> <a href="https://kyfw.12306.cn/otn/forgetPassword/initforgetMyPassword" target="_blank" class="help-link">忘记密码</a>
</div> </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"> <div class="verify-code" data-target="login">
<input type="hidden" value="" id="" placeholder="验证码" /> <input type="text" value="" id="" placeholder="验证码" />
<img src="/images/loading.gif" class="vc-touchclick" /> <span class="verify-code-image"></span>
<a href="javascript:;" class="refresh-vc">换一张</a> <a href="javascript:;" class="refresh-vc">换一张</a>
</div> </div>
<footer data-col="2"> <footer data-col="2">
@ -885,8 +880,8 @@
<i class="fa fa-times cancel-button"></i> <i class="fa fa-times cancel-button"></i>
</header> </header>
<p class="ticket-submit-vc verify-code" data-target="order"> <p class="ticket-submit-vc verify-code" data-target="order">
<input type="hidden" value="" id="" placeholder="验证码" /> <input type="text" value="" id="" placeholder="验证码" />
<img src="/images/loading.gif" class="vc-touchclick" /> <span class="verify-code-image"></span>
<a href="javascript:;" class="refresh-vc">换一张</a> <a href="javascript:;" class="refresh-vc">换一张</a>
</p> </p>
<p class="ticket-submit-status"> <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 resubmitBtn = $("#ticket-submit-info .ticket-submit-info-status-failed button.button-primary");
var init = function () { var init = function () {
//$("#ticket-submit-info .ticket-submit-vc input:text").keyup(function () { $("#ticket-submit-info .ticket-submit-vc input:text").keyup(function () {
// if (this.value.length === 4) if (this.value.length === 4)
// that.submitOrder(); that.submitOrder();
//}); });
submitBtn.click(that.submitOrder); submitBtn.click(that.submitOrder);
//重新提交 //重新提交
@ -85,7 +85,7 @@
this.submitOrder = function () { this.submitOrder = function () {
media.stop(); 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) { if (!param.fastSubmitOrderSkipVc && !randCode.length) {
mp.showMessagePopup("error", "请完成验证..."); mp.showMessagePopup("error", "请完成验证...");
return; return;

View File

@ -100,11 +100,11 @@
}; };
//监听文档级别事件,显示悬浮窗 //监听文档级别事件,显示悬浮窗
$(document).on("refreshDialog.widget", function () { $(document).on("refreshDialog.widget", function (ev) {
var e = $(this); var e = $(ev.target);
var height = e.height(); 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 () { $(document).on("click.widget", ".float-dialog .cancel-button", function () {
exports.hideFloatDialog($(this).closest(".float-dialog")); exports.hideFloatDialog($(this).closest(".float-dialog"));

View File

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

View File

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

View File

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