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.
211 lines
5.8 KiB
211 lines
5.8 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/account_safe.css" /> |
|
<script src="../../js/base/rem-layout.js"></script> |
|
<script src="../../../lib/js/mui.min.js"></script> |
|
<script src="../../../lib/js/app.js"></script> |
|
<script src="../../../lib/js/vue.js"></script> |
|
<script src="../../js/push/push_user_ajax.js"></script> |
|
</head> |
|
|
|
<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="ul-group"> |
|
<ul class="mui-table-view app-table-view app-table-view-darkly"> |
|
<li class="mui-table-view-cell app-cell-invalid"> |
|
<a class="mui-navigate-right" href="#popover"> |
|
{{langue.language}} |
|
<label class="app-table-cell-lable-right">{{languageText}}</label> |
|
</a> |
|
</li> |
|
<li class="mui-table-view-cell app-cell-invalid"> |
|
<a class="mui-navigate-right" href="#exchange-rate-popover"> |
|
{{langue.currency}} |
|
<label class="app-table-cell-lable-right">{{exchangeRate}}</label> |
|
</a> |
|
</li> |
|
<!--<li class="mui-table-view-cell app-cell-invalid"> |
|
<a class="mui-navigate-right" id="helpCenter"> |
|
{{langue.help}} |
|
</a> |
|
</li>--> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
</body> |
|
<style type="text/css"> |
|
.mui-popover { |
|
height: 2rem; |
|
/*height: 3rem;*/ |
|
width: 100%; |
|
} |
|
|
|
.mui-popover ul li { |
|
padding: 0.25rem; |
|
font-size: 0.3rem; |
|
} |
|
|
|
.exchange-rate-popover { |
|
height: 4rem; |
|
} |
|
</style> |
|
<div id="popover" class="mui-popover mui-popover-action"> |
|
<div class="mui-scroll-wrapper"> |
|
<div class="mui-scroll"> |
|
<ul class="mui-table-view"> |
|
<li class="mui-table-view-cell" onclick="languageTrigger('zh_CN');">简体中文</li> |
|
<!--<li class="mui-table-view-cell" onclick="languageTrigger('zh_HK');">繁體中文</li>--> |
|
<li class="mui-table-view-cell" onclick="languageTrigger('en_US');">ENGLISH</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
<div id="exchange-rate-popover" class="exchange-rate-popover mui-popover mui-popover-action"> |
|
<div class="mui-scroll-wrapper"> |
|
<div class="mui-scroll"> |
|
<ul id="exchange-rate" class="mui-table-view"> |
|
<li class="mui-table-view-cell">HKD</li> |
|
<li class="mui-table-view-cell">CNY</li> |
|
<li class="mui-table-view-cell">USD</li> |
|
<li class="mui-table-view-cell">EUR</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
</html> |
|
<script> |
|
// 国际化 |
|
var langues = { |
|
zh_CN: { |
|
title: "系统设置", |
|
language: "语言", |
|
currency: "汇率", |
|
help: "帮助中心" |
|
|
|
}, |
|
zh_HK: { |
|
title: "系統設置", |
|
language: "語言", |
|
currency: "匯率", |
|
help: "幫助中心" |
|
}, |
|
en_US: { |
|
title: "Settings", |
|
language: "Language", |
|
currency: "Exchange Rate", |
|
help: "Help" |
|
} |
|
} |
|
</script> |
|
<script> |
|
var langueKey = app.getLanguageLocalStorage(); |
|
var languageText = { |
|
zh_CN: "简体中文", |
|
zh_HK: "繁體中文", |
|
en_US: "ENGLISH" |
|
}; |
|
|
|
var dataInfo = new Vue({ |
|
el: '#data-info', |
|
data: { |
|
langue: langues[langueKey], |
|
exchangeRate: app.getExchangeRateLocalStorage(), |
|
languageText: languageText[langueKey] |
|
} |
|
}); |
|
|
|
// 列表项跳转 |
|
mui(".mui-table-view").on('tap', '.view-herf', function() { |
|
var viewId = this.getAttribute('view-id'); |
|
var viewUrl = this.getAttribute('view-url'); |
|
mui.openWindow({ |
|
id: viewId, |
|
url: viewUrl |
|
}); |
|
}) |
|
|
|
/** |
|
* 语种切换方法 |
|
* @param {Object} type |
|
*/ |
|
function languageTrigger(type) { |
|
var _type = app.getLanguageLocalStorage(); |
|
|
|
if(!Object.is(type, _type)) { |
|
app.setLanguageLocalStorage(type); |
|
mui.plusReady(function() { |
|
var wvs = plus.webview.all(); |
|
wvs.forEach(function(view) { |
|
mui.fire(view, 'switchLangueData', type); |
|
}); |
|
}); |
|
dataInfo.languageText = languageText[type]; |
|
dataInfo.langue = langues[app.getLanguageLocalStorage()]; //更新推送用户 |
|
|
|
updateUserLanguage(); |
|
} |
|
|
|
mui('#popover').popover('hide'); |
|
} |
|
|
|
mui('#exchange-rate').on('tap', 'li', function(e) { |
|
var rate = this.innerText; |
|
|
|
if(rate != dataInfo.exchangeRate) { |
|
dataInfo.exchangeRate = rate; |
|
app.setExchangeRateLocalStorage(rate); |
|
var wvs = plus.webview.all(); |
|
wvs.forEach(function(view) { |
|
mui.fire(view, 'exchangeRate', rate); |
|
}); |
|
} |
|
|
|
mui('#exchange-rate-popover').popover('hide'); |
|
}); |
|
|
|
//汇率监听 |
|
// document.getElementById('exchange-rate').addEventListener('tap', function() { |
|
// app.openWin("exchange_rate.html", "exchange_rate.html"); |
|
// }); |
|
//幫助中心监听 |
|
// document.getElementById('helpCenter').addEventListener('tap', function() { |
|
// app.openWin("my_help_center.html", "my_help_center.html"); |
|
// }); |
|
|
|
// 国际化统一方法 |
|
window.addEventListener('switchLangueData', function(e) { |
|
dataInfo.langue = langues[e.detail]; |
|
}); |
|
|
|
/*** |
|
* 更新推送用户语种 |
|
*/ |
|
function updateUserLanguage() { |
|
mui.ajax(pushUserAjax.UPDATE_USER_LANGUAGE.getUrl, { |
|
headers: { |
|
"X-Requested-Token": app.getTokenStorage(), // token头部 |
|
"locale": app.getLanguageLocalStorage() // 语种头部 |
|
}, |
|
type: pushUserAjax.UPDATE_USER_LANGUAGE.getType, //HTTP请求类型 |
|
dataType: 'json', //服务器返回json格式数据 |
|
timeout: 10000, //超时时间设置为10秒； |
|
success: function(data) {}, |
|
error: function(xhr, type, errorThrown) {} |
|
}) |
|
} |
|
</script> |