灌糖包子
662b22576d
Convert captcha vendor templates and DOM selectors from id-based tianai naming to class-based captcha naming. Update the shared captcha container, common tips/loading helpers, and slider/rotate/concat/disable/image-click implementations so template markup, DOM queries, and less selectors stay aligned. Keep captcha.js as the single style entry for the captcha module and remove per-component less imports from the submodule JavaScript files.
140 lines
3.9 KiB
JavaScript
140 lines
3.9 KiB
JavaScript
import {
|
|
Dom,
|
|
CommonCaptcha,
|
|
clearAllPreventDefault,
|
|
down,
|
|
initConfig,
|
|
destroyEvent,
|
|
} from "../common/common.js";
|
|
|
|
const TYPE = "CONCAT";
|
|
|
|
function getTemplate(styleConfig) {
|
|
return `
|
|
<div class="captcha captcha-slider captcha-concat">
|
|
<div class="slider-tip">
|
|
<span class="captcha-slider-move-track-font" >拖动滑块完成拼图</span>
|
|
</div>
|
|
<div class="content">
|
|
<div class="captcha-slider-concat-img-div">
|
|
<img class="captcha-slider-concat-slider-img" src="" alt/>
|
|
</div>
|
|
<div class="captcha-slider-concat-bg-img"></div>
|
|
<div class="captcha-tips"></div>
|
|
</div>
|
|
<div class="slider-move">
|
|
<div class="slider-move-track">
|
|
<div class="captcha-slider-move-track-mask"></div>
|
|
<div class="slider-move-shadow"></div>
|
|
</div>
|
|
<div class="slider-move-btn captcha-slider-move-btn">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
class Concat extends CommonCaptcha {
|
|
constructor(divId, styleConfig) {
|
|
super();
|
|
this.boxEl = Dom(divId);
|
|
this.styleConfig = styleConfig;
|
|
this.type = TYPE;
|
|
this.currentCaptchaData = {};
|
|
}
|
|
|
|
init(captchaData, endCallback, loadSuccessCallback) {
|
|
// 重载样式
|
|
this.destroy();
|
|
this.boxEl.append(getTemplate(this.styleConfig));
|
|
this.el = this.boxEl.find(".captcha");
|
|
this.loadStyle();
|
|
// 按钮绑定事件
|
|
this.el
|
|
.find(".captcha-slider-move-btn")
|
|
.mousedown(down.bind(null, this));
|
|
this.el
|
|
.find(".captcha-slider-move-btn")
|
|
.touchstart(down.bind(null, this));
|
|
clearAllPreventDefault(this.el);
|
|
// 绑定全局
|
|
window.currentCaptcha = this;
|
|
// 载入验证码
|
|
this.loadCaptchaForData(this, captchaData);
|
|
this.endCallback = endCallback;
|
|
if (loadSuccessCallback) {
|
|
// 加载成功
|
|
loadSuccessCallback(this);
|
|
}
|
|
return this;
|
|
}
|
|
|
|
destroy() {
|
|
destroyEvent();
|
|
const existsCaptchaEl = this.boxEl.children(".captcha");
|
|
if (existsCaptchaEl) {
|
|
existsCaptchaEl.remove();
|
|
}
|
|
}
|
|
|
|
doMove() {
|
|
const moveX = this.currentCaptchaData.moveX;
|
|
this.el
|
|
.find(".captcha-slider-move-btn")
|
|
.css("transform", "translate(" + moveX + "px, 0px)");
|
|
this.el
|
|
.find(".captcha-slider-concat-img-div")
|
|
.css("background-position-x", moveX + "px");
|
|
this.el
|
|
.find(".captcha-slider-move-track-mask")
|
|
.css("width", moveX + "px");
|
|
}
|
|
|
|
loadStyle() {
|
|
let sliderImg = "";
|
|
let moveTrackMaskBorderColor = "#00f4ab";
|
|
let moveTrackMaskBgColor = "#a9ffe5";
|
|
const styleConfig = this.styleConfig;
|
|
if (styleConfig) {
|
|
sliderImg = styleConfig.btnUrl;
|
|
moveTrackMaskBgColor = styleConfig.moveTrackMaskBgColor;
|
|
moveTrackMaskBorderColor = styleConfig.moveTrackMaskBorderColor;
|
|
}
|
|
this.el
|
|
.find(".slider-move .slider-move-btn")
|
|
.css("background-image", "url(" + sliderImg + ")");
|
|
// this.el.find(".captcha-slider-move-track-font").text(title);
|
|
this.el
|
|
.find(".captcha-slider-move-track-mask")
|
|
.css("border-color", moveTrackMaskBorderColor);
|
|
this.el
|
|
.find(".captcha-slider-move-track-mask")
|
|
.css("background-color", moveTrackMaskBgColor);
|
|
}
|
|
|
|
loadCaptchaForData(that, data) {
|
|
const bgImg = that.el.find(".captcha-slider-concat-bg-img");
|
|
const sliderImg = that.el.find(".captcha-slider-concat-img-div");
|
|
bgImg.css("background-image", "url(" + data.data.backgroundImage + ")");
|
|
sliderImg.css("background-image", "url(" + data.data.backgroundImage + ")");
|
|
sliderImg.css("background-position", "0px 0px");
|
|
var backgroundImageHeight = data.data.backgroundImageHeight;
|
|
var height =
|
|
((backgroundImageHeight - data.data.data.randomY) /
|
|
backgroundImageHeight) *
|
|
180;
|
|
sliderImg.css("height", height + "px");
|
|
|
|
that.currentCaptchaData = initConfig(
|
|
bgImg.width(),
|
|
bgImg.height(),
|
|
sliderImg.width(),
|
|
sliderImg.height(),
|
|
300 - 63 + 5,
|
|
);
|
|
that.currentCaptchaData.currentCaptchaId = data.data.id;
|
|
}
|
|
}
|
|
|
|
export default Concat;
|