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.
207 lines
7.6 KiB
207 lines
7.6 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" /> |
|
<link rel="stylesheet" type="text/css" href="../../../css/c2c/base/dom-flex.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/base/rem-layout.js"></script> |
|
<script src="../../js/my/my_ajax.js"></script> |
|
<script type="text/javascript" src="../../js/base/regular.js"></script> |
|
<script src="../../../lib/js/require2.1.11.js"></script> |
|
</head> |
|
<style> |
|
#contents { |
|
margin: 0.5rem; |
|
} |
|
|
|
.alert-text div { |
|
margin-bottom: 0.08rem; |
|
} |
|
</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.UserSaveNickNameTitle}}</h1> |
|
</header> |
|
<div class="mui-content"> |
|
<div id="contents"> |
|
<input type="text" class="app-input app-input-darkly" v-model="dataParameter.nickname" :placeholder="userLocalStorage.nickname" /> |
|
<div class="app-text-color app-text-warning-color alert-text"> |
|
<div>{{langue.UserSaveNickNameAlert1}}</div> |
|
<div>{{langue.UserSaveNickNameAlert2}}</div> |
|
<div>{{langue.UserSaveNickNameAlert3}}</div> |
|
</div> |
|
<button id="save" class="app-btn-darkly">{{langue.NotarizeText2}}</button> |
|
</div> |
|
</div> |
|
</div> |
|
</body> |
|
|
|
</html> |
|
<script> |
|
// 国际化 |
|
var langues = { |
|
zh_CN: { |
|
UserSaveNickNameTitle: "昵称设置", |
|
UserSaveNickNameMsgRepetitionError: "昵称没有变化", |
|
UserSaveNickNameMsgNullError: "昵称不能为空", |
|
UserSaveNickNameMsgLengthError: "昵称长度请控制在 1-10 个字符", |
|
UserSaveNickNameMsgError: "您输入的昵称不合法，请重新输入！", |
|
UserSaveNickNameAlert1: "请输入10位字符的昵称", |
|
UserSaveNickNameAlert2: "可以输入的字符包含：", |
|
UserSaveNickNameAlert3: "中文、英文、数字、下划线", |
|
|
|
NotarizeText2: "确定", |
|
ShowWaiting: "等待中...", |
|
AlterSuccessMsg: "修改成功！" |
|
|
|
}, |
|
zh_HK: { |
|
UserSaveNickNameTitle: "暱稱設置", |
|
UserSaveNickNameMsgRepetitionError: "暱稱沒有變化", |
|
UserSaveNickNameMsgNullError: "暱稱不能為空", |
|
UserSaveNickNameMsgLengthError: "暱稱長度請控制在 1-10 個字符", |
|
UserSaveNickNameMsgError: "您輸入的暱稱不合法，請重新輸入！", |
|
UserSaveNickNameAlert1: "請輸入10位字符的暱稱", |
|
UserSaveNickNameAlert2: "可以輸入的字符包含：", |
|
UserSaveNickNameAlert3: "中文、英文、數字、下劃線", |
|
|
|
NotarizeText2: "確定", |
|
ShowWaiting: "等待中...", |
|
AlterSuccessMsg: "修改成功！" |
|
}, |
|
en_US: { |
|
UserSaveNickNameTitle: "Nickname", |
|
UserSaveNickNameMsgRepetitionError: "The nickname has not changed", |
|
UserSaveNickNameMsgNullError: "The nickname cannot be empty", |
|
UserSaveNickNameMsgLengthError: "Please control the nickname length to 1-10 characters", |
|
UserSaveNickNameMsgError: "The nickname you entered is not valid, please re-enter!", |
|
UserSaveNickNameAlert1: "Please enter a nickname of 10 characters", |
|
UserSaveNickNameAlert2: "The characters that can be entered contain:", |
|
UserSaveNickNameAlert3: "Chinese, English, Number, Underline", |
|
|
|
NotarizeText2: "OK", |
|
ShowWaiting: "Waiting...", |
|
AlterSuccessMsg: "Modified successfully!" |
|
} |
|
} |
|
</script> |
|
<script> |
|
var dataInfo = new Vue({ |
|
el: '#data-info', |
|
data: { |
|
langue: langues[app.getLanguageLocalStorage()], |
|
userLocalStorage: app.getUserLocalStorage(), // 缓存的用户数据 |
|
dataParameter: { |
|
nickname: "" // 新昵称 |
|
} |
|
}, |
|
methods: { |
|
trimeAll: function() { |
|
this.dataParameter.nickname = this.dataParameter.nickname.replace(/^ +| +$/g, ''); // v-on:keyup="trimeAll" |
|
} |
|
} |
|
}) |
|
|
|
mui.plusReady(function() { |
|
var saveBtn = document.getElementById("save"); |
|
// 确认 |
|
saveBtn.addEventListener("tap", function() { |
|
if(verifyNickName()) { |
|
plus.nativeUI.showWaiting(dataInfo.langue.ShowWaiting); |
|
saveBtn.setAttribute("disabled", true); |
|
console.log(dataInfo.dataParameter.nickname) |
|
mui.ajax(myAjaxJs.AJAX_UPDATE_NICK_NAME.getUrl, { |
|
headers: { |
|
"X-Requested-Token": app.getTokenStorage(), // token头部 |
|
"locale": app.getLanguageLocalStorage() // 语种头部 |
|
}, |
|
type: myAjaxJs.AJAX_UPDATE_NICK_NAME.getType, //HTTP请求类型 |
|
data: { |
|
nickName: dataInfo.dataParameter.nickname |
|
}, |
|
dataType: 'json', //服务器返回json格式数据 |
|
timeout: 10000, //超时时间设置为10秒； |
|
success: function(data) { |
|
if("200" == data.code) { |
|
//用户数据加入缓存 |
|
var userData = app.getUserLocalStorage(); |
|
userData.nickName = dataInfo.dataParameter.nickname; |
|
app.setUserLocalStorage(userData); |
|
synchrodataFun(); |
|
plus.nativeUI.closeWaiting(); |
|
mui.back(); |
|
var center = plus.webview.currentWebview().opener(); |
|
center.evalJS("saveUserInfoData();"); |
|
plus.webview.currentWebview().close(); |
|
mui.toast(dataInfo.langue.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 { |
|
saveBtn.removeAttribute("disabled", true); |
|
plus.nativeUI.closeWaiting(); |
|
app.toast(data.msg); |
|
} |
|
}, |
|
error: function(xhr, type, errorThrown) { |
|
saveBtn.removeAttribute("disabled", true); |
|
plus.nativeUI.closeWaiting(); |
|
// app.toast(langue.AjaxError); |
|
} |
|
}) |
|
} |
|
}); |
|
}) |
|
|
|
function verifyNickName() { |
|
var nickNameNew = dataInfo.dataParameter.nickname == null ? "" : dataInfo.dataParameter.nickname; // 新昵称 |
|
var nickNameOld = dataInfo.userLocalStorage.nickname == null ? "" : dataInfo.userLocalStorage.nickname; // 旧昵称 |
|
var regular_emoji = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig; |
|
var emoji_test = regular_emoji.test(nickNameNew); |
|
if("" == nickNameNew) { |
|
app.toast(dataInfo.langue.UserSaveNickNameMsgNullError); |
|
} else if(nickNameNew == nickNameOld) { |
|
app.toast(dataInfo.langue.UserSaveNickNameMsgRepetitionError); |
|
} else if(nickNameNew.length < 1 || nickNameNew.length > 10) { |
|
app.toast(dataInfo.langue.UserSaveNickNameMsgLengthError); |
|
} else if(emoji_test) { |
|
app.toast(dataInfo.langue.UserSaveNickNameMsgError); |
|
} else if(!regular.chinese_english2.test(nickNameNew)) { |
|
app.toast(dataInfo.langue.UserSaveNickNameMsgError); |
|
} else { |
|
return true; |
|
} |
|
return false; |
|
} |
|
|
|
/** |
|
* 数据同步 |
|
*/ |
|
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();"); |
|
} |
|
|
|
// 国际化统一方法 |
|
window.addEventListener('switchLangueData', function(e) { |
|
dataInfo.langue = langues[e.detail]; |
|
}); |
|
</script> |