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.
1041 lines
30 KiB
1041 lines
30 KiB
//1、每个页面写自己的国际化语言变量，例子： |
|
var langues = { |
|
zh_CN: { |
|
choice: "自选", |
|
high: "高", |
|
low: '低', |
|
ktype: { |
|
realtime: '实时', |
|
ftmin: '15分钟', |
|
onehour: '1小时', |
|
fourhour: '4小时', |
|
oneday: '1天' |
|
}, |
|
depth: '深度', |
|
buy: '买入', |
|
sale: '卖出', |
|
amount: '数量', |
|
price: '价格', |
|
deal: '成交', |
|
date: '时间', |
|
buyOrSale: '买入/卖出', |
|
lang: 'zh', |
|
introduction: { |
|
introduction: '简介', |
|
issueDate: '发行时间', |
|
totalAmount: '发行总量', |
|
circulation: '流通总量', |
|
ico: '众筹价格', |
|
whitePaper: '白皮书', |
|
officialWebsite: '官网', |
|
blockExplorer: '区块查询' |
|
} |
|
}, |
|
zh_HK: { |
|
choice: "自選", |
|
high: "高", |
|
low: "低", |
|
ktype: { |
|
realtime: '實時', |
|
ftmin: '15分鐘', |
|
onehour: '1小時', |
|
fourhour: '4小時', |
|
oneday: '1天' |
|
}, |
|
buy: '買入', |
|
sale: '賣出', |
|
amount: '數量', |
|
price: '價格', |
|
depth: '深度', |
|
deal: '成交', |
|
date: '時間', |
|
buyOrSale: '買入/賣出', |
|
lang: 'zh', |
|
introduction: { |
|
introduction: '簡介', |
|
issueDate: '發行時間', |
|
totalAmount: '發行總量', |
|
circulation: '流通總量', |
|
ico: '衆籌價格', |
|
whitePaper: '白皮書', |
|
officialWebsite: '官網', |
|
blockExplorer: '區塊查詢' |
|
} |
|
}, |
|
en_US: { |
|
choice: "Choice", |
|
high: "High", |
|
low: 'Low', |
|
ktype: { |
|
realtime: 'Time', |
|
ftmin: '15min', |
|
onehour: '1hour', |
|
fourhour: '4hour', |
|
oneday: '1day' |
|
}, |
|
depth: 'Depth', |
|
buy: 'Buy', |
|
sale: 'Sale', |
|
amount: 'Amount', |
|
price: 'Price', |
|
deal: 'Deal', |
|
date: 'Date', |
|
buyOrSale: 'buy/sale', |
|
lang: 'en', |
|
introduction: { |
|
introduction: 'Introduction', |
|
issueDate: 'Issue Date', |
|
totalAmount: 'Total Amount', |
|
circulation: 'Circulation', |
|
ico: 'ICO Price', |
|
whitePaper: 'White Paper', |
|
officialWebsite: 'Official Website', |
|
blockExplorer: 'Block Explorer' |
|
} |
|
} |
|
}; //2、页面上所有需要国际化的文字，包括提示，都通过Vue去引用，例子： |
|
|
|
var langueKey = app.getLanguageLocalStorage(); //获取国际化语种 |
|
|
|
var langue = langues[langueKey]; // 获取国际化语种数据 |
|
//var dataInfo = new Vue({ |
|
// el: "#js-data-info", |
|
// data: { |
|
// langue: langue |
|
// } |
|
//}) |
|
|
|
var Kvue = new Vue({ |
|
el: "#js-data-info", |
|
data: { |
|
langue: langue, |
|
TvWidget: null, |
|
symbols: null, |
|
interval: null, |
|
historyData: [], |
|
kNewdata: [], |
|
subInterval: null, |
|
loading: true, |
|
MALine5: null, |
|
MALine10: null, |
|
MALine20: null, |
|
MALine30: null, |
|
subObjMarket: null, |
|
stompClientMarket: null, |
|
times: 0 |
|
}, |
|
mounted: function() { |
|
mui.plusReady(function() { |
|
var self = plus.webview.currentWebview(); |
|
var currencys = self.currencyPair.split('-'); |
|
Kvue.symbols = self.currencyPair; |
|
Kvue.install(Kvue.symbols, 15); |
|
}) |
|
}, |
|
methods: { |
|
adjustScale: function adjustScale(value) { |
|
if (value == 0) return '1000000'; |
|
var val = parseFloat(value); |
|
|
|
if (val < 0) { |
|
val = -val; |
|
} |
|
|
|
if (val < 0.0001) { |
|
return 100000000; |
|
} else if (val < 0.1) { |
|
return 1000000; |
|
} else if (val < 10) { |
|
return 10000; |
|
} else { |
|
return 100; |
|
} |
|
|
|
return value; |
|
}, |
|
adjustScaleA: function adjustScaleA(value) { |
|
if (!value || value == 0) return 6; |
|
var val = parseFloat(value); |
|
|
|
if (val < 0) { |
|
val = -val; |
|
} |
|
|
|
if (val < 0.001) { |
|
return 8; |
|
} else if (val < 0.1) { |
|
return 6; |
|
} else if (val < 10) { |
|
return 4; |
|
} else { |
|
return 2; |
|
} |
|
}, |
|
billinfo: function billinfo() { |
|
return { |
|
name: this.symbols, |
|
ticker: this.symbols, |
|
description: '', |
|
type: 'index', |
|
exchange: '', |
|
listed_exchange: '', |
|
session: '24x7', |
|
timezone: 'Asia/Hong_Kong', |
|
minmov: 1, |
|
pricescale: this.adjustScale(marketObj.amount), |
|
minmov2: 0, |
|
supported_resolutions: ['1', '15', '30', '60', '240', '720', 'D', 'W', 'M'], |
|
has_seconds: false, |
|
// 是否有秒的历史数据 |
|
has_intraday: true, |
|
// 是否有分钟的历史数据 |
|
has_daily: true, |
|
// 是否有日的历史数据 |
|
has_weekly_and_monthly: true, |
|
// 是否有周和月的历史数据 |
|
seconds_multipliers: [], |
|
// 分辨率为秒单位的数组 |
|
intraday_multipliers: ['1', '15', '30', '60', '240', '720'], |
|
// 分辨率为分钟单位的数组 |
|
has_empty_bars: true, |
|
force_session_rebuild: false, |
|
has_no_volume: false, |
|
// 表示商品是否拥有成交量数据 |
|
has_fractional_volume: true, |
|
volume_precision: 2, |
|
data_status: 'delayed_streaming', |
|
expired: false, |
|
expiration_date: false, |
|
volumePaneSize: "tiny" |
|
}; |
|
}, |
|
install: function install(symbols, interval) { |
|
var _this3 = this; |
|
|
|
this.TvWidget = new TradingView.widget({ |
|
symbol: symbols, |
|
interval: interval, |
|
library_path: '../../lib/charting_library/', |
|
container_id: 'TradingView', |
|
datafeed: new Datafeed(this), |
|
fullscreen: false, |
|
autosize: true, |
|
locale: langue.lang, |
|
preset: "mobile", |
|
timezone: 'Asia/Hong_Kong', |
|
debug: false, |
|
loading_screen: { |
|
backgroundColor: '#fff', |
|
foregroundColor: '#0094ff' |
|
}, |
|
overrides: { |
|
'symbolWatermarkProperties.color': '#fe4761', |
|
'mainSeriesProperties.candleStyle.upColor': '#00ce7d', |
|
'mainSeriesProperties.candleStyle.downColor': '#e04640', |
|
'mainSeriesProperties.candleStyle.borderUpColor': '#00ce7d', |
|
'mainSeriesProperties.candleStyle.borderDownColor': '#e04640', |
|
"paneProperties.background": "#fff", |
|
"paneProperties.legendProperties.showLegend": false, |
|
'scalesProperties.lineColor': '#f2f2f2' |
|
}, |
|
studies_overrides: { |
|
"volume.volume.color.0": "#00ce7d", |
|
"volume.volume.color.1": "#e04640" |
|
}, |
|
disabled_features: ['header_symbol_search', 'header_resolutions', 'header_compare', 'header_settings', |
|
'header_undo_redo', 'header_chart_type', 'header_screenshot', 'widget_logo', |
|
'control_bar', 'volume_force_overlay', 'header_fullscreen_button', 'timeframes_toolbar', 'header_indicators', |
|
'show_chart_property_page', 'property_pages' |
|
], |
|
// 启用图表某个功能 |
|
enabled_features: ['dont_show_boolean_study_arguments', 'remove_library_container_border', //'save_chart_properties_to_local_storage', |
|
//'side_toolbar_in_fullscreen_mode', |
|
'constraint_dialogs_movement', 'hide_last_na_study_output' |
|
], |
|
// favorites:{ |
|
// intervals:['1','15', '30', '60', '240', '720'] |
|
// }, |
|
theme: 'Light', |
|
allow_symbol_change: true, |
|
custom_css_url: 'chart1.css' |
|
}); |
|
this.symbols = symbols; |
|
this.interval = interval; |
|
this.TvWidget.onChartReady(function() { |
|
_this3.onChartReady(_this3.TvWidget); |
|
|
|
}); |
|
}, |
|
onChartReady: function onChartReady(TvWidget) { |
|
var maPercision = this.adjustScaleA(marketObj.amount); |
|
var that = this; |
|
this.MALine5 = TvWidget.chart().createStudy('Moving Average', false, true, [5, 'close', 0], null, { |
|
'Plot.color': '#f6cd79', |
|
'Plot.linewidth': 1, |
|
'precision': maPercision |
|
}); |
|
this.MALine10 = TvWidget.chart().createStudy('Moving Average', false, true, [10, 'close', 0], null, { |
|
'Plot.color': '#4cd49b', |
|
'Plot.linewidth': 1, |
|
'precision': maPercision |
|
}); |
|
this.MALine20 = TvWidget.chart().createStudy('Moving Average', false, true, [20, 'close', 0], null, { |
|
'Plot.color': '#dd5f9e', |
|
'Plot.linewidth': 1, |
|
'precision': maPercision |
|
}); |
|
this.MALine30 = TvWidget.chart().createStudy('Moving Average', false, true, [30, 'close', 0], null, { |
|
'Plot.color': '#9751dc', |
|
'Plot.linewidth': 1, |
|
'precision': maPercision |
|
}); |
|
$('.timebutton').removeClass('active'); |
|
$('#15m').addClass('active'); |
|
$('.timebutton').click(function() { |
|
$('.timebutton').removeClass('active'); |
|
$(this).addClass('active'); |
|
|
|
if ($(this).attr('data-interval') == '1') { |
|
this.interval = '1'; |
|
} else if ($(this).attr('data-interval') == '15') { |
|
this.interval = '15'; |
|
} else if ($(this).attr('data-interval') == '30') { |
|
this.interval = '30'; |
|
} else if ($(this).attr('data-interval') == '1H') { |
|
this.interval = '60'; |
|
} else if ($(this).attr('data-interval') == '4H') { |
|
this.interval = '240'; |
|
} else if ($(this).attr('data-interval') == '1D') { |
|
this.interval = 'D'; |
|
} else if ($(this).attr('data-interval') == '1W') { |
|
this.interval = 'W'; |
|
} else if ($(this).attr('data-interval') == '1M') { |
|
this.interval = 'M'; |
|
} |
|
|
|
var _that = this; |
|
|
|
setTimeout(function() { |
|
if (_that.interval == 1) { |
|
TvWidget.chart().setResolution(_that.interval, function onReadyCallback() { |
|
TvWidget.chart().getStudyById(that.MALine5).setVisible(false); |
|
TvWidget.chart().getStudyById(that.MALine10).setVisible(false); |
|
TvWidget.chart().getStudyById(that.MALine20).setVisible(false); |
|
TvWidget.chart().getStudyById(that.MALine30).setVisible(false); |
|
document.getElementById('TradingView').childNodes[0].setAttribute('style', |
|
'display:block;width:100%;height:100%;'); |
|
TvWidget.chart().setChartType(3); |
|
}); |
|
} else { |
|
TvWidget.chart().setResolution(_that.interval, function onReadyCallback() { |
|
TvWidget.chart().getStudyById(that.MALine5).setVisible(true); |
|
TvWidget.chart().getStudyById(that.MALine10).setVisible(true); |
|
TvWidget.chart().getStudyById(that.MALine20).setVisible(true); |
|
TvWidget.chart().getStudyById(that.MALine30).setVisible(true); |
|
document.getElementById('TradingView').childNodes[0].setAttribute('style', |
|
'display:block;width:100%;height:100%;'); |
|
TvWidget.chart().setChartType(1); |
|
}); |
|
} |
|
}, 1000); |
|
}); |
|
}, |
|
// 获取K线历史数据 |
|
getBars: function getBars(symbolInfo, resolution, from, to, onHistoryCallback, onDataCallback) { |
|
this.historyGetData(this.interval, from, to).then(function(res) { |
|
onDataCallback(res); |
|
}); |
|
}, |
|
// K线历史数据 |
|
historyGetData: function historyGetData(resolution, from, to) { |
|
return new Promise(function(resolve, reject) { |
|
var klinedata = []; |
|
var timeType = null; |
|
var timeNumber = null; //判断分辨率 |
|
|
|
switch (resolution) { |
|
case 'D': |
|
timeType = 'DAY'; |
|
timeNumber = 1; |
|
break; |
|
|
|
case 'W': |
|
timeType = 'WEEK'; |
|
timeNumber = 1; |
|
break; |
|
|
|
case 'M': |
|
timeType = 'MONTH'; |
|
timeNumber = 1; |
|
break; |
|
|
|
default: |
|
if (Number(resolution) < 60) { |
|
timeType = 'MINUTE'; |
|
timeNumber = resolution; |
|
} else { |
|
timeType = 'HOUR'; |
|
timeNumber = parseInt(Number(resolution) / 60); |
|
} |
|
|
|
} |
|
|
|
var url = app.currencyBaseUrl + "market/query?timeType=".concat(timeType, "&timeNumber=").concat(timeNumber, |
|
"¤cyPair=").concat(Kvue.symbols); |
|
mui.ajax(url, { |
|
type: "GET", |
|
dataType: "json", |
|
success: function(res) { |
|
if (Object.prototype.toString.call(res.data) == '[object Array]' && res.data.length) { |
|
if (res.data[0].timestamp >= from * 1000 && res.data[res.data.length - 1].timestamp <= to * 1000) { |
|
this.times = res.data[res.data.length - 1].timestamp; |
|
res.data.forEach(function(value) { |
|
klinedata.push({ |
|
index: value.index, |
|
time: value.timestamp, |
|
close: value.close, |
|
open: value.open, |
|
high: value.highest, |
|
low: value.lowest, |
|
volume: value.total |
|
}); |
|
}); |
|
this.historyData = klinedata; |
|
resolve(klinedata); // this.loading = false; |
|
} else { |
|
this.historyData = []; |
|
resolve([]); |
|
} |
|
} else { |
|
resolve([]); |
|
} |
|
} |
|
}); |
|
}); |
|
}, |
|
// 实时更新K线 |
|
subscribeBars: function subscribeBars(onRealtimeCallback) { |
|
this.connectionMarket(onRealtimeCallback); |
|
}, |
|
// 訂閲 |
|
subscribeMarket: function subscribeMarket(onRealtimeCallback) { |
|
var timeType = null; |
|
var timeNumber = null; //判断分辨率 |
|
|
|
switch (this.interval) { |
|
case 'D': |
|
timeType = 'DAY'; |
|
timeNumber = 1; |
|
break; |
|
|
|
case 'W': |
|
timeType = 'WEEK'; |
|
timeNumber = 1; |
|
break; |
|
|
|
case 'M': |
|
timeType = 'MONTH'; |
|
timeNumber = 1; |
|
break; |
|
|
|
default: |
|
if (Number(this.interval) < 60) { |
|
timeType = 'MINUTE'; |
|
timeNumber = this.interval; |
|
} else { |
|
timeType = 'HOUR'; |
|
timeNumber = parseInt(Number(this.interval) / 60); |
|
} |
|
|
|
} |
|
|
|
var thiss = this; |
|
var websocketURL = '/topic/marketk/' + this.symbols + '/' + timeNumber + timeType; // var websocketURL= '/topic/subscription/BTC-USDT' |
|
|
|
this.subObjMarket = this.stompClientMarket.subscribe(websocketURL, function(data) { |
|
//货币对最新信息（中间头部） |
|
var subData = JSON.parse(data.body); |
|
|
|
if (subData.timestamp >= thiss.times) { |
|
onRealtimeCallback({ |
|
time: subData.timestamp, |
|
close: subData.close, |
|
open: subData.open, |
|
high: subData.highest, |
|
low: subData.lowest, |
|
volume: subData.total |
|
}); |
|
} |
|
}); |
|
}, |
|
connectionMarket: function connectionMarket(onRealtimeCallback) { |
|
// 建立连接对象 |
|
var socket = new SockJS(app.currencyBaseUrl + '/websocket'); //连接服务端提供的通信接口，连接以后才可以订阅广播消息和个人消息 |
|
// 获取STOMP子协议的客户端对象 |
|
|
|
this.stompClientMarket = new Stomp.over(socket); |
|
this.stompClientMarket.debug = null; |
|
var this_ = this; |
|
this.stompClientMarket.connect({}, function(event) { |
|
//防止单个用户多次订阅 |
|
if (this_.subObjMarket == null) { |
|
this_.subscribeMarket(onRealtimeCallback); |
|
} else { |
|
this_.subObjMarket.unsubscribe(); |
|
this_.subscribeMarket(onRealtimeCallback); |
|
} |
|
}); //关闭事件触发重新链接 |
|
|
|
socket.onclose = function() { |
|
this_.connectionMarket(onRealtimeCallback); |
|
}; |
|
} |
|
} |
|
}); ////3、每个页面都需要加上以下的方法： |
|
|
|
window.addEventListener('switchLangueData', function(e) { |
|
//Kvue对象的名称 |
|
Kvue.langue = langues[e.detail]; |
|
}); |
|
/*基于准备好的dom，初始化echarts实例*/ |
|
//var myChart1 = echarts.init(document.getElementById('main1')); |
|
//var myChart2 = echarts.init(document.getElementById('main2')); |
|
//當前的行情對象 |
|
|
|
var marketObj = null; |
|
var currencysObj = null; |
|
var myCharts = {}; |
|
var thisChartData = {}; //视图第一次点击记录 |
|
|
|
var firstTap = {}; //菜单是否已弹出 |
|
|
|
var isOpen = false; |
|
var choiceMarketsObj; |
|
var listRecordChange = false; |
|
var listDepthChange = false; |
|
var stompClient = null; |
|
var subscribeObj = null; |
|
mui.plusReady(function() { |
|
// 隐藏滚动条 |
|
plus.webview.currentWebview().setStyle({ |
|
scrollIndicator: 'none' |
|
}); |
|
var self = plus.webview.currentWebview(); |
|
var currencys = self.currencyPair.split('-'); |
|
choiceMarketsObj = app.getLocalStorage(app.marketChoiceKey); //初始化币种数据 |
|
initData(self.currencysObj[currencys[1]][currencys[0]]); //添加分时行情 |
|
var url = app.currencyBaseUrl + 'market/query?timeType=MINUTE&timeNumber=15¤cyPair='; // var chartData = { |
|
// myChartId: 'main1', |
|
// url: url, |
|
// chartType: "T" |
|
// }; |
|
// var chartData = { |
|
// myChartId: 'main2', |
|
// url: url, |
|
// chartType: "15M" |
|
// }; |
|
// chartTap(chartData); |
|
|
|
currencysObj = self.currencysObj; //初始化币种选择 |
|
|
|
initCoinData(); //监听函数 |
|
|
|
listener(); |
|
}); |
|
|
|
function initData(currencyObj) { |
|
marketObj = currencyObj.marketObj; |
|
|
|
if (choiceMarketsObj[marketObj.currencyPair]) { |
|
document.getElementById("choice").style.color = '#0978FF'; |
|
} else { |
|
document.getElementById("choice").style.color = '#000'; |
|
} |
|
|
|
initInfoData(currencyObj); //深度数据 |
|
|
|
initDepth(currencyObj); //成交数据 |
|
|
|
initListRecord(currencyObj); //货币详情 |
|
|
|
initCurrencyInfo(currencyObj.coin); |
|
} |
|
|
|
function initInfoData(currencyObj) { |
|
document.getElementById('title').innerHTML = currencyObj.title; //价格 |
|
|
|
document.getElementById('coin-price').innerHTML = app.formatValue(marketObj.amount); //法币价格 |
|
|
|
document.getElementById('coin-rate').innerHTML = app.formatValue(marketObj[app.getExchangeRateLocalStorage().toLowerCase() + |
|
'Amount'] * marketObj.amount) + ' ' + app.getExchangeRateLocalStorage(); //涨跌 |
|
|
|
setPercent(marketObj); //最高 |
|
|
|
document.getElementById('highest').innerHTML = app.formatValue(marketObj.highest); //最低 |
|
|
|
document.getElementById('lowest').innerHTML = app.formatValue(marketObj.lowest); //24小时统计交易量 |
|
|
|
document.getElementById('day-total').innerHTML = app.formatValue(marketObj.total); |
|
} |
|
|
|
function initDepth(currencyObj) { |
|
if (listDepthChange) { |
|
return; |
|
} |
|
|
|
listDepthChange = true; |
|
var depthUrl = app.CCTUrl + 'order/listOrderByCoinAndUnit?coinName=' + currencyObj.coin + '&unitName=' + currencyObj.basecoin; |
|
mui.ajax(depthUrl, { |
|
type: "GET", |
|
dataType: "json", |
|
success: function(j) { |
|
if (j.code == 200) { |
|
setDepthData(currencyObj, j.data); |
|
} else {} |
|
}, |
|
error: function error(xhr, type, errorThrown) { |
|
console.log(type); |
|
} |
|
}); |
|
} |
|
|
|
function setDepthData(currencyObj, data) { |
|
var depthData = [ |
|
[], |
|
[] |
|
]; |
|
var ul = document.getElementById("depth-ul"); |
|
ul.innerHTML = '<li class="buying-selling-title">' + ' <span>' + langue.buy + '</span>' + ' <span>' + langue.amount + |
|
'(' + currencyObj.coin + ')</span>' + ' <span>' + langue.price + '(' + currencyObj.basecoin + ')</span>' + ' <span>' + |
|
langue.amount + '(' + currencyObj.coin + ')</span>' + ' <span>' + langue.sale + '</span>' + '</li>'; |
|
var buyTotal = 0; |
|
var saleTotal = 0; |
|
var length = data.BUY_ORDERS.length < data.SELL_ORDERS.length ? data.SELL_ORDERS.length : data.BUY_ORDERS.length; |
|
|
|
for (var i = 0; i < length; i++) { |
|
if (data.BUY_ORDERS.length > i) { |
|
buyTotal += data.BUY_ORDERS[i].totalLastNum; |
|
depthData[1].push([data.BUY_ORDERS[i].unitPrice, saleTotal]); |
|
} |
|
|
|
if (data.SELL_ORDERS.length > i) { |
|
saleTotal += data.SELL_ORDERS[i].totalLastNum; |
|
depthData[0].push([data.SELL_ORDERS[i].unitPrice, buyTotal]); |
|
} |
|
|
|
if (i < 20 && i < data.BUY_ORDERS.length && i < data.SELL_ORDERS.length) { |
|
var li = document.createElement("li"); |
|
li.className = 'buying-selling-info'; |
|
li.innerHTML = '<span class="buy-sale">' + (i + 1) + '</span>' + '<span class="buy-sale-num">' + app.formatValue( |
|
data.BUY_ORDERS[i].totalNum) + '</span>' + '<p class="price">' + ' <span class="price-buy">' + app.formatValue( |
|
data.BUY_ORDERS[i].unitPrice) + '</span>' + ' <span class="price-sale">' + app.formatValue(data.SELL_ORDERS[i].unitPrice) + |
|
'</span>' + '</p>' + '<span class="buy-sale-num">' + app.formatValue(data.SELL_ORDERS[i].totalNum) + '</span>' + |
|
'<span class="buy-sale">' + (i + 1) + '</span>'; |
|
ul.appendChild(li); |
|
} |
|
} |
|
|
|
if (!myCharts["container"]) { |
|
myCharts["container"] = echarts.init(document.getElementById("container")); |
|
} |
|
|
|
myCharts["container"].setOption(option = options.getDepthOption(depthData), true); |
|
listDepthChange = false; |
|
} |
|
/** |
|
* 获取货币详情数据 |
|
* @param {Object} currencyName |
|
*/ |
|
|
|
function initCurrencyInfo(currencyName) { |
|
var url = app.currencyBaseUrl + 'currency/getCurrencyInfo?currencyName=' + currencyName; |
|
mui.ajax(url, { |
|
type: "GET", |
|
dataType: "json", |
|
headers: { |
|
"locale": app.getLanguageLocalStorage() // 语种头部 |
|
|
|
}, |
|
success: function(j) { |
|
if (j.code == 200) { |
|
for (var columnName in j.data) { |
|
document.getElementById(columnName).innerText = j.data[columnName]; |
|
} |
|
} else {} |
|
}, |
|
error: function error(xhr, type, errorThrown) { |
|
console.log(type); |
|
} |
|
}); |
|
} |
|
/** |
|
* 添加币对切换数据 |
|
*/ |
|
|
|
function initCoinData() { |
|
var aHtml = ''; |
|
var popover = document.getElementById("popover"); |
|
var choiceId = 'basecoin-choice'; |
|
aHtml += '<a class="mui-control-item mui-active" href="#' + id + '">' + langue.choice + '</a>'; |
|
var choiceDiv = document.createElement("div"); |
|
choiceDiv.id = id; |
|
choiceDiv.className = 'mui-control-content mui-active'; |
|
var choiceUl = document.createElement("ul"); |
|
choiceUl.id = 'choice-market-ul'; |
|
choiceUl.className = 'mui-table-view'; |
|
choiceDiv.appendChild(choiceUl); |
|
popover.appendChild(choiceDiv); |
|
|
|
for (var basecoin in currencysObj) { |
|
var id = 'basecoin-' + basecoin; |
|
aHtml += '<a class="mui-control-item" href="#' + id + '">' + basecoin + '</a>'; |
|
var divEl = document.createElement("div"); |
|
divEl.id = id; |
|
divEl.className = 'mui-control-content'; |
|
var ul = document.createElement("ul"); |
|
ul.className = 'mui-table-view'; |
|
for (var index in currencysObj[basecoin]) { |
|
var li = getLi(currencysObj, basecoin, index, 'base-'); |
|
ul.appendChild(li); |
|
liListener(li, currencysObj[basecoin][index]); |
|
|
|
if (choiceMarketsObj[currencysObj[basecoin][index].marketObj.currencyPair]) { |
|
var choiceLi = getLi(currencysObj, basecoin, index, 'choice-'); |
|
choiceUl.appendChild(choiceLi); |
|
liListener(choiceLi, currencysObj[basecoin][index]); |
|
} |
|
} |
|
|
|
divEl.appendChild(ul); |
|
popover.appendChild(divEl); |
|
} |
|
|
|
document.getElementById('basecoin-a').innerHTML = aHtml; |
|
} |
|
|
|
function getLi(currencysObj, basecoin, index, id) { |
|
var currencyPair = currencysObj[basecoin][index].marketObj.currencyPair; |
|
var li = document.createElement("li"); |
|
li.id = id + 'currency-market-li-' + currencyPair; |
|
li.className = 'mui-table-view-cell'; |
|
li.innerHTML += '<span class="popover-coin">' + currencysObj[basecoin][index].coin + '<span>/' + currencysObj[ |
|
basecoin][index].basecoin + '</span>' + '</span>' + '<span id="' + id + 'currency-market-' + currencyPair + |
|
'" class="popover-price">' + app.formatValue(currencysObj[basecoin][index].marketObj.amount) + '</span>'; |
|
return li; |
|
} |
|
/** |
|
* 币对切换监听 |
|
* @param {Object} li |
|
* @param {Object} currencyObj |
|
*/ |
|
|
|
function liListener(li, currencyObj) { |
|
li.addEventListener('tap', function() { |
|
firstTap = {}; |
|
initData(currencyObj); |
|
cancel(); // chartTap(thisChartData); |
|
|
|
Kvue.symbols = currencyObj.marketObj.currencyPair; |
|
Kvue.install(Kvue.symbols, 15); |
|
}); |
|
} |
|
|
|
function initListRecord(currencyObj) { |
|
var url = app.currencyBaseUrl + 'market/getHistoryList?currencyPair=' + marketObj.currencyPair; |
|
mui.ajax(url, { |
|
type: "GET", |
|
dataType: "json", |
|
success: function(j) { |
|
if (j.code == 200) { |
|
var ul = document.getElementById("list-record"); |
|
ul.innerHTML = '<li class="transaction-title">' + ' <span>' + langue.date + '</span>' + ' <span>' + langue.buyOrSale + |
|
'</span>' + ' <span>' + langue.price + '(' + currencyObj.basecoin + ')</span>' + ' <span>' + langue.amount + |
|
'(' + currencyObj.coin + ')</span>' + '</li>'; |
|
|
|
for (var index = 0; index < 20 && index < j.data.length; index++) { |
|
setRecordLi(ul, j.data[index]); |
|
} |
|
|
|
listRecordChange = false; |
|
} else {} |
|
}, |
|
error: function error(xhr, type, errorThrown) { |
|
console.log(type); |
|
} |
|
}); |
|
setWebsocket(currencyObj); |
|
} |
|
|
|
function setWebsocket(currencyObj) { |
|
if (subscribeObj == null) { |
|
var socket = new SockJS(app.currencyBaseUrl + "/websocket"); |
|
stompClient = Stomp.over(socket); |
|
stompClient.debug = null; |
|
stompClient.connect({}, function(frame) { |
|
subscribe(currencyObj); |
|
}); |
|
|
|
socket.onclose = function() { |
|
subscribeObj = null; |
|
setWebsocket(currencyObj); |
|
}; |
|
} else { |
|
subscribeObj.unsubscribe(); |
|
subscribe(currencyObj); |
|
} |
|
} |
|
|
|
function subscribe(currencyObj) { |
|
var ul = document.getElementById("list-record"); //订阅讲座消息 |
|
|
|
subscribeObj = stompClient.subscribe('/topic/history/' + marketObj.currencyPair, function(greeting) { |
|
var obj = JSON.parse(greeting.body); |
|
ul.innerHTML = '<li class="transaction-title">' + ' <span>' + langue.date + '</span>' + ' <span>' + langue.buyOrSale + |
|
'</span>' + ' <span>' + langue.price + '(' + currencyObj.basecoin + ')</span>' + ' <span>' + langue.amount + '(' + |
|
currencyObj.coin + ')</span>' + '</li>'; |
|
|
|
for (var index = 0; index < 20 && index < obj.length; index++) { |
|
setRecordLi(ul, obj[index]); |
|
} |
|
}); |
|
} |
|
|
|
function setRecordLi(ul, record) { |
|
var li = document.createElement("li"); |
|
li.className = 'transaction-info'; |
|
var buyOrSale; |
|
var buyOrSaleClass; |
|
|
|
if (record.tradingType == 'BUY') { |
|
buyOrSale = langue.buy; |
|
buyOrSaleClass = 'transaction-direction-buy'; |
|
} else { |
|
buyOrSale = langue.sale; |
|
buyOrSaleClass = 'transaction-direction-sale'; |
|
} |
|
|
|
li.innerHTML = '<span class="transaction-time">' + record.createTime.substring(11) + '</span>' + '<span class="' + |
|
buyOrSaleClass + '">' + buyOrSale + '</span>' + '<span class="transaction-price">' + app.formatValue(record.makerPrice) + |
|
'</span>' + '<span class="transaction-num">' + app.formatValue(record.tradingNum) + '</span>'; |
|
ul.appendChild(li); |
|
} |
|
|
|
function listener() { |
|
document.getElementById("choice").addEventListener("tap", function() { |
|
marketChoice(this); |
|
}); |
|
// 弹出菜单点击事件 |
|
document.getElementById('icon-popover').addEventListener('tap', function() { |
|
if (isOpen) { |
|
cancel(); |
|
} else { |
|
document.getElementById('popover').style.transform = 'translate(0,0)'; |
|
var bg = document.getElementById("bg"); //获取灰色背景蒙版 |
|
bg.style.display = "block"; |
|
isOpen = true; |
|
} |
|
}); |
|
document.getElementById("buy-currency").addEventListener("tap", function() { |
|
buyOrSale('BUY'); |
|
}); |
|
document.getElementById("sale-currency").addEventListener("tap", function() { |
|
buyOrSale('SELL'); |
|
}); |
|
document.getElementById('bg').addEventListener('tap', function() { |
|
cancel(); |
|
}); |
|
/** |
|
* 监听行情改变事件 |
|
*/ |
|
|
|
window.addEventListener("marketChange", function(event) { |
|
marketChange(event.detail); |
|
}); |
|
/** |
|
* 监听行情改变事件 |
|
*/ |
|
|
|
window.addEventListener("depthChange", function(event) { |
|
var changeMarketObj = event.detail; |
|
|
|
if (changeMarketObj.currencyPair == marketObj.currencyPair) { |
|
var currencys = changeMarketObj.currencyPair.split('-'); |
|
var currencyObj = { |
|
'marketObj': changeMarketObj, |
|
'title': currencys[0] + '/' + currencys[1], |
|
'basecoin': currencys[1], |
|
'coin': currencys[0] //深度数据 |
|
}; |
|
|
|
initDepth(currencyObj); |
|
} |
|
}); |
|
} |
|
|
|
function marketChoice(_this) { |
|
var currencyPair = marketObj.currencyPair; |
|
if (choiceMarketsObj[currencyPair]) { |
|
delete choiceMarketsObj[currencyPair]; |
|
_this.style.color = '#000'; |
|
document.getElementById('choice-currency-market-li-' + currencyPair).remove(); |
|
} else { |
|
choiceMarketsObj[currencyPair] = true; |
|
_this.style.color = '#0978FF'; |
|
var currencys = currencyPair.split('-'); |
|
var choiceLi = getLi(currencysObj, currencys[1], currencys[0], 'choice-'); |
|
document.getElementById('choice-market-ul').appendChild(choiceLi); |
|
liListener(choiceLi, currencysObj[currencys[1]][currencys[0]]); |
|
} |
|
app.setLocalStorage(app.marketChoiceKey, choiceMarketsObj); |
|
var marketView = plus.webview.getWebviewById('html/market/market.html'); |
|
mui.fire(marketView, "marketChoice", currencyPair); |
|
} |
|
/** |
|
* 跳转到购买或者出售界面 |
|
*/ |
|
|
|
function buyOrSale(type) { |
|
var url = 'html/cct/html/cct_index.html'; |
|
var currencys = marketObj.currencyPair.split('-'); |
|
var data = { |
|
type: type, |
|
coin: currencys[0], |
|
unit: currencys[1] |
|
}; |
|
var cctView = plus.webview.getWebviewById(url); |
|
mui.fire(cctView, "tapTypeBtn", data); |
|
var data2 = { |
|
url: url |
|
}; |
|
var indexView = plus.webview.getWebviewById(plus.runtime.appid); |
|
mui.fire(indexView, "viewTab", data2); |
|
var self = plus.webview.currentWebview(); |
|
self.close(); |
|
} |
|
/** |
|
* 行情数据改变 |
|
* @param {Object} changeMarketObj |
|
*/ |
|
|
|
function marketChange(changeMarketObj) { |
|
var currencys = changeMarketObj.currencyPair.split('-'); |
|
currencysObj[currencys[1]][currencys[0]].marketObj = changeMarketObj; |
|
|
|
if (changeMarketObj.currencyPair == marketObj.currencyPair) { |
|
marketObj = changeMarketObj; |
|
var currencyObj = { |
|
'marketObj': changeMarketObj, |
|
'title': currencys[0] + '/' + currencys[1], |
|
'basecoin': currencys[1], |
|
'coin': currencys[0] //改变行情显示数据 |
|
|
|
}; |
|
initInfoData(currencyObj); //深度数据 |
|
|
|
initDepth(currencyObj); |
|
} |
|
|
|
var el = document.getElementById("currency-market-" + changeMarketObj.currencyPair); |
|
|
|
if (el) { |
|
el.innerText = app.formatValue(changeMarketObj.amoount); |
|
} |
|
} |
|
|
|
function setTChart(url) { |
|
plus.nativeUI.showWaiting(); |
|
mui.ajax(url, { |
|
type: "GET", |
|
dataType: "json", |
|
success: function(j) { |
|
if (j.code == 200) { |
|
var data = splitTData(j.data); |
|
|
|
if (!myCharts['T']) { |
|
myCharts['T'] = echarts.init(document.getElementById('main1')); |
|
} |
|
|
|
myCharts['T'].setOption(option = options.getTOption(data), true); |
|
plus.nativeUI.closeWaiting(); |
|
} else {} |
|
}, |
|
error: function error(xhr, type, errorThrown) { |
|
plus.nativeUI.closeWaiting(); |
|
console.log(type); |
|
} |
|
}); |
|
} |
|
|
|
function splitData(data) { |
|
var categoryData = []; |
|
var values = []; |
|
var volumes = []; |
|
var lastIndex = data.length - 1; |
|
|
|
for (var i = 0; i < data.length; i++) { |
|
categoryData.push(data[i].date); |
|
var amount = []; |
|
amount[0] = data[i].open; |
|
amount[1] = data[i].close; |
|
amount[2] = data[i].lowest; |
|
amount[3] = data[i].highest; |
|
amount[4] = data[i].total; |
|
values.push(amount); |
|
var volume = []; |
|
volume[0] = i; |
|
volume[1] = amount[4]; |
|
volume[2] = amount[0] > amount[1] ? 1 : -1; |
|
volumes.push(volume); |
|
} |
|
|
|
return { |
|
categoryData: categoryData, |
|
values: values, |
|
volumes: volumes |
|
}; |
|
} |
|
|
|
function splitTData(data) { |
|
var categoryData = []; |
|
var values = []; |
|
var volumes = []; |
|
var lastIndex = data.length - 1; |
|
|
|
for (var i = 0; i < data.length; i++) { |
|
categoryData.push(data[i].date); |
|
values[i] = data[i].close; |
|
volumes.push(data[i].total); |
|
} |
|
|
|
return { |
|
categoryData: categoryData, |
|
values: values, |
|
volumes: volumes |
|
}; |
|
} |
|
|
|
function setPercent(marketObj) { |
|
var percentEl = document.getElementById('coin-gain'); |
|
|
|
if (marketObj.percent < 0) { |
|
percentEl.innerText = parseFloat(marketObj.percent * 100).toFixed(2) + '%'; |
|
percentEl.style.color = '#FD595D'; |
|
} else { |
|
percentEl.innerText = '+' + parseFloat(marketObj.percent * 100).toFixed(2) + '%'; |
|
percentEl.style.color = '#4CD49B'; |
|
} |
|
} |
|
/** |
|
* 隐藏币对选择弹框 |
|
*/ |
|
|
|
function cancel() { |
|
isOpen = false; |
|
var bg = document.getElementById("bg"); //获取灰色背景蒙版 |
|
|
|
var popover = document.getElementById("popover"); //获取菜单弹出框 |
|
|
|
bg.style.display = "none"; |
|
popover.style.transform = 'translate(-100%,0)'; |
|
|
|
}
|
|
|