<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>玩湃-修改密码</title>
|
|
<link rel="shortcut icon" href="${ctxPath}/log.ico">
|
<link href="${ctxPath}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
|
<link href="${ctxPath}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
|
<link href="${ctxPath}/css/style.css?v=4.1.0" rel="stylesheet">
|
<script>if (window.top !== window.self) {
|
window.top.location = window.location;
|
}</script>
|
<script src="${ctxPath}/js/jquery.min.js?v=2.1.4"></script>
|
<script src="${ctxPath}/js/bootstrap.min.js?v=3.3.6"></script>
|
<style>
|
.item{
|
display: flex;
|
align-items: center;
|
/*border: 1px solid red !important;*/
|
margin: 24px 0;
|
position: relative;
|
}
|
.item>img{
|
position: absolute;
|
left: 8px;
|
/*bottom: 50%;*/
|
}
|
.itemInput{
|
background:none;
|
outline:none;
|
border:0px;
|
border-bottom:1px solid grey ;
|
padding-left: 30px;
|
height: 34px;
|
width: 100%;
|
}
|
.itemInput[type="text"]{
|
|
background: #fff;
|
outline: none;
|
}
|
|
.itemInput:-webkit-autofill {
|
-webkit-box-shadow: 0 0 0 1000px white inset; // 背景设为白色
|
-webkit-text-fill-color: #fff; // 字体颜色
|
}
|
</style>
|
</head>
|
|
<body class="gray-bg" style="background:url(${ctxPath}/img/index1.png) no-repeat; background-size:cover;">
|
|
<div style="display: flex;align-items: center;justify-content: center;height: 100%">
|
|
|
<div style="position: relative;margin-left:200px;left: -20px; max-width: 300px;min-height: 300px;background: white;border-radius: 8px;box-sizing: border-box;padding: 0 30px 0 50px;display: flex;align-items: center;justify-content: center;">
|
<div style="max-height: 100%" >
|
<img style="margin-left: 44px" src="${ctxPath}/img/logo.png" width="100px" height="120px"/>
|
<br/>
|
<h4 style="color: red;">${tips!}</h4>
|
<form class="m-t" role="form" action="${ctxPath}/updatePassword" method="post">
|
<div class="item">
|
<img src="${ctxPath}/img/account.png" />
|
<input class="itemInput" type="text" name="username" id="username" placeholder="请输入账号" required="" value="">
|
</div>
|
<div class="item">
|
<input class="itemInput" name="sms_code" id="sms_code" placeholder="请输入验证码" required="" value="" style="padding-left: 0px; text-align: center;">
|
<input type="hidden" id="code">
|
<button id="btn" type="button" onclick="sendSMSCode(this)" style="width: 150px; font-size: 14px;">获取验证码</button>
|
</div>
|
<div class="item">
|
<img src="${ctxPath}/img/password.png" />
|
<input class="itemInput" type="password" name="password" id="password" placeholder="请输入新密码" required="" value="">
|
</div>
|
<div class="item">
|
<img src="${ctxPath}/img/password.png" />
|
<input class="itemInput" type="password" name="passwordS" id="passwordS" placeholder="请确认新密码" required="" value="">
|
</div>
|
|
<button onclick="update()" class="btn full-width m-b" style="background-color: #0573EA;color: white;">保存</button>
|
<button class="btn full-width m-b" style="background-color: #0573EA;color: white;" onclick="getBack()">关闭</button>
|
<button type="submit" id="submit" style="display: none;"></button>
|
</p>
|
</form>
|
</div>
|
</div></div>
|
</body>
|
<script src="${ctxPath}/js/jquery.min.js?v=2.1.4"></script>
|
<script src="${ctxPath}/js/common/ajax-object.js"></script>
|
<script src="${ctxPath}/js/common/Feng.js"></script>
|
<script src="${ctxPath}/crypto-js/crypto-js.js"></script>
|
<script>
|
$(function () {
|
$("#kaptcha").on('click', function () {
|
$("#kaptcha").attr('src', '${ctxPath}/kaptcha?' + Math.floor(Math.random() * 100)).fadeIn();
|
});
|
});
|
var key = CryptoJS.enc.Utf8.parse("c53fd327353a09a1");
|
var iv = CryptoJS.enc.Utf8.parse("3a0565e3b1d8ae3d");
|
|
function sendSMSCode(btn) {
|
var phone = $("#username").val();
|
if (!phone) {
|
alert("请输入账号");
|
return;
|
}
|
// 禁用按钮并开始倒计时
|
startCountdown(btn, 60);
|
|
var ajax = new $ax(Feng.ctxPath + "/getSMSCode", function(data){
|
if(data != null && data.code != 200){
|
alert(data.msg);
|
}
|
});
|
ajax.set("phone", phone);
|
ajax.start();
|
}
|
|
// 倒计时函数
|
function startCountdown(btn, seconds) {
|
var $btn = $(btn);
|
$btn.prop('disabled', true);
|
$btn.css('background', '#ccc');
|
var count = seconds;
|
$btn.text(count + "s后重发");
|
var timer = setInterval(function() {
|
count--;
|
if (count > 0) {
|
$btn.text(count + "s后重发");
|
} else {
|
clearInterval(timer);
|
$btn.prop('disabled', false);
|
$btn.css('background', ''); // 恢复原色
|
$btn.text("获取验证码");
|
}
|
}, 1000);
|
}
|
|
//aes加密
|
function encrypt(context) {
|
var encrypted = '';
|
if (typeof(context) == 'string') {
|
|
}else if(typeof(context) == 'object'){
|
context = JSON.stringify(context);
|
}
|
var srcs = CryptoJS.enc.Utf8.parse(context);
|
encrypted = CryptoJS.AES.encrypt(srcs, key, {
|
iv: iv,
|
mode: CryptoJS.mode.CBC,
|
padding: CryptoJS.pad.Pkcs7
|
});
|
return encrypted.toString();
|
}
|
// aes解密
|
function decrypt(context) {
|
var decrypt = CryptoJS.AES.decrypt(context, key, {
|
iv: iv,
|
mode: CryptoJS.mode.CBC,
|
padding: CryptoJS.pad.Pkcs7
|
});
|
var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
|
return decryptedStr.toString();
|
}
|
|
function update() {
|
let password = $('#password').val();
|
password = encrypt(password);
|
$('#password').val(password);
|
|
$.ajax({
|
url: 'your-submit-url',
|
type: 'POST',
|
data: $('#submit').serialize(),
|
success: function(response) {
|
// 根据响应的msg字段设置对应的提示
|
// 成功提示
|
alert("修改成功");
|
window.location.href = Feng.ctxPath+"/login";
|
},
|
error: function() {
|
// 错误处理
|
alert('当前账号不存在');
|
}
|
});
|
}
|
|
|
function getBack() {
|
history.go(-1);
|
}
|
|
window.addEventListener(
|
"mousewheel",
|
function(event) {
|
if (event.ctrlKey === true || event.metaKey) {
|
event.preventDefault();
|
}
|
},
|
{ passive: false }
|
);
|
|
//firefox
|
window.addEventListener(
|
"DOMMouseScroll",
|
function(event) {
|
if (event.ctrlKey === true || event.metaKey) {
|
event.preventDefault();
|
}
|
},
|
{ passive: false }
|
);
|
|
|
function fontSize(designWidth, maxWidth, minWidth) {
|
var doc = document,
|
win = window,
|
docEl = doc.documentElement,
|
remStyle = document.createElement("style"),
|
tid;
|
|
function refreshRem() {
|
var width = docEl.getBoundingClientRect().width;
|
maxWidth = maxWidth || 540;
|
width > maxWidth && (width = maxWidth);
|
var rem = (width * 100) / designWidth;
|
remStyle.innerHTML = "html{font-size:" + rem + "px;}";
|
}
|
|
if (docEl.firstElementChild) {
|
docEl.firstElementChild.appendChild(remStyle);
|
} else {
|
var wrap = doc.createElement("div");
|
wrap.appendChild(remStyle);
|
doc.write(wrap.innerHTML);
|
wrap = null;
|
}
|
// 要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
|
refreshRem();
|
|
win.addEventListener(
|
"resize",
|
function(res) {
|
// console.log(res);
|
if (minWidth < res.currentTarget.innerWidth) {
|
clearTimeout(tid); //防止执行两次
|
return;
|
}
|
|
tid = setTimeout(refreshRem, 10);
|
},
|
false
|
);
|
|
win.addEventListener(
|
"pageshow",
|
function(e) {
|
if (e.persisted) {
|
// 浏览器后退的时候重新计算
|
clearTimeout(tid);
|
tid = setTimeout(refreshRem, 300);
|
}
|
},
|
false
|
);
|
|
if (doc.readyState === "complete") {
|
doc.body.style.fontSize = "16px";
|
} else {
|
doc.addEventListener(
|
"DOMContentLoaded",
|
function(e) {
|
doc.body.style.fontSize = "16px";
|
},
|
false
|
);
|
}
|
}
|
fontSize(768, 1920);
|
</script>
|
</body>
|
|
</html>
|
