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.
367 lines
10 KiB
367 lines
10 KiB
<!DOCTYPE html> |
|
<html> |
|
|
|
<head> |
|
<meta charset="utf-8"> |
|
<title></title> |
|
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> |
|
<meta name="apple-mobile-web-app-capable" content="yes"> |
|
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
|
<link rel="stylesheet" href="lib/css/mui.min.css"> |
|
<link rel="stylesheet" type="text/css" href="lib/css/app.css" /> |
|
<script src="lib/js/vue.min.js"></script> |
|
<script src="lib/js/pushEventListener.js"></script> |
|
<style> |
|
.mui-bar { |
|
height: 59px; |
|
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.25); |
|
} |
|
|
|
.mui-bar-tab .mui-tab-item .mui-icon { |
|
top: 2px; |
|
height: auto; |
|
font-size: 19px; |
|
} |
|
|
|
.mui-bar-tab .mui-tab-item { |
|
color: #999999; |
|
} |
|
|
|
.mui-bar-tab .mui-tab-item img { |
|
padding-top: 4px; |
|
width: 34px; |
|
} |
|
|
|
.mui-bar-tab .mui-tab-item.mui-active { |
|
color: #C7282C; |
|
} |
|
|
|
.mui-bar-tab .mui-tab-item .mui-icon~.mui-tab-label { |
|
font-size: 13px; |
|
padding-top: 1px; |
|
} |
|
|
|
.mui-bar-tab { |
|
border-top: 1px solid #FAFAFA; |
|
background: #FAFAFA; |
|
} |
|
/*消息背景色*/ |
|
|
|
.mui-icon .mui-badge { |
|
background: #f74c31; |
|
} |
|
|
|
.mui-bar .mui-icon { |
|
font-size: 17px; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<footer id="js-data-info" class="mui-bar mui-bar-tab"> |
|
<a id="html/home/html/home.html" class="mui-tab-item mui-active" href="html/home/html/home.html"> |
|
<span class="mui-icon iconfont icon-shouye"></span> |
|
<span class="mui-tab-label">{{langue.home}}</span> |
|
</a> |
|
<a id="html/market/market.html" class="mui-tab-item" href="html/OTC/html/OTC_index.html"> |
|
<span class="mui-icon iconfont icon-otc"></span> |
|
<span class="mui-tab-label">{{langue.market}}</span> |
|
</a> |
|
<a id="html/cct/html/cct_index.html" class="mui-tab-item" href="html/cct/html/cct_index.html"> |
|
<span class="mui-icon iconfont icon-bibi"></span> |
|
<span class="mui-tab-label">{{langue.trade}}</span> |
|
</a> |
|
<a id="html/wallet/html/wallet.html" class="mui-tab-item" href="html/wallet/html/wallet.html" data-root="LONGIN"> |
|
<span class="mui-icon iconfont icon-qianbao"> |
|
</span> |
|
<span class="mui-tab-label">{{langue.wallet}}</span> |
|
</a> |
|
<a id="mine/html/wallet_my.html" class="mui-tab-item" href="mine/html/wallet_my.html"> |
|
<span class="mui-icon iconfont icon-my"></span> |
|
<span class="mui-tab-label" data-text="IndexMy">{{langue.my}}</span> |
|
</a> |
|
</footer> |
|
|
|
<script src="lib/js/mui.min.js"></script> |
|
<script src="lib/js/app.js"></script> |
|
<script src="lib/js/app_check.js"></script> |
|
<script type="text/javascript" charset="utf-8"> |
|
//1、每个页面写自己的国际化语言变量，例子： |
|
var langues = { |
|
zh_CN: { |
|
home: '首页', |
|
market: '法币', |
|
trade: '币币', |
|
wallet: '钱包', |
|
my: '我的' |
|
}, |
|
zh_HK: { |
|
home: '首頁', |
|
market: '法幣', |
|
trade: '交易', |
|
wallet: '錢包', |
|
my: '我的' |
|
}, |
|
en_US: { |
|
home: 'Home', |
|
market: 'OTC', |
|
trade: 'Trade', |
|
wallet: 'Wallet', |
|
my: 'My' |
|
} |
|
}; |
|
//2、页面上所有需要国际化的文字，包括提示，都通过Vue去引用，例子： |
|
var langueKey = app.getLanguageLocalStorage(); //获取国际化语种 |
|
var langue = langues[langueKey]; // 获取国际化语种数据 |
|
var dataInfo = new Vue({ |
|
el: "#js-data-info", |
|
data: { |
|
langue: langue |
|
} |
|
}) |
|
//3、每个页面都需要加上以下的方法： |
|
window.addEventListener('switchLangueData', function(e) { |
|
//dataInfo为Vue对象的名称 |
|
dataInfo.langue = langues[e.detail]; |
|
}); |
|
mui.init(); |
|
var subpages = ['html/home/html/home.html', |
|
'html/OTC/html/OTC_index.html', |
|
'html/cct/html/cct_index.html', |
|
'html/wallet/html/wallet.html', |
|
'mine/html/wallet_my.html' |
|
]; |
|
var subpage_style = { |
|
top: '0px', |
|
bottom: '58px' |
|
}; |
|
|
|
//检查更新 |
|
appCheck.appSave(); |
|
|
|
//创建子页面，首个选项卡页面显示，其它均隐藏； |
|
mui.plusReady(function() { |
|
// 当有input聚焦时,隐藏底部选项卡 |
|
var height = document.documentElement.clientHeight || document.body.clientHeight; |
|
window.onresize = function() { |
|
var heightView = document.documentElement.clientHeight || document.body.clientHeight; |
|
if(heightView < height) { |
|
document.getElementById("js-data-info").classList.add("mui-hidden"); |
|
var subViews = plus.webview.currentWebview().children(); |
|
for(var i = 0; i < subViews.length; i++) { |
|
var ws = subViews[i]; |
|
ws.setStyle({ |
|
"bottom": "0px" |
|
}); |
|
} |
|
} else { |
|
document.getElementById("js-data-info").classList.remove("mui-hidden"); |
|
var subViews = plus.webview.currentWebview().children(); |
|
for(var i = 0; i < subViews.length; i++) { |
|
var ws = subViews[i]; |
|
ws.setStyle({ |
|
"bottom": "58px" |
|
}); |
|
} |
|
} |
|
}; |
|
|
|
//设置手机状态栏为深色前景色,设置完后一般mainfest会自动更新 |
|
plus.navigator.setStatusBarStyle('dark'); |
|
|
|
var self = plus.webview.currentWebview(); |
|
var len = subpages.length; |
|
for(var i = len - 1; i > 0; i--) { |
|
var temp = {}; |
|
var sub = plus.webview.create(subpages[i], subpages[i], subpage_style); |
|
self.append(sub); |
|
plus.webview.hide(subpages[i]); |
|
} |
|
var firstPageSub = plus.webview.create(subpages[0], subpages[0], subpage_style); |
|
self.append(firstPageSub); |
|
|
|
//当前激活选项 |
|
var activeTab = subpages[0]; |
|
//选项卡点击事件 |
|
mui('.mui-bar-tab').on('tap', 'a', function(e) { |
|
var targetTab = this.getAttribute('href'); |
|
var dataRoot = this.getAttribute("data-root"); |
|
if(targetTab == null || targetTab == "") { |
|
return; |
|
} |
|
if(targetTab == activeTab) { |
|
return; |
|
} |
|
var index = getIndex(activeTab); |
|
if(!rootManage(dataRoot, index)) return; |
|
plus.webview.show(targetTab); |
|
//隐藏当前; |
|
plus.webview.hide(activeTab); |
|
//更改当前活跃的选项卡 |
|
activeTab = targetTab; |
|
}); |
|
window.addEventListener("viewTab", function(event) { |
|
var data = event.detail; |
|
goView(document.getElementById(data.url)); |
|
}); |
|
mui.oldBack = mui.back; |
|
var backButtonPress = 0; |
|
mui.back = function(event) { |
|
backButtonPress++; |
|
if(backButtonPress > 1) { |
|
plus.runtime.quit(); |
|
} else { |
|
//plus.nativeUI.toast('再按一次退出应用'); |
|
} |
|
setTimeout(function() { |
|
backButtonPress = 0; |
|
}, 2000); |
|
return false; |
|
}; |
|
plus.webview.currentWebview().setStyle({ |
|
softinputMode: "adjustResize" // 弹出软键盘时自动改变webview的高度 |
|
}); |
|
|
|
// /**推送相关的监听事件**/ |
|
// //监听推送消息点击事件 |
|
// plus.push.addEventListener("click", function(msg) { |
|
// console.log('click') |
|
// console.log(JSON.stringify(msg)); |
|
// //判断是从本地还是离线推送的消息 |
|
// switch(msg.payload) { |
|
// case "LocalMSG": |
|
// //本地推送 TODO |
|
// break; |
|
// default: |
|
// //其他推送 TODO |
|
// break; |
|
// } |
|
// // var orderId = msg.payload.orderId; |
|
// // app.openWin('html/OTC/html/payment.html', 'html/OTC/html/payment.html', {}, { |
|
// // orderId: orderId |
|
// // }); |
|
// }); |
|
// var aa = { |
|
// "payload": { |
|
// "orderId": "a5ad7f03-f527-4e84-92c6-77f423b047f5" |
|
// }, |
|
// "title": "HBuilder", |
|
// "content": "用户15626293961已确认付款，请尽快处理！", |
|
// "type": "click", |
|
// "aps": { |
|
// "badge": 1, |
|
// "alert": { |
|
// "body": "用户15626293961已确认付款，请尽快处理！" |
|
// }, |
|
// "sound": "default" |
|
// } |
|
// } |
|
// createLocalPushMsg(aa); |
|
// |
|
// //监听在线推送消息点击事件 |
|
// plus.push.addEventListener("receive", function(msg) { |
|
// console.log('receive') |
|
// console.log(JSON.stringify(msg)); |
|
// var jsonMsg = getPayLoad(msg); |
|
// createLocalPushMsg(jsonMsg) |
|
// }, false); |
|
// |
|
// /*** |
|
// * 是否已登录 |
|
// */ |
|
// function checkIsLogin() { |
|
// if(JSON.stringify(app.getUserLocalStorage()) == "{}") { |
|
// app.openWin('mine/html/wallet_login.html', 'mine/html/wallet_login.html'); |
|
// } |
|
// } |
|
// |
|
// /*** |
|
// * 解析透传数据 |
|
// */ |
|
// function getPayLoad(msg) { |
|
// //是否存在透传数据 |
|
// if(msg.payload) { |
|
// if(typeof(msg.payload) == 'string') { |
|
// return JSON.parse(msg.payload); |
|
// } |
|
// if(typeof(msg.payload) == 'JSON') { |
|
// return msg.payload; |
|
// } |
|
// } else { |
|
// //不存在payload参数 |
|
// return null; |
|
// } |
|
// } |
|
// |
|
// /** |
|
// * 本地创建一条推送消息 |
|
// */ |
|
// function createLocalPushMsg(msg) { |
|
// var options = { |
|
// cover: false, |
|
// icon: 'yanhuo_logo.jpg', |
|
// title: msg.title, |
|
// }; |
|
// plus.push.createMessage(msg.content, "{orderId: 'a5ad7f03-f527-4e84-92c6-77f423b047f5'}", options); |
|
// } |
|
}); |
|
|
|
/** |
|
* 权限管理方法 |
|
* @param {String} value 权限标识 |
|
* @param {Number} index 上一个页面的小标 |
|
*/ |
|
function rootManage(value, index) { |
|
if(!value || value.trim() == "") return true; // 无权限标识，跳出 |
|
return rootFunMap(value, index); |
|
|
|
function rootFunMap(value, index) { |
|
var mapFun = { |
|
LONGIN: function() { |
|
if(isLogin()) return true; |
|
var loginView = app.openWin("mine/html/wallet_login.html", "mine/html/wallet_login.html"); |
|
loginView.addEventListener("close", function() { |
|
goView(document.querySelectorAll(".mui-bar-tab>.mui-tab-item")[index]); |
|
}); |
|
return false; |
|
|
|
function isLogin() { |
|
var userInfo = app.getUserLocalStorage(); |
|
return JSON.stringify(userInfo) != "{}"; |
|
} |
|
} |
|
} |
|
if(value in mapFun) { |
|
return mapFun[value](); |
|
} else { |
|
return true; |
|
} |
|
} |
|
} |
|
|
|
/** |
|
* 模拟点击跳转页面 |
|
* @param {Object} dom |
|
*/ |
|
function goView(dom) { |
|
mui.trigger(dom, 'tap'); |
|
var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active"); |
|
if(dom !== current) { |
|
current.classList.remove('mui-active'); |
|
dom.classList.add('mui-active'); |
|
} |
|
} |
|
|
|
/** |
|
* 获取上次页面的索引 |
|
* @param {Object} val |
|
*/ |
|
function getIndex(val) { |
|
for(var i = 0; i < subpages.length; i++) { |
|
if(subpages[i] == val) return i; |
|
} |
|
} |
|
</script> |
|
</body> |
|
|
|
</html> |