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.
246 lines
7.5 KiB
246 lines
7.5 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 rel="stylesheet" type="text/css" href="../../../lib/css/basic.css"/> |
|
<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">{{dataBase.UserSaveUserNameTitle}}</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">+86</label> |
|
<input id="mobilePhone" v-model="mobilePhone" class="app-input" type="text" :placeholder="dataBase.UserSaveUserNamePlaceholder" /> |
|
</div> |
|
<div class="app-input-row-list"> |
|
<label class="mui-text-center">{{dataBase.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%;">{{dataBase.UserSaveUserNameCodeBtn}}</button> |
|
<input class="app-input" type="text" v-model="verificationCode" :placeholder="dataBase.UserSaveUserNamePlaceholder2" style="width: 60%;" /> |
|
</div> |
|
</div> |
|
</div> |
|
<button id="submit" class="app-btn app-btn-darkly">{{dataBase.NotarizeText2}}</button> |
|
</div> |
|
</div> |
|
</body> |
|
|
|
</html> |
|
|
|
<script> |
|
var data_info = new Vue({ |
|
el: "#data-info", |
|
data: { |
|
dataBase: {}, // 页面渲染 |
|
mobilePhone: "", // 手机号验证 |
|
verificationCode: "", // 验证码 |
|
} |
|
}); |
|
|
|
mui.plusReady(function() { |
|
|
|
document.getElementById("submit").addEventListener("tap", function() { |
|
//校验数据 |
|
if(data_info.mobilePhone == "" || data_info.mobilePhone == null) { |
|
mui.toast(data_info.dataBase.UserSaveUserNameMsgNullError); |
|
} else if(data_info.verificationCode == "" || data_info.verificationCode == null) { |
|
mui.toast(data_info.dataBase.UserSaveUserNameMsgNullError2); |
|
} else { |
|
saveUserName(); |
|
} |
|
}); |
|
|
|
//获取验证码 |
|
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.dataBase.WalletLoginVerificationCodeBtn1; |
|
return; |
|
} else { |
|
obj.setAttribute("disabled", "disabled"); |
|
inputObj.color = "#666666"; |
|
inputObj.setAttribute("disabled", "disabled"); |
|
obj.innerText = data_info.dataBase.WalletLoginVerificationCodeBtn2.replace("{{time}}", 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 verificationCodeBtn = document.getElementById('verification-code-btn'); |
|
//获取input控件 |
|
var mobilePhone = document.getElementById("mobilePhone"); |
|
if(!valueIsNotNull(data_info.mobilePhone)) { |
|
app.toast(data_info.dataBase.WalletLoginMobilePhoneNullMsg); |
|
} else if(!isPoneAvailable(data_info.mobilePhone)) { |
|
app.toast(data_info.dataBase.WalletLoginMobilePhoneErrorMsg); |
|
} else { |
|
mui.ajax(myAjaxJs.AJAX_UPDATE_USER_NAME_GET_CODE.getUrl, { |
|
headers: { |
|
"X-Requested-Token": app.getTokenStorage(), // token头部 |
|
"locale": app.getLanguageLocalStorage() // 语种头部 |
|
}, |
|
type: myAjaxJs.AJAX_UPDATE_USER_NAME_GET_CODE.getType, //HTTP请求类型 |
|
data: { |
|
tel: data_info.mobilePhone |
|
}, |
|
dataType: 'json', //服务器返回json格式数据 |
|
timeout: 10000, //超时时间设置为10秒； |
|
success: function(data) { |
|
if("200" == data.code) { |
|
setTime(verificationCodeBtn, mobilePhone, 60); |
|
} else { |
|
mui.toast(data.msg); |
|
} |
|
}, |
|
error: function(xhr, type, errorThrown) { |
|
// app.toast(data_info.dataBase.AjaxError); |
|
} |
|
}) |
|
} |
|
} |
|
|
|
//修改账号 |
|
function saveUserName() { |
|
plus.nativeUI.showWaiting(data_info.dataBase.ShowWaiting); |
|
mui.ajax(myAjaxJs.AJAX_UPDATE_USER_NAME.getUrl, { |
|
headers: { |
|
"X-Requested-Token": app.getTokenStorage(), // token头部 |
|
"locale": app.getLanguageLocalStorage() // 语种头部 |
|
}, |
|
data: { |
|
tel: data_info.mobilePhone, |
|
code: data_info.verificationCode |
|
}, |
|
dataType: 'json', //服务器返回json格式数据 |
|
type: myAjaxJs.AJAX_UPDATE_USER_NAME.getType, //HTTP请求类型 |
|
timeout: 10000, |
|
success: function(data) { |
|
if(data.code == "200") { |
|
//用户数据加入缓存 |
|
var userData = app.getUserLocalStorage(); |
|
userData.username = data_info.mobilePhone; |
|
userData.nickname = data_info.mobilePhone; |
|
app.setUserLocalStorage(userData); |
|
console.log(JSON.stringify(app.getWalletUserLocalStorage())); |
|
synchrodataFun(); |
|
plus.nativeUI.closeWaiting(); |
|
mui.back(); |
|
plus.webview.currentWebview().close(); |
|
mui.toast(data_info.dataBase.AlterSuccessMsg); |
|
} else if(data.code == "201" || data.code == "202") { //未登录 |
|
plus.nativeUI.closeWaiting(); |
|
mui.openWindow({ |
|
id: "mine/html/wallet_login.html", |
|
url: "../wallet_login.html" |
|
}); |
|
} else { |
|
plus.nativeUI.closeWaiting(); |
|
mui.toast(data.msg); |
|
} |
|
}, |
|
error: function(xhr, type, errorThrown) { |
|
plus.nativeUI.closeWaiting(); |
|
// mui.alert(data_info.dataBase.AjaxError2, data_info.dataBase.AlertMsg); |
|
} |
|
}); |
|
} |
|
|
|
/** |
|
* 数据同步 |
|
*/ |
|
function synchrodataFun() { |
|
//获取首页窗口，账户信息页窗口 |
|
var walletMyView = plus.webview.getWebviewById("mine/html/wallet_my.html"); |
|
var walletUserInfoListView = plus.webview.getWebviewById("mine/html/user/user_info_list.html"); |
|
walletMyView.evalJS("saveUserInfoData();"); |
|
walletUserInfoListView.evalJS("saveUserInfoData();"); |
|
} |
|
|
|
appLanguageFun(); |
|
/** |
|
* 国际化方法 |
|
*/ |
|
function appLanguageFun() { |
|
var type = app.getLanguageLocalStorage(); |
|
require(['../../js/language/' + type], function(dataBase) { |
|
data_info.dataBase = dataBase; |
|
}) |
|
} |
|
</script> |