fontend-app/html/market/js/market.js

//1、每个页面写自己的国际化语言变量，例子：
var langues = {
	zh_CN: {
		title: '行情',
		price: '价格',
		all: '全部',
		change: '涨跌幅',
		favorites: "自选",
		fullMarket:'全部'
	},
	zh_HK: {
		title: '行情',
		price: '價格',
		all: '全部',
		change: '漲跌幅',
		favorites: " 自選",
		fullMarket:'全部'
		
	},
	en_US: {
		title: 'Market',
		price: 'Price',
		all: 'All',
		change: 'Change',
		favorites: "Favorites",
		fullMarket:'All'
	}
};
//2、页面上所有需要国际化的文字，包括提示，都通过Vue去引用，例子：
var langueKey = app.getLanguageLocalStorage(); //获取国际化语种
var langue = langues[langueKey]; // 获取国际化语种数据
var dataInfo = new Vue({
	el: "#js-data-info",
	data: {
		langue: langue,
		marketList: []
	}
})
//3、每个页面都需要加上以下的方法：
window.addEventListener('switchLangueData', function(e) {
	//dataInfo为Vue对象的名称
	dataInfo.langue = langues[e.detail];
});
var currencysObj = {};
var choiceMarketsObj;
console.log=function(){}
mui.plusReady(function() {
	initData();
	listener();
});

function initData() {
	choiceMarketsObj = app.getLocalStorage(app.marketChoiceKey);
	if(JSON.stringify(choiceMarketsObj) != "{}"){
		document.getElementById("choice-item").classList.add("mui-active");
		document.getElementById("choice").classList.add("mui-active");
	}else{
		document.getElementById("USDT-item").classList.add("mui-active");
		document.getElementById("USDT").classList.add("mui-active");
	}
	getMarkets();
}

function listener() {
	setWebsocket();
	/**
	 * 监听行情改变事件
	 */
	window.addEventListener("marketChange", function(event) {
		var changeData = event.detail;
		if(changeData.type == 'deal') { //成交
			getChangeMarket(changeData.unitName + '-' + changeData.coinName)
		} else { //盘口
			var infoPage = plus.webview.getWebviewById('market_info.html');
			if(infoPage) {
				mui.fire(infoPage, "depthChange", changeData);
			}
		}
	});
	
	/**
	 * 监听自选改变事件
	 */
	window.addEventListener("marketChoice", function(event) {
		var currencyPair = event.detail;
		choiceMarketsObj = app.getLocalStorage(app.marketChoiceKey);
		if(choiceMarketsObj[currencyPair]){
			var currencys = currencyPair.split('-');
			var marketObj = currencysObj[currencys[1]][currencys[0]].marketObj;
			var choiceLi = getLiDocument(marketObj,currencys,'choice-');
			document.getElementById("market-choice-ul").appendChild(choiceLi);
			setMarket(marketObj,'choice-');
			liListener(choiceLi, marketObj.currencyPair);
		}else{
			document.getElementById('choice-' + currencyPair + '-market-li').remove();
		}
	});
	
	/**
	 * 汇率改变事件
	 */
	window.addEventListener("exchangeRate", function(event) {
		initData();
	});
	
	/**
	 * 首页自选跳转
	 */
	window.addEventListener("choiceTab", function(event) {
		var current = document.querySelector(".mui-control-item.mui-active");
		var dom = document.getElementById('choice-item');
		if(dom !== current) {
			current.classList.remove('mui-active');
			dom.classList.add('mui-active');
			document.querySelector(".mui-control-content.mui-active").classList.remove('mui-active');
			document.getElementById('choice').classList.add('mui-active');
		}
	});
}

function setWebsocket(){
	console.log=function(){}
	var socket = new SockJS(app.currencyBaseUrl + "/websocket");
	var stompClient = Stomp.over(socket);
	stompClient.connect({}, function(frame) {
		//订阅讲座消息
		stompClient.subscribe('/topic/market', function(greeting) {
			var obj = JSON.parse(greeting.body);
			var currencys = obj.currencyPair.split('-');
			if(JSON.stringify(currencysObj) == '{}'){
				initData();
			}
			if(currencysObj[currencys[1]] && currencysObj[currencys[1]][currencys[0]]){
				currencysObj[currencys[1]][currencys[0]].marketObj = obj;
				setMarket(obj,'base-');
				if(choiceMarketsObj[obj.currencyPair]){
					setMarket(obj,'choice-');
				}
				sendChangeDataToView(obj);
			}
		});
	});
	socket.onclose = function() {
     	setWebsocket();
 	};
}

function getChangeMarket(currencyPair) {
	var url = app.currencyBaseUrl + "market/get?currencyPair=" + currencyPair;
	mui.ajax(url, {
		type: "GET",
		dataType: "json",
		success: function(j) {
			if(j.code == 200) {
				var currencys = currencyPair.split('-');
				currencysObj[currencys[1]][currencys[0]].marketObj = j.data;
				setMarket(j.data,'base-');
				if(choiceMarketsObj[j.data.currencyPair]){
					setMarket(j.data,'choice-');
				}
				sendChangeDataToView(j.data)
			} else {}
		},
		error: function(xhr, type, errorThrown) {
			console.log(type)
		}
	});
}

function getMarkets() {
	var url = app.currencyBaseUrl + "market/getList";
	mui.ajax(url, {
		type: "GET",
		dataType: "json",
		success: function(j) {
			if(j.code == 200) {
				var markets = j.data;
				for(var index in markets) {
					setLiDocument(markets[index]);
					app.setLocalStorage(app.marketKey + markets[index].currencyPair, markets[index]);
				}
				sendDataToView();
			} else {}
		},
		error: function(xhr, type, errorThrown) {
			console.log(type)
		}
	});
}

