zhixinlian
/
fontend-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
41 Commits
1 Branch
0 Tags
37 MiB
 
 
 
 
Tag: Branch: Tree: e56e782709
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'e56e782709'
${ noResults }
fontend-web/src/pages/trade.vue

3897 lines
128 KiB
Raw Blame History

<template>
<div>
<Header></Header>
<main class="main-coins">
<!-- main -->
<div class="trade-view-main">
<!-- 行情 -->
<div class="trade-view-inner">
<!-- 行情头 -->
<div class="trade-midle-title clearfix">
<div class="fl">
<p class="header-text">
{{ $t('trade.table.header_Marketable') }}
</p>
<div class="header-text2">
<span
>{{ canuseCoin | formatV }}&nbsp;{{
newCoinPairs.coinName1
}}</span
>
<span>
≈&nbsp;{{
(canuseCoin * coinsDetailData.amount) | formatV
}}&nbsp;{{ newCoinPairs.unitName1 }}
</span>
</div>
</div>
<div class="coinPairs fl">
<a style="cursor:pointer" @click="hanleTable()">
<span>
{{ newCoinPairs.coinName1 }}/{{ newCoinPairs.unitName1 }}
<span
class="el-icon-caret-bottom"
v-if="tableShow == 'false'"
></span>
<span class="el-icon-caret-top" v-else></span>
</span>
</a>
</div>
<!-- 最新价 -->
<div class="fl">
<p class="upData" v-if="coinsDetailData.percent >= 0">
{{ coinsDetailData.amount | formatV }}
</p>
<p class="upData2" v-else>
{{ coinsDetailData.amount | formatV }}
</p>
<p class="black" v-if="!currentrate">
≈{{
(coinsDetailData.amount * coinsDetailData.usdAmount) | formatV
}}
USD
</p>
<p class="black" v-if="currentrate == 'HKD'">
≈{{
(coinsDetailData.amount * coinsDetailData.hkdAmount) | formatV
}}
HKD
</p>
<p class="black" v-else-if="currentrate == 'USD'">
≈{{
(coinsDetailData.amount * coinsDetailData.usdAmount) | formatV
}}
USD
</p>
<p class="black" v-else-if="currentrate == 'CNY'">
≈{{
(coinsDetailData.amount * coinsDetailData.cnyAmount) | formatV
}}
CNY
</p>
<p class="black" v-else-if="currentrate == 'EUR'">
≈{{
(coinsDetailData.amount * coinsDetailData.eurAmount) | formatV
}}
EUR
</p>
</div>
<div class="fl">
<p>{{ $t('trade.table.header_last_change') }}</p>
<p
class="updata"
prop="percent"
v-if="coinsDetailData.percent >= 0"
>
+{{ (coinsDetailData.percent * 100) | formatW }}%
</p>
<p class="red" prop="percent" v-else>
{{ (coinsDetailData.percent * 100) | formatW }}%
</p>
</div>
<div class="fl">
<!-- 最高价 -->
<p>{{ $t('trade.table.header_last_high') }}</p>
<p class="black">{{ coinsDetailData.highest | formatV }}</p>
</div>
<div class="fl">
<p>
<!-- 最低价 -->
{{ $t('trade.table.header_last_low') }}
</p>
<p class="black">{{ coinsDetailData.lowest | formatV }}</p>
</div>
<div class="fl">
<p>
<!-- 24H量 -->
{{ $t('trade.table.header_last_volume') }}
</p>
<p class="black">{{ coinsDetailData.total | formatV }}</p>
</div>
<!-- </div> -->
</div>
<!-- 表格开始 -->
<div class="bignameConten" v-if="tableShow == 'true'">
<div class="nameConten">
<ul class="exchange-menu-tab">
<li
class="exchange-item"
v-for="(item, index) in list"
:key="index"
>
<a
class="blue"
:class="{blueTwo: changeblue == index}"
@click="hangdelClickBlue(index, item)"
>{{ item }}</a
>
</li>
</ul>
<!-- 分割线 -->
<div class="lines"></div>
<el-table
:data="tableData"
ref="configurationTable"
height="250px"
style="cursor:pointer"
@row-click="getCoinsPairDetail"
>
<!-- 币种 -->
<el-table-column
prop="currencyPair"
:label="$t('trade.table.header_coin')"
>
<template slot-scope="scope">
<span class="el-icon-star-off"></span>
<span>{{ scope.row.currencyPair | splitV }}</span>
</template>
</el-table-column>
<!-- 最新价 -->
<el-table-column
prop="amount"
:label="$t('trade.table.header_last_price')"
>
<template slot-scope="scope">
<span v-if="scope.row.percent >= 0" class="upData">
{{ scope.row.amount | formatV }}
<span class="shangs">↑</span>
</span>
<span v-else class="upData2">
{{ scope.row.amount | formatV }}
<span class="shangs">↓</span>
</span>
<span class="totalColor">
/
<span v-if="!currentrate">
${{
(scope.row.amount * scope.row.usdAmount) | formatV
}}
</span>
<span v-else-if="currentrate == 'HKD'">
HK${{
(scope.row.amount * scope.row.hkdAmount) | formatV
}}
</span>
<span v-else-if="currentrate == 'USD'">
${{
(scope.row.amount * scope.row.usdAmount) | formatV
}}
</span>
<span v-else-if="currentrate == 'CNY'">
¥{{
(scope.row.amount * scope.row.cnyAmount) | formatV
}}
</span>
<span v-else>
€{{
(scope.row.amount * scope.row.eurAmount) | formatV
}}
</span>
</span>
</template>
</el-table-column>
<!-- 24涨跌幅 -->
<el-table-column
prop="percent"
:label="'24H' + $t('trade.table.header_last_change')"
>
<template slot-scope="scope">
<span v-if="scope.row.percent >= 0" class="upData"
>+{{ (scope.row.percent * 100) | formatW }}%</span
>
<span v-else class="upData2"
>{{ (scope.row.percent * 100) | formatW }}%</span
>
</template>
</el-table-column>
<!-- 24H成交额 -->
<el-table-column
prop="amount"
:label="
$t('trade.table.header_last_amount') +
'(' +
coinNameFirst +
')'
"
>
<template slot-scope="scope">
<span>{{
(scope.row.total * scope.row.amount) | formatV
}}</span>
</template>
</el-table-column>
<!-- 24H成交量 -->
<el-table-column
prop="total"
:label="$t('trade.table.header_last_volume')"
>
<template slot-scope="scope">
<span class="totalColor">{{
scope.row.total | formatV
}}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- 表格結束 -->
<!-- 图表 -->
<div class="coin-echarts">
<div class="selectiondiagram">
<span
@click="selectiondiagram1()"
:class="selectiondiagram == 1 ? 'klinclass' : ''"
>{{ $t('trade.table.header_candles') }}</span
>
<span
@click="selectiondiagram2()"
:class="selectiondiagram == 2 ? 'klinclass' : ''"
>{{ $t('trade.table.header_depth') }}</span
>
</div>
<!-- 图表头部 -->
<div class="top">
<TradingView
ref="TradingView"
:info="coinsDetailData"
v-show="selectiondiagram == 1"
></TradingView>
<div
id="depthChart"
class="heights"
v-show="selectiondiagram == 2"
></div>
</div>
</div>
<!-- 委托管理 -->
<div class="trustBox">
<el-tabs v-model="activeTabName2">
<el-tab-pane
:label="$t('trade.table.header_Orders')"
name="curent"
lazy
>
<!-- 当前委托 -->
<div class="trade-order-list">
<el-table :data="CurrentEntrustData.rows" stripe>
<!-- 时间 -->
<el-table-column
prop="date"
:label="$t('trade.table.header_time')"
>
<template slot-scope="scope">
<p>{{ scope.row.createTime.split(' ')[0] }}</p>
<p class="col_text--secondary">
{{ scope.row.createTime.split(' ')[1] }}
</p>
</template>
</el-table-column>
<!-- 类型 -->
<el-table-column :label="$t('trade.table.header_type')">
<template slot-scope="scope">
<span
:class="[
scope.row.orderType === 'BUY'
? 'col_text--green'
: 'col_text--red',
]"
>
{{
scope.row.orderType == 'BUY'
? $t('trade.table.header_buy')
: $t('trade.table.header_sell')
}}
</span>
</template>
</el-table-column>
<!-- 价格 -->
<el-table-column
prop="unitPrice"
:label="fixUnit2($t('trade.table.header_price'))"
>
<template slot-scope="scope">
<span>{{ scope.row.unitPrice | formatV }}</span>
</template>
</el-table-column>
<!-- 数量 -->
<el-table-column
prop="finalPrice"
:label="fixUnit1($t('trade.table.header_Amount'))"
>
<template slot-scope="scope">
<span>{{ scope.row.totalNum | formatV }}</span>
</template>
</el-table-column>
<!-- 未成交 -->
<el-table-column
:label="$t('trade.table.header_Unexecuted')"
>
<template slot-scope="scope">
<span class="col_text--red">
{{ scope.row.lastNum | formatV }}
</span>
</template>
</el-table-column>
<!-- 已成交 -->
<el-table-column :label="$t('trade.table.header_Executed')">
<template slot-scope="scope">
<span>
{{
(scope.row.totalNum - scope.row.lastNum) | formatV
}}
</span>
</template>
</el-table-column>
<!-- 撤销 -->
<el-table-column :label="$t('trade.table.header_repeal')">
<template slot-scope="scope">
<span
class="col_text--blue repeal"
@click="repeal(scope.row.id)"
style="cursor:pointer"
>{{ $t('trade.table.header_repeal') }}</span
>
</template>
</el-table-column>
<div slot="empty">
<div>
<img src="../images/ic_shuju@2x.png" alt />
</div>
<div>{{ $t('trade.table.header_noData') }}</div>
</div>
</el-table>
</div>
<!-- 當前委託分頁 -->
<div v-show="CurrentEntrustData.total">
<el-pagination
class="page"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage1"
:page-size="4"
layout="total, prev, pager, next"
:total="CurrentEntrustData.total"
></el-pagination>
</div>
</el-tab-pane>
<el-tab-pane
:label="$t('trade.table.header_History')"
name="history"
lazy
>
<!-- 委托历史 -->
<div class="trade-order-list">
<el-table
:data="HistoryEntrustData.rows"
stripe
max-height="300px"
>
<!-- 时间 -->
<el-table-column :label="$t('trade.table.header_time')">
<template slot-scope="scope">
<p>{{ scope.row.createTime.split(' ')[1] }}</p>
<p class="col_text--secondary">
{{ scope.row.createTime.split(' ')[0] }}
</p>
</template>
</el-table-column>
<!-- 类型 -->
<el-table-column :label="$t('trade.table.header_type')">
<template slot-scope="scope">
<span
:class="[
scope.row.orderType === 'BUY'
? 'col_text--green'
: 'col_text--red',
]"
>
{{
scope.row.orderType == 'BUY'
? $t('trade.table.header_buy')
: $t('trade.table.header_sell')
}}
</span>
</template>
</el-table-column>
<!-- 委托价 -->
<el-table-column
prop="entrustPrice"
:label="fixUnit2($t('trade.table.header_entrustPrice'))"
>
<template slot-scope="scope">
<span>{{ scope.row.entrustPrice | formatV }}</span>
</template>
</el-table-column>
<!-- 委托量 -->
<el-table-column
:label="fixUnit1($t('trade.table.header_entrustNum'))"
>
<template slot-scope="scope">
<span>{{ scope.row.entrustNum | formatV }}</span>
</template>
</el-table-column>
<!-- 成交总额 -->
<el-table-column
:label="fixUnit2($t('trade.table.header_dealTurnover'))"
>
<template slot-scope="scope">
<span>{{ scope.row.dealTurnover | formatV }}</span>
</template>
</el-table-column>
<!-- 成交均价 -->
<el-table-column
:label="fixUnit2($t('trade.table.header_dealPrice'))"
>
<template slot-scope="scope">
<span>{{ scope.row.dealPrice | formatV }}</span>
</template>
</el-table-column>
<!-- 成交量 -->
<el-table-column
:label="fixUnit1($t('trade.table.header_dealNum'))"
>
<template slot-scope="scope">
<span>{{ scope.row.dealNum | formatV }}</span>
</template>
</el-table-column>
<!-- 成交手续费 -->
<el-table-column
:label="$t('trade.table.header_dealCharge')"
>
<template slot-scope="scope">
<span>{{ scope.row.dealCharge | formatV }}</span>
</template>
</el-table-column>
<!-- 状态 -->
<el-table-column
:label="$t('trade.table.header_status')"
width="60px"
>
<template slot-scope="scope">
<span
:class="[
scope.row.orderStatus === 'FINISH'
? 'col_text--green'
: 'col_text--red',
]"
>
{{
scope.row.orderStatus == 'FINISH'
? $t('trade.table.header_Executed')
: $t('trade.table.header_Unexecuted')
}}
</span>
</template>
</el-table-column>
<div slot="empty">
<div>
<img src="../images/ic_shuju@2x.png" alt />
</div>
<div>{{ $t('trade.table.header_noData') }}</div>
</div>
</el-table>
</div>
<!-- 历史委托分页 -->
<div class="divpage" v-show="HistoryEntrustData.total">
<el-pagination
class="page"
@size-change="handleSizeChange2"
@current-change="handleCurrentChange2"
:current-page.sync="currentPage2"
:page-size="4"
layout="total, prev, pager, next"
:total="HistoryEntrustData.total"
></el-pagination>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
<!-- 右侧 盘口、实时成交 -->
<div class="trade-view-extra">
<div class="trade-history">
<!-- 盘口 -->
<div class="block-wrapper order">
<div class="block-header">
<div>{{ $t('trade.table.header_orderbook') }}</div>
</div>
<div class="block-main">
<el-table
:data="sellOrderList"
height="291px"
stripe
@row-click="handleGetPrice"
style="cursor:pointer"
>
<!-- 价格 -->
<el-table-column
prop="unitPrice"
:label="fixUnit2($t('trade.table.header_price'))"
>
<template slot-scope="scope">
<span class="hong">{{
scope.row.unitPrice | formatV
}}</span>
</template>
</el-table-column>
<!-- 数量 -->
<el-table-column
prop="totalLastNum"
:label="fixUnit1($t('trade.table.header_Amount'))"
>
<template slot-scope="scope">
<span>{{ scope.row.totalLastNum | formatV }}</span>
</template>
</el-table-column>
<!-- 累计 -->
<el-table-column
prop="totalNum"
:label="fixUnit1($t('trade.table.header_sum'))"
>
<template slot-scope="scope">{{
scope.row.total | formatV
}}</template>
</el-table-column>
</el-table>
</div>
<!-- 最新价 -->
<div class="title" v-if="this.coinsDetailData.percent >= 0">
<span class="upData">{{
coinsDetailData.amount | formatV
}}</span>
<span class="upData" v-if="!currentrate">
≈{{
(coinsDetailData.amount * coinsDetailData.usdAmount)
| formatV
}}
USD
</span>
<span class="upData" v-if="currentrate == 'HKD'">
≈{{
(coinsDetailData.amount * coinsDetailData.hkdAmount)
| formatV
}}
HKD
</span>
<span class="upData" v-else-if="currentrate == 'USD'">
≈{{
(coinsDetailData.amount * coinsDetailData.usdAmount)
| formatV
}}
USD
</span>
<span class="upData" v-else-if="currentrate == 'CNY'">
≈{{
(coinsDetailData.amount * coinsDetailData.cnyAmount)
| formatV
}}
CNY
</span>
<span class="upData" v-else-if="currentrate == 'EUR'">
≈{{
(coinsDetailData.amount * coinsDetailData.eurAmount)
| formatV
}}
EUR
</span>
</div>
<div class="title" v-else>
<span class="upData2">{{
coinsDetailData.amount | formatV
}}</span>
<span class="upData2" v-if="!currentrate">
≈{{
(coinsDetailData.amount * coinsDetailData.cnyAmount)
| formatV
}}
CNY
</span>
<span class="upData2" v-if="currentrate == 'HKD'">
≈{{
(coinsDetailData.amount * coinsDetailData.hkdAmount)
| formatV
}}
HKD
</span>
<span class="upData2" v-else-if="currentrate == 'USD'">
≈{{
(coinsDetailData.amount * coinsDetailData.usdAmount)
| formatV
}}
USD
</span>
<span class="upData2" v-else-if="currentrate == 'CNY'">
≈{{
(coinsDetailData.amount * coinsDetailData.cnyAmount)
| formatV
}}
CNY
</span>
<span class="upData2" v-else-if="currentrate == 'EUR'">
≈{{
(coinsDetailData.amount * coinsDetailData.eurAmount)
| formatV
}}
EUR
</span>
</div>
<div class="block-main secTable" style="margin-right:1px;">
<el-table
:data="buyOrderList"
height="261px"
stripe
@row-click="handleGetPrice"
style="cursor:pointer"
>
<!-- 价格 -->
<el-table-column
prop="unitPrice"
:label="fixUnit2($t('trade.table.header_price'))"
>
<template slot-scope="scope">
<span class="lv">{{
scope.row.unitPrice | formatV
}}</span>
</template>
</el-table-column>
<!-- 数量 -->
<el-table-column
prop="totalLastNum"
:label="fixUnit1($t('trade.table.header_Amount'))"
>
<template slot-scope="scope">
<span>{{ scope.row.totalLastNum | formatV }}</span>
</template>
</el-table-column>
<!-- 累计 -->
<el-table-column
prop="totalNum"
:label="fixUnit1($t('trade.table.header_sum'))"
>
<template slot-scope="scope">
<span>{{ scope.row.total | formatV }}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- 实时成交 -->
<div class="block-wrapper">
<div class="block-header">
<div>{{ $t('trade.table.header_trades') }}</div>
</div>
<div class="block-main">
<el-table :data="tradingRecordList" height="578" stripe>
<!-- 时间 -->
<el-table-column :label="$t('trade.table.header_time')">
<template slot-scope="scope">
<span class="text-color-white">{{
scope.row.createTime | filterPair
}}</span>
</template>
</el-table-column>
<!-- 价格 -->
<el-table-column
prop="makerPrice"
:label="fixUnit2($t('trade.table.header_price'))"
>
<template slot-scope="scope">
<span
:class="
scope.row.tradingType == 'SELL' ? 'red' : 'green'
"
>{{ scope.row.makerPrice | formatV }}</span
>
</template>
</el-table-column>
<!-- 数量 -->
<el-table-column
prop="tradingNum"
:label="fixUnit1($t('trade.table.header_Amount'))"
>
<template slot-scope="scope">
<span>{{ scope.row.tradingNum | formatV }}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
<!-- 限时交易，市价交易 -->
<div class="limitTime">
<el-tabs v-model="activeTabName">
<el-tab-pane
:label="$t('trade.table.header_Limit')"
name="limitTrade"
lazy
class="limit-title"
:data="newCoinPairs"
>
<!-- 限价交易 -->
<div class="limitTrade">
<div class="limitTradeBuy">
<div class="limitMsg">
<!-- 可用 -->
<span
>{{ $t('trade.table.header_Available') }}&nbsp;</span
>
<span class="num">{{ canuseUnit | formatV }}&nbsp;</span>
<span class="putop">{{ newCoinPairs.unitName1 }}</span>
<!-- 充币 -->
<a
v-if="userData != '' && userData != undefined"
href="./balances"
class="addCoin"
style="cursor:pointer"
>{{ $t('trade.table.header_Recharge') }}</a
>
<a
v-else
href="./login?perUrl=trade"
class="addCoin"
style="cursor:pointer"
>{{ $t('trade.table.header_Recharge') }}</a
>
</div>
<!-- 买入价 -->
<div class="inputPrice">
<span class="putop">
{{ $t('trade.table.header_buyPrice') }}
</span>
<span class="putop">({{ newCoinPairs.unitName1 }})</span>
</div>
<div class="buyprice">
<el-input
maxlength="14"
@keyup.native="handleprice1($event)"
:placeholder="$t('trade.table.header_price')"
class="Minput"
v-model="Price1"
></el-input>
</div>
<!-- 汇率换算 -->
<div :data="coinsDetailData">
<div
v-if="!currentrate && this.Price1 !== ''"
class="hide"
>
≈{{
(this.Price1 * coinsDetailData.usdAmount) | formatV
}}USD
</div>
<div
v-if="currentrate == 'HKD' && this.Price1 !== ''"
class="hide"
>
≈{{
(this.Price1 * coinsDetailData.hkdAmount) | formatV
}}HKD
</div>
<div
v-if="currentrate == 'USD' && this.Price1 !== ''"
class="hide"
>
≈{{
(this.Price1 * coinsDetailData.usdAmount) | formatV
}}USD
</div>
<div
v-if="currentrate == 'CNY' && this.Price1 !== ''"
class="hide"
>
≈{{
(this.Price1 * coinsDetailData.cnyAmount) | formatV
}}CNY
</div>
<div
v-if="currentrate == 'EUR' && this.Price1 !== ''"
class="hide"
>
≈{{
(this.Price1 * coinsDetailData.eurAmount) | formatV
}}EUR
</div>
</div>
<!-- 买入量 -->
<div class="inputPrice">
<span class="putop">
{{ $t('trade.table.header_buyAmount') }}
</span>
<span class="putop">({{ newCoinPairs.coinName1 }})</span>
</div>
<el-input
maxlength="14"
@keyup.native="proving1($event)"
:placeholder="$t('trade.table.header_Amount')"
class="Minput"
v-model="input1"
></el-input>
<div class="chose">
<a
class="choosePercenage"
@click="getPrecent1($event)"
style="cursor:pointer"
>25%</a
>
<a
class="choosePercenage"
@click="getPrecent1($event)"
style="cursor:pointer"
>50%</a
>
<a
class="choosePercenage"
@click="getPrecent1($event)"
style="cursor:pointer"
>75%</a
>
<a
class="choosePercenage"
@click="getPrecent1($event)"
style="cursor:pointer"
>100%</a
>
</div>
<div class="limitMsg">
<span>
{{ $t('trade.table.header_total') }}&nbsp;&nbsp;&nbsp;
<!-- 交易额 -->
<span class="num" v-if="Price1 && input1">
{{ result1 | formatV }}
</span>
<span class="num" v-else>0.0000</span>
&nbsp;&nbsp;&nbsp;{{ newCoinPairs.unitName1 }}
</span>
</div>
<!-- <div
v-if="userData != '' && userData != undefined"
>-->
<el-button
v-if="userData != '' && userData != undefined"
:loading="loading1"
class="limitButton"
@click="handlebutton(1)"
style="cursor:pointer"
type="primary"
>
{{ $t('trade.table.header_buy') }}&nbsp;&nbsp;{{
newCoinPairs.coinName1
}}
</el-button>
<!-- </div> -->
<el-button v-else class="limitButton">
<a
href="./login?perUrl=trade#/signIn"
class="firstlogin"
style="cursor:pointer"
>{{ $t('trade.table.header_login') }}</a
>
{{ $t('trade.table.header_or') }}
<a
href="./login?perUrl=trade#/signUp"
class="firstlogin"
style="cursor:pointer"
>{{ $t('trade.table.header_Register') }}</a
>
</el-button>
</div>
<div class="limitTradeSale">
<div class="limitTradeBuy">
<div class="limitMsg">
<!-- 可用 -->
<span
>{{ $t('trade.table.header_Available') }}&nbsp;</span
>
<span class="num"
>{{ canuseCoin | formatV }}&nbsp;</span
>
<span class="putop">{{ newCoinPairs.coinName1 }}</span>
<a
v-if="userData != '' && userData != undefined"
href="./balances"
class="addCoin"
style="cursor:pointer"
>{{ $t('trade.table.header_Recharge') }}</a
>
<a
v-else
href="./login?perUrl=trade"
class="addCoin"
style="cursor:pointer"
>{{ $t('trade.table.header_Recharge') }}</a
>
</div>
<!-- 卖出价 -->
<div class="inputPrice">
<span class="putop">
{{ $t('trade.table.header_sellPrice') }}
</span>
<span class="putop"
>({{ newCoinPairs.unitName1 }})</span
>
</div>
<div class="buyprice">
<el-input
maxlength="14"
@keyup.native="handleprice2($event)"
:placeholder="$t('trade.table.header_price')"
class="Minput"
v-model="Price2"
></el-input>
</div>
<!-- 汇率换算 -->
<div :data="coinsDetailData">
<div
v-if="!currentrate && this.Price2 !== ''"
class="hide1"
>
≈{{
(this.Price2 * coinsDetailData.usdAmount) | formatV
}}USD
</div>
<div
v-if="currentrate == 'HKD' && this.Price2 !== ''"
class="hide1"
>
≈{{
(this.Price2 * coinsDetailData.hkdAmount) | formatV
}}HKD
</div>
<div
v-if="currentrate == 'USD' && this.Price2 !== ''"
class="hide1"
>
≈{{
(this.Price2 * coinsDetailData.usdAmount) | formatV
}}USD
</div>
<div
v-if="currentrate == 'CNY' && this.Price2 !== ''"
class="hide1"
>
≈{{
(this.Price2 * coinsDetailData.cnyAmount) | formatV
}}CNY
</div>
<div
v-if="currentrate == 'EUR' && this.Price2 !== ''"
class="hide1"
>
≈{{
(this.Price2 * coinsDetailData.eurAmount) | formatV
}}EUR
</div>
</div>
<!-- 卖出量 -->
<div class="inputPrice">
<span class="putop">
{{ $t('trade.table.header_sellAmount') }}
</span>
<span class="putop"
>({{ newCoinPairs.coinName1 }})</span
>
</div>
<el-input
maxlength="14"
@keyup.native="proving2($event)"
:placeholder="$t('trade.table.header_Amount')"
class="Minput"
v-model="input2"
></el-input>
<div class="chose">
<a
class="choosePercenage"
@click="getPrecent2($event)"
style="cursor:pointer"
>25%</a
>
<a
class="choosePercenage"
@click="getPrecent2($event)"
style="cursor:pointer"
>50%</a
>
<a
class="choosePercenage"
@click="getPrecent2($event)"
style="cursor:pointer"
>75%</a
>
<a
class="choosePercenage"
@click="getPrecent2($event)"
style="cursor:pointer"
>100%</a
>
</div>
<div class="limitMsg">
<span>
{{ $t('trade.table.header_total') }}&nbsp;&nbsp;&nbsp;
<!-- 交易额 -->
<span class="num" v-if="Price2 && input2">
{{ result2 | formatV }}
</span>
<span class="num" v-else>0.0000</span>
&nbsp;&nbsp;&nbsp;{{ newCoinPairs.unitName1 }}
</span>
</div>
<el-button
v-if="userData != '' && userData != undefined"
:loading="loading2"
class="saleButton"
@click="handlebutton(2)"
style="cursor:pointer"
>
{{ $t('trade.table.header_sell') }}&nbsp;&nbsp;{{
newCoinPairs.coinName1
}}
</el-button>
<el-button v-else class="saleButton">
<a
href="./login?perUrl=trade#/signIn"
class="firstlogin"
style="cursor:pointer"
>{{ $t('trade.table.header_login') }}</a
>
{{ $t('trade.table.header_or') }}
<a
href="./login?perUrl=trade#/signUp"
class="firstlogin"
style="cursor:pointer"
>{{ $t('trade.table.header_Register') }}</a
>
</el-button>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane
:label="$t('trade.table.header_Market')"
name="tradeMarket"
lazy
class="limit-title"
>
<!-- 市价交易 -->
<div class="limitTrade">
<div class="limitTradeBuy">
<!-- 可用，充幣 -->
<div class="limitMsg" style="margin-bottom:20px">
<span
>{{ $t('trade.table.header_Available') }}&nbsp;</span
>
<span class="num">{{ canuseUnit | formatV }}&nbsp;</span>
<span class="putop">{{ newCoinPairs.unitName1 }}</span>
<a
v-if="userData != '' && userData != undefined"
href="./balances"
class="addCoin"
style="cursor:pointer"
>{{ $t('trade.table.header_Recharge') }}</a
>
<a
v-else
href="./login?perUrl=trade"
class="addCoin"
style="cursor:pointer"
>{{ $t('trade.table.header_Recharge') }}</a
>
</div>
<!-- 买入 -->
<div class="inputPrice">
<span class="putop">
{{ $t('trade.table.header_buyPrice') }}
</span>
<span class="putop">({{ newCoinPairs.unitName1 }})</span>
</div>
<el-input
:placeholder="$t('trade.table.header_newPrice')"
class="Minput"
:disabled="true"
style="margin-bottom:10px"
></el-input>
<!-- 交易額 -->
<div class="inputPrice">
<span class="putop">
{{ $t('trade.table.header_total') }}
</span>
<span class="putop">({{ newCoinPairs.unitName1 }})</span>
</div>
<el-input
maxlength="14"
@keyup.native="proving3($event)"
:placeholder="$t('trade.table.header_total')"
class="Minput"
v-model="input3"
style="margin-bottom:10px"
></el-input>
<div class="chose" style="margin-bottom:4px">
<a
class="choosePercenage"
@click="getPrecent3($event)"
style="cursor:pointer"
>25%</a
>
<a
class="choosePercenage"
@click="getPrecent3($event)"
style="cursor:pointer"
>50%</a
>
<a
class="choosePercenage"
@click="getPrecent3($event)"
style="cursor:pointer"
>75%</a
>
<a
class="choosePercenage"
@click="getPrecent3($event)"
style="cursor:pointer"
>100%</a
>
</div>
<!-- 判断登录 -->
<el-button
v-if="userData != '' && userData != undefined"
:loading="loading3"
class="limitButton"
type="primary"
@click="handlebutton(3)"
style="cursor:pointer"
>
{{ $t('trade.table.header_buy') }}&nbsp;&nbsp;{{
newCoinPairs.coinName1
}}
</el-button>
<el-button v-else class="limitButton">
<a
href="./login?perUrl=trade#/signIn"
class="firstlogin"
style="cursor:pointer"
>{{ $t('trade.table.header_login') }}</a
>
{{ $t('trade.table.header_or') }}
<a
href="./login?perUrl=trade#/signUp"
class="firstlogin"
style="cursor:pointer"
>{{ $t('trade.table.header_Register') }}</a
>
</el-button>
</div>
<div class="limitTradeSale">
<div class="limitTradeBuy">
<div class="limitMsg" style="margin-bottom:20px">
<span
>{{ $t('trade.table.header_Available') }}&nbsp;</span
>
<span class="num"
>{{ canuseCoin | formatV }}&nbsp;</span
>
<span class="putop">{{ newCoinPairs.coinName1 }}</span>
<a
v-if="userData != '' && userData != undefined"
href="./balances"
class="addCoin"
style="cursor:pointer"
>{{ $t('trade.table.header_Recharge') }}</a
>
<a
v-else
href="./login?perUrl=trade"
class="addCoin"
style="cursor:pointer"
>{{ $t('trade.table.header_Recharge') }}</a
>
</div>
<!-- 卖出价 -->
<div class="inputPrice">
<span class="putop">
{{ $t('trade.table.header_sellPrice') }}
</span>
<span class="putop"
>({{ newCoinPairs.unitName1 }})</span
>
</div>
<el-input
:placeholder="$t('trade.table.header_newPrice')"
class="Minput"
:disabled="true"
style="margin-bottom:10px"
></el-input>
<!-- 卖出量 -->
<div class="inputPrice">
<span class="putop">
{{ $t('trade.table.header_sellAmount') }}
</span>
<span class="putop"
>({{ newCoinPairs.coinName1 }})</span
>
</div>
<el-input
maxlength="14"
@keyup.native="proving4($event)"
:placeholder="$t('trade.table.header_Amount')"
class="Minput"
v-model="input4"
style="margin-bottom:10px"
></el-input>
<div class="chose" style="margin-bottom:4px">
<a
class="choosePercenage"
@click="getPrecent4($event)"
style="cursor:pointer"
>25%</a
>
<a
class="choosePercenage"
@click="getPrecent4($event)"
style="cursor:pointer"
>50%</a
>
<a
class="choosePercenage"
@click="getPrecent4($event)"
style="cursor:pointer"
>75%</a
>
<a
class="choosePercenage"
@click="getPrecent4($event)"
style="cursor:pointer"
>100%</a
>
</div>
<el-button
v-if="userData != '' && userData != undefined"
:loading="loading4"
class="saleButton"
@click="handlebutton(4)"
style="cursor:pointer"
>
{{ $t('trade.table.header_sell') }}&nbsp;&nbsp;{{
newCoinPairs.coinName1
}}
</el-button>
<el-button v-else class="saleButton">
<a
href="./login?perUrl=trade#/signIn"
class="firstlogin"
style="cursor:pointer"
>{{ $t('trade.table.header_login') }}</a
>
{{ $t('trade.table.header_or') }}
<a
href="./login?perUrl=trade#/signUp"
class="firstlogin"
style="cursor:pointer"
>{{ $t('trade.table.header_Register') }}</a
>
</el-button>
</div>
<!-- </div> -->
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
<!-- 发布输入支付密码框 -->
<el-dialog
@close="cancel(num)"
:title="this.$t('trade.table.header_issue')"
:visible.sync="passdialogVisible"
width="30%"
center
>
<span>{{ $t('trade.table.header_paypassword') }}</span>
<el-input
autofocus
:placeholder="$t('trade.table.header_paypasswordin')"
v-model="inputpassword"
show-password
></el-input>
<span slot="footer" class="dialog-footer">
<el-button @click="cancel(num)">{{
$t('trade.table.header_cancel')
}}</el-button>
<el-button type="primary" @click="subPay()" :disabled="tochange">{{
$t('trade.table.header_confirm')
}}</el-button>
</span>
</el-dialog>
<!-- 撤销框 -->
<el-dialog
:title="$t('trade.table.header_msg')"
:visible.sync="repealdialog"
width="30%"
>
<span class="sure">{{ $t('trade.table.header_repealconfirm') }}</span>
<span slot="footer" class="dialog-footer">
<el-button @click="repealdialog = false">{{
$t('trade.table.header_cancel')
}}</el-button>
<el-button type="primary" @click="repealdialogSubm()">{{
$t('trade.table.header_confirm')
}}</el-button>
</span>
</el-dialog>
</main>
<Footer></Footer>
</div>
</template>
<script>
import Header from '@/components/common/header'; //引入头部
import Footer from '@/components/common/footer'; //引入底部
import TradingView from '@/components/trade/TradingView';
// 获取格式化时间函数
import {formatDate} from '@/common/filter';
import {formatX} from '@/common/filter';
// 引入汇率
import {getExchangeRateCookie} from '@/utils/auth';
// 引入加密模块,对密码进行处理
const JSEncrypt = require('jsencrypt');
// 引入 wensocket 模块 监听数据变化
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
import {getBtc} from '@/api/btc';
import {getEth} from '@/api/eth';
import {getEos} from '@/api/eos';
import {
getCoinPairsDetail,
getQuoteList,
getQuote,
getCurrencyUrl,
getTradingRecord,
} from '@/api/currency';
import {
getCurrentEntrust,
getHistoryEntrust,
repealStatus,
publishLimitBuy,
publishLimitSell,
publishMarketBuy,
publishMarketSell,
getCctUrl,
getTradingMarket,
} from '@/api/cct';
import {getKey} from '@/api/eth.js'; //引入密钥处理函数
import Cookie from '@/common/cookie'; //携带cookie
// 导入浮点运算decimal.js
let Dec = require('decimal.js');
export default {
name: 'trade',
filters: {
filterPair: function(pair) {
// console.log(pair);
var time = pair.split(' ');
return time[1];
},
},
computed: {
// 新建计算机属性 给 实际到账数量 避免失真
result1: function() {
// `this` 指向 vm 实例
return new Dec(this.Price1).mul(new Dec(this.input1)).toNumber();
},
result2: function() {
// `this` 指向 vm 实例
return new Dec(this.Price2).mul(new Dec(this.input2)).toNumber();
},
},
data() {
return {
selectiondiagram: 1,
intervals: 5,
activeName: 'second', //默認展示K线图（15分钟）
passdialogVisible: false, //输入密码的框
repealdialog: false, //撤销框
activeTabName: 'limitTrade', //默认限价交易
activeTabName2: 'curent', //默认当前委托
CoinName: '', //主币
coinName: 'ETH', //tabs交易对-基本货币
unitName: 'BTC', //tabs交易对-二级货币
coinsList: [], //币对列表数据
currentrate: '', //汇率
canuseCoin: 0.0, //可用额的左币
canuseUnit: 0.0, //可用额的右币
newCoinPairs: {
coinName1: '',
unitName1: '',
}, //初始化货币对
currencyPairs: '', //交易币对
currencyPair: '', //币对参数
coinsDetailData: [], //货币对最新信息数据
buyOrderList: [], ///盘口买单数据
sellOrderList: [], //盘口卖单数据
pageNum: 1,
pageSize: 10,
pageNum1: 1, //当前委托页码
pageSize1: 4, //当前委托条数
pageNum2: 1, //历史委托页码
pageSize2: 4, //历史委托条数
pageSizeRecord: 23, //实时成交条数
time: [], //实时交易时间
tradingRecordList: [], //实时成交记录数据
Price1: '', //限时交易买入价
Price2: '', //限时交易卖出价
Price3: '', //市价交易买入价
Price4: '', //市价交易卖出价
input1: '', //限时交易买入量
input2: '', //限时交易卖出量
input3: '', //市价交易交易额
input4: '', //市价交易卖出量
precent: '', //百分比按钮数
pre: '',
count: '', //数值增加
count1: '', //25%按钮值
count2: '', //50%按钮值
count3: '', //75%按钮值
count4: '', //100%按钮值
timeNumber: 5, //图表默认时间（15M K线图）
timeType: 'MINUTE', //图表默认时间单位
chartType: '5M', //图表时间参数
tradeChartData: [], //时分图数据
mention: [], //时分图传入参数
mentionK: [], //K线图传入参数
mentionD: [], //深度图传入参数
id: '', //url传过来的参数
ids: '', //url传过来的分解后的id
CurrentEntrustData: [], //当前委托数据
HistoryEntrustData: [], //历史委托数据
orderId: '', //当前委托撤销参数id
inputpassword: '', //输入的支付密码
gongKey: '', //获取到公钥
paypassWordKey: '', //进行公钥处理后的支付密码
websock: null, //初始化websock数据
stompClient: null, //STOMP客户端对象
subObj: null, //订阅对象
stompClientMarket: null, //STOMP客户端对象2
subObjMarket: null, //订阅对象2
subObjHistory: null, //订阅对象3
subObjEntrust: null, //订阅对象4
stompClientEntrust: null, //STOMP客户端对象3
timer: '', //websock时间
userData: '', //登陆信息
num: '', //买入卖出框传数值控制
// coinarr: {}, //获取可用交易对数据
arr1: {}, //获取可用值数据
leftcoin: '', //可用值的左币
rightcoin: '', //可用值的右币
coinBalance: '', //可用值的左币数据对象
unitBalance: '', //可用值的右币数据对象
dealdata: [], //交易对列表数据
currentPage1: 1, //当前委托初始化页码
currentPage2: 1, //历史委托初始化页码
kchartId: '', //K线图id
newPricesList: {}, //盘口最新交易价数据
// isDisable: false,
list: [], //二级货币数组
activeIndex: '1',
changeblue: 0,
coinNameFirst: '',
tableData: '',
tableShow: 'false',
flag: 'true',
pair: '',
bars: [],
saved_chart: null,
chart: null,
feed: null,
last_price: 1234.2365,
newPricesLists: [],
color: 'RED',
fullWidth: '',
nowDate: '', //当前时间
depA: '',
depB: '',
loading1: false,
loading2: false,
loading3: false,
loading4: false,
tochange: false,
};
},
components: {
Header,
Footer,
TradingView,
},
created() {
//初始化登录缓存信息
if (localStorage.getItem('nowPassNOValue')) {
this.passdialogVisible = Boolean(localStorage.getItem('nowPassNOValue'));
}
if (
localStorage.getItem('userpass') != '' &&
localStorage.getItem('userpass') != null
) {
if (
localStorage.getItem('userdate') != '' &&
localStorage.getItem('userdate') != null
) {
this.passdialogVisible = false;
this.inputpassword = localStorage.getItem('userpass');
this.nowDate = localStorage.getItem('userdate');
}
}
// 获取头部栏点击汇率
this.currentrate = getExchangeRateCookie();
// this.userData = Cookie.get('userData'); //获取登陆信息
this.userData = localStorage.getItem('userData'); //获取登陆信息
// this.initLogin(); //判断有登陆后才调用的函数
},
mounted() {
this.initId(); //获取url传过来的参数
},
methods: {
selectiondiagram1() {
this.selectiondiagram = 1;
document.getElementById('depthChart').style.display = 'none';
},
selectiondiagram2() {
this.selectiondiagram = 2;
document.getElementById('depthChart').style.display = 'block';
this.depthData(); //深度图
},
// 深度图
depthData() {
//深度图调用
this.drawLineDepth(
this.$my.splitDeData(
this.sortArray(this.depA, 'DESC', 'unitPrice').reverse(),
this.sortArray(this.depB, 'DESC', 'unitPrice')
)
);
},
// 监听数据变化,开始
initWebSocket() {
this.connectionTrade();
this.connectionMarket();
this.connectionEntrust();
},
// 訂閲
subscribeTrade() {
let this_ = this;
var websocketURL =
'/topic/subscription/' +
this.newCoinPairs.coinName1 +
'-' +
this.newCoinPairs.unitName1;
this.subObj = this.stompClient.subscribe(websocketURL, function(data) {
//订单返回的盘口数据
var subData = JSON.parse(data.body);
// console.log(subData);
//更新盘口买单，获取10条数据
this_.buyOrderList = this_
.sortArray(subData.BUY_ORDERS, 'DESC', 'umitPrice')
.slice(0, 10);
this_.buyOrderListCount();
//更新盘口卖单，获取10条数据
this_.sellOrderList = this_
.sortArray(subData.SELL_ORDERS, 'ASC', 'unitPrice')
.slice(0, 10)
.reverse();
this_.sellOrderListCount();
// 深度圖
this_.drawLineDepth(
this_.$my.splitDeData(
subData.BUY_ORDERS.reverse(),
subData.SELL_ORDERS.reverse()
)
);
});
},
// 連接
connectionTrade() {
// 建立连接对
let socket = new SockJS(getCctUrl() + '/cct-websocket'); //连接服务端提供的通信接口，连接以后才可以订阅广播消息和个人消息
// 获取STOMP子协议的客户端对象
this.stompClient = new Stomp.over(socket);
this.stompClient.debug = null;
var this_ = this;
this.stompClient.connect({}, function(event) {
//防止单个用户多次订阅
if (this_.subObj == null) {
this_.subscribeTrade();
} else {
this_.subObj.unsubscribe();
this_.subscribeTrade();
}
});
//关闭事件触发重新链接
socket.onclose = function() {
this_.connectionTrade();
};
},
// 訂閲
subscribeMarket() {
let this_ = this;
var websocketURLMarket = '/topic/market';
// var websocketURL= '/topic/subscription/BTC-USDT'
this.subObjMarket = this.stompClientMarket.subscribe(
websocketURLMarket,
function(data) {
//货币对最新信息（中间头部）
var subData = JSON.parse(data.body);
if (this_.id == subData.currencyPair) {
this_.coinsDetailData = subData;
}
//币对表格数据
for (var i = 0; i < this_.tableData.length; i++) {
if (this_.tableData[i].currencyPair == subData.currencyPair) {
this_.tableData[i] = subData;
this_.tableData.push(subData);
this_.tableData.pop();
return;
}
}
}
);
this_.subscribeHistory();
},
// 連接
connectionMarket() {
// 建立连接对象
let socket = new SockJS(getCurrencyUrl() + '/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();
} else {
this_.subObjMarket.unsubscribe();
this_.subscribeMarket();
}
});
//关闭事件触发重新链接
socket.onclose = function() {
this_.connectionMarket();
};
},
// 订阅
subscribeHistory() {
let this_ = this;
var websocketURLHistory = '/topic/history/' + this_.id;
// var websocketURL= '/topic/subscription/BTC-USDT'
this.subObjHistory = this.stompClientMarket.subscribe(
websocketURLHistory,
function(data) {
//实时成交记录
var subData = JSON.parse(data.body);
this_.tradingRecordList = subData;
}
);
},
// 订阅 当前委托
subscribeEntrust() {
// let this_ = this;
if (this.userData != '') {
let this_ = this;
var userArr = JSON.parse(this.userData); //登录信息
var websocketURL =
'/topic/user/' +
userArr.id +
'/' +
this.newCoinPairs.coinName1 +
'-' +
this.newCoinPairs.unitName1;
if (this.subObjEntrust != null) {
this.subObjEntrust.unsubscribe();
}
this.subObjEntrust = this.stompClientEntrust.subscribe(
websocketURL,
function(data) {
//订单返回的盘口数据
var subData = JSON.parse(data.body);
console.log('成交：' + subData);
// if (this_.id == subData.currencyPair) {
this_.CurrentEntrustData = subData.CCT_USER_ORDERS;
console.log(this_.CurrentEntrustData);
// }
}
);
}
},
// 連接 当前委托
connectionEntrust() {
// 建立连接对
let socket = new SockJS(getCctUrl() + '/cct-websocket'); //连接服务端提供的通信接口，连接以后才可以订阅广播消息和个人消息
// 获取STOMP子协议的客户端对象
this.stompClientEntrust = new Stomp.over(socket);
this.stompClientEntrust.debug = null;
var this_ = this;
this.stompClientEntrust.connect({}, function(event) {
//防止单个用户多次订阅
if (this_.subObjEntrust == null) {
this_.subscribeEntrust();
} else {
this_.subObjEntrust.unsubscribe();
this_.subscribeEntrust();
}
});
//关闭事件触发重新链接
socket.onclose = function() {
this_.connectionEntrust();
};
},
//判断是否有登陆，登陆后才发送可用额度，资产折合，当前委托，历史委托的请求
initLogin() {
if (this.userData != '' && this.userData != undefined) {
this.getFree(); //取可用值的方法
this.initGetFree(); //刷新可用额
this.initCurrentEntrust(
this.newCoinPairs.coinName1,
this.newCoinPairs.unitName1,
this.pageNum1,
this.pageSize1
); //当前委托
this.initHistoryEntrust(
this.newCoinPairs.coinName1,
this.newCoinPairs.unitName1,
this.pageNum2
); //历史委托
}
},
sortArray(data, sort, field) {
//数据源是否为空
if (data == null) {
throw new Error('数据源为空！');
}
//排序字段是否为空
if (field == null || field == '') {
throw new Error('排序字段为空！');
}
//默认排序为升序
if (sort == null || sort == '') {
sort = 'ASC';
}
//排序逻辑函数
var sortFun = null;
//升序排序逻辑函数
if (sort == 'ASC' || sort == 'asc') {
sortFun = function(a, b) {
return a[field] - b[field];
};
}
//倒序排序逻辑函数
if (sort == 'DESC' || sort == 'desc') {
sortFun = function(a, b) {
return b[field] - a[field];
};
}
//如果逻辑函数为空
if (sortFun == null) {
throw new Error('排序参数异常！');
}
//返回排序数据
return data.sort(sortFun);
},
//点击百分比按钮
getPrecent1(e) {
this.precent = e.target.innerHTML;
this.pre = this.precent.split('%');
this.count1 = this.pre[0] * 0.01;
//买入量1=百分比*可用
this.input1 = this.$my.formatValue(this.count1 * this.canuseUnit);
},
getPrecent2(e) {
this.precent = e.target.innerHTML;
this.pre = this.precent.split('%');
this.count2 = this.pre[0] * 0.01;
//賣出量1=百分比*可用
this.input2 = this.$my.formatValue(this.count2 * this.canuseCoin);
},
getPrecent3(e) {
this.precent = e.target.innerHTML;
this.pre = this.precent.split('%');
this.count3 = this.pre[0] * 0.01;
//买入量2=百分比*可用
this.input3 = this.$my.formatValue(this.count3 * this.canuseUnit);
},
getPrecent4(e) {
this.precent = e.target.innerHTML;
this.pre = this.precent.split('%');
this.count4 = this.pre[0] * 0.01;
//賣出量2=百分比*可用
this.input4 = this.$my.formatValue(this.count4 * this.canuseCoin);
},
// 輸入價格小數點的控制
handleprice1(e) {
e.target.value = e.target.value.match(/^\d*(\.?\d{0,6})/g)[0] || null;
this.Price1 = e.target.value;
},
handleprice2(e) {
e.target.value = e.target.value.match(/^\d*(\.?\d{0,6})/g)[0] || null;
this.Price2 = e.target.value;
},
// 輸入量小數點和大小的控制
proving1(e) {
this.input1 = e.target.value;
var amount = '' + this.input1;
amount = amount
.replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
.replace('.', '$#$')
.replace(/\./g, '')
.replace('$#$', '.')
.replace(/^(\-)*(\d+)\.(\d\d\d\d\d\d).*$/, '$1$2.$3'); // 只能输入6个小数
if (amount.indexOf('.') < 0 && amount != '') {
// 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
amount = parseFloat(amount);
}
this.input1 = amount;
var amount1 = '' + this.canuseUnit;
amount1 = amount1.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); // 保留2个小数
this.canuseUnit = amount1;
if (this.input1 - this.canuseUnit > 0) {
this.$message.warning(
this.$t('trade.table.header_buynum') + this.canuseUnit
);
}
},
proving2(e) {
this.input2 = e.target.value;
var amount = '' + this.input2;
amount = amount
.replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
.replace('.', '$#$')
.replace(/\./g, '')
.replace('$#$', '.')
.replace(/^(\-)*(\d+)\.(\d\d\d\d\d\d).*$/, '$1$2.$3'); // 只能输入6个小数
if (amount.indexOf('.') < 0 && amount != '') {
// 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
amount = parseFloat(amount);
}
this.input2 = amount;
var amount2 = '' + this.canuseCoin;
amount2 = amount2.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); // 保留2个小数
this.canuseCoin = amount2;
if (this.input2 - this.canuseCoin > 0) {
this.$message.warning(
this.$t('trade.table.header_sellnum') + this.canuseCoin
);
}
},
proving3(e) {
this.input3 = e.target.value;
var amount = '' + this.input3;
amount = amount
.replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
.replace('.', '$#$')
.replace(/\./g, '')
.replace('$#$', '.')
.replace(/^(\-)*(\d+)\.(\d\d\d\d\d\d).*$/, '$1$2.$3'); // 只能输入6个小数
if (amount.indexOf('.') < 0 && amount != '') {
// 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
amount = parseFloat(amount);
}
this.input3 = amount;
var amount3 = '' + this.canuseUnit;
amount3 = amount3.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); // 保留2个小数
this.canuseUnit = amount3;
if (this.input3 - this.canuseUnit > 0) {
this.$message.warning(
this.$t('trade.table.header_buytotal') + this.canuseUnit
);
}
},
proving4(e) {
this.input4 = e.target.value;
var amount = '' + this.input4;
amount = amount
.replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
.replace('.', '$#$')
.replace(/\./g, '')
.replace('$#$', '.')
.replace(/^(\-)*(\d+)\.(\d\d\d\d\d\d).*$/, '$1$2.$3'); // 只能输入6个小数
if (amount.indexOf('.') < 0 && amount != '') {
// 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
amount = parseFloat(amount);
}
this.input4 = amount;
var amount4 = '' + this.canuseCoin;
amount4 = amount4.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); // 保留2个小数
this.canuseCoin = amount4;
if (this.input4 - this.canuseCoin > 0) {
this.$message.warning(
this.$t('trade.table.header_sellnum') + this.canuseCoin
);
}
},
// 点击切换table栏，变色
hangdelClickBlue(index, text) {
this.changeblue = index;
this.coinNameFirst = text;
this.initQuerList(this.coinNameFirst);
},
// 点击展开表格
hanleTable() {
if (this.tableShow == 'false') {
this.tableShow = 'true';
} else {
this.tableShow = 'false';
}
},
// 获取二级活币对列表
initQuer() {
getQuote().then(res => {
this.list = res.data.data;
this.coinNameFirst = this.list[0];
});
},
// // 获取币对详情
initQuerList(coinNameFirst) {
getQuoteList({currencyName: coinNameFirst}).then(res => {
this.tableData = res.data.data;
});
},
//获取货币对最新信息（中间头部）
initCoinsDetail() {
this.currencyPairs =
this.newCoinPairs.coinName1 + '-' + this.newCoinPairs.unitName1;
getCoinPairsDetail({
currencyPair: this.currencyPairs,
}).then(res => {
if (res.data.code === 200) {
this.coinsDetailData = res.data.data;
}
});
},
// 查询实时成交记录数据（实时）
initTradingRecord(coinName1, unitName1) {
getTradingRecord({
currencyPair: coinName1 + '-' + unitName1,
}).then(res => {
if (res.data.code === 200) {
this.tradingRecordList = res.data.data;
}
});
},
// 点击左侧交易对列表
async getCoinsPairDetail(row) {
var URL = '?id=' + row.currencyPair; //改变网址参数id
window.history.pushState(null, null, URL); //将网址设置
this.CurrentEntrustData = ' ';
this.tableShow = 'false';
this.newCoinPairs.coinName1 = row.currencyPair.split('-')[0];
this.newCoinPairs.unitName1 = row.currencyPair.split('-')[1];
this.currencyPairs =
this.newCoinPairs.coinName1 + '-' + this.newCoinPairs.unitName1;
this.id = this.newCoinPairs.coinName1 + '-' + this.newCoinPairs.unitName1;
this.currentPage1 = 1;
this.pageNum1 = this.currentPage1;
this.currentPage2 = 1;
this.pageNum2 = this.currentPage2;
//点击FCC、CEC时不能下单输入
// if (
// this.newCoinPairs.coinName1 == 'FCC' ||
// this.newCoinPairs.coinName1 == 'CEC'
// ) {
// this.isDisable = true;
// }
this.$refs.TradingView.install(this.currencyPairs, 5);
this.initCoinsDetail(); //获取货币对最新信息（头部）
let result = await this.initTradingMarket(
this.newCoinPairs.coinName1,
this.newCoinPairs.unitName1
); //盘口买賣单数据/深度圖
this.initTradingRecord(
this.newCoinPairs.coinName1,
this.newCoinPairs.unitName1
); // 查询实时成交记录数据
// this.initCurrentEntrust(
// this.newCoinPairs.coinName1,
// this.newCoinPairs.unitName1,
// this.pageNum1,
// this.pageSize1
// ); //当前委托
// this.initHistoryEntrust(
// this.newCoinPairs.coinName1,
// this.newCoinPairs.unitName1,
// this.pageNum2
// ); //历史委托
// this.initGetFree(); //刷新可用额
this.initLogin(); //判断有登陆后才调用的函数
if (result) {
this.depthData(); //深度图
}
try {
//jiang
this.subObj.unsubscribe();
this.subscribeTrade();
this.subObjHistory.unsubscribe();
this.subscribeHistory();
this.subObjEntrust.unsubscribe();
this.subscribeEntrust();
} catch (e) {
return;
}
},
//币种改变，数据变化
initfun() {
this.initCoinsDetail(); //获取货币对最新信息（头部）
this.initTradingMarket(
this.newCoinPairs.coinName1,
this.newCoinPairs.unitName1
); //盘口买賣单数据/深度圖
this.initTradingRecord(
this.newCoinPairs.coinName1,
this.newCoinPairs.unitName1
); // 查询实时成交记录数据
// this.initCurrentEntrust(
// this.newCoinPairs.coinName1,
// this.newCoinPairs.unitName1,
// this.pageNum1,
// this.pageSize1
// ); //当前委托
// this.initHistoryEntrust(
// this.newCoinPairs.coinName1,
// this.newCoinPairs.unitName1,
// this.pageNum2
// ); //历史委托
// this.initGetFree(); //刷新可用额
this.initLogin(); //判断有登陆后才调用的函数
},
// 处理url传过来的参数
initId() {
this.id = this.$utils.getUrlKey('id');
if (this.id != null) {
if (this.id == 'HFH-USDT') {
location.href = './trade';
this.initData();
this.$refs.TradingView.install(this.currencyPairs, 5);
} else {
this.initData();
this.$refs.TradingView.install(this.$route.query.id, 5);
}
}
getQuote().then(res => {
this.list = res.data.data;
this.coinNameFirst = this.list[0];
getQuoteList({currencyName: this.coinNameFirst}).then(res => {
this.tableData = res.data.data;
if (this.id == null) {
this.id = this.tableData[0].currencyPair;
this.initData();
this.$refs.TradingView.install(res.data.data[0].currencyPair, 5);
}
});
});
},
initData() {
if (this.id == 'HFH-USDT') {
getQuote().then(res => {
this.list = res.data.data;
this.coinNameFirst = this.list[0];
getQuoteList({currencyName: this.coinNameFirst}).then(res => {
this.tableData = res.data.data;
this.id = this.tableData[0].currencyPair;
this.ids = this.id.split('-');
this.newCoinPairs.coinName1 = this.ids[0];
this.newCoinPairs.unitName1 = this.ids[1];
this.currencyPairs =
this.newCoinPairs.coinName1 + '-' + this.newCoinPairs.unitName1;
this.initfun();
this.initWebSocket();
});
});
} else {
this.ids = this.id.split('-');
this.newCoinPairs.coinName1 = this.ids[0];
this.newCoinPairs.unitName1 = this.ids[1];
this.currencyPairs =
this.newCoinPairs.coinName1 + '-' + this.newCoinPairs.unitName1;
//調用查詢其他列表請求
this.initfun();
this.initWebSocket();
}
},
// 币对获取
fixUnit1(label) {
return `${label}(${this.newCoinPairs.coinName1})`;
},
fixUnit2(label) {
return `${label}(${this.newCoinPairs.unitName1})`;
},
// 盤口买卖/深度数据
initTradingMarket(coinName1, unitName1) {
return getTradingMarket({
coinName: coinName1,
unitName: unitName1,
}).then(res => {
if (res.data.code === 200) {
this.depA = res.data.data.BUY_ORDERS;
this.depB = res.data.data.SELL_ORDERS;
//盘口买单，获取10条数据
this.buyOrderList = this.sortArray(
res.data.data.BUY_ORDERS,
'DESC',
'unitPrice'
).slice(0, 10);
this.buyOrderListCount();
//盘口卖单，获取10条数据
this.sellOrderList = this.sortArray(
res.data.data.SELL_ORDERS,
'ASC',
'unitPrice'
)
.slice(0, 10)
.reverse();
this.sellOrderListCount();
return 1;
// //深度图调用
// this.drawLineDepth(
// this.$my.splitDeData(
// res.data.data.BUY_ORDERS,
// res.data.data.SELL_ORDERS.reverse()
// )
// );
}
});
},
//盘口卖单累计出处理
sellOrderListCount() {
for (let i = this.sellOrderList.length - 1; i >= 0; i--) {
if (i == this.sellOrderList.length - 1) {
this.sellOrderList[i].total = this.sellOrderList[i].totalNum;
} else {
this.sellOrderList[i].total =
this.sellOrderList[i + 1].total + this.sellOrderList[i].totalNum;
}
}
},
//盘口买单累计处理
buyOrderListCount() {
for (let i = 0; i < this.buyOrderList.length; i++) {
if (i == 0) {
this.buyOrderList[i].total = this.buyOrderList[i].totalNum;
} else {
this.buyOrderList[i].total =
this.buyOrderList[i - 1].total + this.buyOrderList[i].totalNum;
}
}
},
// 点击盘口价格处获取价格
handleGetPrice(row) {
var nums = formatX(row.unitPrice);
this.Price1 = nums;
this.Price2 = this.Price1;
},
// 當前委託分頁
// 每页？条
handleSizeChange(val) {
this.pageSize1 = val;
},
// 当前页
handleCurrentChange(val) {
this.pageNum1 = val;
this.initCurrentEntrust(
this.newCoinPairs.coinName1,
this.newCoinPairs.unitName1,
this.pageNum1,
this.pageSize1
); //当前委托
},
// 当前委托记录数据
initCurrentEntrust(coinName1, unitName1, pageNum1) {
getCurrentEntrust({
coinName: coinName1,
unitName: unitName1,
pageNum: pageNum1,
pageSize: 4,
}).then(res => {
if (res.data.code === 200) {
this.CurrentEntrustData = res.data.data;
}
});
},
// 当前委托点击撤销功能
repeal(orderId) {
// 获取当前委托的id
this.orderId = orderId;
this.repealdialog = true;
},
// 点击确定撤销按钮
repealdialogSubm() {
// console.log(this.orderId);
repealStatus({
orderId: this.orderId,
}).then(res => {
if (res.data.code === 200) {
this.$message.success(this.$t('trade.table.header_repealS')); //撤销成功
this.initCurrentEntrust(
this.newCoinPairs.coinName1,
this.newCoinPairs.unitName1,
this.pageNum1,
this.pageSize1
); //刷新当前委托数据
this.repealdialog = false;
} else {
this.$message.error(this.$t('trade.table.header_repealF')); //撤销失败
this.repealdialog = false;
}
});
},
// 歷史委託分頁
handleSizeChange2(val) {
// console.log(`每页 ${val} 条`);
this.pageSize2 = val;
},
handleCurrentChange2(val) {
// console.log(`当前页: ${val}`);
this.pageNum2 = val;
this.coinName1 = this.newCoinPairs.coinName1;
this.unitName1 = this.newCoinPairs.unitName1;
this.initHistoryEntrust(this.coinName1, this.unitName1, this.pageNum2);
},
// 历史委托记录
initHistoryEntrust(coinName1, unitName1, pageNum2) {
getHistoryEntrust({
coinName: coinName1,
unitName: unitName1,
pageNum: pageNum2,
pageSize: 4,
}).then(res => {
if (res.data.code === 200) {
this.HistoryEntrustData = res.data.data;
}
});
},
//取可用值的方法
getFree() {
var count = 0;
getBtc()
.then(res1 => {
if (res1.data.code === 200) {
let data = res1.data.data;
for (let i = 0; i < data.length; i++) {
this.arr1[data[i].tokenSymbol] = data[i];
}
count++;
}
})
.catch(() => {
count++;
});
getEth()
.then(res3 => {
if (res3.data.code === 200) {
let data = res3.data.data;
for (let i = 0; i < data.length; i++) {
this.arr1[data[i].tokenSymbol] = data[i];
}
count++;
}
})
.catch(() => {
count++;
});
getEos()
.then(res2 => {
if (res2.data.code === 200) {
let data = res2.data.data;
for (let i = 0; i < data.length; i++) {
this.arr1[data[i].tokenSymbol] = data[i];
}
count++;
}
})
.catch(() => {
count++;
});
var time = 2000;
let _this = this;
function timeNumbers() {
if (count == 3) {
_this.leftcoin = _this.newCoinPairs.coinName1;
_this.rightcoin = _this.newCoinPairs.unitName1;
_this.coinBalance = _this.arr1[_this.leftcoin];
_this.unitBalance = _this.arr1[_this.rightcoin];
_this.canuseCoin = _this.coinBalance
? _this.coinBalance.freeBalance
: 0.0;
_this.canuseUnit = _this.unitBalance
? _this.unitBalance.freeBalance
: 0.0;
} else {
setTimeout(timeNumbers, time);
}
}
timeNumbers();
},
// 处理可用值
initGetFree() {
let _this = this;
_this.leftcoin = _this.newCoinPairs.coinName1;
_this.rightcoin = _this.newCoinPairs.unitName1;
_this.coinBalance = _this.arr1[_this.leftcoin];
_this.unitBalance = _this.arr1[_this.rightcoin];
_this.canuseCoin = _this.coinBalance
? _this.coinBalance.freeBalance
: 0.0;
_this.canuseUnit = _this.unitBalance
? _this.unitBalance.freeBalance
: 0.0;
},
//输入密码框取消按钮
cancel(num) {
this.num = num;
switch (num) {
case 1:
this.Price1 = ''; //清空价格
this.input1 = ''; //清空数量
this.inputpassword = ''; //清空密码
this.passdialogVisible = false;
break;
case 2:
this.Price2 = ''; //清空价格
this.input2 = ''; //清空数量
this.inputpassword = ''; //清空密码
this.passdialogVisible = false;
break;
case 3:
this.input3 = ''; //清空交易额
this.inputpassword = ''; //清空密码
this.passdialogVisible = false;
break;
case 4:
this.input4 = ''; //清空数量
this.inputpassword = ''; //清空密码
this.passdialogVisible = false;
break;
default:
this.passdialogVisible = false;
}
},
// 限价交易点击买入卖出按钮
handlebutton(num) {
// this.passdialogVisible = true;
this.num = num;
switch (num) {
case 1:
if (this.Price1 == '') {
// 请输入买入价
this.$message.warning(this.$t('trade.table.header_buyprice'));
} else if (this.input1 == '') {
// 请输入买入量！
this.$message.warning(this.$t('trade.table.header_buynums'));
} else if (this.input1 - this.canuseUnit > 0) {
// 买入量不能高于。。。。
this.$message.warning(
this.$t('trade.table.header_buynum') + this.canuseUnit
);
} else {
// 判断5分钟时间密码是否过期
if (!this.passdialogVisible) {
var data = this.nowDate.replace(new RegExp(/-/gm), '/');
//结束时间戳
var lastTime = Date.parse(new Date(data)) + '5' * 60 * 1000;
//当前时间戳
var now = Date.parse(new Date());
//剩余时间戳
var msec = lastTime - now;
//时间已结束
if (msec <= 0) {
this.$message.warning(this.$t('nav.owner_password'));
// 密码输入框出现,清除缓存
this.inputpassword = '';
this.passdialogVisible = true;
localStorage.removeItem('userpass');
localStorage.removeItem('userdate');
localStorage.removeItem('nowPassNOValue');
return;
}
}
// 弹窗前先判断是否有缓存密码
if (
localStorage.getItem('userpass') != '' &&
localStorage.getItem('userpass') != null
) {
if (
localStorage.getItem('userdate') != '' &&
localStorage.getItem('userdate') != null
) {
this.inputpassword = localStorage.getItem('userpass');
this.nowDate = localStorage.getItem('userdate');
this.passdialogVisible = false;
this.subPay(this.inputpassword);
}
} else if (localStorage.getItem('is_pay') == 'true') {
// 弹出要输入密码的框
this.passdialogVisible = true;
} else {
this.$message({
type: 'warning',
// message: '您还未设置支付密码,请返回个人中心进行设置',
message: this.$t('trade.table.header_paypass'),
});
}
}
// this.passdialogVisible = false;
// this.$message.warning(this.$t('trade.table.header_stop'));
break;
case 2:
if (this.Price2 == '') {
// 请输入卖出价！
this.$message.warning(this.$t('trade.table.header_sellprice'));
} else if (this.input2 == '') {
// 请输入卖出量！
this.$message.warning(this.$t('trade.table.header_sellnums'));
} else if (this.input2 - this.canuseCoin > 0) {
// 卖出量不能高于。。。。
this.$message.warning(
this.$t('trade.table.header_sellnum') + this.canuseCoin
);
} else {
// 判断5分钟时间密码是否过期
if (!this.passdialogVisible) {
var data = this.nowDate.replace(new RegExp(/-/gm), '/');
//结束时间戳
var lastTime = Date.parse(new Date(data)) + '5' * 60 * 1000;
//当前时间戳
var now = Date.parse(new Date());
//剩余时间戳
var msec = lastTime - now;
//时间已结束
if (msec <= 0) {
this.$message.warning(this.$t('nav.owner_password'));
// 密码输入框出现,清除缓存
this.inputpassword = '';
this.passdialogVisible = true;
localStorage.removeItem('userpass');
localStorage.removeItem('userdate');
localStorage.removeItem('nowPassNOValue');
return;
}
}
// 弹窗前先判断是否有缓存密码
if (
localStorage.getItem('userpass') != '' &&
localStorage.getItem('userpass') != null
) {
if (
localStorage.getItem('userdate') != '' &&
localStorage.getItem('userdate') != null
) {
this.inputpassword = localStorage.getItem('userpass');
this.nowDate = localStorage.getItem('userdate');
this.passdialogVisible = false;
this.subPay(this.inputpassword);
}
} else if (localStorage.getItem('is_pay') == 'true') {
// 弹出要输入密码的框
this.passdialogVisible = true;
} else {
this.$message({
type: 'warning',
// message: '您还未设置支付密码,请返回个人中心进行设置',
message: this.$t('trade.table.header_paypass'),
});
}
}
// this.passdialogVisible = false;
// this.$message.warning(this.$t('trade.table.header_stop'));
break;
case 3:
if (this.input3 == '') {
// 请输入交易额！
this.$message.warning(this.$t('trade.table.header_buytotals'));
} else if (this.input3 - this.canuseUnit > 0) {
// 交易额不能高于。。。。
this.$message.warning(
this.$t('trade.table.header_buytotal') + this.canuseUnit
);
} else {
// 判断5分钟时间密码是否过期
if (!this.passdialogVisible) {
var data = this.nowDate.replace(new RegExp(/-/gm), '/');
//结束时间戳
var lastTime = Date.parse(new Date(data)) + '5' * 60 * 1000;
//当前时间戳
var now = Date.parse(new Date());
//剩余时间戳
var msec = lastTime - now;
//时间已结束
if (msec <= 0) {
this.$message.warning(this.$t('nav.owner_password'));
// 密码输入框出现,清除缓存
this.inputpassword = '';
this.passdialogVisible = true;
localStorage.removeItem('userpass');
localStorage.removeItem('userdate');
localStorage.removeItem('nowPassNOValue');
return;
}
}
// 弹窗前先判断是否有缓存密码
if (
localStorage.getItem('userpass') != '' &&
localStorage.getItem('userpass') != null
) {
if (
localStorage.getItem('userdate') != '' &&
localStorage.getItem('userdate') != null
) {
this.inputpassword = localStorage.getItem('userpass');
this.nowDate = localStorage.getItem('userdate');
this.passdialogVisible = false;
this.subPay(this.inputpassword);
}
} else if (localStorage.getItem('is_pay') == 'true') {
// 弹出要输入密码的框
this.passdialogVisible = true;
} else {
this.$message({
type: 'warning',
// message: '您还未设置支付密码,请返回个人中心进行设置',
message: this.$t('trade.table.header_paypass'),
});
}
}
// this.passdialogVisible = false;
// this.$message.warning(this.$t('trade.table.header_stop'));
break;
case 4:
if (this.input4 == '') {
// 请输入卖出量！
this.$message.warning(this.$t('trade.table.header_sellnums'));
} else if (this.input4 - this.canuseCoin > 0) {
// 卖出量不能高于。。。。
this.$message.warning(
this.$t('trade.table.header_sellnum') + this.canuseCoin
);
} else {
// 判断5分钟时间密码是否过期
if (!this.passdialogVisible) {
var data = this.nowDate.replace(new RegExp(/-/gm), '/');
//结束时间戳
var lastTime = Date.parse(new Date(data)) + '5' * 60 * 1000;
//当前时间戳
var now = Date.parse(new Date());
//剩余时间戳
var msec = lastTime - now;
//时间已结束
if (msec <= 0) {
this.$message.warning(this.$t('nav.owner_password'));
// 密码输入框出现,清除缓存
this.inputpassword = '';
this.passdialogVisible = true;
localStorage.removeItem('userpass');
localStorage.removeItem('userdate');
localStorage.removeItem('nowPassNOValue');
return;
}
}
// 弹窗前先判断是否有缓存密码
if (
localStorage.getItem('userpass') != '' &&
localStorage.getItem('userpass') != null
) {
if (
localStorage.getItem('userdate') != '' &&
localStorage.getItem('userdate') != null
) {
this.inputpassword = localStorage.getItem('userpass');
this.nowDate = localStorage.getItem('userdate');
this.passdialogVisible = false;
this.subPay(this.inputpassword);
}
} else if (localStorage.getItem('is_pay') == 'true') {
// 弹出要输入密码的框
this.passdialogVisible = true;
} else {
this.$message({
type: 'warning',
// message: '您还未设置支付密码,请返回个人中心进行设置',
message: this.$t('trade.table.header_paypass'),
});
}
}
// this.passdialogVisible = false;
// this.$message.warning(this.$t('trade.table.header_stop'));
break;
}
},
//点击密码确定按钮
subPay() {
this.tochange = true; //防止多次点击确认按钮
if (this.num == '1') {
this.loading1 = true;
} else if (this.num == '2') {
this.loading2 = true;
} else if (this.num == '3') {
this.loading3 = true;
} else if (this.num == '4') {
this.loading4 = true;
}
//对支付密码进行密钥操作
// 发送请求,获取公钥
getKey().then(res => {
this.gongKey = res.data.data; // 获取到公钥
// 传入所请求回来的公钥,对密码进行处理
var crypt = new JSEncrypt.JSEncrypt({
default_key_size: 1024,
}); //新建JSEncrypt对象
crypt.setPublicKey(this.gongKey); //设置公钥
//转换成公钥
this.paypassWordKey = crypt.encrypt(this.inputpassword);
//把处理后的支付密码等参数请求接口
switch (this.num) {
case 1:
// 限价买单请求
publishLimitBuy({
pass: this.paypassWordKey,
coinName: this.newCoinPairs.coinName1,
unitName: this.newCoinPairs.unitName1,
totalNum: this.input1,
unitPrice: this.Price1,
}).then(res => {
if (res.data.code === 200) {
this.loading1 = false;
// 5分钟内不输入密码
this.nowDate = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss');
this.passdialogVisible = false;
localStorage.setItem('userpass', this.inputpassword);
localStorage.setItem('userdate', this.nowDate);
localStorage.setItem('nowPassNOValue', this.passdialogVisible);
this.inputpassword = ''; //清空密码
this.Price1 = ''; //清空价格
this.input1 = ''; //清空数量
// this.$message.success(res.data.msg);
this.$message.success(this.$t('trade.table.header_Successful'));
this.initCurrentEntrust(
this.newCoinPairs.coinName1,
this.newCoinPairs.unitName1,
this.pageNum1
); //当前委托
this.initHistoryEntrust(
this.newCoinPairs.coinName1,
this.newCoinPairs.unitName1,
this.pageNum2
); //历史委托
this.getFree(); //刷新可用额数据
// 请求后关闭窗口
this.passdialogVisible = false;
this.tochange = false;
} else if (res.data.code === 12710) {
this.loading1 = false;
this.$message.error(res.data.msg);
this.inputpassword = '';
// 密码输入框出现,清除缓存
this.passdialogVisible = true;
this.tochange = false;
localStorage.removeItem('userpass');
localStorage.removeItem('userdate');
localStorage.removeItem('nowPassNOValue');
} else {
this.loading1 = false;
this.tochange = false;
this.passdialogVisible = false;
this.inputpassword = ''; //清空密码
this.$message.warning(res.data.msg);
}
});
break;
case 2:
/* 限价卖单请求 */
publishLimitSell({
pass: this.paypassWordKey,
coinName: this.newCoinPairs.coinName1,
unitName: this.newCoinPairs.unitName1,
totalNum: this.input2,
unitPrice: this.Price2,
}).then(res => {
if (res.data.code === 200) {
this.loading2 = false;
// 5分钟内不输入密码
this.nowDate = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss');
this.passdialogVisible = false;
localStorage.setItem('userpass', this.inputpassword);
localStorage.setItem('userdate', this.nowDate);
localStorage.setItem('nowPassNOValue', this.passdialogVisible);
this.inputpassword = '';
this.Price2 = ''; //清空价格
this.input2 = ''; //清空数量
// this.$message.success(res.data.msg);
this.$message.success(this.$t('trade.table.header_Successful'));
this.initCurrentEntrust(
this.newCoinPairs.coinName1,
this.newCoinPairs.unitName1,
this.pageNum1
); //当前委托
this.initHistoryEntrust(
this.newCoinPairs.coinName1,
this.newCoinPairs.unitName1,
this.pageNum2
); //历史委托
this.getFree(); //刷新数据
// 请求后关闭窗口
this.passdialogVisible = false;
this.tochange = false;
} else if (res.data.code === 12710) {
this.loading2 = false;
this.$message.error(res.data.msg);
this.inputpassword = '';
// 密码输入框出现,清除缓存
this.passdialogVisible = true;
this.tochange = false;
localStorage.removeItem('userpass');
localStorage.removeItem('userdate');
localStorage.removeItem('nowPassNOValue');
} else {
this.loading2 = false;
this.tochange = false;
this.passdialogVisible = false;
this.$message.warning(res.data.msg);
this.inputpassword = '';
}
});
break;
case 3:
// 市价买单请求
publishMarketBuy({
pass: this.paypassWordKey,
coinName: this.newCoinPairs.coinName1,
unitName: this.newCoinPairs.unitName1,
turnover: this.input3,
}).then(res => {
if (res.data.code === 200) {
this.loading3 = false;
// 5分钟内不输入密码
this.nowDate = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss');
this.passdialogVisible = false;
localStorage.setItem('userpass', this.inputpassword);
localStorage.setItem('userdate', this.nowDate);
localStorage.setItem('nowPassNOValue', this.passdialogVisible);
this.inputpassword = ''; //清空密码
this.input3 = ''; //清空数量
this.$message.success(this.$t('trade.table.header_Successful'));
this.initCurrentEntrust(
this.newCoinPairs.coinName1,
this.newCoinPairs.unitName1,
this.pageNum1,
this.pageSize1
); //当前委托
this.initHistoryEntrust(
this.newCoinPairs.coinName1,
this.newCoinPairs.unitName1,
this.pageNum2
); //历史委托
this.getFree(); //刷新数据
// 请求后关闭窗口
this.passdialogVisible = false;
this.tochange = false;
} else if (res.data.code === 12710) {
this.loading3 = false;
this.$message.error(res.data.msg);
this.inputpassword = '';
// 密码输入框出现,清除缓存
this.passdialogVisible = true;
this.tochange = false;
localStorage.removeItem('userpass');
localStorage.removeItem('userdate');
localStorage.removeItem('nowPassNOValue');
} else {
this.loading3 = false;
this.tochange = false;
this.passdialogVisible = false;
this.$message.warning(res.data.msg);
this.inputpassword = '';
}
});
break;
case 4:
// 市价卖单请求
publishMarketSell({
pass: this.paypassWordKey,
coinName: this.newCoinPairs.coinName1,
unitName: this.newCoinPairs.unitName1,
totalNum: this.input4,
}).then(res => {
if (res.data.code === 200) {
this.loading4 = false;
// 5分钟内不输入密码
this.nowDate = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss');
this.passdialogVisible = false;
localStorage.setItem('userpass', this.inputpassword);
localStorage.setItem('userdate', this.nowDate);
localStorage.setItem('nowPassNOValue', this.passdialogVisible);
this.inputpassword = '';
this.input4 = ''; //清空数量
this.$message.success(this.$t('trade.table.header_Successful'));
this.initHistoryEntrust(
this.newCoinPairs.coinName1,
this.newCoinPairs.unitName1,
this.pageNum2
); //历史委托
this.getFree(); //刷新数据
// 请求后关闭窗口
this.passdialogVisible = false;
this.tochange = false;
} else if (res.data.code === 12710) {
this.loading4 = false;
this.$message.error(res.data.msg);
this.inputpassword = '';
// 密码输入框出现,清除缓存
this.passdialogVisible = true;
this.tochange = false;
localStorage.removeItem('userpass');
localStorage.removeItem('userdate');
localStorage.removeItem('nowPassNOValue');
} else {
this.loading4 = false;
this.tochange = false;
this.passdialogVisible = false;
this.$message.warning(res.data.msg);
this.inputpassword = '';
}
});
break;
}
});
},
// 深度图数据处理
drawLineDepth(data) {
let _this = this;
// 基于准备好的dom，初始化echarts实例
var myChart = _this.$echarts.init(document.getElementById('depthChart'));
myChart.resize();
var upColor = '#4DB872';
var downColor = '#EE6560';
var splitLineColor = '#A0A6B5';
var backgroupColor = '#181B2A';
var labelColor = '#376691';
var axisPointerColor = '#ccc';
let tooltipColor = '#208EF8';
let fontSize = 10;
let borderColor = '#ccc';
myChart.setOption({
backgroundColor: backgroupColor,
animation: false,
tooltip: {
backgroundColor: '#49557C', //移动框背景色
borderWidth: 1,
borderColor: '#49557C',
padding: 10,
textStyle: {
color: '#fff', //移动框字体色
fontSize: fontSize,
},
position: function(pos, params, el, elRect, size) {
var obj = {
top: 10,
};
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
return obj;
},
formatter: function(params) {
let data;
if (params[0]) {
data = params[0].data;
} else {
data = params.data;
}
return (
// 提示：時間 开 高 低 收 涨跌额 涨跌幅 成交量
'<div><span>' +
_this.$t('trade.table.header_price') +
'</span><span style="float:right;">&nbsp;&nbsp;&nbsp;&nbsp;' +
data[0] +
'</span></div>' +
'<div><span>' +
_this.$t('trade.table.header_sum') +
'</span><span style="float:right;">&nbsp;&nbsp;&nbsp;&nbsp;' +
_this.$my.formatValue(data[1]) +
'</span></div>'
);
},
},
grid: [
{
left: '10px',
right: '10px',
bottom: '25px',
height: '450px',
},
],
xAxis: {
type: 'value',
scale: true,
boundaryGap: false,
min: 'dataMin',
max: 'dataMax',
//分隔线
splitLine: {
show: false,
},
//轴线
axisLine: {
lineStyle: {
color: splitLineColor,
},
},
axisLabel: {
show: true,
interval: 3,
},
axisTick: {
show: false,
},
axisPointer: {
show: true,
type: 'line',
z: 110,
lineStyle: {
color: axisPointerColor,
type: 'solid',
},
},
},
yAxis: {
scale: true,
splitNumber: 4,
position: 'right',
axisLine: {
show: false,
onZero: false,
},
axisTick: {
show: false,
},
//坐标文字
axisLabel: {
margin: 0,
color: '#A0A6B5',
align: 'right',
verticalAlign: 'bottom',
},
splitLine: {
show: false,
},
axisPointer: {
show: true,
type: 'line',
z: 110,
lineStyle: {
color: axisPointerColor,
type: 'solid',
},
},
},
series: [
{
type: 'line',
showSymbol: false,
hoverAnimation: false,
color: downColor,
data: data[0],
areaStyle: {
opacity: 0.1,
},
},
{
type: 'line',
showSymbol: false,
hoverAnimation: false,
color: upColor,
data: data[1],
areaStyle: {
opacity: 0.1,
},
},
],
});
},
},
};
</script>
<style lang="scss">
@import '~@/common/style/base';
.chartTitle {
color: #586c86;
}
.none {
display: none;
}
.main-coins {
margin: 0 auto;
width: 98%;
min-width: 1200px;
}
a:hover {
color: #e8494a;
}
.trade-view-main {
margin-top: 8px;
display: flex;
> div {
min-height: 200px; // todo: dev
}
// 左
.trade-view-inner {
position: relative;
margin: 0px 8px 8px 8px;
flex: 1;
.trade-midle-title {
// display: flex;
height: 60px;
background-color: #1f2026;
margin-bottom: 1px;
font-size: 12px;
color: #9ba0bc;
> div {
> p:nth-child(2) {
font-size: 13px;
}
}
.fl {
float: left;
padding-right: 20px;
}
.fl:nth-child(1) {
width: 118px;
text-align: center;
padding-right: 0;
}
.fl:nth-child(2) {
width: 118px;
padding-right: 0;
}
.header-text {
margin: 10px 0;
}
.coinPairs {
font-size: 14px;
display: inline-block;
vertical-align: middle;
line-height: 60px;
text-align: center;
margin-right: 1px;
a {
color: #fff;
&:hover {
color: #e8494a;
}
}
}
.black {
color: #9ba0bc;
font-weight: 600;
}
}
// 图表
.coin-echarts {
display: block;
width: 100%;
height: 557px;
background-color: #24252c;
padding-top: 10px;
position: relative;
.top {
display: block;
height: 500px;
margin: 0px 10px 0px 10px;
// #depthChart{
// display: none;
// width: 100%;
// }
.el-tabs--border-card > .el-tabs__header {
background-color: #24252c;
border-bottom: 1px solid #545663;
}
.el-tabs--border-card {
border: 0;
background-color: #24252c;
box-shadow: none;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
background-color: #e8494a;
border-right-color: #e8494a;
border-left-color: #e8494a;
padding-left: 8px;
padding-right: 8px;
color: #fff;
}
.null {
padding-right: 10px;
}
.el-tabs--border-card > .el-tabs__content {
padding: 0px;
}
.el-tabs__item {
height: 30px;
line-height: 30px;
color: #a0a6b5;
margin-bottom: 2px;
}
}
.selectiondiagram {
position: absolute;
right: 108px;
top: 14px;
display: flex;
z-index: 1;
span {
color: #9db2bd;
font-size: 12px;
height: 30px;
line-height: 30px;
text-align: center;
display: block;
padding: 0 5px;
// margin: 0 5px;
cursor: pointer;
border-radius: 3px;
}
.klinclass {
text-align: center;
background-color: #e8494a;
color: #fff;
border-radius: 3px;
}
}
}
//委託管理
.trustBox {
margin-top: 10px;
height: 372px;
background-color: #24252c;
.el-tabs__header {
margin: 0;
}
.el-tabs__content {
}
.el-tabs__item {
display: inline-block;
vertical-align: middle;
text-align: center;
width: 110px;
height: 40px;
// padding-left: 2px;
line-height: 40px;
font-size: 16px;
color: #9ba0bc;
&.is-active {
color: #e8494a;
}
&:hover {
color: 66, 182, 246;
}
}
.el-tabs__active-bar {
background-color: #e8494a;
}
.el-tabs__nav-wrap::after {
width: 100%;
height: 1px;
background-color: #474855;
}
//当前委托样式
.trade-order-list {
.el-table th:first-child,
.el-table td:first-child {
padding-left: 16px;
}
.el-table tr {
padding: 0px;
height: 40px;
vertical-align: middle;
text-align: center;
}
.el-table td {
font-size: 12px;
padding: 0;
}
.el-table th {
line-height: 40px;
height: 40px;
padding: 0;
}
.el-table .cell {
padding: 0;
line-height: 14px;
}
.col {
&_text {
&--red {
color: #e55541;
}
&--green {
color: #00ce7d;
}
&--blue {
color: #42b6f6;
}
&--secondary {
color: #586c86;
}
}
}
}
}
}
// 右
.trade-view-extra {
width: 500px;
.limitTime {
height: 372px;
background-color: #24252c;
margin-top: 8px;
.el-tabs__header {
margin: 0;
}
.el-tabs__item {
display: inline-block;
vertical-align: middle;
text-align: center;
width: 115px;
height: 40px;
padding-left: 2px;
line-height: 40px;
font-size: 16px;
color: #9ba0bc;
&.is-active {
color: #e8494a;
}
&:hover {
color: 66, 182, 246;
}
}
.el-tabs__active-bar {
background-color: #e8494a;
}
.el-tabs__nav-wrap::after {
width: 100%;
height: 1px;
background-color: #474855;
}
}
}
}
.up {
color: #00ce7d;
padding: 2px 0 0 5px;
}
.updata {
color: #00ce7d;
}
.down {
color: #e55541;
padding: 2px 0 0 5px;
}
.downdata {
color: #e55541;
}
// 原交易对列表组件的样式
.trade-funds-coin-list {
.el-table th:first-child {
padding-left: 0px;
}
.el-table thead {
color: white;
text-align: center;
vertical-align: middle;
padding-left: 10px;
}
.el-table th {
height: 45px;
text-align: center;
}
.el-table td {
color: #42b6f6;
font-size: 14px;
padding: 0px;
vertical-align: middle;
text-align: center;
height: 40px;
}
// hover表格行背景色
.el-table__body tr:hover > td {
background-color: #faf9f1 !important;
}
.el-table .cell {
padding: 0px;
}
.text-color-blue {
color: #3075ee;
}
.text-color-green {
color: #00ce7d;
}
}
.line-primary {
color: #00ce7d;
}
.red {
color: #ee6560;
}
.green {
color: #4db872;
}
// 盘口的样式
.trade-history {
display: flex;
.block-wrapper {
flex: 1;
&:first-child {
margin-right: 1px;
}
.block-header {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
margin-bottom: 1px;
font-size: 16px;
background-color: #24252c;
color: #fff;
}
.el-table th {
text-align: center;
height: 30px;
line-height: 30px;
padding: 0px;
color: #545663 !important;
font-size: 12px;
background-color: #24252c;
}
.el-table .cell {
vertical-align: middle;
text-align: center;
padding: 0px;
margin: 0;
}
}
// 盘口行鼠标移入样式
.order {
.el-table__body tr:hover > td {
background-color: rgb(122, 120, 120) !important;
}
}
.el-table {
td {
color: #545663;
font-size: 12px;
padding: 0px;
height: 26px;
vertical-align: middle;
line-height: 26px;
text-align: center;
}
.hong {
color: #ee6560 !important;
}
.lv {
color: #4db872 !important;
}
}
.text-color-white {
color: #9ba0bc;
}
.TyList:nth-child(even) {
background-color: red;
}
.title {
height: 25px;
vertical-align: middle;
text-align: center;
line-height: 25px;
color: white;
font-size: 18px;
margin-bottom: 1px;
background-color: rgb(55, 55, 56);
}
.aa {
height: 60px;
float: left;
color: #42b6f6;
font-size: 14px;
padding: 0 16px;
}
.el-table th {
text-align: center;
padding-left: 0px;
}
// 隐藏盘口表格头
.secTable {
.el-table__header-wrapper {
display: none;
}
}
}
// 限时交易组件样式
.limitTrade {
// background-color: #1e344d;
padding-left: 10px;
display: flex;
color: rgba(155, 160, 188, 0.4);
.inputPrice {
font-size: 14px;
margin: 11px 0;
}
.cName {
font-size: 13px;
margin-left: 10px;
}
.limitMsg {
font-size: 14px;
margin-top: 8px;
a:hover {
color: #f08f83;
text-decoration: underline;
}
.addCoin {
color: #4db872;
float: right;
margin-right: 30px;
}
.num {
color: #6798ec;
}
}
.Minput {
width: 90%;
}
.limitButton {
.firstlogin {
color: #fff;
&:hover {
color: #5e2123;
}
}
&:hover {
color: #fff;
}
a:hover {
text-decoration: underline;
}
margin-top: 18px;
// width: 78%;
font-size: 14px;
height: 40px;
background-color: #4db872;
// display: inline-block;
// text-align: center;
// line-height: 40px;
}
.saleButton {
.firstlogin {
color: #fff;
&:hover {
// color: #f08f83;
color: #5e2123;
}
}
&:hover {
color: #fff;
}
margin-top: 18px;
width: 88%;
font-size: 14px;
height: 40px;
background-color: #e55541;
// display: inline-block;
// text-align: center;
// line-height: 40px;
color: #fff;
}
.chose {
margin-top: 13px;
display: flex;
}
.choosePercenage {
color: rgba(155, 160, 188, 0.4);
font-size: 14px;
border: 1px solid #545663;
border-radius: 4px;
padding: 4px;
margin-right: 21px;
&:nth-child(1) {
margin-left: 0px;
}
&:hover {
border: 1px solid #a9adb1;
}
}
.limitTradeBuy {
flex: 1;
position: relative;
}
.hide {
position: absolute;
top: 104px;
font-size: 14px;
color: #a0a6b5;
}
.limitTradeSale {
flex: 1;
position: relative;
}
.buyprice {
margin-bottom: 20px;
}
.hide1 {
position: absolute;
top: 92px;
left: -3px;
font-size: 14px;
color: #a0a6b5;
}
a {
color: #a0a6b5;
&:hover {
color: #f08f83;
}
}
}
// 市价交易样式
.limitTrade {
.cName {
font-size: 13px;
margin-left: 10px;
}
.limitMsg {
.addCoin {
color: #4db872;
}
.num {
color: 65, 179, 243;
}
}
.Minput {
width: 90%;
}
.limitButton {
border-radius: 6px;
margin-top: 18px;
width: 91%;
font-size: 14px;
height: 40px;
background-color: #4db872;
// display: inline-block;
// text-align: center;
// line-height: 40px;
color: #fff;
}
.saleButton {
border-radius: 6px;
margin-top: 18px;
width: 91%;
font-size: 14px;
height: 40px;
background-color: #ee6560;
// display: inline-block;
// text-align: center;
// line-height: 40px;
color: #fff;
&:hover {
color: #fff;
}
}
.chose {
margin-top: 13px;
display: flex;
}
.choosePercenage {
font-size: 14px;
border: 1px solid #545663;
border-radius: 4px;
padding: 4px;
display: block;
justify-content: space-between;
margin-right: 21px;
&:nth-child(1) {
margin-left: 0px;
}
&:hover {
border: 1px solid #a9adb1;
}
}
.limitTradeBuy {
flex: 1;
}
.limitTradeSale {
flex: 1;
}
}
.page {
background: #24252c;
float: right;
}
.el-pagination .btn-prev {
background: #24252c;
color: #545663;
}
.el-pager li {
background: #24252c;
color: #545663;
}
.el-pagination .btn-next {
background: #24252c;
color: #545663;
}
.el-pagination button:disabled {
background-color: #24252c;
}
.el-pagination__total {
color: #545663;
}
.el-pager li.active {
color: #9ba0bc;
}
.one {
margin-left: 10px;
color: rgb(209, 201, 88);
}
.two {
color: #4cd49b;
}
.three {
color: #dd5f9e;
}
.four {
color: #9751dc;
}
.repeal:hover {
color: #f08f83;
}
// 滚动条
// 底色
::-webkit-scrollbar {
width: 2px;
height: 5px;
background-color: #24252c;
}
// 滚动色
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: rgb(184, 179, 179);
}
.configurationTable .el-table__body-wrapper {
overflow: hidden;
}
.afterRenderClass {
.el-table__body-wrapper {
overflow: auto;
}
}
// 输入框
.el-input__inner {
border: 1px solid #545663;
color: #abafb3;
}
.el-input.is-disabled .el-input__inner {
background-color: #24252c;
border: 1px solid #545663;
}
.putop {
color: #9ba0bc;
}
.clearfix:after {
content: '.'; /*加一段内容*/
display: block; /*让生成的元素以块级元素显示，占满剩余空间*/
height: 0; /*避免生成的内容破坏原有布局高度*/
clear: both; /*清除浮动*/
visibility: hidden; /*让生成的内容不可见*/
}
.clearfix {
zoom: 1; /*为IE6，7的兼容性设置*/
}
//币种表格样式
.bignameConten {
position: absolute;
z-index: 10;
top: 61px;
left: 111px;
width: 85%;
background-color: #24252c;
// hover表格行背景色
.el-table__body tr:hover > td {
background-color: rgb(122, 120, 120) !important;
}
.nameConten {
.el-table th {
background-color: #1f2026;
}
.el-table tr {
background-color: #24252c;
}
.el-table tr:nth-child(2n) {
background-color: #1f2026;
}
.exchange-menu-tab {
display: flex;
flex-wrap: wrap;
background-color: #24252c;
margin-left: 21px;
color: #a0a6b5;
font-size: 16px;
.exchange-item {
display: flex;
align-items: center;
font-size: 14px;
color: #333;
> a {
color: #a0a6b5;
&:hover {
color: #6798ec !important;
}
}
}
}
.BiDui {
color: #a0a6b5;
&:hover {
color: #e8494a;
}
}
.el-table th:first-child,
.el-table td:first-child {
padding-left: 10px;
}
.el-table th {
height: 40px;
color: #a0a6b5;
}
.el-table td {
font-size: 12px;
height: 40px;
}
.blue {
width: 40px;
height: 30px;
font-size: 16px;
font-weight: 500;
line-height: 30px;
margin-right: 20px;
}
.lines {
width: 100%;
height: 1px;
background: #474855;
}
.shang {
position: absolute;
top: -3px;
left: 1px;
}
.shangs {
position: relative;
top: -1.5px;
left: 0px;
}
.totalColor {
color: #a0a6b5;
}
.blueTwo {
width: 40px;
height: 30px;
font-size: 16px;
font-weight: 500;
line-height: 30px;
margin-right: 20px;
color: #6798ec !important;
border-bottom: 2px solid #6798ec;
display: flex;
justify-content: center;
align-items: center;
}
}
}
.el-table__empty-text {
color: #a0a6b5;
}
.el-table__empty-block {
min-height: 200px;
}
.el-table__empty-text {
line-height: 14px;
}
.layout__area--top .toolbar-2n2cwgp5- {
padding: 0px !important;
}
.tradechart {
width: 1305px;
height: 500px;
}
.sure {
color: #fdf0eb;
}
.el-button {
color: #545663;
}
.el-button:hover,
.el-button:focus {
color: #545663;
}
.el-loading-mask {
background-color: #24252c;
}
.header-text {
color: #fff;
}
.header-text2 {
font-weight: 600;
}
.upData {
color: #4db872 !important;
}
.upData2 {
color: #ee6560 !important;
}
.heights {
height: 550px;
}
.el-button {
border: none !important;
}
.el-button:hover {
// color:red;
}
</style>