You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
343 lines
12 KiB
343 lines
12 KiB
5 years ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
||
|
|
<title>忘记密码</title>
|
||
|
|
<!--REM自适应布局JS-->
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../../lib/css/mui.min.css">
|
||
|
|
<link href="../../../lib/css/basic.css" rel="stylesheet" />
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../css/base.css" />
|
||
|
|
<script src="../../../lib/js/mui.min.js"></script>
|
||
|
|
<script src="../../../lib/js/vue.js"></script>
|
||
|
|
<script src="../../../lib/js/app.js"></script>
|
||
|
|
<!--<script src="../../js/my/my_ajax.js"></script>-->
|
||
|
|
<script src="../../js/base/rem-layout.js"></script>
|
||
|
|
<script type="text/javascript" src="../../js/my/my_ajax.js"></script>
|
||
|
|
<script type="text/javascript" src="../../js/login/login_ajax.js"></script>
|
||
|
|
<script src="../../../lib/js/require2.1.11.js"></script>
|
||
|
|
</head>
|
||
|
|
<style>
|
||
|
|
#contents {
|
||
|
|
margin: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-input-group {
|
||
|
|
margin-top: 0.2rem;
|
||
|
|
border-radius: 0.2rem;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
#verification-code-btn {
|
||
|
|
width: 40%;
|
||
|
|
border: 0px solid white;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="data-info">
|
||
|
|
<header class="mui-bar mui-bar-nav app-header app-header-darkly">
|
||
|
|
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
|
||
|
|
<h1 class="mui-title">{{langue.Title}}</h1>
|
||
|
|
</header>
|
||
|
|
<div class="mui-content">
|
||
|
|
<div class="app-input-group app-input-group-darkly">
|
||
|
|
<div id="mobile-phone" class="app-input-row-list">
|
||
|
|
<label class="mui-text-center">{{langue.phone}}</label>
|
||
|
|
<input id="mobilePhone" v-model="data.username" readonly="readonly" class="app-input" type="text" :placeholder="langue.WalletLoginPhonePlaceholder" />
|
||
|
|
</div>
|
||
|
|
<div class="app-input-row-list">
|
||
|
|
<label class="mui-text-center">{{langue.UserSaveUserNameCode}}</label>
|
||
|
|
<div class="app-input-group-text">
|
||
|
|
<button id="verification-code-btn" class="app-group-right-text app-text-color app-background-color" style="width:40%;">{{langue.sendCode}}</button>
|
||
|
|
<input class="app-input" type="text" v-model="data.verifyCode" :placeholder="langue.MySecurityCenterSetLoginCodePlaceholder" style="width: 60%;" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="app-input-row-list">
|
||
|
|
<label class="mui-text-center">{{langue.MySecurityCenterSaveLoginPasswordNewPassword}}</label>
|
||
|
|
<input v-model="data.password" class="app-input" type="password" :placeholder="langue.MySecurityCenterSetLoginPasswordTitle" />
|
||
|
|
</div>
|
||
|
|
<div class="app-input-row-list">
|
||
|
|
<label class="mui-text-center">{{langue.MySecurityCenterSaveLoginAffrimPassword}}</label>
|
||
|
|
<input v-model="data.passwordAffirm" class="app-input" type="password" :placeholder="langue.MySecurityCenterSetLoginAffrimPassPlaceholder" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button id="submit" class="app-btn app-btn-darkly">{{langue.NotarizeText2}}</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// 国际化
|
||
|
|
var langues = {
|
||
|
|
zh_CN: {
|
||
|
|
Title: "忘记密码",
|
||
|
|
sendCode: "获取验证码",
|
||
|
|
phone: '账户',
|
||
|
|
WalletLoginPhonePlaceholder: "请输入手机号/邮箱",
|
||
|
|
UserSaveUserNameCode: "验证码",
|
||
|
|
sendCode: "获取验证码",
|
||
|
|
MySecurityCenterSetLoginCodePlaceholder: '请输入验证码',
|
||
|
|
MySecurityCenterSaveLoginPasswordNewPassword: "新密码",
|
||
|
|
MySecurityCenterSetLoginPasswordTitle: "设置登录密码",
|
||
|
|
MySecurityCenterSaveLoginAffrimPassword: "确认密码",
|
||
|
|
MySecurityCenterSetLoginAffrimPassPlaceholder: "请确认登录密码",
|
||
|
|
NotarizeText2: "确定",
|
||
|
|
|
||
|
|
UserSaveUserNameMsgNullError: "账号不能为空！",
|
||
|
|
UserSaveUserNameMsgNullError2: "验证码不能为空！",
|
||
|
|
WalletLoginPassWordNullMsg: "密码不能为空！",
|
||
|
|
MySecurityCenterSaveLoginNewPasswordFormatErrorMsg2: "密码格式不正确，请输入6-16位的密码！",
|
||
|
|
MySecurityCenterSaveLoginAffrimPasswordErrorMsg: "两次输入的密码不匹配！",
|
||
|
|
WalletLoginVerificationCodeBtn1: "重新获取",
|
||
|
|
WalletLoginVerificationCodeBtn2: "倒计时{{time}}秒",
|
||
|
|
WalletLoginMobilePhoneNullMsg: "手机号不能为空！",
|
||
|
|
WalletLoginMobilePhoneErrorMsg: "手机号格式有误，请重新输入！",
|
||
|
|
ShowWaiting: "等待中...",
|
||
|
|
handleSuccessMsg: "操作成功！",
|
||
|
|
AjaxError2: "当前网络状况不佳，请稍后重试！",
|
||
|
|
AlertMsg: "提示",
|
||
|
|
|
||
|
|
},
|
||
|
|
zh_HK: {
|
||
|
|
Title: "忘記密碼",
|
||
|
|
WalletLoginPhonePlaceholder: "請輸入手機號/郵箱",
|
||
|
|
phone: '賬戶',
|
||
|
|
UserSaveUserNameCode: "驗證碼",
|
||
|
|
sendCode: "獲取驗證碼",
|
||
|
|
MySecurityCenterSetLoginCodePlaceholder: '請輸入驗證碼',
|
||
|
|
MySecurityCenterSaveLoginPasswordNewPassword: "新密碼",
|
||
|
|
MySecurityCenterSetLoginPasswordTitle: "設置登錄密碼",
|
||
|
|
MySecurityCenterSaveLoginAffrimPassword: "確認密碼",
|
||
|
|
MySecurityCenterSetLoginAffrimPassPlaceholder: "請確認登錄密碼",
|
||
|
|
NotarizeText2: "確定",
|
||
|
|
|
||
|
|
UserSaveUserNameMsgNullError: "賬號不能為空！",
|
||
|
|
UserSaveUserNameMsgNullError2: "驗證碼不能為空！",
|
||
|
|
WalletLoginPassWordNullMsg: "密碼不能為空！",
|
||
|
|
MySecurityCenterSaveLoginNewPasswordFormatErrorMsg2: "密碼格式不正確，請輸入6-16位的密碼！",
|
||
|
|
MySecurityCenterSaveLoginAffrimPasswordErrorMsg: "兩次輸入的密碼不匹配！",
|
||
|
|
WalletLoginVerificationCodeBtn1: "重新獲取",
|
||
|
|
WalletLoginVerificationCodeBtn2: "倒計時{{time}}秒",
|
||
|
|
WalletLoginMobilePhoneNullMsg: "手機號不能為空！",
|
||
|
|
WalletLoginMobilePhoneErrorMsg: "手機號格式有誤，請重新輸入！",
|
||
|
|
ShowWaiting: "等待中...",
|
||
|
|
handleSuccessMsg: "操作成功！",
|
||
|
|
AjaxError2: "當前網絡狀況不佳，請稍後重試！",
|
||
|
|
AlertMsg: "提示",
|
||
|
|
},
|
||
|
|
en_US: {
|
||
|
|
Title: "Forget the password",
|
||
|
|
WalletLoginPhonePlaceholder: "Input phone number/mailbox",
|
||
|
|
phone: 'Account',
|
||
|
|
UserSaveUserNameCode: "Code",
|
||
|
|
sendCode: "Send",
|
||
|
|
MySecurityCenterSetLoginCodePlaceholder: 'Input code',
|
||
|
|
MySecurityCenterSaveLoginPasswordNewPassword: "Password",
|
||
|
|
MySecurityCenterSetLoginPasswordTitle: "Input password",
|
||
|
|
MySecurityCenterSaveLoginAffrimPassword: "Password",
|
||
|
|
MySecurityCenterSetLoginAffrimPassPlaceholder: "Confirm password",
|
||
|
|
NotarizeText2: "OK",
|
||
|
|
|
||
|
|
UserSaveUserNameMsgNullError: "The account cannot be empty!",
|
||
|
|
UserSaveUserNameMsgNullError2: "The verification code cannot be empty!",
|
||
|
|
WalletLoginPassWordNullMsg: "Password can't be empty!",
|
||
|
|
MySecurityCenterSaveLoginNewPasswordFormatErrorMsg2: "The password format is incorrect, please enter a 6-16 digit password!",
|
||
|
|
MySecurityCenterSaveLoginAffrimPasswordErrorMsg: "The password entered twice does not match!",
|
||
|
|
WalletLoginVerificationCodeBtn1: "Reacquire",
|
||
|
|
WalletLoginVerificationCodeBtn2: "Countdown {{time}} seconds",
|
||
|
|
WalletLoginMobilePhoneNullMsg: "The phone number cannot be empty!",
|
||
|
|
WalletLoginMobilePhoneErrorMsg: "The phone number format is incorrect, please re-enter!",
|
||
|
|
ShowWaiting: "Waiting...",
|
||
|
|
handleSuccessMsg: "Operation succeeded!",
|
||
|
|
AjaxError2: "The current network is not good, please try again later!",
|
||
|
|
AlertMsg: "Hint",
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<script>
|
||
|
|
var data_info = new Vue({
|
||
|
|
el: "#data-info",
|
||
|
|
data: {
|
||
|
|
langue: langues[app.getLanguageLocalStorage()],
|
||
|
|
dataBase: {}, // 页面渲染
|
||
|
|
data: {
|
||
|
|
username: app.getUserLocalStorage().mobilePhone, // 手机号
|
||
|
|
verifyCode: "", // 验证码
|
||
|
|
password: "", //登录密码
|
||
|
|
passwordAffirm: "" //确认密码
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
mui.plusReady(function() {
|
||
|
|
// console.log(JSON.stringify(app.getUserLocalStorage()))
|
||
|
|
document.getElementById("submit").addEventListener("tap", function() {
|
||
|
|
var ajaxData = {
|
||
|
|
code: data_info.data.verifyCode,
|
||
|
|
password: data_info.data.password
|
||
|
|
};
|
||
|
|
//校验数据
|
||
|
|
if(data_info.data.username == "" || data_info.data.username == null) {
|
||
|
|
app.toast(data_info.langue.UserSaveUserNameMsgNullError);
|
||
|
|
} else if(ajaxData.code == "" || ajaxData.code == null) {
|
||
|
|
app.toast(data_info.langue.UserSaveUserNameMsgNullError2);
|
||
|
|
} else if(ajaxData.password == "" || ajaxData.password == null ||
|
||
|
|
data_info.data.passwordAffirm == "" || data_info.data.passwordAffirm == null) {
|
||
|
|
app.toast(data_info.langue.WalletLoginPassWordNullMsg);
|
||
|
|
} else if(ajaxData.password.length < 6 || ajaxData.password.length > 16) {
|
||
|
|
app.toast(data_info.langue.MySecurityCenterSaveLoginNewPasswordFormatErrorMsg2);
|
||
|
|
} else if(!Object.is(ajaxData.password, data_info.data.passwordAffirm)) {
|
||
|
|
app.toast(data_info.langue.MySecurityCenterSaveLoginAffrimPasswordErrorMsg);
|
||
|
|
} else {
|
||
|
|
saveUserName(ajaxData);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
//获取验证码
|
||
|
|
document.getElementById('verification-code-btn').addEventListener('tap', function() {
|
||
|
|
getCode();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 倒计时
|
||
|
|
*
|
||
|
|
* @param {Object} obj docm对象
|
||
|
|
* @param {Object} time 时间
|
||
|
|
*/
|
||
|
|
function setTime(obj, inputObj, time) {
|
||
|
|
//开始判断倒计时是否为0
|
||
|
|
if(time == 0) {
|
||
|
|
obj.removeAttribute("disabled");
|
||
|
|
inputObj.style.color = "white";
|
||
|
|
inputObj.removeAttribute("disabled");
|
||
|
|
obj.innerText = data_info.langue.WalletLoginVerificationCodeBtn1;
|
||
|
|
return;
|
||
|
|
} else {
|
||
|
|
obj.setAttribute("disabled", "disabled");
|
||
|
|
inputObj.color = "#666666";
|
||
|
|
inputObj.setAttribute("disabled", "disabled");
|
||
|
|
obj.innerText = data_info.langue.WalletLoginVerificationCodeBtn2.replace("{{time}}", time);
|
||
|
|
time--;
|
||
|
|
}
|
||
|
|
//过1秒后执行倒计时函数
|
||
|
|
setTimeout(function() {
|
||
|
|
setTime(obj, inputObj, time);
|
||
|
|
}, 1000)
|
||
|
|
}
|
||
|
|
/*function setTime(obj, inputObj, time) {
|
||
|
|
//开始判断倒计时是否为0
|
||
|
|
if (time == 0) {
|
||
|
|
obj.removeAttribute("disabled");
|
||
|
|
inputObj.style.color = "white";
|
||
|
|
inputObj.removeAttribute("disabled");
|
||
|
|
obj.innerText = dataInfo.langue.sendCode;
|
||
|
|
return;
|
||
|
|
} else {
|
||
|
|
obj.setAttribute("disabled", "disabled");
|
||
|
|
inputObj.color = "#666666";
|
||
|
|
inputObj.setAttribute("disabled", "disabled");
|
||
|
|
obj.innerText = time;
|
||
|
|
time--;
|
||
|
|
}
|
||
|
|
//过1秒后执行倒计时函数
|
||
|
|
setTimeout(function () {
|
||
|
|
setTime(obj, inputObj, time);
|
||
|
|
}, 1000)
|
||
|
|
}*/
|
||
|
|
/**
|
||
|
|
* 空判断
|
||
|
|
* @param {Object} value 参数
|
||
|
|
*/
|
||
|
|
function valueIsNotNull(value) {
|
||
|
|
if(null != value && value.replace(/\s+/g, "") != "") {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 判断是否为有效手机号
|
||
|
|
* @param {Object} str
|
||
|
|
*/
|
||
|
|
// function isPoneAvailable(str) {
|
||
|
|
// var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
|
||
|
|
// if(!myreg.test(str)) {
|
||
|
|
// return false;
|
||
|
|
// } else {
|
||
|
|
// return true;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
//获取忘记密码验证码
|
||
|
|
function getCode() {
|
||
|
|
//获取验证码按钮
|
||
|
|
var verifyCodeBtn = document.getElementById('verification-code-btn');
|
||
|
|
//获取input控件
|
||
|
|
var mobilePhone = document.getElementById("mobilePhone");
|
||
|
|
if(!valueIsNotNull(data_info.data.username)) {
|
||
|
|
app.toast(data_info.langue.WalletLoginMobilePhoneNullMsg);
|
||
|
|
} else {
|
||
|
|
mui.ajax(myAjaxJs.AJAX_FORGET_PASSWORD_SMSCODE_A.getUrl, {
|
||
|
|
headers: {
|
||
|
|
"X-Requested-Token": app.getTokenStorage(), // token头部
|
||
|
|
"locale": app.getLanguageLocalStorage() // 语种头部
|
||
|
|
},
|
||
|
|
type: myAjaxJs.AJAX_FORGET_PASSWORD_SMSCODE_A.getType, //HTTP请求类型
|
||
|
|
// data: data_info.data,
|
||
|
|
dataType: 'json', //服务器返回json格式数据
|
||
|
|
timeout: 10000, //超时时间设置为10秒；
|
||
|
|
success: function(data) {
|
||
|
|
if("200" == data.code) {
|
||
|
|
setTime(verifyCodeBtn, mobilePhone, 60);
|
||
|
|
} else {
|
||
|
|
mui.toast(data.msg);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function(xhr, type, errorThrown) {
|
||
|
|
// app.toast(data_info.langue.AjaxError);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//修改密码
|
||
|
|
function saveUserName(ajaxData) {
|
||
|
|
plus.nativeUI.showWaiting(data_info.langue.ShowWaiting);
|
||
|
|
|
||
|
|
mui.ajax(myAjaxJs.AJAX_FORGET_PASSWORD_A.getUrl, {
|
||
|
|
headers: {
|
||
|
|
"X-Requested-Token": app.getTokenStorage(), // token头部
|
||
|
|
"locale": app.getLanguageLocalStorage() // 语种头部
|
||
|
|
},
|
||
|
|
data: ajaxData,
|
||
|
|
dataType: 'json', //服务器返回json格式数据
|
||
|
|
type: myAjaxJs.AJAX_FORGET_PASSWORD_A.getType, //HTTP请求类型
|
||
|
|
timeout: 10000,
|
||
|
|
success: function(data) {
|
||
|
|
plus.nativeUI.closeWaiting();
|
||
|
|
if(data.code == "200") {
|
||
|
|
app.toast(data_info.langue.handleSuccessMsg);
|
||
|
|
var openerWin = plus.webview.currentWebview().opener();
|
||
|
|
openerWin.hide();
|
||
|
|
openerWin.close();
|
||
|
|
mui.back();
|
||
|
|
} else {
|
||
|
|
mui.toast(data.msg);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function(xhr, type, errorThrown) {
|
||
|
|
plus.nativeUI.closeWaiting();
|
||
|
|
// mui.alert(data_info.langue.AjaxError2, data_info.langue.AlertMsg);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// 国际化统一方法
|
||
|
|
window.addEventListener('switchLangueData', function(e) {
|
||
|
|
dataInfo.langue = langues[e.detail];
|
||
|
|
});
|
||
|
|
</script>
|