<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>HBG/HADAX</title>
	<link rel="stylesheet" type="text/css" href="css/common.css" />
	<link rel="stylesheet" type="text/css" href="css/market.css" />
	<link rel="stylesheet" type="text/css" href="css/footer.css" />
	<script type="text/javascript" src="lib/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="../../cdn.bootcss.com/socket.io/1.3.7/socket.io.js"></script>
	<script type="text/javascript" src="javascripts/jquery.cookie.js"></script>
	<script type="text/javascript" src="lib/layer_mobile/layer.js"></script>
	<script type="text/javascript" src="javascripts/main.js"></script>
	<script type="text/javascript" src="lib/vue.min.js"></script>
</head>

<body>


<!-- Copyright � 2005. Spidersoft Ltd -->
<style>
A.applink:hover {border: 2px dotted #DCE6F4;padding:2px;background-color:#ffff00;color:green;text-decoration:none}
A.applink       {border: 2px dotted #DCE6F4;padding:2px;color:#2F5BFF;background:transparent;text-decoration:none}
A.info          {color:#2F5BFF;background:transparent;text-decoration:none}
A.info:hover    {color:green;background:transparent;text-decoration:underline}
</style>
<div style='BORDER: 1px solid #DCE6F4; MARGIN-TOP: 20px; MARGIN-BOTTOM: 20px; MARGIN-LEFT: 5px; MARGIN-RIGHT: 5px; PADDING: 5px; BACKGROUND-COLOR: #eef8ff;line-height:180%; COLOR: #000000; font-family: Arial; font-size: 8pt; width=100%; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr="#FFFFFFFF", EndColorStr="#F2F5FAFF");'>
This page was saved using <a class="applink" href="http://www.spidersoft.com"><b>WebZIP 7.0.3.1030</b></a> <a class="applink" href="http://www.spidersoft.com"><b>offline browser</b></a>  on  08/07/19 18:14:29.<br>
<b>Address:</b> <a class="info" href="http://jyxt.ys.13mv.com/mobile/market.html">http://jyxt.ys.13mv.com/mobile/market.html</a><br>
<b>Title:</b> HBG/HADAX &nbsp;&bull;&nbsp; <b>Size:</b> 6438 &nbsp;&bull;&nbsp; <b>Last Modified:</b> Tue, 30 Jul 2019 02:30:27 GMT<br></div>
<!-- /Copyright � 2005. Spidersoft Ltd -->


	<div id="app" v-cloak>
		<header class="header">
			<div class="tc ft16" data-localize="footer.quotation">行情</div>
		</header>
		<div class="wrap-tab mt40" id="content">
			<div class="wrap-table info">
				<div class="scroll">
					<ul class="legal_ul">
						<li v-for="item in tabList" :key="item.id" :class="['old',{'wrap-btm':selectId == item.id}]" @click="tab(item.id)">
							<h5>{{item.name}}</h5>
						</li>
					</ul>
				</div>
				<div class="wrap-cont">
					<div class="inContent">
						<div class="wrap-main-two legal_wrap">
							<a v-for="item in detailList.quotation" :key="item.id" v-if="item.is_display == 1" :href="'dataMap.html?legal_id='+item.legal_id+'&currency_id='+item.currency_id+'&symbol='+item.currency_name+'/'+item.legal_name+''"
							 class="main-asset" data-currentId="item.id">
								<div class="main-name">
									<div class="name_1" style="margin-top:8px;">
										<h5>{{item.currency_name}}</h5>
										<span>/{{item.legal_name}}</span>
									</div>
									<div class="name_2">
										<span data-localize="mk.vol">{{voltxt}}</span> 
										<span class='volume'>{{item.volume || 0 | toFixeds}}</span>
									</div>
								</div>
								<div class="main-price">
									<div class="name_1 usdprice">{{item.now_price || 0.00 | toFixed4}}</div>
									<div class="name_2 cnyprice" style="opacity: 0;">¥ {{item.now_price * detailList.usdt_price *
										detailList.ExRAte || 0.00 | toFixeds}}</div>
								</div>
								<div class="main-rate">
									<div :class="['rate_green',{'bg2':item.change < 0}]">
										{{item.change || 0.000 | toFixed2}}%
									</div>
								</div>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<footer>
		<a href="index.html">
			<div>
				<p class="img img0"></p>
				<span data-localize="footer.home">首页</span>
			</div>
		</a>
		<a href="market.html" class="select">
			<div>
				<p class="img img1"></p>
				<span data-localize="footer.quotation">行情</span>
			</div>
		</a>
		<!-- <a href="fiatrad.html">
				<div>
						<p class="img img2"></p>
						<span>法币交易</span>
				</div>
				</a> -->
		<a href="transaction.html">
			<div>
				<p class="img img2"></p>
				<span data-localize="footer.currency">币币交易</span>
			</div>
		</a>
        <a  href="LeveragedDeals.html">
			<div>
				<p class="img img3"></p>
				<span data-localize="footer.lever">杠杆交易</span>
			</div>
		</a>
		<a href="assets.html">
			<div>
				<p class="img img4"></p>
				<span data-localize="footer.assets">资产</span>
			</div>
		</a>
	</footer>
	<script src="lib/jquery.localize.min.js"></script>
	<script src="lib/language_cookie.js"></script>
	<script>
		var token = get_user_login();
		var vue = new Vue({
			el: '#app',
			data: {
				tabList: [],
				detailList: [],
				selectId: 0,
				voltxt:'24H量'
			},
			filters: {
				toFixeds: function (value) {
					value = Number(value);
					return value.toFixed(2);
				},
				toFixeds1: function (value) {
					value = Number(value);
					return value.toFixed(8);
				},
				toFixed2: function (value, options) {
					value = Number(value);
					return value.toFixed(2);
				},
				toFixed4: function (value, options) {
					value = Number(value);
					return value.toFixed(4);
				}
			},
			mounted: function () {
				let that = this;
				that.voltxt=getlg('voltxt');
				initDataTokens({
					url: 'currency/quotation_new'
				}, that.currencyQuotationSuccess);
			},
			methods: {
				currencyQuotationSuccess(res) {
					let that = this;
					console.log(res);
					if (res.type == 'ok') {
						that.socket(token);
						that.tabList = res.message;
						if (res.message.length > 0) {
							that.selectId = res.message[0].id;
							that.detailList = res.message[0];
						}
					}
				},
				// 法币切换
				tab(ids) {
					let that = this;
					that.selectId = ids;
					let lists = that.tabList;
					for (i in lists) {
						if (ids == lists[i].id) {
							that.detailList = lists[i];
						}
					}
				},
				//socket连接封装
				socket(token) {
					let that = this;
					$.ajax({
						url: _API + "user/info",
						type: "GET",
						dataType: "json",
						async: true,
						beforeSend: function beforeSend(request) {
							request.setRequestHeader("Authorization", token);
						},
						success: function success(data) {
							if (data.type == 'ok') {
								var socket = io(socket_api);
								socket.on('connect', function (datas) {
									socket.emit('login', data.message.id);
									// 后端推送来消息时
									socket.on('daymarket', function (msg) {
										console.log(msg);
										if (msg.type == 'daymarket') {
											if (that.selectId && (that.selectId == msg.legal_id)) {
												// now_price
												let lists = that.detailList.quotation;
												for (i in lists) {
													if (lists[i].currency_id == msg.currency_id) {
														console.log(that.detailList.quotation)
														that.detailList.quotation[i].volume = msg.volume;
														that.detailList.quotation[i].now_price = msg.now_price;
														that.detailList.quotation[i].change = msg.change;
													}
												}
											}
										}
									});
								});
							}
						}
					});
				}
			}
		});
	</script>
</body>

</html>
