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

//1、每个页面写自己的国际化语言变量，例子：
var langues = {
	zh_CN: {
		title: '行情',
		price: '价格',
		all: '全部',
		change: '涨跌幅',
		favorites: "自选",
		fullMarket: '全部',
		nav1: '自选',
		nav2: '主板',
		nav3: '合约',
		nav4: '币股',
		nav5: '币汇',
		tab1: '币种',
		tab2: '最新价',
		tab3: '涨跌幅',
		alertToast: '敬请期待',

	},
	zh_HK: {
		title: '行情',
		price: '價格',
		all: '全部',
		change: '漲跌幅',
		favorites: " 自選",
		fullMarket: '全部',
		nav1: '自選',
		nav2: '主板',
		nav3: '合約',
		nav4: '幣股',
		nav5: '幣匯',
		tab1: '幣種',
		tab2: '最新價',
		tab3: '漲跌幅',
		alertToast: '敬請期待',

	},
	en_US: {
		title: 'Market',
		price: 'Price',
		all: 'All',
		change: 'Change',
		favorites: "Favorites",
		fullMarket: 'All',
		nav1: 'Optional',
		nav2: 'Main',
		nav3: 'Contract',
		nav4: 'Money',
		nav5: 'Currency',
		tab1: 'Currency',
		tab2: 'Latest',
		tab3: 'Applies',
		alertToast: 'Coming soon',
	}
};
//2、页面上所有需要国际化的文字，包括提示，都通过Vue去引用，例子：
var langueKey = app.getLanguageLocalStorage(); //获取国际化语种
var langue = langues[langueKey]; // 获取国际化语种数据
var dataInfo = new Vue({
	el: "#js-data-info",
	data: {
		langue: langue,
		marketList: [],
		currentIndex:1
	},
	methods:{
		navTap:function(index){
			this.currentIndex=index
		}
	}
})
//3、每个页面都需要加上以下的方法：
window.addEventListener('switchLangueData', function(e) {
	//dataInfo为Vue对象的名称
	dataInfo.langue = langues[e.detail];
});
var currencysObj = {};
var choiceMarketsObj;
mui.plusReady(function() {
	initData();
	listener();
});

mui.plusReady(function() {
	mui('#js-data-info').pullToRefresh({
		down: {
			callback: function() {
				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();
					}
				});
				var self = this;
				setTimeout(function() {
					self.endPullDownToRefresh();
				}, 2000);
			}
		}
	});
})

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) {
		dataInfo.currentIndex=0
	});
}

function setWebsocket() {
	var socket = new SockJS(app.currencyBaseUrl + "/websocket");
	var stompClient = Stomp.over(socket);
	stompClient.debug = null;
	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) {}
	});
}
var muiActive = false;

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 temp = marketObj.percent * 1
	var tempClass
	if (temp >= 0) {
		tempClass = 'price1 percent-height-color'
	} else {
		tempClass = 'price1 percent-low-color'
	}
	'<span class="' + tempClass + '">'
	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="' + tempClass + '">' + 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");
	var motherboard = document.getElementById("motherboard");
	if (!ul) {
		var a = document.createElement('a');
		a.id = currencys[1] + '-item';
		if (muiActive == false) {
			a.className = "mui-control-item mui-active";
		} else {
			a.className = "mui-control-item";
		}

		a.href = '#' + currencys[1];
		a.innerHTML = currencys[1];
		document.getElementById("sliderSegmentedControl").appendChild(a);
		var motherboardInfo = document.getElementById("motherboard-info");
		var div = document.createElement('div');
		div.id = currencys[1];
		if (muiActive == false) {
			div.className = "mui-control-content info mui-active";
		} else {
			div.className = "mui-control-content info";
		}

		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);
		motherboardInfo.appendChild(div);
		muiActive = true;
	}
	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);
	});
}

window.addEventListener('test',function(e){
	app.openWin('market_info.html', 'market_info.html', null, e.detail);
})
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);
	setTimeout(function() {
		mui.fire(homePage, "marketList", currencysObj);
		mui.fire(cctPage, "marketList", currencysObj);
		mui.fire(walletPage, "marketList", currencysObj);
	}, 1000);
}

/**
 * 把新行情数据推送到其它窗口
 * @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);
	}

}

//暫未開放説明
mui('.mui-segmented-control').on('tap', '.short', function() {
	mui.toast(dataInfo.langue.alertToast);
});