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