fontend-app/html/home/js/home.js

var langues = {
	zh_CN: {
		title: '首页',
		help: '帮助中心',
		recharge: "充值",
		withdrawal: "提现",
		favorites: "自选",
		top: '涨跌榜',
		more:'更多'
	},
	zh_HK: {
		title: '首頁',
		help: '幫助中心',
		recharge: "充值",
		withdrawal: "提現",
		favorites: " 自選",
		top: '漲跌榜',
		more:'更多'
	},
	en_US: {
		title: 'Home',
		help: 'Help Center',
		recharge: "Recharge",
		withdrawal: "Withdrawal",
		favorites: "Favorites",
		top: 'Top',
		more:'More'
		
	}
};
//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];
});
var currencysObj = null;
var homeMarketPairObj = {};
mui.plusReady(function() {
	initData();
	listener();
	mui("#js-data-info").pullToRefresh({
		down: {
			callback: function() {
				getNews();
				listAdSlider();
				var self = this;
				setTimeout(function() {
					self.endPullDownToRefresh();
				}, 1000);
			}
		}
	});
});

function initData() {
	initHomeMarket();
	initTopMarket();
	getNews();
	listAdSlider();
}

function listener() {
	var marketPage = app.preloadWin('../../market/market.html', 'html/market/market.html', null, null, null, true);
	// 更多点击事件
	document.getElementById('more').addEventListener('tap', function() {
		marketPage.show();
	});
	// 帮助中心点击事件
	document.getElementById('helpCenter').addEventListener('tap', function() {
		mui.openWindow({
			url: '../../../mine/html/my/my_help_center.html',
		});
	});
	// 自选点击事件
	document.getElementById('choice').addEventListener('tap', function() {
		var url = 'html/market/market.html';
		var data = {
			url: url
		};
		var marketView = plus.webview.getWebviewById(url);
		mui.fire(marketView, "choiceTab", null);
		var indexView = plus.webview.getWebviewById(plus.runtime.appid);
		mui.fire(indexView, "viewTab", data);
		marketPage.show();
	});
	// 提现点击事件
	document.getElementById('withdraw').addEventListener('tap', function() {
		if(JSON.stringify(app.getUserLocalStorage()) != "{}") {
			//			app.openWin('../../wallet/html/withdraw.html', 'withdraw.html');
			var url = 'html/wallet/html/wallet.html';
			var data = {
				url: url
			};
			var marketView = plus.webview.getWebviewById(url);
			mui.fire(marketView, "choiceTab", null);
			var indexView = plus.webview.getWebviewById(plus.runtime.appid);
			mui.fire(indexView, "viewTab", data);

		} else {
			app.openWin('../../../mine/html/wallet_login.html', 'wallet_login.html');
		}

	});
	// 充值点击事件
	document.getElementById('recharge').addEventListener('tap', function() {
		if(JSON.stringify(app.getUserLocalStorage()) != "{}") {
			//			app.openWin('../../wallet/html/recharge.html', 'recharge.html');
			var url = 'html/wallet/html/wallet.html';
			var data = {
				url: url
			};
			var marketView = plus.webview.getWebviewById(url);
			mui.fire(marketView, "choiceTab", null);
			var indexView = plus.webview.getWebviewById(plus.runtime.appid);
			mui.fire(indexView, "viewTab", data);

		} else {
			app.openWin('../../../mine/html/wallet_login.html', 'wallet_login.html');
		}

	});
	/**
	 * 监听获取行情列表
	 */
	window.addEventListener("marketList", function(event) {
		currencysObj = event.detail;
	});

	/**
	 * 监听行情改变事件
	 */
	window.addEventListener("marketChange", function(event) {
		marketChange(event.detail);
	});

	/**
	 * 汇率改变事件
	 */
	window.addEventListener("exchangeRate", function(event) {
		initData();
	});
}

