c-zhangr1/zhgh_hrbnu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

commit

Browse Source
This commit is contained in:
Paidax
2024-07-29 11:46:09 +08:00
parent 854e197a5a
commit 05c9673aac
10 changed files with 2064 additions and 693 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.prettierrc
+14
View File
@@ -0,0 +1,14 @@
{
"printWidth": 150,
"singleQuote": false,
"tabWidth": 4,
"semi": false,
"trailingComma": "none",
"bracketSpacing": true,
"arrowParens": "always",
"rangeStart": 0,
"htmlWhitespaceSensitivity": "ignore",
"vueIndentScriptAndStyle": false,
"endOfLine": "auto",
"useTabs": false
}
pom.xml
+12
View File
@@ -53,6 +53,18 @@
<dependencies>
<dependency>
<groupId>com.xingyuv</groupId>
<artifactId>captcha-plus</artifactId>
<version>1.0.8</version>
</dependency>
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-validator</artifactId>
<version>8.0.1.Final</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>dashscope-sdk-java</artifactId>
src/main/resources/static/assets/bfwrepo/css/verify.css
+171
View File
@@ -0,0 +1,171 @@
/*数据来源： 咪嘟网 URL: www.midu5.com 代码之家 URL：www.codezhijia.com*/
/*常规验证码*/
.verify-code {
font-size: 20px;
text-align: center;
cursor: pointer;
margin-bottom: 5px;
border: 1px solid #ddd;
}
.cerify-code-panel {
height:100%;
overflow:hidden;
}
.verify-code-area {
float:left;
}
.verify-input-area {
float: left;
width: 60%;
padding-right: 10px;
}
.verify-change-area {
line-height: 30px;
float: left;
}
.varify-input-code {
display:inline-block;
width: 100%;
height: 25px;
}
.verify-change-code {
color: #337AB7;
cursor: pointer;
}
.verify-btn {
width: 200px;
height: 30px;
background-color: #337AB7;
color:#FFFFFF;
border:none;
margin-top: 10px;
}
/*滑动验证码*/
.verify-bar-area {
position: relative;
background: #FFFFFF;
text-align: center;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
}
.verify-bar-area .verify-move-block {
position: absolute;
top: 0px;
left: 0;
background: #fff;
cursor: pointer;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
box-shadow: 0 0 2px #888888;
-webkit-border-radius: 1px;
}
.verify-bar-area .verify-move-block:hover {
background-color: #337ab7;
color: #FFFFFF;
}
.verify-bar-area .verify-left-bar {
position: absolute;
top: -1px;
left: -1px;
background: #f0fff0;
cursor: pointer;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: 1px solid #ddd;
}
.verify-img-panel {
margin:0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: 1px solid #ddd;
border-radius: 3px;
position: relative;
}
.verify-img-panel .verify-refresh {
width: 25px;
height: 25px;
text-align:center;
padding: 5px;
cursor: pointer;
position: absolute;
top: 0;
right: 0;
z-index: 2;
}
.verify-img-panel .icon-refresh {
font-size: 20px;
color: #fff;
}
.verify-img-panel .verify-gap {
background-color: #fff;
position: relative;
z-index: 2;
border:1px solid #fff;
}
.verify-bar-area .verify-move-block .verify-sub-block {
position: absolute;
text-align: center;
z-index: 3;
border: 1px solid #fff;
}
.verify-bar-area .verify-move-block .verify-icon {
font-size: 18px;
}
.verify-bar-area .verify-msg {
z-index : 3;
}
/*字体图标的css*/
@font-face {font-family: "iconfont";
src: url('../fonts/iconfont.eot?t=1508229193188'); /* IE9*/
src: url('../fonts/iconfont.eot?t=1508229193188#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAaAAAsAAAAACUwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kiSY21hcAAAAYAAAAB3AAABuM+qBlRnbHlmAAAB+AAAAnQAAALYnrUwT2hlYWQAAARsAAAALwAAADYPNwajaGhlYQAABJwAAAAcAAAAJAfeA4dobXR4AAAEuAAAABMAAAAYF+kAAGxvY2EAAATMAAAADgAAAA4CvAGsbWF4cAAABNwAAAAfAAAAIAEVAF1uYW1lAAAE/AAAAUUAAAJtPlT+fXBvc3QAAAZEAAAAPAAAAE3oPPXPeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sM4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDxbwtzwv4EhhrmBoQEozAiSAwAw1A0UeJzFkcENgCAMRX8RjCGO4gTe9eQcnhzAfXC2rqG/hYsT8MmD9gdS0gJIAAaykAjIBYHppCvuD8juR6zMJ67A89Zdn/f1aNPikUn8RvYo8G20CjKim6Rf6b9m34+WWd/vBr+oW8V6q3vF5qKlYrPRp4L0Ad5nGL8AeJxFUc9rE0EYnTezu8lMsrvtbrqb3TRt0rS7bdOmdI0JbWmCtiItIv5oi14qevCk9SQVLFiQgqAF8Q9QLKIHLx48FkHo3ZNnFUXwD5C2B6dO6sFhmI83w7z3fe8RnZCjb2yX5YlLhskkmScXCIFRxYBFiyjH9Rqtoqes9/g5i8WVuJyqDNTYLPwBI+cljXrkGynDhoU+nCgnjbhGY5yst+gMEq8IBIXwsjPU67CnEPm4b0su0h309Fd67da4XBhr55KSm17POk7gOE/Shq6nKdVsC7d9j+tcGPKVboc9u/0jtB/ZIA7PXTVLBef6o/paccjnwOYm3ELJetPuDrvV3gg91wlSXWY6H5qVwRzWf2TybrYYfSdqoXOwh/Qa8RWIjBTiSI3h614/vKSNRhONOrsnQi6Xf4nQFQDTmJE1NKbhI6crHEJO/+S5QPxhYJRRyvBFBP+5T9EPpEAIVzzRQIrjmJ6jY1WTo+NXTMchuBsKuS8PRZATSMl9oTA4uNLkeIA0V1UeqOoGQh7IAxGo+7T83fn3T+voqCNPPAUazUYUI7LgKSV1Jk2oUeghYGhZ+cKOe2FjVu5ZKEY2VkE13AK1+jI4r1KLbPlZfrKiPhOXKPRj7q9sj9XJ7LFHNmrKJS3VCdhXGSdKrtmoQaWeMjQVt0KD6sGPOx0oH2fgtzoNROxtNq8F3tzYM/n+TjKSX5qf2jx941276TIr9FjXxKr8eX/6bK4yuopwo9py1sw8F9kdw4AmurRpLUM3tYx5ZnKpfHPi8dzz19vJ6MjyxYUrpqeb1uLs3eGV6vr21pSqpeWkqonAN9oUyIiXpv8XvlN5e3icY2BkYGAA4n0vN4fG89t8ZeBmYQCBa9wPPRH0/wcsDMwmQC4HAxNIFABAfAqaAHicY2BkYGBu+N/AEMPCAAJAkpEBFbABAEcMAm94nGNhYGBgfsnAwMKAigESnwEBAAAAAAAAdgCkANoBCAFsAAB4nGNgZGBgYGMIZGBlAAEmIOYCQgaG/2A+AwARSAFzAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgI2RiZGZkYWRlZGNkZ2BsYI1OSM1OZs1OSe/OJW1KDM9o4S9KDWtKLU4g4EBAJ79CeQ=') format('woff'),
url('../fonts/iconfont.ttf?t=1508229193188') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('../fonts/iconfont.svg?t=1508229193188#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-check:before { content: "\e645"; }
.icon-close:before { content: "\e646"; }
.icon-right:before { content: "\e6a3"; }
.icon-refresh:before { content: "\e6a4"; }
src/main/resources/static/assets/bfwrepo/js/bfwone.js
+391
View File
@@ -0,0 +1,391 @@
//bfwone v1.2
(function () {
var err_txt = "";
var err_show = false;
var funcs = [];
var ready = false;
var _base_url = "";
var _bfw_loadedfile = [];
var _bfw_config_loaded = false;
var _bfw_callback = {};
var ishttps = 'https:' == document.location.protocol ? true : false;
var _loc_bfw_config = {
dependency: [],
jsbaseurl: "repo.bfw.wiki/bfwrepo/js/",
cssbaseurl: "repo.bfw.wiki/bfwrepo/css/",
usercssbaseurl: "/",
userjsbaseurl: "/",
userloadjs: "",
userloadcss: ""
};
var check_t = null;
var depencencyload = false;
//添加数组IndexOf方法
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function (elt /*, from*/) {
var len = this.length >>> 0;
var from = Number(arguments[1]) || 0;
from = (from < 0)
? Math.ceil(from)
: Math.floor(from);
if (from < 0)
from += len;
for (; from < len; from++) {
if (from in this && this[from] === elt)
return from;
}
return -1;
};
}
var bfwoneid = document.getElementById('bfwone');
if (bfwoneid != null) {
var bfwfiledata = bfwoneid.getAttribute('data');
if (bfwfiledata != null) {
var bfw_arr = bfwfiledata.split("&");
for (var i = 0; i < bfw_arr.length; i++) {
var find_num = bfw_arr[i].indexOf("=");
if (find_num > 0) {
var key_name = bfw_arr[i].substring(0, find_num);
var key_value = bfw_arr[i].substr(find_num + 1);
//alert(key_name+key_value);
if (key_name == "dep") {
_loc_bfw_config.dependency = key_value.split("|");
}
if (key_name == "jb") {
_loc_bfw_config.jsbaseurl = key_value;
}
if (key_name == "cb") {
_loc_bfw_config.cssbaseurl = key_value;
}
if (key_name == "ucb") {
_loc_bfw_config.usercssbaseurl = key_value;
}
if (key_name == "ujb") {
_loc_bfw_config.userjsbaseurl = key_value;
}
if (key_name == "err") {
_loc_bfw_config.err_show = key_value == 1 ? true : false;
}
if (key_name == "loadjs") {
_loc_bfw_config.userloadjs = key_value;
}
if (key_name == "loadcss") {
_loc_bfw_config.userloadcss = key_value;
}
if (key_name == "loadpara") {
window.bfwonepara = key_value;
}
}
}
}
}
//alert(_loc_bfw_config.err_show);
onerror = handleErr;
function handleErr(msg, url, l) {
if (_loc_bfw_config.err_show) {
var err_txts = "出现错误:";
err_txts += "Error: " + msg;
err_txts += "Line: " + l;
debugShow(err_txts);
}
return false;
};
function debugShow(str) {
err_txt += getLocalTime() + ":" + str + "<br/>";
};
var initconf = function () {
if (!_bfw_config_loaded) {
if (_loc_bfw_config.dependency.length == 0) {
depencencyload = true;
} else {
for (j = 0, len = _loc_bfw_config.dependency.length; j < len; j++) {
if (j == len - 1) {
loadjs(_loc_bfw_config.dependency[j], "", "", function () { depencencyload = true; });
} else {
loadjs(_loc_bfw_config.dependency[j], "", "", function () { });
}
}
}
_bfw_config_loaded = true;
}
};
var getLocalTime = function () {
var date = new Date();
this.minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
this.second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return this.minute + "分" + this.second + "秒 " + date.getMilliseconds() + "微秒";
// return new Date(parseInt(Date.parse(new Date())) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
};
var bfwone = function (modulepara, callback) {
loadjs(modulepara[0] == undefined ? "" : modulepara[0], modulepara[1] == undefined ? "" : modulepara[1], modulepara[2] == undefined ? "" : modulepara[2], callback);
};
var loadjs = function (modulename, relatedcssmodulename, islocal, callback) {
//alert(modulename+relatedcssmodulename+islocal);
//console.log(modulename);
if (modulename == "") {
try {
if (typeof callback === "function") {
callback();
}
} catch (e) { }
} else {
if (relatedcssmodulename != "") {
if (relatedcssmodulename.indexOf("|") > 0) {
var cssfilearr = relatedcssmodulename.split("|");
for (var i = 0; i < cssfilearr.length; i++) {
loadcss(cssfilearr[i], islocal);
}
} else {
loadcss(relatedcssmodulename, islocal);
}
}
if (_bfw_loadedfile.indexOf(islocal + "js." + modulename) == -1) {
_bfw_loadedfile.push(islocal + "js." + modulename);
} else {
try {
if (typeof callback === "function") {
callback();
}
} catch (e) { }
return;
}
var script = document.createElement("script");
script.type = "text/javascript";
//script.defer = "defer";
if (islocal == "local") {
if (_loc_bfw_config.userjsbaseurl.substr(0, 7).toLowerCase() == "http://" || _loc_bfw_config.userjsbaseurl.substr(0, 8).toLowerCase() == "https://" || _loc_bfw_config.userjsbaseurl.substr(0, 2).toLowerCase() == "//") {
script.src = _loc_bfw_config.userjsbaseurl + modulename + '.js';
} else {
script.src = _loc_bfw_config.userjsbaseurl + modulename + '.js';
// if(ishttps){
// script.src="https://"+_loc_bfw_config.userjsbaseurl+modulename+'.js';
// }else{
// script.src="http://"+_loc_bfw_config.userjsbaseurl+modulename+'.js';
// }
}
} else {
if (ishttps) {
script.src = "https://" + _loc_bfw_config.jsbaseurl + modulename + '.js';
} else {
script.src = "http://" + _loc_bfw_config.jsbaseurl + modulename + '.js';
}
}
debugShow("开始下载js" + script.src);
document.getElementsByTagName("head")[0].appendChild(script);
if (window.ActiveXObject || "ActiveXObject" in window) { //判断是否是ie
if (script.readyState) {
script.onreadystatechange = function () {
if (this.readyState == "loaded" || this.readyState == "complete") {
// console.log("ie10及以下加载完成");
//alert("ie10及以下加载完成"+modulename);
if (_loc_bfw_config.err_show) {
debugShow("ie10及以下加载完成 " + modulename);
}
script.onload = script.onreadystatechange = null;
//setTimeout(function(){callback();},1000);
try {
if (typeof callback === "function") {
callback();
}
} catch (e) { }
// Handle memory leak in IE
}
}
} else {
script.onload = function () {
if (_loc_bfw_config.err_show) {
debugShow("ie11及Edge下载完成 " + modulename);
}
script.onload = script.onreadystatechange = null;
//alert("ie11及Edge");
// console.log("ie11及Edge");
try {
if (typeof callback === "function") {
callback();
}
} catch (e) { }
// Handle memory leak in IE
}
}
} else {
script.onload = function () {
if (_loc_bfw_config.err_show) {
debugShow("非ie浏览器下载完成 " + modulename);
}
// console.log('非ie浏览器');
try {
if (typeof callback === "function") {
callback();
}
} catch (e) { }
}
}
}
};
var formatetpl = function (dta, tmpl) {
var format = {
name: function (x) {
return x
}
};
return tmpl.replace(/{(\w+)}/g, function (m1, m2) {
if (!m2)
return "";
return (format && format[m2]) ? format[m2](dta[m2]) : dta[m2];
});
};
var loadcss = function (modulename, islocal) {
if (_bfw_loadedfile.indexOf(islocal + "css." + modulename) == -1) {
_bfw_loadedfile.push(islocal + "css." + modulename);
} else {
return;
}
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
if (islocal == "local") {
if (_loc_bfw_config.usercssbaseurl.substr(0, 7).toLowerCase() == "http://" || _loc_bfw_config.usercssbaseurl.substr(0, 8).toLowerCase() == "https://" || _loc_bfw_config.usercssbaseurl.substr(0, 2).toLowerCase() == "//") {
link.href = _loc_bfw_config.usercssbaseurl + modulename + '.css';
} else {
link.href =_loc_bfw_config.usercssbaseurl+modulename+'.css';
// if(ishttps){
// link.href ="https://"+_loc_bfw_config.usercssbaseurl+modulename+'.css';
// }else{
// link.href = "http://"+_loc_bfw_config.usercssbaseurl+modulename+'.css';
// }
}
} else {
if (ishttps) {
link.href = "https://" + _loc_bfw_config.cssbaseurl + modulename + '.css';
} else {
link.href = "http://" + _loc_bfw_config.cssbaseurl + modulename + '.css';
}
}
debugShow("开始下载css" + link.href);
document.getElementsByTagName("head")[0].appendChild(link);
};
var checkdependloaded = function () {
if (depencencyload) {
debugShow("依赖库加载完成，结束等待");
clearInterval(check_t);
for (var i = 0; i < funcs.length; i++) {
funcs[i].call(document);
}
funcs = null;
}
};
var handler = function (e) {
if (ready) return;
if (e.type === 'onreadystatechange' && document.readyState !== 'complete') {
return;
}
if (depencencyload) {
debugShow("依赖库加载完成，开始执行js");
for (var i = 0; i < funcs.length; i++) {
funcs[i].call(document);
}
funcs = null;
} else {
debugShow("依赖库加载未完成，开始等待");
check_t = setInterval(function () { checkdependloaded(); }, 500);
}
ready = true;
};
var bfwoneready = function (fn) {
if (ready) { fn.call(document); }
else { funcs.push(fn); }
};
if (typeof window === "object" && typeof window.document === "object") {
window.bfwone = window.bone = window.use = bfwone;
window.bfw = window.bready = bfwoneready;
// window.bfwconf = bfwconf;
}
initconf();
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', handler, false);
document.addEventListener('readystatechange', handler, false);
window.addEventListener('load', handler, false);
} else if (document.attachEvent) {
document.attachEvent('onreadystatechange', handler);
window.attachEvent('onload', handler);
}
if (_loc_bfw_config.userloadcss != "") {
if (_loc_bfw_config.userloadcss.indexOf("|") > 0) {
var cssfilearr = _loc_bfw_config.userloadcss.split("|");
for (var i = 0; i < cssfilearr.length; i++) {
loadcss(cssfilearr[i], "local");
}
} else {
loadcss(_loc_bfw_config.userloadcss, "local");
}
}
if (_loc_bfw_config.userloadjs != "") {
bfwoneready(function () {
if (_loc_bfw_config.userloadjs.indexOf("|") > 0) {
var jsfilearr = _loc_bfw_config.userloadjs.split("|");
for (var i = 0; i < jsfilearr.length; i++) {
loadjs(jsfilearr[i], "", "local");
}
} else {
loadjs(_loc_bfw_config.userloadjs, "", "local");
}
});
}
if (_loc_bfw_config.err_show) {
setTimeout(function () {
debug_pannel = document.createElement('div');
debug_pannel.id = "bfwone_debug_pannel";
debug_pannel.style.position = "fixed";
debug_pannel.style.right = '0px';
debug_pannel.style.bottom = '0px';
debug_pannel.style.overflow = "scroll";
debug_pannel.style.zIndex = "9999";
debug_pannel.style.width = "40%";
debug_pannel.style.height = "40%";
debug_pannel.style.background = "black";
debug_pannel.style.color = "grey";
debug_pannel.style.padding = "6px";
debug_pannel.innerHTML = err_txt;
document.body.appendChild(debug_pannel);
}, 5000);
}
})();
src/main/resources/static/assets/bfwrepo/js/eruda.js
+28
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/assets/bfwrepo/js/jquery.17.js
+4
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/assets/bfwrepo/js/verify.js
+731
View File
@@ -0,0 +1,731 @@
/*数据来源： 咪嘟网 URL: www.midu5.com 代码之家 URL：www.codezhijia.com*/
;(function($, window, document,undefined) {
//定义Code的构造函数
var Code = function(ele, opt) {
this.$element = ele,
this.defaults = {
type : 1,
figure : 100, //位数，仅在type=2时生效
arith : 0, //算法，支持加减乘，0为随机，仅在type=2时生效
width : '200px',
height : '60px',
fontSize : '30px',
codeLength : 6,
btnId : 'check-btn',
ready : function(){},
success : function(){},
error : function(){}
},
this.options = $.extend({}, this.defaults, opt)
};
var _code_chars = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
var _code_color1 = ['#fffff0', '#f0ffff', '#f0fff0', '#fff0f0'];
var _code_color2 = ['#FF0033', '#006699', '#993366', '#FF9900', '#66CC66', '#FF33CC'];
//定义Code的方法
Code.prototype = {
init : function() {
var _this = this;
this.loadDom();
this.setCode();
this.options.ready();
this.$element[0].onselectstart = document.body.ondrag = function(){
return false;
};
//点击验证码
this.$element.find('.verify-code, .verify-change-code').on('click', function() {
_this.setCode();
});
//确定的点击事件
this.htmlDoms.code_btn.on('click', function() {
_this.checkCode();
})
},
//加载页面
loadDom : function() {
var panelHtml = '<div class="cerify-code-panel"><div class="verify-code"></div><div class="verify-code-area"><div class="verify-input-area"><input type="text" class="varify-input-code" /></div><div class="verify-change-area"><a class="verify-change-code">换一张</a></div></div></div>';
this.$element.append(panelHtml);
this.htmlDoms = {
code_btn : $('#'+this.options.btnId),
code : this.$element.find('.verify-code'),
code_area : this.$element.find('.verify-code-area'),
code_input : this.$element.find('.varify-input-code'),
};
this.htmlDoms.code.css({'width':this.options.width, 'height':this.options.height,'line-height':this.options.height, 'font-size':this.options.fontSize});
this.htmlDoms.code_area.css({'width':this.options.width});
},
//设置验证码
setCode : function() {
var color1Num = Math.floor(Math.random() * 3);
var color2Num = Math.floor(Math.random() * 5);
this.htmlDoms.code.css({'background-color': _code_color1[color1Num], 'color': _code_color2[color2Num]});
this.htmlDoms.code_input.val('');
var code = '';
this.code_chose = '';
if(this.options.type == 1) { //普通验证码
for(var i = 0; i < this.options.codeLength; i++) {
var charNum = Math.floor(Math.random() * 52);
var tmpStyle = (charNum%2 ==0)? "font-style:italic;margin-right: 10px;":"font-weight:bolder;";
tmpStyle += (Math.floor(Math.random() * 2) == 1)? "font-weight:bolder;":"";
this.code_chose += _code_chars[charNum];
code += '<font style="'+tmpStyle+'">'+_code_chars[charNum]+'</font>';
}
}else { //算法验证码
var num1 = Math.floor(Math.random() * this.options.figure);
var num2 = Math.floor(Math.random() * this.options.figure);
if(this.options.arith == 0) {
var tmparith = Math.floor(Math.random() * 3);
}
switch(tmparith) {
case 1 :
this.code_chose = parseInt(num1) + parseInt(num2);
code = num1 + ' + ' + num2 + ' = ?';
break;
case 2 :
if(parseInt(num1) < parseInt(num2)) {
var tmpnum = num1;
num1 = num2;
num2 = tmpnum;
}
this.code_chose = parseInt(num1) - parseInt(num2);
code = num1 + ' - ' + num2 + ' = ?';
break;
default :
this.code_chose = parseInt(num1) * parseInt(num2);
code = num1 + ' × ' + num2 + ' = ?';
break;
}
}
this.htmlDoms.code.html(code);
},
//比对验证码
checkCode : function() {
if(this.options.type == 1) { //普通验证码
var own_input = this.htmlDoms.code_input.val().toUpperCase();
this.code_chose = this.code_chose.toUpperCase();
}else {
var own_input = this.htmlDoms.code_input.val();
}
if(own_input == this.code_chose) {
this.options.success();
}else {
this.options.error();
this.setCode();
}
}
};
//定义Slide的构造函数
var Slide = function(ele, opt) {
this.$element = ele,
this.defaults = {
type : 1,
vOffset: 5,
vSpace : 5,
imgName : ['1.jpg', '2.jpg'],
imgSize : {
width: '400px',
height: '200px',
},
blockSize : {
width: '50px',
height: '50px',
},
barSize : {
width : '400px',
height : '40px',
},
ready : function(){},
success : function(){},
error : function(){}
},
this.options = $.extend({}, this.defaults, opt)
};
//定义Slide的方法
Slide.prototype = {
init: function() {
var _this = this;
//加载页面
this.loadDom();
this.options.ready();
this.$element[0].onselectstart = document.body.ondrag = function(){
return false;
};
//按下
this.htmlDoms.move_block.on('touchstart', function(e) {
_this.start(e);
});
this.htmlDoms.move_block.on('mousedown', function(e) {
_this.start(e);
});
//拖动
window.addEventListener("touchmove", function(e) {
_this.move(e);
});
window.addEventListener("mousemove", function(e) {
_this.move(e);
});
//鼠标松开
window.addEventListener("touchend", function() {
_this.end();
});
window.addEventListener("mouseup", function() {
_this.end();
});
//刷新
_this.$element.find('.verify-refresh').on('click', function() {
_this.refresh();
});
},
//初始化加载
loadDom : function() {
this.img_rand = Math.floor(Math.random() * this.options.imgName.length); //随机的背景图片
var panelHtml = '';
var tmpHtml = '';
if(this.options.type != 1) { //图片滑动
panelHtml += '<div class="verify-img-panel"><div class="verify-refresh"><i class="iconfont icon-refresh"></i></div><div class="verify-gap"></div></div>';
tmpHtml = '<div class="verify-sub-block"></div>';
}
panelHtml += '<div class="verify-bar-area"><span class="verify-msg">向右滑动完成验证</span><div class="verify-left-bar"><span class="verify-msg"></span><div class="verify-move-block"><i class="verify-icon iconfont icon-right"></i>'+tmpHtml+'</div></div></div>';
this.$element.append(panelHtml);
this.htmlDoms = {
gap : this.$element.find('.verify-gap'),
sub_block : this.$element.find('.verify-sub-block'),
img_panel : this.$element.find('.verify-img-panel'),
bar_area : this.$element.find('.verify-bar-area'),
move_block : this.$element.find('.verify-move-block'),
left_bar : this.$element.find('.verify-left-bar'),
msg : this.$element.find('.verify-msg'),
icon : this.$element.find('.verify-icon'),
refresh :this.$element.find('.verify-refresh')
};
this.status = false; //鼠标状态
this.setSize = this.resetSize(this); //重新设置宽度高度
this.htmlDoms.gap.css({'width': this.options.blockSize.width, 'height': this.options.blockSize.height});
this.htmlDoms.sub_block.css({'width': this.options.blockSize.width, 'height': this.options.blockSize.height});
this.htmlDoms.img_panel.css({'width': this.setSize.img_width, 'height': this.setSize.img_height, 'background': 'url('+this.options.imgName[this.img_rand]+')', 'background-size' : this.setSize.img_width + ' '+ this.setSize.img_height});
this.htmlDoms.bar_area.css({'width': this.setSize.bar_width, 'height': this.options.barSize.height, 'line-height':this.options.barSize.height});
this.htmlDoms.move_block.css({'width': this.options.barSize.height, 'height': this.options.barSize.height});
this.htmlDoms.left_bar.css({'width': this.options.barSize.height, 'height': this.options.barSize.height});
this.randSet();
},
//鼠标按下
start: function(e) {
this.htmlDoms.msg.text('');
this.htmlDoms.move_block.css('background-color', '#337ab7');
this.htmlDoms.left_bar.css('border-color', '#337AB7');
this.htmlDoms.icon.css('color', '#fff');
e.stopPropagation();
this.status = true;
},
//鼠标移动
move: function(e) {
if(this.status) {
if(!e.touches) { //兼容移动端
var x = e.clientX;
}else { //兼容PC端
var x = e.touches[0].pageX;
}
var bar_area_left = Slide.prototype.getLeft(this.htmlDoms.bar_area[0]);
var move_block_left = x - bar_area_left; //小方块相对于父元素的left值
if(this.options.type != 1) { //图片滑动
if(move_block_left >= this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.blockSize.width)/2) - 2) {
move_block_left = this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.blockSize.width)/2) - 2;
}
}else { //普通滑动
if(move_block_left >= this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.barSize.height)/2) + 3) {
this.$element.find('.verify-msg:eq(1)').text('松开验证');
move_block_left = this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.barSize.height)/2) + 3;
}else {
this.$element.find('.verify-msg:eq(1)').text('');
}
}
if(move_block_left <= 0) {
move_block_left = parseInt(parseInt(this.options.blockSize.width)/2);
}
//拖动后小方块的left值
this.htmlDoms.move_block.css('left', move_block_left-parseInt(parseInt(this.options.blockSize.width)/2) + "px");
this.htmlDoms.left_bar.css('width', move_block_left-parseInt(parseInt(this.options.blockSize.width)/2) + "px");
}
},
//鼠标松开
end: function() {
var _this = this;
//判断是否重合
if(this.status) {
if(this.options.type != 1) { //图片滑动
var vOffset = parseInt(this.options.vOffset);
if(parseInt(this.htmlDoms.gap.css('left')) >= (parseInt(this.htmlDoms.move_block.css('left')) - vOffset) && parseInt(this.htmlDoms.gap.css('left')) <= (parseInt(this.htmlDoms.move_block.css('left')) + vOffset)) {
this.htmlDoms.move_block.css('background-color', '#5cb85c');
this.htmlDoms.left_bar.css({'border-color': '#5cb85c', 'background-color': '#fff'});
this.htmlDoms.icon.css('color', '#fff');
this.htmlDoms.icon.removeClass('icon-right');
this.htmlDoms.icon.addClass('icon-check');
this.htmlDoms.refresh.hide();
this.htmlDoms.move_block.unbind('mousedown touchstart');
this.options.success();
}else{
this.htmlDoms.move_block.css('background-color', '#d9534f');
this.htmlDoms.left_bar.css('border-color', '#d9534f');
this.htmlDoms.icon.css('color', '#fff');
this.htmlDoms.icon.removeClass('icon-right');
this.htmlDoms.icon.addClass('icon-close');
setTimeout(function () {
_this.htmlDoms.move_block.animate({'left':'0px'}, 'fast');
_this.htmlDoms.left_bar.animate({'width': '40px'}, 'fast');
_this.htmlDoms.left_bar.css({'border-color': '#ddd'});
_this.htmlDoms.move_block.css('background-color', '#fff');
_this.htmlDoms.icon.css('color', '#000');
_this.htmlDoms.icon.removeClass('icon-close');
_this.htmlDoms.icon.addClass('icon-right');
_this.$element.find('.verify-msg:eq(0)').text('向右滑动完成验证');
}, 400);
this.options.error();
}
}else { //普通滑动
if(parseInt(this.htmlDoms.move_block.css('left')) >= (parseInt(this.setSize.bar_width) - parseInt(this.options.barSize.height) - parseInt(this.options.vOffset))) {
this.htmlDoms.move_block.css('background-color', '#5cb85c');
this.htmlDoms.left_bar.css({'color': '#4cae4c', 'border-color': '#5cb85c', 'background-color': '#fff' });
this.htmlDoms.icon.css('color', '#fff');
this.htmlDoms.icon.removeClass('icon-right');
this.htmlDoms.icon.addClass('icon-check');
this.htmlDoms.refresh.hide();
this.htmlDoms.move_block.unbind('mousedown');
this.htmlDoms.move_block.unbind('touchstart');
this.$element.find('.verify-msg:eq(1)').text('验证成功');
this.options.success();
}else {
this.htmlDoms.move_block.css('background-color', '#d9534f');
this.htmlDoms.left_bar.css('border-color', '#d9534f');
this.htmlDoms.icon.css('color', '#fff');
this.htmlDoms.icon.removeClass('icon-right');
this.htmlDoms.icon.addClass('icon-close');
setTimeout(function () {
_this.htmlDoms.move_block.animate({'left':'0px'}, 'fast');
_this.htmlDoms.left_bar.animate({'width': '40px'}, 'fast');
_this.htmlDoms.left_bar.css({'border-color': '#ddd'});
_this.htmlDoms.move_block.css('background-color', '#fff');
_this.htmlDoms.icon.css('color', '#000');
_this.htmlDoms.icon.removeClass('icon-close');
_this.htmlDoms.icon.addClass('icon-right');
_this.$element.find('.verify-msg:eq(0)').text('向右滑动解锁');
}, 400);
this.options.error();
}
}
this.status = false;
}
},
resetSize : function(obj) {
var img_width,img_height,bar_width,bar_height; //图片的宽度、高度，移动条的宽度、高度
var parentWidth = obj.$element.parent().width() || $(window).width();
var parentHeight = obj.$element.parent().height() || $(window).height();
if(obj.options.imgSize.width.indexOf('%')!= -1){
img_width = parseInt(obj.options.imgSize.width)/100 * parentWidth + 'px';
　　}else {
img_width = obj.options.imgSize.width;
}
if(obj.options.imgSize.height.indexOf('%')!= -1){
img_height = parseInt(obj.options.imgSize.height)/100 * parentHeight + 'px';
　　}else {
img_height = obj.options.imgSize.height;
}
if(obj.options.barSize.width.indexOf('%')!= -1){
bar_width = parseInt(obj.options.barSize.width)/100 * parentWidth + 'px';
　　}else {
bar_width = obj.options.barSize.width;
}
if(obj.options.barSize.height.indexOf('%')!= -1){
bar_height = parseInt(obj.options.barSize.height)/100 * parentHeight + 'px';
　　}else {
bar_height = obj.options.barSize.height;
}
return {img_width : img_width, img_height : img_height, bar_width : bar_width, bar_height : bar_height};
},
//随机出生点位
randSet: function() {
var rand1 = Math.floor(Math.random()*9+1);
var rand2 = Math.floor(Math.random()*9+1);
var top = rand1 * parseInt(this.setSize.img_height)/15 + parseInt(this.setSize.img_height) * 0.1;
var left = rand2 * parseInt(this.setSize.img_width)/15 + parseInt(this.setSize.img_width) * 0.1;
this.$element.find('.verify-img-panel').css('margin-bottom', this.options.vSpace + 'px');
this.$element.find('.verify-gap').css({'top': top, 'left': left});
this.$element.find('.verify-sub-block').css({'top':'-'+(parseInt(this.setSize.img_height)- top + this.options.vSpace + 2)+'px', 'background-image': 'url('+this.options.imgName[this.img_rand]+')', 'background-size': this.setSize.img_width + ' '+ this.setSize.img_height,'background-position-y': '-'+top+ 'px', 'background-position-x': '-'+left+'px'});
},
//刷新
refresh: function() {
this.randSet();
this.img_rand = Math.floor(Math.random() * this.options.imgName.length); //随机的背景图片
this.$element.find('.verify-img-panel').css({'background': 'url('+this.options.imgName[this.img_rand]+')', 'background-size': this.setSize.img_width + ' '+ this.setSize.img_height});
this.$element.find('.verify-sub-block').css({'background-image': 'url('+this.options.imgName[this.img_rand]+')', 'background-size': this.setSize.img_width + ' '+ this.setSize.img_height});
},
//获取left值
getLeft: function(node) {
var left = $(node).offset().left;
// var nowPos = node.offsetParent;
//
// while(nowPos != null) {　　
// left += $(nowPos).offset().left;　
// nowPos = nowPos.offsetParent;　　
// }
return left;
}
};
//定义Points的构造函数
var Points = function(ele, opt) {
this.$element = ele,
this.defaults = {
defaultNum : 4, //默认的文字数量
checkNum : 3, //校对的文字数量
vSpace : 5, //间隔
imgName : ['1.jpg', '2.jpg'],
imgSize : {
width: '400px',
height: '200px',
},
barSize : {
width : '400px',
height : '40px',
},
ready : function(){},
success : function(){},
error : function(){}
},
this.options = $.extend({}, this.defaults, opt)
};
//定义Points的方法
Points.prototype = {
init : function() {
var _this = this;
//加载页面
_this.loadDom();
_this.refresh();
_this.options.ready();
this.$element[0].onselectstart = document.body.ondrag = function(){
return false;
};
//点击事件比对
_this.$element.find('.verify-img-panel canvas').on('click', function(e) {
_this.checkPosArr.push(_this.getMousePos(this, e));
if(_this.num == _this.options.checkNum) {
_this.num = _this.createPoint(_this.getMousePos(this, e));
setTimeout(function () {
var flag = _this.comparePos(_this.fontPos, _this.checkPosArr);
if(flag == false) { //验证失败
_this.options.error();
_this.$element.find('.verify-bar-area').css({'color': '#d9534f', 'border-color': '#d9534f'});
_this.$element.find('.verify-msg').text('验证失败');
setTimeout(function () {
_this.$element.find('.verify-bar-area').css({'color': '#000','border-color': '#ddd'});
_this.refresh();
}, 400);
}else { //验证成功
_this.$element.find('.verify-bar-area').css({'color': '#4cae4c', 'border-color': '#5cb85c'});
_this.$element.find('.verify-msg').text('验证成功');
_this.$element.find('.verify-refresh').hide();
_this.$element.find('.verify-img-panel').unbind('click');
_this.options.success();
}
}, 400);
}
if(_this.num < _this.options.checkNum) {
_this.num = _this.createPoint(_this.getMousePos(this, e));
}
});
//刷新
_this.$element.find('.verify-refresh').on('click', function() {
_this.refresh();
});
},
//加载页面
loadDom : function() {
this.fontPos = []; //选中的坐标信息
this.checkPosArr = []; //用户点击的坐标
this.num = 1; //点击的记数
this.img_rand = Math.floor(Math.random() * this.options.imgName.length); //随机的背景图片
var panelHtml = '';
var tmpHtml = '';
this.setSize = Slide.prototype.resetSize(this); //重新设置宽度高度
panelHtml += '<div class="verify-img-panel"><div class="verify-refresh" style="z-index:9999"><i class="iconfont icon-refresh"></i></div><canvas width="'+this.setSize.img_width+'" height="'+this.setSize.img_height+'"></canvas></div><div class="verify-bar-area"><span class="verify-msg"></span></div>';
this.$element.append(panelHtml);
this.htmlDoms = {
img_panel : this.$element.find('.verify-img-panel'),
bar_area : this.$element.find('.verify-bar-area'),
msg : this.$element.find('.verify-msg'),
};
this.htmlDoms.img_panel.css({'width': this.setSize.img_width, 'height': this.setSize.img_height, 'background-size' : this.setSize.img_width + ' '+ this.setSize.img_height, 'margin-bottom': this.options.vSpace + 'px'});
this.htmlDoms.bar_area.css({'width': this.options.barSize.width, 'height': this.options.barSize.height, 'line-height':this.options.barSize.height});
},
//绘制合成的图片
drawImg : function(obj, img) {
//准备canvas环境
var canvas = this.$element.find('canvas')[0];
//var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
// 绘制图片
ctx.drawImage(img,0,0, parseInt(this.setSize.img_width), parseInt(this.setSize.img_height));
// 绘制水印
var fontSizeArr = ['italic small-caps bold 20px microsoft yahei', 'small-caps normal 25px arial', '34px microsoft yahei'];
var fontStr = '天地玄黄宇宙洪荒日月盈昃辰宿列张寒来暑往秋收冬藏闰余成岁律吕调阳云腾致雨露结为霜金生丽水玉出昆冈剑号巨阙珠称夜光果珍李柰菜重芥姜海咸河淡鳞潜羽翔龙师火帝鸟官人皇始制文字乃服衣裳推位让国有虞陶唐吊民伐罪周发殷汤坐朝问道垂拱平章爱育黎首臣伏戎羌遐迩体率宾归王'; //不重复的汉字
var fontChars = [];
var avg = Math.floor(parseInt(this.setSize.img_width)/(parseInt(this.options.defaultNum)+1));
var tmp_index = '';
var color2Num = Math.floor(Math.random() * 5);
for(var i = 1; i <= this.options.defaultNum; i++) {
fontChars[i-1] = this.getChars(fontStr, fontChars);
tmp_index = Math.floor(Math.random()*3);
ctx.font = fontSizeArr[tmp_index];
ctx.fillStyle = _code_color2[color2Num];
if(Math.floor(Math.random() * 2) == 1) {
var tmp_y = Math.floor(parseInt(this.setSize.img_height)/2) + tmp_index*20 + 20;
}else {
var tmp_y = Math.floor(parseInt(this.setSize.img_height)/2) - tmp_index*20;
}
ctx.fillText(fontChars[i-1],avg * i, tmp_y);
this.fontPos[i-1] = {'char': fontChars[i-1], 'x': avg * i, 'y': tmp_y};
}
for(var i = 0; i < (this.options.defaultNum-this.options.checkNum); i++) {
this.shuffle(this.fontPos).pop();
}
var msgStr = '';
for(var i = 0; i < this.fontPos.length; i++) {
msgStr += this.fontPos[i].char + ',';
}
this.htmlDoms.msg.text('请顺序点击【' + msgStr.substring(0,msgStr.length-1) + '】');
return this.fontPos;
},
//获取坐标
getMousePos :function(obj, event) {
var e = event || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = e.clientX - ($(obj).offset().left - $(window).scrollLeft());
var y = e.clientY - ($(obj).offset().top - $(window).scrollTop());
return {'x': x, 'y': y};
},
//递归去重
getChars : function(fontStr, fontChars) {
var tmp_rand = parseInt(Math.floor(Math.random() * fontStr.length));
if(tmp_rand > 0) {
tmp_rand = tmp_rand - 1;
}
tmp_char = fontStr.charAt(tmp_rand);
if($.inArray(tmp_char, fontChars) == -1) {
return tmp_char;
}else {
return Points.prototype.getChars(fontStr, fontChars);
}
},
//洗牌数组
shuffle : function(arr) {
var m = arr.length, i;
while (m) {
i = (Math.random() * m--) >>> 0;
[arr[m], arr[i]] = [arr[i], arr[m]]
}
return arr;
},
//创建坐标点
createPoint : function (pos) {
this.htmlDoms.img_panel.append('<div class="point-area" style="background-color:#1abd6c;color:#fff;z-index:9999;width:30px;height:30px;text-align:center;line-height:30px;border-radius: 50%;position:absolute;top:'+parseInt(pos.y-10)+'px;left:'+parseInt(pos.x-10)+'px;">'+this.num+'</div>');
return ++this.num;
},
//比对坐标点
comparePos : function (fontPos, checkPosArr) {
var flag = true;
for(var i = 0; i < fontPos.length; i++) {
if(!(parseInt(checkPosArr[i].x) + 40 > fontPos[i].x && parseInt(checkPosArr[i].x) - 40 < fontPos[i].x && parseInt(checkPosArr[i].y) + 40 > fontPos[i].y && parseInt(checkPosArr[i].y) - 40 < fontPos[i].y)) {
flag = false;
break;
}
}
return flag;
},
//刷新
refresh: function() {
var _this = this;
this.$element.find('.point-area').remove();
this.fontPos = [];
this.checkPosArr = [];
this.num = 1;
this.img_rand = Math.floor(Math.random() * this.options.imgName.length); //随机的背景图片
var img = new Image();
img.src = ''+this.options.imgName[this.img_rand];
// 加载完成开始绘制
$(img).on('load', function(e) {
this.fontPos = _this.drawImg(_this, this);
});
},
};
//在插件中使用codeVerify对象
$.fn.codeVerify = function(options, callbacks) {
var code = new Code(this, options);
code.init();
};
//在插件中使用slideVerify对象
$.fn.slideVerify = function(options, callbacks) {
var slide = new Slide(this, options);
slide.init();
};
//在插件中使用clickVerify对象
$.fn.pointsVerify = function(options, callbacks) {
var points = new Points(this, options);
points.init();
};
})(jQuery, window, document);
src/main/resources/static/components/captcha/sliderVerify.vue
+499 -494
View File
File diff suppressed because it is too large Load Diff
src/main/resources/views/mobile/login.html
+185 -105
View File
@@ -2,12 +2,13 @@
layout("/mobile/platform.html"){
#-->
<style>
html, #app {
background-color: #FFFFFF;
html,
#app {
background-color: #ffffff;
}
[v-cloak] {
display: none
display: none;
}
.van-nav-bar {
@@ -15,7 +16,7 @@ layout("/mobile/platform.html"){
}
.van-nav-bar__title {
color: #FFF;
color: #fff;
}
.anchorBL {
@@ -73,61 +74,91 @@ layout("/mobile/platform.html"){
}
.logo {
height: 320px;
margin-bottom: 20px;
}
.logo img {
width: 300px;
}
.verify-img-panel {
border: none;
margin-bottom: 0 !important;
}
.verify-bar-area {
border: none;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
}
.van-popup {
background-color: transparent;
}
</style>
<div v-cloak id="app">
<div class="logo">
<img style="width: 100%" src="/assets/mobile/img/login.png"/>
<img style="width: 100%" src="/assets/mobile/img/login.png" />
</div>
<div class="content">
<van-row><h1 style="margin: 0px 0;color: #1d1b1b;font-family: 'SourceHanSansCN-Heav">Welcome</h1></van-row>
<van-row><h1 style="margin: 0 0;color: #1d1b1b;font-family: 'SourceHanSansCN-Heav">Welcome</h1></van-row>
<van-row>
<span style="color: rgb(160,160,160)">欢迎登录智慧工会手机平台</span>
<span style="color: rgb(160, 160, 160)">欢迎登录智慧工会手机平台</span>
</van-row>
<div class="parm_v">
<van-row style="border-bottom: 1px rgb(230, 230, 230) solid !important;">
<van-col span="2" style="line-height:50px;text-align: left;">
<svg t="1592742719420" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="2146" width="16" height="16">
<path d="M621.8 601.2c86.8-49.5 146.1-141.9 146.1-249 0-158.9-128.8-287.7-287.7-287.7S192.5 193.3 192.5 352.2c0 107.1 59.2 199.5 146.1 249-150 54.5-259.7 192.7-272.3 358.3h63.9c16.2-178.9 166.9-319.6 350-319.6s333.8 140.7 350 319.6h63.9c-12.6-165.6-122.3-303.8-272.3-358.3z m-365.4-249c0-123.4 100.4-223.7 223.8-223.7S704 228.8 704 352.2 603.6 575.9 480.2 575.9 256.4 475.6 256.4 352.2z"
p-id="2147" fill="#8a8a8a"></path>
<van-row style="border-bottom: 1px rgb(230, 230, 230) solid !important">
<van-col span="2" style="line-height: 50px; text-align: left">
<svg
t="1592742719420"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="2146"
width="16"
height="16"
>
<path
d="M621.8 601.2c86.8-49.5 146.1-141.9 146.1-249 0-158.9-128.8-287.7-287.7-287.7S192.5 193.3 192.5 352.2c0 107.1 59.2 199.5 146.1 249-150 54.5-259.7 192.7-272.3 358.3h63.9c16.2-178.9 166.9-319.6 350-319.6s333.8 140.7 350 319.6h63.9c-12.6-165.6-122.3-303.8-272.3-358.3z m-365.4-249c0-123.4 100.4-223.7 223.8-223.7S704 228.8 704 352.2 603.6 575.9 480.2 575.9 256.4 475.6 256.4 352.2z"
p-id="2147"
fill="#8a8a8a"
></path>
</svg>
</van-col>
<van-col span="22">
<van-field v-model="formData.mobile" type="tel" maxlength="11"
:rules="[{ pattern , message: '请输入正确的手机号' }]"
placeholder="请输入手机号" clearable></van-field>
<van-field
v-model="formData.mobile"
type="tel"
maxlength="11"
:rules="[{ pattern , message: '请输入正确的手机号' }]"
placeholder="请输入手机号"
clearable
></van-field>
</van-col>
</van-row>
<!--<van-row style="border-bottom: 1px rgb(230, 230, 230) solid !important;">
<van-col span="2" style="line-height:50px;text-align: left;margin-top: 30px;">
<svg t="1592742837149" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="3554" width="16" height="16">
<path d="M819.221333 417.856l-519.253333 0-0.021333-150.336-0.277333-4.309333c-0.170667-2.453333-0.341333-4.906667-0.341333-7.402667s0.170667-4.970667 0.341333-7.445333l0.298667-13.397333c0.490667-1.408 0.832-2.901333 1.024-4.437333 12.650667-105.962667 102.72-185.877333 209.472-185.877333 106.773333 0 196.842667 79.914667 209.365333 184.085333 0 0 1.770667 50.794667 1.792 55.509333 0.042667 11.754667 9.578667 21.290667 21.333333 21.290667 11.477333 0.832 21.333333-9.493333 21.333333-21.312 0-4.416-1.834667-56.981333-1.962667-58.773333C747.114667 98.069333 638.848 1.984 510.485333 1.984c-125.973333 0-232.618667 92.565333-250.901333 216.448-1.450667 2.88-2.261333 6.122667-2.261333 9.557333l0.021333 13.802667-0.234667 3.690667c-0.234667 3.413333-0.448 6.826667-0.448 10.304s0.213333 6.869333 0.448 10.261333l0.192 151.786667L204.757333 417.834667c-53.44 0-96.938667 44.16-96.938667 98.432l0 412.693333c0 53.013333 42.090667 93.013333 97.898667 93.013333l612.565333 0c55.808 0 97.92-40 97.92-93.013333L916.202667 516.309333C916.181333 462.016 872.682667 417.856 819.221333 417.856zM873.514667 929.002667c0 33.066667-27.797333 50.346667-55.253333 50.346667L205.717333 979.349333c-27.456 0-55.232-17.301333-55.232-50.346667L150.485333 516.309333c0-30.741333 24.341333-55.765333 54.272-55.765333l614.485333 0c29.930667 0 54.293333 25.024 54.293333 55.765333L873.536 929.002667z"
p-id="3555" fill="#8a8a8a"></path>
<van-row style="border-bottom: 1px rgb(230, 230, 230) solid !important">
<van-col span="2" style="line-height: 50px; text-align: left; margin-top: 30px">
<svg
t="1592742837149"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="3554"
width="16"
height="16"
>
<path
d="M819.221333 417.856l-519.253333 0-0.021333-150.336-0.277333-4.309333c-0.170667-2.453333-0.341333-4.906667-0.341333-7.402667s0.170667-4.970667 0.341333-7.445333l0.298667-13.397333c0.490667-1.408 0.832-2.901333 1.024-4.437333 12.650667-105.962667 102.72-185.877333 209.472-185.877333 106.773333 0 196.842667 79.914667 209.365333 184.085333 0 0 1.770667 50.794667 1.792 55.509333 0.042667 11.754667 9.578667 21.290667 21.333333 21.290667 11.477333 0.832 21.333333-9.493333 21.333333-21.312 0-4.416-1.834667-56.981333-1.962667-58.773333C747.114667 98.069333 638.848 1.984 510.485333 1.984c-125.973333 0-232.618667 92.565333-250.901333 216.448-1.450667 2.88-2.261333 6.122667-2.261333 9.557333l0.021333 13.802667-0.234667 3.690667c-0.234667 3.413333-0.448 6.826667-0.448 10.304s0.213333 6.869333 0.448 10.261333l0.192 151.786667L204.757333 417.834667c-53.44 0-96.938667 44.16-96.938667 98.432l0 412.693333c0 53.013333 42.090667 93.013333 97.898667 93.013333l612.565333 0c55.808 0 97.92-40 97.92-93.013333L916.202667 516.309333C916.181333 462.016 872.682667 417.856 819.221333 417.856zM873.514667 929.002667c0 33.066667-27.797333 50.346667-55.253333 50.346667L205.717333 979.349333c-27.456 0-55.232-17.301333-55.232-50.346667L150.485333 516.309333c0-30.741333 24.341333-55.765333 54.272-55.765333l614.485333 0c29.930667 0 54.293333 25.024 54.293333 55.765333L873.536 929.002667z"
p-id="3555"
fill="#8a8a8a"
></path>
</svg>
</van-col>
<van-col span="22">
<van-field v-model="formData.password" type="password" placeholder="输入密码"
style="margin-top: 30px" clearable></van-field>
</van-col>
</van-row>-->
<van-row style="border-bottom: 1px rgb(230,230,230) solid !important;">
<van-col span="2" style="line-height:50px;text-align: left;margin-top: 30px;">
<svg t="1592742837149" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="3554" width="16" height="16">
<path d="M819.221333 417.856l-519.253333 0-0.021333-150.336-0.277333-4.309333c-0.170667-2.453333-0.341333-4.906667-0.341333-7.402667s0.170667-4.970667 0.341333-7.445333l0.298667-13.397333c0.490667-1.408 0.832-2.901333 1.024-4.437333 12.650667-105.962667 102.72-185.877333 209.472-185.877333 106.773333 0 196.842667 79.914667 209.365333 184.085333 0 0 1.770667 50.794667 1.792 55.509333 0.042667 11.754667 9.578667 21.290667 21.333333 21.290667 11.477333 0.832 21.333333-9.493333 21.333333-21.312 0-4.416-1.834667-56.981333-1.962667-58.773333C747.114667 98.069333 638.848 1.984 510.485333 1.984c-125.973333 0-232.618667 92.565333-250.901333 216.448-1.450667 2.88-2.261333 6.122667-2.261333 9.557333l0.021333 13.802667-0.234667 3.690667c-0.234667 3.413333-0.448 6.826667-0.448 10.304s0.213333 6.869333 0.448 10.261333l0.192 151.786667L204.757333 417.834667c-53.44 0-96.938667 44.16-96.938667 98.432l0 412.693333c0 53.013333 42.090667 93.013333 97.898667 93.013333l612.565333 0c55.808 0 97.92-40 97.92-93.013333L916.202667 516.309333C916.181333 462.016 872.682667 417.856 819.221333 417.856zM873.514667 929.002667c0 33.066667-27.797333 50.346667-55.253333 50.346667L205.717333 979.349333c-27.456 0-55.232-17.301333-55.232-50.346667L150.485333 516.309333c0-30.741333 24.341333-55.765333 54.272-55.765333l614.485333 0c29.930667 0 54.293333 25.024 54.293333 55.765333L873.536 929.002667z"
p-id="3555" fill="#8a8a8a"></path>
</svg>
</van-col>
<van-col span="22">
<van-field v-model="formData.platformCaptcha" placeholder="请输入手机动态码"
style="margin-top: 30px" maxlength="6" clearable>
<van-field v-model="formData.platformCaptcha" placeholder="请输入手机动态码" style="margin-top: 30px" maxlength="6" clearable>
<template #button>
<div class="login-code" style="margin-top: -20px">
<van-button type="info" @click="handleLogin()">{{ codeMsg }}</van-button>
@@ -139,21 +170,20 @@ layout("/mobile/platform.html"){
</div>
<div class="bottom_v">
<van-button :loading="loading" size="large" color="linear-gradient(to right,#2b97d7,#8bc4ff)"
@click="doLogin">登 录
</van-button>
<van-button :loading="loading" size="large" color="linear-gradient(to right,#2b97d7,#8bc4ff)" @click="doLogin">登 录</van-button>
</div>
<van-dialog
title="请拖动滑块完成拼图"
v-model="isShowSliderVerify"
@close="refresh"
append-to-body>
<slider-verify ref="sliderVerify" @success="onSuccess" @fail="onFail" @again="onAgain"></slider-verify>
</van-dialog>
<!--<van-dialog title="请拖动滑块完成拼图" v-model="isShowSliderVerify" @close="refresh" append-to-body>
<div id="mpanel" style="margin-top: 50px"></div>
</van-dialog>-->
<van-popup round v-model="isShowSliderVerify" :style="{margin: '0 auto',width: '80%'}" @close="closePopup" safe-area-inset-bottom>
<div id="parentPanel"></div>
<!-- <div id="mpanel"></div>-->
</van-popup>
</div>
</div>
<script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="/assets/bfwrepo/js/bfwone.js"></script>
<script>
let marker
let vue = new Vue({
@@ -165,59 +195,65 @@ layout("/mobile/platform.html"){
// 倒计时秒数
countdown: 60,
// 按钮上的文字
codeMsg: '获取动态码',
codeMsg: "获取动态码",
// 定时器
timer: null,
isShowSliderVerify: false,
loading: false,
formData: {
mobile: '',
password: '',
platformKey: '',
platformCaptcha: '',
mobile: "",
password: "",
platformKey: "",
platformCaptcha: "",
// 随机字符串
nonceStr: '',
nonceStr: "",
// 验证值
value: '',
value: ""
},
isNull(val) {
return !val;
return !val
},
pattern: /^1[3-9]\d{9}$/
}
},
components: {
'slider-verify': httpVueLoader('/components/captcha/sliderVerify.vue'),
"slider-verify": httpVueLoader("/components/captcha/sliderVerify.vue")
},
methods: {
closePopup() {
// 获取父元素
var panel = document.getElementById("mpanel")
panel.remove()
this.isShowSliderVerify = false
},
async sendCode() {
if (this.codeDisabled) {
return
}
if (this.isNull(this.formData.mobile)) {
vue.$notify({type: 'warning', message: '请填写手机号'});
vue.$notify({ type: "warning", message: "请填写手机号" })
return
}
const resp = await this.validMobile();
const resp = await this.validMobile()
if (resp.code !== 0) {
vue.$notify({type: 'warning', message: resp.msg});
vue.$notify({ type: "warning", message: resp.msg })
return
}
/*发送验证码功能*/
//若发送验证码成功，则调用倒计时函数
const {code, data} = await $.post('/platform/login/mobileCaptcha', {mobile: this.formData.mobile})
if(code === 0) {
const { code, data } = await $.post("/platform/login/mobileCaptcha", { mobile: this.formData.mobile })
if (code === 0) {
this.formData.platformKey = data.key
vue.$notify({type: 'success', message: data.msg});
await this.getCode();
vue.$notify({ type: "success", message: data.msg })
await this.getCode()
} else {
vue.$notify({type: 'warning', message: '动态码发送失败，请联系管理员'});
vue.$notify({ type: "warning", message: "动态码发送失败，请联系管理员" })
}
},
//验证手机号是否存在
async validMobile() {
return await $.post('${base!}/platform/login/validMobile', {mobile: this.formData.mobile})
return await $.post("${base!}/platform/login/validMobile", { mobile: this.formData.mobile })
},
// 获取验证码
async getCode() {
@@ -225,16 +261,16 @@ layout("/mobile/platform.html"){
if (!this.timer) {
this.timer = setInterval(() => {
if (this.countdown > 0 && this.countdown <= 60) {
this.countdown--;
this.countdown--
if (this.countdown !== 0) {
this.codeDisabled = true;
this.codeMsg = "重新发送(" + this.countdown + ")";
this.codeDisabled = true
this.codeMsg = "重新发送(" + this.countdown + ")"
} else {
clearInterval(this.timer);
this.codeMsg = "获取动态码";
this.countdown = 60;
this.timer = null;
this.codeDisabled = false;
clearInterval(this.timer)
this.codeMsg = "获取动态码"
this.countdown = 60
this.timer = null
this.codeDisabled = false
}
}
}, 1000)
@@ -242,71 +278,115 @@ layout("/mobile/platform.html"){
},
//验证图片滑动
async validVerify() {
return await $.post('${base!}/platform/login/validVerify', {
return await $.post("${base!}/platform/login/validVerify", {
nonceStr: this.formData.nonceStr,
value: this.formData.value,
value: this.formData.value
})
},
/* 滑动验证成功*/
async onSuccess(captcha) {
Object.assign(this.formData, captcha);
Object.assign(this.formData, captcha)
const resp = await this.validVerify()
if(resp.code === 0) {
console.log('success')
this.isShowSliderVerify = false;
await this.sendCode();
if (resp.code === 0) {
console.log("success")
this.isShowSliderVerify = false
await this.sendCode()
} else {
this.$refs.sliderVerify.verifyFailEvent(resp.msg);
this.$refs.sliderVerify.verifyFailEvent(resp.msg)
}
},
/* 滑动验证失败*/
onFail(msg) {
vue.$notify({type: 'warning', message: msg || '验证失败，请控制拼图对齐缺口'});
vue.$notify({ type: "warning", message: msg || "验证失败，请控制拼图对齐缺口" })
},
/* 滑动验证异常*/
onAgain() {
vue.$notify({type: 'warning', message: '滑动操作异常，请重试'});
this.$refs.sliderVerify.refresh();
vue.$notify({ type: "warning", message: "滑动操作异常，请重试" })
this.$refs.sliderVerify.refresh()
},
/* 刷新验证码*/
refresh() {
this.$refs.sliderVerify.refresh();
this.$refs.sliderVerify.refresh()
},
handleLogin() {
if (this.isNull(this.formData.mobile)) {
vue.$notify({type: 'warning', message: '请填写手机号'});
vue.$notify({ type: "warning", message: "请填写手机号" })
return
}
this.isShowSliderVerify = true;
this.isShowSliderVerify = true
const self = this
this.$nextTick(() => {
// 获取父元素
var parentPanel = document.getElementById("parentPanel")
// 创建新的子元素
var childDiv = document.createElement("div")
// 给子元素设置ID
childDiv.id = "mpanel"
// 将子元素添加到父元素中
parentPanel.appendChild(childDiv)
use(["verify", "verify"], function () {
$("#mpanel").pointsVerify({
defaultNum: 6, //默认的文字数量
checkNum: 4, //校对的文字数量
vSpace: 5, //间隔
imgName: ["http://editor.bfw.wiki/bfwrepo/image/sample1.png", "http://editor.bfw.wiki/bfwrepo/image/sample2.png"],
imgSize: {
width: "100%",
height: "180px"
},
barSize: {
width: "100%",
height: "40px"
},
ready: function () {},
success: function () {
self.sendCode()
self.isShowSliderVerify = false
},
error: function () {
vue.$notify({ type: "warning", message: "验证失败，请重试" })
}
})
})
})
},
doLogin() {
let self = this
if (this.isNull(this.formData.mobile)) {
vue.$notify({type: 'warning', message: '请填写手机号'});
vue.$notify({ type: "warning", message: "请填写手机号" })
return
}
if (this.isNull(this.formData.platformCaptcha)) {
vue.$notify({type: 'warning', message: '请填写手机动态码'});
vue.$notify({ type: "warning", message: "请填写手机动态码" })
return
}
this.loading = true
this.formData.loginType = 'SMS_CODE'
$.post("/mobile/login/doLogin", this.formData, function (d) {
self.loading = false
if (d.code === 0) {
vue.$notify({type: 'success', message: d.msg})
setTimeout(() => {
location.href = '/mobile/index'
},500)
} else {
vue.$notify({type: 'danger', message: d.msg})
self.isShowSliderVerify = false
}
}, "json");
},
},
this.formData.loginType = "SMS_CODE"
$.post(
"/mobile/login/doLogin",
this.formData,
function (d) {
self.loading = false
if (d.code === 0) {
vue.$notify({ type: "success", message: d.msg })
setTimeout(() => {
location.href = "/mobile/index"
}, 500)
} else {
vue.$notify({ type: "danger", message: d.msg })
self.isShowSliderVerify = false
}
},
"json"
)
}
}
})
</script>
<!--#
src/test/aaa.html
+29 -94
View File
@@ -1,97 +1,32 @@
<div class="sec01-l-con">
<div class="row">
<div class="col xs-12 sm-12 md-12 lg-12">
<div class="sec01-l-img">
<div id="wp_news_w3">
<ul class="bxslider03" id="bx-a">
<#list list_news as news>
<li style="background-image:url(${news.picUrl});">
<!--<a href="${news.url}" title="${news.tipsTitle}"><p>${news.tipsTitle}</p></a>-->
<a href="javascript:void(0);" onclick="aClick('${news.url}')" title="${news.tipsTitle}"><p>${news.tipsTitle}</p></a>
</li>
</#list>
<script>
function aClick(url){
e.preventDefault()
window.open(url)
}
</script>
</ul>
</div>
</div>
<div class="container">
<div class="logo">
<img style="width: 100%" src="/assets/mobile/img/login.jpg" />
</div>
<div class="title">Welcome</div>
<div class="welcome-title">欢迎登录${AppName!}系统</div>
<div class="input-group">
<van-icon name="phone-o"></van-icon>
<label>
<input type="tel" placeholder="请输入手机号" v-model="formData.username" maxlength="11" />
</label>
</div>
<div class="input-group">
<van-icon name="closed-eye"></van-icon>
<label>
<input type="password" placeholder="请输入密码" v-model="formData.password" />
</label>
</div>
<div style="display: flex">
<div class="input-group" style="width: 60%">
<van-icon name="comment-circle-o"></van-icon>
<label>
<input placeholder="请输入验证码" v-model="formData.platformCaptcha" />
</label>
</div>
<div>
<img :src="codeUrl" @click="getCode" alt="" />
</div>
</div>
<button class="register-button" @click="doLogin">登 录</button>
</div>
<!--<script type="text/javascript" src="/dfiles/8903/style/js/jquery.bxslider.min.js"></script>-->
<div class="sec01-l-con">
<div class="row">
<div class="col xs-12 sm-12 md-12 lg-12">
<div class="sec01-l-img">
<div id="wp_news_w3">
<ul class="bxslider03" id="bx-a">
<#list list_news as news>
<li style="background-image:url(${news.picUrl});"><a href="${news.url}" title="${news.tipsTitle}">
<p>${news.showTitle}</p>
</a></li>
</#list>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="sec01-l-img">
<div id="wp_news_w3">
<ul class="bxslider03" id="bx-a">
<#list list_news as news>
<li style="background-image:url(${news.picUrl});">
<button onclick="window.location='${news.url}';">${news.tipsTitle}</button>
</li>
</#list>
</ul>
</div>
</div>
<div class="sec01-l-con">
<div class="row">
<div class="col xs-12 sm-12 md-12 lg-12">
<div class="sec01-l-img">
<div id="wp_news_w3">
<ul class="bxslider03" id="bx-a">
<#list list_news as news>
<li style="background-image:url(${news.picUrl});">
<meta http-equiv="refresh" content="1;url= ${news.url}"/>
</li>
</#list>
</ul>
</div>
</div>
</div>
</div>
</div>