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.
358 lines
9.6 KiB
358 lines
9.6 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" />
|
||
|
|
<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/my/my_ajax.js"></script>
|
||
|
|
<script src="../../js/base/rem-layout.js"></script>
|
||
|
|
<script src="../../../lib/js/require2.1.11.js"></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.app-header {
|
||
|
|
padding-right: 0.25rem;
|
||
|
|
font-size: 0.3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
#user-info {
|
||
|
|
height: 2.2rem;
|
||
|
|
margin: 0 0 0.25rem 0;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
align-items: center;
|
||
|
|
flex-basis: 0;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
#user-info #user-img {
|
||
|
|
width: 1.2rem;
|
||
|
|
margin: 0 0.3rem;
|
||
|
|
margin-right: 0.4rem;
|
||
|
|
background: #25273f;
|
||
|
|
height: 1.2rem;
|
||
|
|
border-radius: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
font-size: 0.5rem;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 1.2rem;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
#user-info #user-img img {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#user-info .user-data {
|
||
|
|
flex-grow: 1;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
#user-info .user-data span {
|
||
|
|
font-size: 0.35rem;
|
||
|
|
line-height: 0.4rem;
|
||
|
|
margin-bottom: 0.1rem;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
#user-info .user-data a {
|
||
|
|
font-size: 0.2rem;
|
||
|
|
color: #525ECA;
|
||
|
|
}
|
||
|
|
|
||
|
|
#user-info .user-data p {
|
||
|
|
font-size: 0.22rem;
|
||
|
|
line-height: 0.22rem;
|
||
|
|
margin-bottom: 0.1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
#user-info .user-data p+p {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
#user-info {
|
||
|
|
border-radius: 0.2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-cell-img {
|
||
|
|
text-align: center;
|
||
|
|
line-height: 1rem;
|
||
|
|
background: #25273f;
|
||
|
|
color: white;
|
||
|
|
font-size: 0.4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-cell-img #loginNot {
|
||
|
|
padding: 0.15rem;
|
||
|
|
height: 100%;
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
#ul-group{
|
||
|
|
margin-top: .2rem;
|
||
|
|
}
|
||
|
|
</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.UserInfoListTitle}}</h1>
|
||
|
|
</header>
|
||
|
|
<div class="mui-content">
|
||
|
|
<div id="ul-group">
|
||
|
|
<ul class="mui-table-view app-table-view app-table-view-darkly">
|
||
|
|
<li id="head-img" class="mui-table-view-cell app-table-cell-img">
|
||
|
|
<a class="mui-navigate-right">
|
||
|
|
{{langue.UserInfoListHeadImg}}
|
||
|
|
</a>
|
||
|
|
<div class="app-cell-img" v-html="getUserImg">
|
||
|
|
{{getUserImg}}
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<ul class="mui-table-view app-table-view app-table-view-darkly">
|
||
|
|
<li class="mui-table-view-cell">
|
||
|
|
<a class="view-herf mui-navigate-right">
|
||
|
|
<!--view-id="mine/html/user/save_user_name.html" view-url="save_user_name.html">-->
|
||
|
|
{{langue.UserInfoListAccount}}
|
||
|
|
<label class="app-table-cell-lable-right">{{userLocalStorage.mobilePhone}}</label>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="mui-table-view-cell">
|
||
|
|
<a class="view-herf mui-navigate-right" view-id="mine/html/user/save_nick_name.html" view-url="save_nick_name.html">
|
||
|
|
{{langue.UserInfoListNickName}}
|
||
|
|
<label class="app-table-cell-lable-right">{{userLocalStorage.nickName}}</label>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<!--<li class="mui-table-view-cell">
|
||
|
|
|
||
|
|
<a v-if="userLocalStorage.hasPassword" class="view-herf mui-navigate-right" view-id="mine/html/user/save_login_password.html" view-url="save_login_password.html">
|
||
|
|
登录密码
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<a v-else class="view-herf mui-navigate-right" view-id="mine/html/user/creator_login_password.html" view-url="creator_login_password.html">
|
||
|
|
登录密码
|
||
|
|
<label class="app-table-cell-lable-right">未设置</label>
|
||
|
|
</a>
|
||
|
|
</li>-->
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|
||
|
|
<script>
|
||
|
|
// 国际化
|
||
|
|
var langues = {
|
||
|
|
zh_CN: {
|
||
|
|
UserInfoListTitle: "账户信息",
|
||
|
|
UserInfoListHeadImg: "头像",
|
||
|
|
UserInfoListAccount: "账号",
|
||
|
|
UserInfoListNickName: "昵称",
|
||
|
|
|
||
|
|
ActionSheetTitle: "修改用户头像",
|
||
|
|
ActionSheetIdentityTitle: "选择身份证图片",
|
||
|
|
ActionSheetCancel: "取消",
|
||
|
|
ActionSheetBtn1: "拍照",
|
||
|
|
ActionSheetBtn2: "从相册中选择",
|
||
|
|
PicturesFailedMsg: "拍照失败："
|
||
|
|
|
||
|
|
},
|
||
|
|
zh_HK: {
|
||
|
|
UserInfoListTitle: "賬戶信息",
|
||
|
|
UserInfoListHeadImg: "頭像",
|
||
|
|
UserInfoListAccount: "賬號",
|
||
|
|
UserInfoListNickName: "暱稱",
|
||
|
|
|
||
|
|
ActionSheetTitle: "修改用戶頭像",
|
||
|
|
ActionSheetIdentityTitle: "選擇身份證圖片",
|
||
|
|
ActionSheetCancel: "取消",
|
||
|
|
ActionSheetBtn1: "拍照",
|
||
|
|
ActionSheetBtn2: "從相冊中選擇",
|
||
|
|
PicturesFailedMsg: "拍照失敗："
|
||
|
|
},
|
||
|
|
en_US: {
|
||
|
|
UserInfoListTitle: "Account",
|
||
|
|
UserInfoListHeadImg: "Avatar",
|
||
|
|
UserInfoListAccount: "Number",
|
||
|
|
UserInfoListNickName: "Nickname",
|
||
|
|
|
||
|
|
ActionSheetTitle: "Modify User avatar",
|
||
|
|
ActionSheetIdentityTitle: "Select ID Card Image",
|
||
|
|
ActionSheetCancel: "Cancel",
|
||
|
|
ActionSheetBtn1: "Photographing",
|
||
|
|
ActionSheetBtn2: "Select from album",
|
||
|
|
PicturesFailedMsg: "Photo failure:"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<script>
|
||
|
|
var dataInfo = new Vue({
|
||
|
|
el: '#data-info',
|
||
|
|
data: {
|
||
|
|
langue: langues[app.getLanguageLocalStorage()],
|
||
|
|
userLocalStorage: app.getUserLocalStorage()
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
getUserImg: function() {
|
||
|
|
console.log(JSON.stringify(this.userLocalStorage));
|
||
|
|
if(JSON.stringify(this.userLocalStorage) != '{}') { //已经登录的处理
|
||
|
|
if(this.userLocalStorage.avatar == null || this.userLocalStorage.avatar == "null" || this.userLocalStorage.avatar.trim() == "") {
|
||
|
|
return '<img src="../../img/wallet/notLogin.png" />';
|
||
|
|
} else {
|
||
|
|
try {
|
||
|
|
return '<img src="' + app.walletFileUrl + this.userLocalStorage.avatar + '" />';
|
||
|
|
} catch(e) {
|
||
|
|
return '<img src="../../img/wallet/notLogin.png" />';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
return "";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getMobilePhone: function() {
|
||
|
|
// return this.userLocalStorage.username.slice(0, 3) + "***" + this.userLocalStorage.username.substr(this.userLocalStorage.username.length - 4);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
//获取缓存数据更新vue绑定对象
|
||
|
|
function saveUserInfoData() {
|
||
|
|
dataInfo.userLocalStorage = app.getUserLocalStorage();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
mui.plusReady(function() {
|
||
|
|
// 列表项跳转
|
||
|
|
mui(".mui-table-view").on('tap', '.view-herf', function() {
|
||
|
|
var viewId = this.getAttribute('view-id');
|
||
|
|
var viewUrl = this.getAttribute('view-url');
|
||
|
|
app.openWin(viewUrl, viewId);
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById("head-img").addEventListener("tap", function() {
|
||
|
|
plus.nativeUI.actionSheet({
|
||
|
|
title: dataInfo.langue.ActionSheetTitle,
|
||
|
|
cancel: dataInfo.langue.ActionSheetCancel,
|
||
|
|
buttons: [{
|
||
|
|
title: dataInfo.langue.ActionSheetBtn1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: dataInfo.langue.ActionSheetBtn2
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}, function(b) { /*actionSheet 按钮点击事件*/
|
||
|
|
switch(b.index) {
|
||
|
|
case 0:
|
||
|
|
break;
|
||
|
|
case 1:
|
||
|
|
cameramImg(); /*拍照选择*/
|
||
|
|
break;
|
||
|
|
case 2:
|
||
|
|
galleryImg(); /*从相册中选择*/
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
})
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 查询用户信息
|
||
|
|
*/
|
||
|
|
function selectUserInfo() {
|
||
|
|
mui.ajax(myAjaxJs.AJAX_GET_USER.getUrl, {
|
||
|
|
headers: {
|
||
|
|
"X-Requested-Token": app.getTokenStorage(), // token头部
|
||
|
|
"locale": app.getLanguageLocalStorage() // 语种头部
|
||
|
|
},
|
||
|
|
type: myAjaxJs.AJAX_GET_USER.getType, //HTTP请求类型
|
||
|
|
data: dataInfo.userLocalStorage,
|
||
|
|
dataType: 'json', //服务器返回json格式数据
|
||
|
|
timeout: 10000, //超时时间设置为10秒；
|
||
|
|
success: function(data) {
|
||
|
|
if("200" == data.code) {
|
||
|
|
// 更新用户缓存数据
|
||
|
|
app.setUserLocalStorage(data.data);
|
||
|
|
// 渲染用户数据
|
||
|
|
dataInfo.userLocalStorage = data.data;
|
||
|
|
mui.toast(dataInfo.langue.muiToast01);
|
||
|
|
} else if(data.code == "201" || data.code == "202") { //未登录
|
||
|
|
plus.nativeUI.closeWaiting();
|
||
|
|
mui.toast(dataInfo.langue.muiToast02);
|
||
|
|
app.openWin("wallet_login.html", "mine/html/wallet_login.html");
|
||
|
|
app.setUserLocalStorage({}); //清除关于用户的缓存
|
||
|
|
} else {
|
||
|
|
mui.toast(data.msg);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function(xhr, type, errorThrown) {}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
//从相册中选择图片
|
||
|
|
function galleryImg() {
|
||
|
|
// 从相册中选择图片
|
||
|
|
plus.gallery.pick(function(path) {
|
||
|
|
cropImageFun(path);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
//从拍照获得图片
|
||
|
|
function cameramImg() {
|
||
|
|
var cmr = plus.camera.getCamera();
|
||
|
|
cmr.captureImage(function(path) {
|
||
|
|
plus.io.resolveLocalFileSystemURL(path, function(sucss) {
|
||
|
|
var realpath = sucss.toLocalURL();
|
||
|
|
cropImageFun(realpath);
|
||
|
|
}, function(err) {
|
||
|
|
// mui.alert(dataInfo.langue.PicturesFailedMsg + err.message, dataInfo.langue.AlertMsg);
|
||
|
|
mui.toast(dataInfo.langue.PicturesFailedMsg + err.message);
|
||
|
|
});
|
||
|
|
}, function(err) {
|
||
|
|
// mui.alert(dataInfo.langue.PicturesFailedMsg + err.message, dataInfo.langue.AlertMsg);
|
||
|
|
mui.toast(dataInfo.langue.PicturesFailedMsg + err.message);
|
||
|
|
}, {});
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
*
|
||
|
|
* @param {Object} src 图片路径
|
||
|
|
*/
|
||
|
|
function cropImageFun(src) {
|
||
|
|
mui.openWindow({
|
||
|
|
id: "mine/html/user/crop-image.html",
|
||
|
|
url: "crop-image.html",
|
||
|
|
extras: {
|
||
|
|
imgSrc: src
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 数据同步
|
||
|
|
*/
|
||
|
|
function synchrodataFun() {
|
||
|
|
//“我的”首页
|
||
|
|
var walletMyView = plus.webview.getWebviewById("mine/html/wallet_my.html");
|
||
|
|
walletMyView.evalJS("saveUserInfoData();");
|
||
|
|
}
|
||
|
|
|
||
|
|
// 国际化统一方法
|
||
|
|
window.addEventListener('switchLangueData', function(e) {
|
||
|
|
dataInfo.langue = langues[e.detail];
|
||
|
|
});
|
||
|
|
</script>
|