function marketChange(changeMarketObj) {
	var percent = (changeMarketObj.percent * 100).toFixed(2) + "%";
	var className;
	var topClassName;
	if(changeMarketObj.percent < 0) {
		className = 'app-market-down';
		topClassName = 'app-coin-percent-down';
	} else {
		percent = "+" + percent;
		className = 'app-market-up';
		topClassName = 'app-coin-percent-up';
	}
	//涨跌榜中的
	var topEl = document.getElementById("top-total-" + changeMarketObj.currencyPair);
	if(topEl) {
		topEl.innerHTML = '24H&nbsp;' + app.formatValue(changeMarketObj.total);
		document.getElementById("top-amount-" + changeMarketObj.currencyPair).innerHTML = app.formatValue(changeMarketObj.amount);
		document.getElementById("top-money-" + changeMarketObj.currencyPair).innerHTML = app.formatValue(changeMarketObj[app.getExchangeRateLocalStorage().toLowerCase() + 'Amount'] * changeMarketObj.amount) + ' ' + app.getExchangeRateLocalStorage();
		var topPercentEl = document.getElementById("top-percent-" + changeMarketObj.currencyPair);
		topPercentEl.innerHTML = percent;
		topPercentEl.classList.remove('app-coin-percent-down');
		topPercentEl.classList.remove('app-coin-percent-up');
		topPercentEl.classList.add(topClassName);
	}
	//头部的
	if(homeMarketPairObj[changeMarketObj.currencyPair]) {
		var i = homeMarketPairObj[changeMarketObj.currencyPair];
		document.getElementById("currency-amount-" + i).innerText = app.formatValue(changeMarketObj.amount);
		document.getElementById("currency-percent-" + i).innerText = percent;
		document.getElementById("currency-rate-" + i).innerText = app.formatValue(changeMarketObj[app.getExchangeRateLocalStorage().toLowerCase() + 'Amount']) + app.getExchangeRateLocalStorage();
		document.getElementById("currency-amount-" + i).classList.remove('app-market-up');
		document.getElementById("currency-amount-" + i).classList.remove('app-market-down');
		document.getElementById("currency-amount-" + i).classList.add(className);
		document.getElementById("currency-percent-" + i).classList.remove('app-market-up');
		document.getElementById("currency-percent-" + i).classList.remove('app-market-down');
		document.getElementById("currency-percent-" + i).classList.add(className);
	}

}

function initHomeMarket() {
	var url = app.currencyBaseUrl + "market/getHomeList";
	mui.ajax(url, {
		type: "GET",
		timeout: 5000,
		dataType: "json",
		success: function(j) {
			if(j.code == 200) {
				var markets = j.data;
				app.setLocalStorage("market/getHomeList",markets);
				renderHomeMarket(markets);
			} else {
				var markets = app.getLocalStorage("market/getHomeList");
				renderHomeMarket(markets);
			}
		},
		error: function(xhr, type, errorThrown) {
			console.log("===market/getHomeList=== error type:"+type)
			var markets = app.getLocalStorage("market/getHomeList");
			renderHomeMarket(markets);
		}
	});
}

function renderHomeMarket(markets){
	for(var i in markets) {
		var percent = (markets[i].percent * 100).toFixed(2) + "%";
		if(markets[i].percent < 0) {
			document.getElementById("currency-amount-" + i).classList.add('app-market-down');
			document.getElementById("currency-percent-" + i).classList.add('app-market-down');
		} else {
			percent = "+" + percent;
			document.getElementById("currency-amount-" + i).classList.add('app-market-up');
			document.getElementById("currency-percent-" + i).classList.add('app-market-up');
		}
		var currencys = markets[i].currencyPair.split("-");
		homeMarketPairObj[markets[i].currencyPair] = i;
		document.getElementById("currency-pair-" + i).innerText = currencys[0] + '/' + currencys[1];
		document.getElementById("currency-amount-" + i).innerText = app.formatValue(markets[i].amount);
		document.getElementById("currency-percent-" + i).innerText = percent;
		document.getElementById("currency-rate-" + i).innerText = app.formatValue(markets[i][app.getExchangeRateLocalStorage().toLowerCase() + 'Amount'] * markets[i].amount) + app.getExchangeRateLocalStorage();
		var currencyObj = {
			'marketObj': markets[i],
			'title': currencys[0] + '/' + currencys[1],
			'basecoin': currencys[1],
			'coin': currencys[0]
		}
		liListener(document.getElementById("currency-market-" + i), markets[i].currencyPair)
	}
}

