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
5 years ago
|
<!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>
|