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