function initTopMarket() {
	var url = app.currencyBaseUrl + "market/getTopList";
	mui.ajax(url, {
		type: "GET",
		timeout: 5000,
		dataType: "json",
		success: function(j) {
			if(j.code == 200) {
				var markets = j.data;
				app.setLocalStorage("market/getTopList",markets);
				renderTopMarket(markets);
				// var sliderItem = document.createElement('li');
				// sliderItem.className = "gain-item-list mui-table-view-cell";
				// sliderItem.innerHTML = '<div class="gain-item-list-ranking">' + (markets.length + 1) + '</div>' +
				// 	'<div class="gain-item-list-name"><span class="name1">HFH/USDT</span><span class="name2">24H 0.1500</span></div><div class="gain-item-list-price"><span class="price1">0.1500</span><span class="price2">0.1500 USD</span></div><div class="gain-item-list-info">+0.00%</div>';
				// ul.appendChild(sliderItem);

			} else {
				var markets = app.getLocalStorage("market/getTopList");
				renderTopMarket(markets);
			}
		},
		error: function(xhr, type, errorThrown) {
			console.log("===market/getTopList=== error type:"+type);
			var markets = app.getLocalStorage("market/getTopList");
			renderTopMarket(markets);
		}
	});
}

function renderTopMarket(markets){
	var ul = document.getElementById('top-ul');
	ul.innerHTML = '';
	for(var i = 0; i < markets.length; i++) {
		var currencys = markets[i].currencyPair.split('-');
		var percent = (markets[i].percent * 100).toFixed(2) + "%";
		var percentClassName;
		if(markets[i].percent < 0) {
			percentClassName = 'app-coin-percent-down';
		} else {
			percentClassName = 'app-coin-percent-up';
			percent = '+' + percent;
		}
		var li = document.createElement("li");
		li.className = "gain-item-list mui-table-view-cell";
		li.innerHTML = '<div class="gain-item-list-ranking">' + (i + 1) + '</div>' +
			'<div class="gain-item-list-name">' +
			'	<span class="name1"><span>' + currencys[0] + '</span><span class="dapp-market-currency">/' + currencys[1] + '</span></span>' +
			'	<span id="top-total-' + markets[i].currencyPair + '" class="name2">24H&nbsp;' + app.formatValue(markets[i].total) + '</span>' +
			'</div>' +
			'<div class="gain-item-list-price">' +
			'	<span id="top-amount-' + markets[i].currencyPair + '" class="price1">' + app.formatValue(markets[i].amount) + '</span>' +
			'	<span id="top-money-' + markets[i].currencyPair + '" class="price2">' + app.formatValue(markets[i][app.getExchangeRateLocalStorage().toLowerCase() + 'Amount'] * markets[i].amount) + ' ' + app.getExchangeRateLocalStorage() + '</span>' +
			'</div>' +
			'<div id="top-percent-' + markets[i].currencyPair + '" class="gain-item-list-info ' + percentClassName + '">' + percent + '</div>';
		var currencyObj = {
			'marketObj': markets[i],
			'title': currencys[0] + '/' + currencys[1],
			'basecoin': currencys[1],
			'coin': currencys[0]
		}
		ul.appendChild(li);
		liListener(li, markets[i].currencyPair)
	}
}

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

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

