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.
324 lines
9.3 KiB
324 lines
9.3 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 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.email}}</label>
|
||
|
|
<input id="mailaddress" v-model="mailaddress" class="app-input" type="email" :placeholder="langue.inputEmail" />
|
||
|
|
</div>
|
||
|
|
<div class="app-input-row-list">
|
||
|
|
<label class="mui-text-center">{{langue.verificationCode}}</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.sendVerificationCode}}
|
||
|
|
</button>
|
||
|
|
<input class="app-input" type="text" v-model="verificationCode" :placeholder="langue.inputEmailVerificationCode" style="width: 60%;" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button id="submit" class="app-btn app-btn-darkly">{{langue.confirm}}</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|
||
|
|
<script>
|
||
|
|
// 国际化
|
||
|
|
var langues = {
|
||
|
|
zh_CN: {
|
||
|
|
title: "绑定邮箱",
|
||
|
|
email: "邮箱",
|
||
|
|
inputEmail: "请输入邮箱",
|
||
|
|
verificationCode: "验证码",
|
||
|
|
confirm: "确定",
|
||
|
|
umputEmailAddress: "请输入邮箱地址",
|
||
|
|
sendVerificationCode: "发送验证码",
|
||
|
|
inputEmailVerificationCode: "请输入邮箱验证码",
|
||
|
|
|
||
|
|
theAccountCannotBeEmpty: "账号不能为空",
|
||
|
|
UserSaveUserNameMsgNullError2: "验证码不能为空",
|
||
|
|
theEmailAddressCannotBeEmpty: "邮箱地址不能为空",
|
||
|
|
theMailboxFormatIsIncorrect: "邮箱格式不正确",
|
||
|
|
AjaxError: "网络异常，请检查网络状态"
|
||
|
|
},
|
||
|
|
zh_HK: {
|
||
|
|
title: "綁定郵箱",
|
||
|
|
email: "郵箱",
|
||
|
|
inputEmail: "請輸入郵箱",
|
||
|
|
verificationCode: "驗證碼",
|
||
|
|
confirm: "確定",
|
||
|
|
sendVerificationCode: "發送驗證碼",
|
||
|
|
inputEmailVerificationCode: "請輸入郵箱驗證碼",
|
||
|
|
|
||
|
|
theAccountCannotBeEmpty: "賬號不能為空",
|
||
|
|
UserSaveUserNameMsgNullError2: "驗證碼不能為空",
|
||
|
|
theEmailAddressCannotBeEmpty: "郵箱地址不能為空",
|
||
|
|
theMailboxFormatIsIncorrect: "郵箱格式不正確",
|
||
|
|
AjaxError: "網絡異常，請檢查網絡狀態"
|
||
|
|
},
|
||
|
|
en_US: {
|
||
|
|
title: "Binding the mailbox",
|
||
|
|
email: "Email",
|
||
|
|
inputEmail: "input email",
|
||
|
|
verificationCode: "Code",
|
||
|
|
confirm: "OK",
|
||
|
|
sendVerificationCode: "send",
|
||
|
|
inputEmailVerificationCode: "verification code",
|
||
|
|
|
||
|
|
theAccountCannotBeEmpty: "The account cannot be empty",
|
||
|
|
UserSaveUserNameMsgNullError2: "The verification code cannot be empty",
|
||
|
|
theEmailAddressCannotBeEmpty: "The email address cannot be empty",
|
||
|
|
theMailboxFormatIsIncorrect: "The mailbox format is incorrect",
|
||
|
|
AjaxError: "Network exception, please check network status"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<script>
|
||
|
|
var data_info = new Vue({
|
||
|
|
el: "#data-info",
|
||
|
|
data: {
|
||
|
|
langue: langues[app.getLanguageLocalStorage()],
|
||
|
|
dataBase: {}, // 页面渲染
|
||
|
|
mailaddress: "", //邮箱验证
|
||
|
|
verificationCode: "", // 验证码
|
||
|
|
mailStatus: '' //判断邮箱是否收到验证码状态
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
mui.plusReady(function() {
|
||
|
|
|
||
|
|
document.getElementById("submit").addEventListener("tap", function() {
|
||
|
|
//校验数据
|
||
|
|
if(data_info.mailaddress == "" || data_info.mailaddress == null) {
|
||
|
|
mui.toast(data_info.langue.theAccountCannotBeEmpty);
|
||
|
|
} else if(data_info.verificationCode == "" || data_info.verificationCode == null) {
|
||
|
|
mui.toast(data_info.langue.UserSaveUserNameMsgNullError2);
|
||
|
|
} else {
|
||
|
|
bingEmail(data_info.mailaddress, data_info.verificationCode);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
//获取验证码
|
||
|
|
document.getElementById('verification-code-btn').addEventListener('tap', function() {
|
||
|
|
getCode();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 倒计时
|
||
|
|
*
|
||
|
|
* @param {Object} obj docm对象
|
||
|
|
* @param {Object} time 时间
|
||
|
|
*/
|
||
|
|
// function setTime(obj, inputObj, time) {
|
||
|
|
// //开始判断倒计时是否为0{
|
||
|
|
// if(data_info.mailStatus == '200') {
|
||
|
|
// if(time == 0) {
|
||
|
|
// obj.removeAttribute("disabled");
|
||
|
|
// inputObj.style.color = "white";
|
||
|
|
// inputObj.removeAttribute("disabled");
|
||
|
|
// obj.innerText = data_info.langue.sendVerificationCode;
|
||
|
|
// return;
|
||
|
|
// } else {
|
||
|
|
// obj.setAttribute("disabled", "disabled");
|
||
|
|
// inputObj.color = "#666666";
|
||
|
|
// inputObj.setAttribute("disabled", "disabled");
|
||
|
|
// obj.innerText = time + 's';
|
||
|
|
// time--;
|
||
|
|
// }
|
||
|
|
// }else{
|
||
|
|
// obj.setAttribute("disabled", "disabled");
|
||
|
|
//
|
||
|
|
// }
|
||
|
|
//
|
||
|
|
// //过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 = data_info.langue.sendVerificationCode;
|
||
|
|
return;
|
||
|
|
} else {
|
||
|
|
obj.setAttribute("disabled", "disabled");
|
||
|
|
inputObj.color = "#666666";
|
||
|
|
inputObj.setAttribute("disabled", "disabled");
|
||
|
|
obj.innerText = time + 's';
|
||
|
|
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 = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
|
||
|
|
// if(!myreg.test(str)) {
|
||
|
|
// return false;
|
||
|
|
// } else {
|
||
|
|
// return true;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
//获取验证码
|
||
|
|
function getCode() {
|
||
|
|
//获取验证码按钮
|
||
|
|
var verificationCodeBtn = document.getElementById('verification-code-btn');
|
||
|
|
//获取input控件
|
||
|
|
var mailaddress = document.getElementById("mailaddress");
|
||
|
|
if(!valueIsNotNull(data_info.mailaddress)) {
|
||
|
|
app.toast(data_info.langue.theEmailAddressCannotBeEmpty);
|
||
|
|
} else {
|
||
|
|
setTime(verificationCodeBtn, mailaddress, 60);
|
||
|
|
sendEmailCode(mailaddress.value);
|
||
|
|
}
|
||
|
|
// 发送验证码
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 保存用户邮箱
|
||
|
|
* @param {Object} email
|
||
|
|
* @param {Object} code
|
||
|
|
*/
|
||
|
|
function bingEmail(email, code) {
|
||
|
|
console.log(email + code)
|
||
|
|
mui.ajax(myAjaxJs.AJAX_BING_EMAIL.getUrl, {
|
||
|
|
headers: {
|
||
|
|
"X-Requested-Token": app.getTokenStorage(), // token头部
|
||
|
|
"locale": app.getLanguageLocalStorage() // 语种头部
|
||
|
|
},
|
||
|
|
data: {
|
||
|
|
"email": email,
|
||
|
|
"code": code
|
||
|
|
},
|
||
|
|
type: myAjaxJs.AJAX_BING_EMAIL.getType,
|
||
|
|
dataType: 'json',
|
||
|
|
timeout: 10000,
|
||
|
|
success: function(data) {
|
||
|
|
if("200" == data.code) {
|
||
|
|
var user = app.getUserLocalStorage();
|
||
|
|
user.email = true;
|
||
|
|
app.setUserLocalStorage(user);
|
||
|
|
mui.back();
|
||
|
|
var center = plus.webview.currentWebview().opener();
|
||
|
|
center.evalJS("saveUserInfoData();");
|
||
|
|
plus.webview.currentWebview().close();
|
||
|
|
} else {
|
||
|
|
mui.toast(data.msg);
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function(xhr, type, errorThrown) {
|
||
|
|
mui.toast(data_info.langue.AjaxError);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 发送验证码
|
||
|
|
* @param {Object} email
|
||
|
|
*/
|
||
|
|
function sendEmailCode(email) {
|
||
|
|
console.log(email)
|
||
|
|
mui.ajax(myAjaxJs.AJAX_SEND_EMAIL_CODE.getUrl, {
|
||
|
|
headers: {
|
||
|
|
"X-Requested-Token": app.getTokenStorage(), // token头部
|
||
|
|
"locale": app.getLanguageLocalStorage() // 语种头部
|
||
|
|
},
|
||
|
|
data: {
|
||
|
|
"email": email
|
||
|
|
},
|
||
|
|
type: myAjaxJs.AJAX_SEND_EMAIL_CODE.getType,
|
||
|
|
dataType: 'json',
|
||
|
|
timeout: 10000,
|
||
|
|
success: function(data) {
|
||
|
|
if("200" == data.code) {
|
||
|
|
data_info.mailStatus = data.code;
|
||
|
|
} else {
|
||
|
|
mui.toast(data.msg);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function(xhr, type, errorThrown) {
|
||
|
|
mui.toast(data_info.langue.AjaxError);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
// 国际化统一方法
|
||
|
|
window.addEventListener('switchLangueData', function(e) {
|
||
|
|
dataInfo.langue = langues[e.detail];
|
||
|
|
});
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 数据同步
|
||
|
|
*/
|
||
|
|
// function synchrodataFun() {
|
||
|
|
// //获取首页窗口，账户信息页窗口
|
||
|
|
// let walletMyView = plus.webview.getWebviewById("mine/html/wallet_my.html");
|
||
|
|
// let walletUserInfoListView = plus.webview.getWebviewById("mine/html/user/user_info_list.html");
|
||
|
|
// walletMyView.evalJS("saveUserInfoData();");
|
||
|
|
// walletUserInfoListView.evalJS("saveUserInfoData();");
|
||
|
|
// }
|
||
|
|
</script>
|