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
<!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> |