function getMarket(currencyObj) {
	var now = new Date();
	var timestamp = app.formatDate(now.getTime());
	var currencyName = currencyObj.currencyName;
	var currencyPair = currencyObj.currencyPair;

}

function setMarket(marketObj,id) {
	var currencyName = marketObj.currencyPair;
	document.getElementById(id + currencyName + '-total').innerText = '24H '+app.formatValue(marketObj.total);
	var marketEl = document.getElementById(id + currencyName + '-market');
	marketEl.innerHTML = '<span class="price1">'+app.formatValue(marketObj.amount)+'</span>'+
	'<span class="price2">' + app.formatValue(marketObj[app.getExchangeRateLocalStorage().toLowerCase() + 'Amount'] * marketObj.amount) + ' ' + app.getExchangeRateLocalStorage() +'</span>';
	var percentEl = document.getElementById(id + currencyName + '-percent');
	marketObj.percent = marketObj.percent;
	if(marketObj.percent < 0) {
		percentEl.innerText = parseFloat(marketObj.percent * 100).toFixed(2) + '%';
		percentEl.classList.remove('app-coin-percent-up');
		percentEl.classList.remove('app-coin-percent-down');
		percentEl.classList.add('app-coin-percent-down');
	} else {
		percentEl.innerText = '+' + parseFloat(marketObj.percent * 100).toFixed(2) + '%';
		percentEl.classList.remove('app-coin-percent-down');
		percentEl.classList.remove('app-coin-percent-up');
		percentEl.classList.add('app-coin-percent-up');
	}
}

function setLiDocument(marketObj) {
	var currencys = marketObj.currencyPair.split('-');
	var li = getLiDocument(marketObj,currencys,'base-');
	var ul = document.getElementById(currencys[1] + "-ul");
	if(!ul){
		var a = document.createElement('a');
		a.id = currencys[1] + '-item';
		a.className = "mui-control-item";
		a.href = '#' + currencys[1];
		a.innerHTML = currencys[1];
		document.getElementById("sliderSegmentedControl").appendChild(a);
		
		var div = document.createElement('div');
		div.id = currencys[1];
		div.className = "mui-control-content";
		document.getElementById("app-scroll").appendChild(div);
		ul = document.createElement('ul');
		ul.id = currencys[1] + "-ul";
		ul.className = "dapp-table-view mui-table-view";
		div.appendChild(ul);
	}
	ul.appendChild(li);
	setMarket(marketObj,'base-');
	if(!currencysObj[currencys[1]]) {
		currencysObj[currencys[1]] = {};
	}
	var currencyObj = {
		'marketObj': marketObj,
		'title': currencys[0] + '/' + currencys[1],
		'basecoin': currencys[1],
		'coin': currencys[0]
	}
	currencysObj[currencys[1]][currencys[0]] = currencyObj;
	liListener(li, marketObj.currencyPair);
	if(choiceMarketsObj[marketObj.currencyPair]){
		var choiceLi = getLiDocument(marketObj,currencys,'choice-');
		document.getElementById("market-choice-ul").appendChild(choiceLi);
		setMarket(marketObj,'choice-');
		liListener(choiceLi, marketObj.currencyPair);
	}
}

function getLiDocument(marketObj,currencys,id){
	var li = document.createElement("li");
	li.id = id + marketObj.currencyPair + '-market-li';
	li.className = 'dapp-table-view-cell mui-table-view-cell mui-media';
	li.innerHTML = '<div class="dapp-market-info">' + 
						'<span class="name1">' + currencys[0] + '<span class="dapp-market-currency">/' + currencys[1] + '</span>'+
						'</span><span id="'+id + marketObj.currencyPair + '-total" class="name2"></span>'+
					'</div>' +
		'<div id="'+id + marketObj.currencyPair + '-market" class="dapp-market-info"></div>' +
		'<div id="'+id + marketObj.currencyPair + '-percent" class="dapp-market-percent "></div>';
	return li;
}

function liListener(li, currencyPair) {
	li.addEventListener('tap', function() {
		openMarketInfo(currencyPair);
	});
}

function openMarketInfo(currencyPair) {
	var data = {
		currencysObj: currencysObj,
		currencyPair: currencyPair,
		choiceMarketsObj: choiceMarketsObj
	}
	app.openWin('market_info.html', 'market_info.html', null, data);
}

/**
 * 把行情数据推送到其它窗口
 */
function sendDataToView() {
	var homePage = plus.webview.getWebviewById('html/home/html/home.html');
	mui.fire(homePage, "marketList", currencysObj);
	var cctPage = plus.webview.getWebviewById('html/cct/html/cct_index.html');
	mui.fire(cctPage, "marketList", currencysObj);
	var walletPage = plus.webview.getWebviewById('html/wallet/html/wallet.html');
	mui.fire(walletPage, "marketList", currencysObj);
	
}

/**
 * 把新行情数据推送到其它窗口
 * @param {Object} data
 */
function sendChangeDataToView(data) {
    var homePage = plus.webview.getWebviewById('html/home/html/home.html');
    mui.fire(homePage, "marketChange", data);
    sendDataToView();
    var infoPage = plus.webview.getWebviewById('market_info.html');
    if (infoPage) {
        mui.fire(infoPage, "marketChange", data);
    }
    var cctPage = plus.webview.getWebviewById('html/cct/html/cct_index.html');
    if (cctPage) {
        mui.fire(cctPage, "marketChange", data);
    }

}