//获取滚动屏信息
function getNews() {
	var url = app.confBaseUrl + "systemNotice/systemNoticeList";
	mui.ajax(url, {
		headers: {
			"locale": app.getLanguageLocalStorage() // 语种头部
		},
		type: "GET",
		dataType: "json",
		success: function(data) {
			if(data.code == 200) {
				var resultData = data.data.rows;
				if(resultData.length > 0) {
					var sliderGroup = document.getElementById('mui-slider-group');
					sliderGroup.innerHTML = '';
					var sliderItem = document.createElement('div');
					sliderItem.className = 'mui-slider-item';
					sliderItem.innerHTML = '<p class="mui-slider-title  mui-ellipsis">' + resultData[resultData.length - 1].title + '</p>';
					sliderGroup.appendChild(sliderItem);
					for(var i = 0; i < resultData.length; i++) {
						if(resultData[i].details == null) {
							continue;
						}
						var sliderItem = document.createElement('div');
						sliderItem.className = 'mui-slider-item';
						sliderItem.innerHTML = '<p class="mui-slider-title mui-ellipsis">' + resultData[i].title + '</p>';
						sliderGroup.appendChild(sliderItem);
						if(resultData[i].title) {
							toSystemNotice(sliderItem, resultData[i].id);
						}
					}
					var sliderItem = document.createElement('div');
					sliderItem.className = 'mui-slider-item';
					sliderItem.innerHTML = '<p class="mui-slider-title mui-slider-item-duplicate mui-ellipsis">' + resultData[0].title + '</p>';
					sliderGroup.appendChild(sliderItem);
					var slider2 = mui("#mui-slider");
					slider2.slider({
						interval: 5000
					});

				}
			}

		},
		error: function(xhr, type, errorThrown) {
			console.log(type);
		}
	});
}

/**
 * 轮播图查询
 */
function listAdSlider() {
	var url = app.confBaseUrl + "systemImage/systemImageList";
	mui.ajax(url, {
		dataType: 'json', //服务器返回json格式数据
		type: "GET", //HTTP请求类型
		timeout: 10000, //超时时间设置为10秒
		success: function(returnData) {
			if(returnData.code == "200") { //请求成功
				fillAdSliderData(returnData.data.rows);
			}
		}
	});
}

/**
 * 轮播广告图片
 * @param {Object} _data
 */
function fillAdSliderData(resultData) {
	if(resultData.length > 0) {
		var sliderGroup = document.getElementById('mui-slider-group1');
		sliderGroup.innerHTML = '';
		var sliderItem = document.createElement('div');
		sliderItem.className = 'swiper-slide mui-slider-item mui-slider-item-duplicate';
		sliderItem.innerHTML = '<a href="#"><img src="' + app.walletFileUrl + resultData[resultData.length - 1].fileUrl + '"/></a>';
		sliderGroup.appendChild(sliderItem);
		for(var i = 0; i < resultData.length; i++) {
			if(resultData[i].fileUrl == null) {
				continue;
			}
			var sliderItem2 = document.createElement('div');
			sliderItem2.className = 'swiper-slide mui-slider-item';
			sliderItem2.innerHTML = '<a href="#"><img src="' + app.walletFileUrl + resultData[i].fileUrl + '"/></a>';
			sliderGroup.appendChild(sliderItem2);
			if(resultData[i].jumpUrl) {
				webJump(sliderItem2, resultData[i].jumpUrl);
			}
		}
		var sliderItem = document.createElement('div');
		sliderItem.className = 'swiper-slide mui-slider-item mui-slider-item-duplicate';
		sliderItem.innerHTML = '<a href="#"><img src="' + app.walletFileUrl + resultData[0].fileUrl + '"/></a>';
		sliderGroup.appendChild(sliderItem);
		var slider = mui("#slider");
		slider.slider({
			interval: 5000,
		});
		var indicator = document.getElementById("mui-slider-indicator");
		indicator.innerHTML = '';
		var indicatorItem = document.createElement('div');
		indicatorItem.className = 'mui-indicator mui-active';
		indicator.appendChild(indicatorItem);
		for(var i = 0; i < resultData.length - 1; i++) {
			if(resultData[i].fileUrl == null) {
				continue;
			}
			var indicatorItem = document.createElement('div');
			indicatorItem.className = 'mui-indicator';
			indicator.appendChild(indicatorItem);
		}
	}
}

function webJump(obj, url) {
	obj.addEventListener('tap', function() {
		mui.openWindow({
			url: '../../web/web.html',
			extras: {
				webUrl: url //扩展参数
			}
		});
	});
}

// 跳转指定公告
function toSystemNotice(obj, id) {
	obj.addEventListener('tap', function() {
		mui.openWindow({
			url: '../../../mine/html/my/system_notice_value.html',
			id: '../../../mine/html/my/system_notice_value.html',
			extras: {
				_id: id
			}
		})
	});
}