|
...
|
...
|
@@ -2,52 +2,146 @@ |
|
|
|
* Created by TaoHuang on 2016/12/12.
|
|
|
|
*/
|
|
|
|
|
|
|
|
var $ = require('yoho-jquery'),
|
|
|
|
tpl = require('hbs/common/captcha.hbs');
|
|
|
|
const Captcha = function(container, options) {
|
|
|
|
let optionDefault = {
|
|
|
|
useREM: null,
|
|
|
|
template: require('hbs/common/captcha.hbs'),
|
|
|
|
refreshURI: '/passport/imagesNode',
|
|
|
|
imgProcess: ''
|
|
|
|
};
|
|
|
|
|
|
|
|
var store = {
|
|
|
|
$ele: null,
|
|
|
|
clicks: [0, 0, 0, 0]
|
|
|
|
};
|
|
|
|
$.extend(this, optionDefault, options);
|
|
|
|
|
|
|
|
this.$container = $(container);
|
|
|
|
this.$imgCheck = null;
|
|
|
|
this.$imgPics = null;
|
|
|
|
this.picWidth = null;
|
|
|
|
|
|
|
|
exports.init = function($ele) {
|
|
|
|
store.$ele = $ele;
|
|
|
|
return this;
|
|
|
|
};
|
|
|
|
|
|
|
|
function _compute() {
|
|
|
|
Captcha.prototype = {
|
|
|
|
init: function() {
|
|
|
|
var self = this;
|
|
|
|
|
|
|
|
}
|
|
|
|
if (this.useREM) {
|
|
|
|
this.picWidth = this.useREM.picWidth / this.useREM.rootFontSize;
|
|
|
|
}
|
|
|
|
|
|
|
|
function _render(data) {
|
|
|
|
var $body = $(tpl(data));
|
|
|
|
this.refresh().done(function() {
|
|
|
|
self.bindEvents();
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
store.$ele.on('click', function() {
|
|
|
|
/**
|
|
|
|
* method: 绑定事件
|
|
|
|
*/
|
|
|
|
bindEvents: function() {
|
|
|
|
this.$container
|
|
|
|
.on('click.refresh', '.img-check-refresh', $.proxy(this.refresh, this))
|
|
|
|
.on('click.rotate', '.img-check-pic', $.proxy(this.rotateImg, this));
|
|
|
|
},
|
|
|
|
|
|
|
|
});
|
|
|
|
/**
|
|
|
|
* method: 渲染 dom
|
|
|
|
* @param obj data 渲染数据
|
|
|
|
* {
|
|
|
|
* imgSrc: 'src' //图片src
|
|
|
|
* }
|
|
|
|
*/
|
|
|
|
render: function(data) {
|
|
|
|
var self = this;
|
|
|
|
|
|
|
|
store.$ele.on('click', '.refresh', function() {
|
|
|
|
this.$container.html(this.template(data));
|
|
|
|
this.$imgPics = this.$container.find('.img-check-pic');
|
|
|
|
|
|
|
|
});
|
|
|
|
if (!this.useREM && !this.picWidth) {
|
|
|
|
this.picWidth = this.$imgPics.width();
|
|
|
|
}
|
|
|
|
|
|
|
|
store.$ele.empty().append($body);
|
|
|
|
}
|
|
|
|
this.$imgPics.each(function(index, elem) {
|
|
|
|
var $elem = $(elem);
|
|
|
|
var position = self.calcPosition($elem);
|
|
|
|
|
|
|
|
exports.text = function() {
|
|
|
|
$elem.css('backgroundPosition', position);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
};
|
|
|
|
/**
|
|
|
|
* method: 计算 background-position
|
|
|
|
* @param num index img-check-pic 的index
|
|
|
|
* @param num count img-check-pic
|
|
|
|
*/
|
|
|
|
calcPosition: function($elem) {
|
|
|
|
var positionX, positionY;
|
|
|
|
var index = $elem.index();
|
|
|
|
var count = parseInt($elem.attr('data-val'), 10);
|
|
|
|
var unit = this.useREM ? 'rem' : 'px';
|
|
|
|
|
|
|
|
exports.genAsync = function() {
|
|
|
|
return $.getJSON('/passport/imagesNode').then(function(result) {
|
|
|
|
if (result.code === 200) {
|
|
|
|
_render({src: result.data.images});
|
|
|
|
} else {
|
|
|
|
_render({err: result.message});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
count = count % 4;
|
|
|
|
|
|
|
|
positionX = -index * this.picWidth + unit;
|
|
|
|
positionY = -count * this.picWidth + unit;
|
|
|
|
|
|
|
|
|
|
|
|
return [positionX, positionY].join(' ');
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Handler method: 刷新验证码
|
|
|
|
*/
|
|
|
|
refresh: function() {
|
|
|
|
const self = this;
|
|
|
|
let uri = this.refreshURI;
|
|
|
|
|
|
|
|
return $.get(uri)
|
|
|
|
.done(function(result) {
|
|
|
|
let src = result.data.images;
|
|
|
|
|
|
|
|
exports.checkAsync = function() {
|
|
|
|
return $.post('/passport/captcha/img', {
|
|
|
|
verifyCode: store.clicks.join('')
|
|
|
|
});
|
|
|
|
self.render({
|
|
|
|
images: src
|
|
|
|
});
|
|
|
|
})
|
|
|
|
.fail($.noop);
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Handler method: 旋转图片
|
|
|
|
*/
|
|
|
|
rotateImg: function(event) {
|
|
|
|
var $pic = $(event.target);
|
|
|
|
var prevRotateCount = parseInt($pic.attr('data-val'), 10);
|
|
|
|
|
|
|
|
$pic.attr('data-val', prevRotateCount + 1);
|
|
|
|
|
|
|
|
$pic.css({
|
|
|
|
backgroundPosition: this.calcPosition($pic)
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* method: 获取结果
|
|
|
|
* @return string '0123'
|
|
|
|
*/
|
|
|
|
getResults: function() {
|
|
|
|
var result = [];
|
|
|
|
|
|
|
|
this.$container.find('.img-check-pic')
|
|
|
|
.each(function() {
|
|
|
|
var $elem = $(this);
|
|
|
|
var val = $elem.attr('data-val');
|
|
|
|
|
|
|
|
val = parseInt(val, 10);
|
|
|
|
|
|
|
|
result.push(val % 4);
|
|
|
|
});
|
|
|
|
|
|
|
|
return result.join('');
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
Captcha.prototype.construct = Captcha;
|
|
|
|
|
|
|
|
|
|
|
|
module.exports = Captcha; |
...
|
...
|
|
