|
|
@ -1,121 +1,144 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="contract-page" style="background-color: #F8F8F8;"> |
|
|
<div class="contract-page"> |
|
|
<!-- <div class="banner-block col-xs-8">--> |
|
|
<!-- <div class="banner-block col-xs-8">--> |
|
|
<!-- <el-carousel :interval="6000" height="450px">--> |
|
|
<!-- <el-carousel :interval="6000" height="450px">--> |
|
|
<!-- <el-carousel-item v-for="item in pcBannerList" :key="item.id">--> |
|
|
<!-- <el-carousel-item v-for="item in pcBannerList" :key="item.id">--> |
|
|
<!-- <img :src="item.imgurl" width="100%" height="100%" />--> |
|
|
<!-- <img :src="item.imgurl" width="100%" height="100%" />--> |
|
|
<!-- </el-carousel-item>--> |
|
|
<!-- </el-carousel-item>--> |
|
|
<!-- </el-carousel>--> |
|
|
<!-- </el-carousel>--> |
|
|
<!-- </div>--> |
|
|
<!-- </div>--> |
|
|
<div class="d-flex align-items-center" style="background-color: #fff;"> |
|
|
<div class="page-top d-flex pt-2"> |
|
|
<div class="price px-3"> |
|
|
<div class="kline-box flex-fill mr-2"> |
|
|
<img :src="currentIcon" alt="" style="width: 26px;height: 26px;"> |
|
|
<div class="coin-change d-flex align-items-center py-2 pl-4 heading justify-content-between" style="height: 60px;"> |
|
|
|
|
|
<div class="d-flex align-items-center"> |
|
|
|
|
|
<div class="coin d-flex align-items-center"> |
|
|
|
|
|
<el-popover placement="bottom" ref="popover" width="400" trigger="click"> |
|
|
|
|
|
<div slot="reference" style="display: flex;align-items: center;"> |
|
|
|
|
|
<img :src="currentIcon" width="20" height="20" /> |
|
|
|
|
|
<div style="font-weight: 500;color: #000;margin: 0px 5px;">{{ activeContract.pair_name }}</div> |
|
|
|
|
|
<el-button size="mini"> |
|
|
|
|
|
<img src="@/assets/img/home/arrow_down.svg" width="10" height="10" /> |
|
|
|
|
|
<!-- <i class="el-icon-arrow-down"></i> --> |
|
|
|
|
|
</el-button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="price"> |
|
|
<div class="markets-pair-list" style="max-height:300px;overflow:auto;"> |
|
|
<div class="item fn-16" style="font-weight: bold;">{{ activeContract.pair_name }}</div> |
|
|
<template v-for="parent in contractList"> |
|
|
|
|
|
<div class="px-3 text-primary" :key="parent.coin_name"> |
|
|
|
|
|
{{ parent.coin_name }} |
|
|
</div> |
|
|
</div> |
|
|
<div class="d-flex fn-14 px-4 p-l-A align-items-center py-2"> |
|
|
<table class="table" :key="parent.coin_name + 1"> |
|
|
<div class="item px-2 min-width-A" style="font-weight: bold;"> |
|
|
<thead> |
|
|
<div class="title" :class="{ decreace2: activeContract.increase < 0, increase: activeContract.increase >= 0}" style="margin-bottom: 10px;"> |
|
|
<tr class="text-secondary"> |
|
|
{{ activeContract.price }} |
|
|
<th class="w-10/24">{{ $t("contract.h5") }}</th> |
|
|
|
|
|
<th class="w-7/24">{{ $t("contract.g3") }}</th> |
|
|
|
|
|
<th class="w-7/24 text-right"> |
|
|
|
|
|
{{ $t("contract.h6") }} |
|
|
|
|
|
</th> |
|
|
|
|
|
</tr> |
|
|
|
|
|
</thead> |
|
|
|
|
|
<tbody> |
|
|
|
|
|
<!-- @click="activeSymbol = item.symbol" --> |
|
|
|
|
|
<tr v-for="item in parent.marketInfoList" :key="item.symbol" |
|
|
|
|
|
:class="{ active: item.symbol == activeSymbol }" @click="ispopover1(item.symbol)"> |
|
|
|
|
|
<td class="" style="display: flex;"> |
|
|
|
|
|
<div v-for="items in Liste" :key="items.symbol"> |
|
|
|
|
|
<img :src="items.icon" width="20" height="20" v-if="items.symbol==item.symbol" /> |
|
|
</div> |
|
|
</div> |
|
|
<div :class="{ decreace2: activeContract.increase < 0, increase: activeContract.increase >= 0}"> |
|
|
<div style="font-weight: 500;color: #000;">{{ item.symbol }}/{{ parent.coin_name }}</div> |
|
|
{{ activeContract.increaseStr }} |
|
|
</td> |
|
|
|
|
|
<td class="w-7/24 " :class="item.increase < 0 ? 'decreace' : 'increace'" style="font-weight: bold;"> |
|
|
|
|
|
{{ item.price }} |
|
|
|
|
|
</td> |
|
|
|
|
|
<td class="w-7/24" :class="item.increase < 0 ? 'decreace' : 'increace'" style="font-weight: bold;"> |
|
|
|
|
|
{{ item.increaseStr }} |
|
|
|
|
|
</td> |
|
|
|
|
|
</tr> |
|
|
|
|
|
</tbody> |
|
|
|
|
|
</table> |
|
|
|
|
|
</template> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</el-popover> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="price border-right" style="padding: 0px 30px;" :class="{ decreace: activeContract.increase < 0, increace: activeContract.increase >= 0 }"> |
|
|
|
|
|
<div class="current">{{ activeContract.price }}$</div> |
|
|
|
|
|
<div class="zf">{{ activeContract.increaseStr }}</div> |
|
|
</div> |
|
|
</div> |
|
|
<!-- 币种价值数据 --> |
|
|
<!-- 币种价值数据 --> |
|
|
<div class="d-flex fn-14"> |
|
|
<div class="d-flex fn-12"> |
|
|
<div class="item px-2 min-width-B"> |
|
|
<div class="item" style="padding: 0px 20px;"> |
|
|
<div class="title text-secondary" style="margin-bottom: 10px;"> |
|
|
<div class="title" style="margin-bottom: 10px;color: #000;"> |
|
|
24h {{ $t("contract.h7") }} |
|
|
24h {{ $t("contract.h7") }} |
|
|
</div> |
|
|
</div> |
|
|
<div class="fn-12" style="color: #a8263b;font-weight: bold;"> |
|
|
<div style="color: rgb(168, 38, 59);font-weight: bold;"> |
|
|
{{ activeContract.high }} |
|
|
{{ activeContract.high }} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="item px-2 min-width-B"> |
|
|
<div class="item" style="padding: 0px 20px;"> |
|
|
<div class="title text-secondary" style="margin-bottom: 10px;"> |
|
|
<div class="title" style="margin-bottom: 10px;color: #000;"> |
|
|
24h {{ $t("contract.h8") }} |
|
|
24h {{ $t("contract.h8") }} |
|
|
</div> |
|
|
</div> |
|
|
<div class="fn-12" style="color: #a8263b;font-weight: bold;"> |
|
|
<div style="color: rgb(168, 38, 59);font-weight: bold;"> |
|
|
{{ activeContract.low }} |
|
|
{{ activeContract.low }} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="item px-2 min-width-B"> |
|
|
<div class="item" style="padding: 0px 20px;"> |
|
|
<div class="title text-secondary" style="margin-bottom: 10px;"> |
|
|
<div class="title" style="margin-bottom: 10px;color: #000;"> |
|
|
24h {{ $t("contract.h9") }} |
|
|
24h {{ $t("contract.h9") }} |
|
|
(USDT) |
|
|
<!-- （{{ $t("contract.e2") }}） --> |
|
|
|
|
|
<!-- (USDT) --> |
|
|
</div> |
|
|
</div> |
|
|
<div class="fn-12" style="color: #a8263b;font-weight: bold;"> |
|
|
<div style="color: rgb(168, 38, 59);font-weight: bold;"> |
|
|
{{ activeContract.vol }} |
|
|
{{ activeContract.vol }} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="page-top d-flex pt-2"> |
|
|
<!-- <div><theme-change /></div> --> |
|
|
<!-- 交易对 --> |
|
|
|
|
|
<div style="width: 23%;background-color: #fff;margin-right: 7px;"> |
|
|
|
|
|
<div class="d-flex search_box"> |
|
|
|
|
|
<i class="el-icon-search"></i> |
|
|
|
|
|
<input type="text" :placeholder="$t('exchange.search')" v-model="filterCoin" style="color: black;"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="bottom-box-left"> |
|
|
|
|
|
<template v-for="parent in contractListFilter"> |
|
|
|
|
|
<table class="table" :key="parent.coin_name + 1"> |
|
|
|
|
|
<thead> |
|
|
|
|
|
<tr class=""> |
|
|
|
|
|
<th class="w-9/24">{{ $t("contract.h5") }}</th> |
|
|
|
|
|
<th class="w-7/24 text-right">{{ $t("contract.g3") }}</th> |
|
|
|
|
|
<th class="w-8/24 text-right"> |
|
|
|
|
|
{{ $t("contract.h6") }} |
|
|
|
|
|
</th> |
|
|
|
|
|
</tr> |
|
|
|
|
|
</thead> |
|
|
|
|
|
<tbody> |
|
|
|
|
|
<tr v-for="item in Liste" :key="item.symbol" |
|
|
|
|
|
:class="{ active: item.symbol == activeSymbol }" @click="ispopover1(item.symbol)"> |
|
|
|
|
|
<td class="w-9/24 tr-text" style="font-weight: bold;color: #000;padding: 15px 18px;"> |
|
|
|
|
|
<img :src="item.icon" width="20" height="20" /> |
|
|
|
|
|
{{ item.symbol }}/{{ parent.coin_name }} |
|
|
|
|
|
</td> |
|
|
|
|
|
<td class="w-7/24 text-right" :class="item.increase < 0 ? 'decreace' : 'increase'" style="font-weight: bold;padding: 15px 18px;"> |
|
|
|
|
|
{{ item.close }} |
|
|
|
|
|
</td> |
|
|
|
|
|
<td class="w-8/24 text-right" :class="item.increase < 0 ? 'decreace' : 'increase'" style="font-weight: bold;padding: 15px 18px;"> |
|
|
|
|
|
{{ item.increaseStr }} |
|
|
|
|
|
</td> |
|
|
|
|
|
</tr> |
|
|
|
|
|
</tbody> |
|
|
|
|
|
</table> |
|
|
|
|
|
</template> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div class="kline-box flex-fill mr-2"> |
|
|
<kline |
|
|
<kline :activeCoin="{ pair_name: activeContract.pair_name }" v-if="activeContract.pair_name" |
|
|
:activeCoin="{ pair_name: activeContract.pair_name }" |
|
|
:contract="true" :wsUrl="wsUrl" /> |
|
|
v-if="activeContract.pair_name" |
|
|
<!-- 交易 --> |
|
|
:contract="true" |
|
|
<exchange-store :holdPositionList="holdPositionList" :symbol="activeSymbol" :defaultPrice="defaultPrice" |
|
|
:wsUrl="wsUrl" |
|
|
:newPriceObj="newPriceObj" :contractOpen="contractOpen" @accountInfo="accountInfo = $event" |
|
|
/> |
|
|
@position="getLastHoldPosition" @getSymbolDetail="symbolDetail=$event" /> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div style="width: 20%;"> |
|
|
|
|
|
<!-- 盘口 --> |
|
|
<!-- 盘口 --> |
|
|
<handicap @input="newPriceObj = $event" @selectprice="defaultPrice = $event" :symbol="activeSymbol" |
|
|
<handicap |
|
|
:wsUrl="wsUrl" :ws="ws" class="" ref="handicap" /> |
|
|
@input="newPriceObj = $event" |
|
|
<!-- 合约账户 --> |
|
|
@selectprice="defaultPrice = $event" |
|
|
<div style="margin-top: 8px;"> |
|
|
:symbol="activeSymbol" |
|
|
<account class="bg-plain" :accountInfo="accountInfo" /> |
|
|
:wsUrl="wsUrl" |
|
|
</div> |
|
|
:ws="ws" |
|
|
</div> |
|
|
class="mr-2" |
|
|
|
|
|
ref="handicap" |
|
|
|
|
|
/> |
|
|
|
|
|
<!-- 交易 --> |
|
|
|
|
|
<exchange-store |
|
|
|
|
|
:holdPositionList="holdPositionList" |
|
|
|
|
|
:symbol="activeSymbol" |
|
|
|
|
|
:defaultPrice="defaultPrice" |
|
|
|
|
|
:newPriceObj="newPriceObj" |
|
|
|
|
|
:contractOpen="contractOpen" |
|
|
|
|
|
@accountInfo="accountInfo = $event" |
|
|
|
|
|
@position="getLastHoldPosition" |
|
|
|
|
|
@getSymbolDetail="symbolDetail=$event" |
|
|
|
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
<page-bottom @position="getLastHoldPosition" @isall=" holdPositionAll = $event; holdPosition();" |
|
|
<page-bottom |
|
|
@setactiveItem="setactiveItem" :accountInfo="accountInfo" :newPriceObj="newPriceObj" |
|
|
@position="getLastHoldPosition" |
|
|
:holdPositionList="holdPositionList" :holdPositionAll="holdPositionAll" :symbol="activeSymbol" |
|
|
@isall=" |
|
|
:symbolDetail="symbolDetail" /> |
|
|
holdPositionAll = $event; |
|
|
<div class="modal fade" id="openContract" tabindex="-1" role="dialog" aria-labelledby="contractClose" |
|
|
holdPosition(); |
|
|
aria-hidden="true"> |
|
|
" |
|
|
|
|
|
@setactiveItem="setactiveItem" |
|
|
|
|
|
:accountInfo="accountInfo" |
|
|
|
|
|
:newPriceObj="newPriceObj" |
|
|
|
|
|
:holdPositionList="holdPositionList" |
|
|
|
|
|
:holdPositionAll="holdPositionAll" |
|
|
|
|
|
:symbol="activeSymbol" |
|
|
|
|
|
:symbolDetail="symbolDetail" |
|
|
|
|
|
/> |
|
|
|
|
|
<div class="modal fade" id="openContract" tabindex="-1" role="dialog" aria-labelledby="contractClose" aria-hidden="true"> |
|
|
<div class="modal-dialog modal-dialog-centered"> |
|
|
<div class="modal-dialog modal-dialog-centered"> |
|
|
<div class="modal-content"> |
|
|
<div class="modal-content"> |
|
|
<div class="modal-header"> |
|
|
<div class="modal-header"> |
|
|
@ -130,7 +153,6 @@ |
|
|
<div v-html="contractAgreement.body"></div> |
|
|
<div v-html="contractAgreement.body"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="modal-footer d-flex justify-content-center"> |
|
|
<div class="modal-footer d-flex justify-content-center"> |
|
|
|
|
|
|
|
|
<button type="button" class="btn btn-primary" @click="opening"> |
|
|
<button type="button" class="btn btn-primary" @click="opening"> |
|
|
{{$t('contract.j8')}} |
|
|
{{$t('contract.j8')}} |
|
|
</button> |
|
|
</button> |
|
|
@ -141,16 +163,16 @@ |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
<script> |
|
|
<script> |
|
|
import kline from "../option/kline"; |
|
|
import kline from "../option/kline"; |
|
|
import handicap from "./handicap.vue"; |
|
|
import handicap from "./handicap.vue"; |
|
|
import account from "./account.vue"; |
|
|
import account from "./account.vue"; |
|
|
import exchangeStore from "./exchange-store.vue"; |
|
|
import exchangeStore from "./exchange-store.vue"; |
|
|
import pageBottom from "./page-bottom.vue"; |
|
|
import pageBottom from "./page-bottom.vue"; |
|
|
import Contract from "../../api/contract"; |
|
|
import Contract from "../../api/contract"; |
|
|
import Socket from "@/api/server/Socket.js"; |
|
|
import Socket from "@/api/server/Socket.js"; |
|
|
import Home from "@/api/home"; |
|
|
import Home from "@/api/home"; |
|
|
import bus from "@/components/bus.js"; |
|
|
import bus from "@/components/bus.js"; |
|
|
export default { |
|
|
export default { |
|
|
components: { |
|
|
components: { |
|
|
kline, |
|
|
kline, |
|
|
handicap, |
|
|
handicap, |
|
|
@ -165,7 +187,7 @@ |
|
|
holdPositionAll: false, |
|
|
holdPositionAll: false, |
|
|
holdPositionList: [], |
|
|
holdPositionList: [], |
|
|
newPriceObj: {}, |
|
|
newPriceObj: {}, |
|
|
pcBannerList: [], |
|
|
pcBannerList:[], |
|
|
accountInfo: {}, |
|
|
accountInfo: {}, |
|
|
defaultPrice: "", |
|
|
defaultPrice: "", |
|
|
wsUrl: this.Globals.Server.Path.WS1, |
|
|
wsUrl: this.Globals.Server.Path.WS1, |
|
|
@ -173,66 +195,31 @@ |
|
|
_time: null, |
|
|
_time: null, |
|
|
contractOpen: false, |
|
|
contractOpen: false, |
|
|
contractAgreement: {}, |
|
|
contractAgreement: {}, |
|
|
symbolDetail: {}, |
|
|
symbolDetail:{}, |
|
|
currentIcon: '', |
|
|
currentIcon: '', |
|
|
filterCoin: "", |
|
|
|
|
|
contractListFilter: [], |
|
|
|
|
|
imgList:[], |
|
|
|
|
|
imge:[], |
|
|
imge:[], |
|
|
Liste:[] |
|
|
Liste:[] |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
computed: { |
|
|
computed: { |
|
|
activeContract(val) { |
|
|
activeContract(val) { |
|
|
let contractList = this.contractList |
|
|
let contractList=this.contractList |
|
|
.map(item => item.marketInfoList) |
|
|
.map(item => item.marketInfoList) |
|
|
.flat() |
|
|
.flat() |
|
|
.find(item => item.symbol == this.activeSymbol) || {} |
|
|
.find(item => item.symbol == this.activeSymbol) || {} |
|
|
if (val.price) { |
|
|
if(val.price){ |
|
|
delete contractList.price |
|
|
delete contractList.price |
|
|
} |
|
|
} |
|
|
return contractList; |
|
|
return contractList; |
|
|
}, |
|
|
}, |
|
|
isLogin() { |
|
|
isLogin() { |
|
|
return Boolean(localStorage.token); |
|
|
return Boolean(localStorage.token); |
|
|
}, |
|
|
} |
|
|
// contractListFilter(){ |
|
|
|
|
|
// return this.contractList.map((item1, index1)=>{ |
|
|
|
|
|
// item1.marketInfoList.filter(item2=>{ |
|
|
|
|
|
// return item2.symbol.indexOf(this.filterCoin)!=-1 |
|
|
|
|
|
// }) |
|
|
|
|
|
// return item1; |
|
|
|
|
|
// }) |
|
|
|
|
|
// } |
|
|
|
|
|
}, |
|
|
}, |
|
|
watch: { |
|
|
watch: { |
|
|
activeSymbol() { |
|
|
activeSymbol() { |
|
|
this.holdPosition(); |
|
|
this.holdPosition(); |
|
|
}, |
|
|
}, |
|
|
filterCoin: { |
|
|
|
|
|
handler(n, o) { |
|
|
|
|
|
if (!n) { |
|
|
|
|
|
this.contractListFilter = this.contractList; |
|
|
|
|
|
} else { |
|
|
|
|
|
this.Liste = this.Liste.filter(item2 => { |
|
|
|
|
|
return item2.symbol.indexOf(n.toUpperCase()) != -1 |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
// if (!n) { |
|
|
|
|
|
// this.contractListFilter = this.contractList; |
|
|
|
|
|
// } else { |
|
|
|
|
|
// this.contractListFilter = this.contractList.map((item1, index1) => { |
|
|
|
|
|
// let arr = item1; |
|
|
|
|
|
// arr.marketInfoList = item1.marketInfoList.filter(item2 => { |
|
|
|
|
|
// return item2.symbol.indexOf(n.toUpperCase()) != -1 |
|
|
|
|
|
// }) |
|
|
|
|
|
// console.log(arr,'111'); |
|
|
|
|
|
// return arr; |
|
|
|
|
|
// }) |
|
|
|
|
|
// } |
|
|
|
|
|
}, |
|
|
|
|
|
immediate: true |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
}, |
|
|
destroyed() { |
|
|
destroyed() { |
|
|
clearInterval(this._time); |
|
|
clearInterval(this._time); |
|
|
@ -244,6 +231,7 @@ |
|
|
this.indexList(); |
|
|
this.indexList(); |
|
|
this._time = setInterval(() => { |
|
|
this._time = setInterval(() => { |
|
|
if (this.contractOpen) { |
|
|
if (this.contractOpen) { |
|
|
|
|
|
// mounted 中有定时器跑holdPosition了 |
|
|
this.holdPosition(); |
|
|
this.holdPosition(); |
|
|
} |
|
|
} |
|
|
}, 3000); |
|
|
}, 3000); |
|
|
@ -252,27 +240,24 @@ |
|
|
}); |
|
|
}); |
|
|
// console.info(this.$refs) |
|
|
// console.info(this.$refs) |
|
|
bus.$on('collapse', msg => { |
|
|
bus.$on('collapse', msg => { |
|
|
this.activeContract.price = this.activeContract.symbol == 'BTC' ? (msg.close).toFixed(1) : (msg |
|
|
this.activeContract.price =this.activeContract.symbol=='BTC'? (msg.close).toFixed(1):(msg.close).toFixed(3); |
|
|
.close).toFixed(3); |
|
|
this.holdPositionList.map(item=>{ |
|
|
this.holdPositionList.map(item => { |
|
|
if(item.symbol==this.activeContract.symbol) item.realtimePrice=this.activeContract.price |
|
|
if (item.symbol == this.activeContract.symbol) item.realtimePrice = this.activeContract |
|
|
|
|
|
.price |
|
|
|
|
|
}) |
|
|
}) |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
//三秒更新一次数据 |
|
|
//三秒更新一次数据 |
|
|
mounted: function() { |
|
|
mounted: function () { |
|
|
|
|
|
|
|
|
setInterval(() => { |
|
|
setInterval(() => { |
|
|
this.holdPosition(); |
|
|
this.holdPosition(); |
|
|
}, 2000) |
|
|
}, 2000) |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
ispopover1(item) { |
|
|
ispopover1(item){ |
|
|
this.activeSymbol = item; |
|
|
this.activeSymbol=item; |
|
|
// this.$refs.popover.showPopper = false; |
|
|
|
|
|
this.getMarketList(); |
|
|
this.getMarketList(); |
|
|
|
|
|
this.$refs.popover.showPopper = false; |
|
|
}, |
|
|
}, |
|
|
swapMarketList() { |
|
|
swapMarketList() { |
|
|
let msg = "swapMarketList"; |
|
|
let msg = "swapMarketList"; |
|
|
@ -281,78 +266,52 @@ |
|
|
msg: msg |
|
|
msg: msg |
|
|
}); |
|
|
}); |
|
|
this.ws.on("message", res => { |
|
|
this.ws.on("message", res => { |
|
|
let { |
|
|
let { data, sub,cmd } = res; |
|
|
data, |
|
|
|
|
|
sub, |
|
|
|
|
|
cmd |
|
|
|
|
|
} = res; |
|
|
|
|
|
|
|
|
|
|
|
if (sub == msg) { |
|
|
if (sub == msg) { |
|
|
if (data.symbol == 'BTC')(data.price).toFixed(1) |
|
|
// console.log(data, '11--------------------') |
|
|
|
|
|
if( data.symbol=='BTC' )(data.price).toFixed(1) |
|
|
this.contractList = data; |
|
|
this.contractList = data; |
|
|
if (this.filterCoin == '') { |
|
|
|
|
|
this.contractListFilter = data; |
|
|
|
|
|
this.Listes(); |
|
|
this.Listes(); |
|
|
// console.log(this.Liste,'2222'); |
|
|
}else if (cmd == "ping") { |
|
|
} |
|
|
|
|
|
} else if (cmd == "ping") { |
|
|
|
|
|
this.ws.send({ |
|
|
this.ws.send({ |
|
|
cmd: "pong" |
|
|
cmd: "pong" |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
this.ws.on('close', () => { |
|
|
this.ws.on('close',()=>{ |
|
|
this.ws = new Socket(this.Globals.Server.Path.WS1), |
|
|
this.ws= new Socket(this.Globals.Server.Path.WS1), |
|
|
console.log('链接关闭'); |
|
|
console.log('链接关闭'); |
|
|
this.wsOpen(); |
|
|
this.wsOpen(); |
|
|
}) |
|
|
}) |
|
|
}, |
|
|
}, |
|
|
wsOpen() { |
|
|
|
|
|
this.ws.on("open", () => { |
|
|
|
|
|
this.swapMarketList(); |
|
|
|
|
|
this.$refs.handicap.linkSocket() |
|
|
|
|
|
}); |
|
|
|
|
|
}, |
|
|
|
|
|
Listes(){ |
|
|
Listes(){ |
|
|
this.Liste = [] |
|
|
this.Liste = [] |
|
|
this.contractListFilter[0].marketInfoList.map(item=>{ |
|
|
this.contractList[0].marketInfoList.map(item=>{ |
|
|
this.imge[0].marketInfoList.map(items=>{ |
|
|
this.imge[0].marketInfoList.map(items=>{ |
|
|
if(item.symbol==items.symbol){ |
|
|
if(item.symbol==items.symbol){ |
|
|
this.Liste.push({ |
|
|
this.Liste.push({ |
|
|
amount:item.amount, |
|
|
|
|
|
close:item.close, |
|
|
|
|
|
count: item.count, |
|
|
|
|
|
high:item.high, |
|
|
|
|
|
id: item.id, |
|
|
|
|
|
increase: item.increase, |
|
|
|
|
|
increaseStr: item.increaseStr, |
|
|
|
|
|
low: item.low, |
|
|
|
|
|
mrid: item.mrid, |
|
|
|
|
|
open: item.open, |
|
|
|
|
|
pair_name: item.pair_name, |
|
|
pair_name: item.pair_name, |
|
|
price:item.price, |
|
|
|
|
|
symbol: item.symbol, |
|
|
symbol: item.symbol, |
|
|
trade_turnover: item.trade_turnover, |
|
|
|
|
|
type: item.type, |
|
|
|
|
|
vol: item.vol, |
|
|
|
|
|
icon:items.icon |
|
|
icon:items.icon |
|
|
}) |
|
|
}) |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
}) |
|
|
}) |
|
|
}, |
|
|
}, |
|
|
|
|
|
wsOpen(){ |
|
|
|
|
|
this.ws.on("open", () => { |
|
|
|
|
|
this.swapMarketList(); |
|
|
|
|
|
this.$refs.handicap.linkSocket() |
|
|
|
|
|
}); |
|
|
|
|
|
}, |
|
|
// 获取合约市场 |
|
|
// 获取合约市场 |
|
|
getMarketList() { |
|
|
getMarketList() { |
|
|
this.currentIcon = ""; |
|
|
this.currentIcon = ""; |
|
|
Contract.getMarketList().then(res => { |
|
|
Contract.getMarketList().then(res => { |
|
|
if (this.activeSymbol == '') { |
|
|
if(this.activeSymbol==''){ |
|
|
// 页面初始获取 |
|
|
|
|
|
this.imge = res |
|
|
|
|
|
this.contractList = res; |
|
|
this.contractList = res; |
|
|
if (this.filterCoin == '') { |
|
|
this.imge = res; |
|
|
this.contractListFilter = res; |
|
|
|
|
|
this.Listes(); |
|
|
|
|
|
} |
|
|
|
|
|
// 默认值 |
|
|
// 默认值 |
|
|
let firstParent = res[0]; |
|
|
let firstParent = res[0]; |
|
|
if (firstParent) { |
|
|
if (firstParent) { |
|
|
@ -360,15 +319,15 @@ |
|
|
if (first) this.activeSymbol = first.symbol; |
|
|
if (first) this.activeSymbol = first.symbol; |
|
|
this.currentIcon = res[0].marketInfoList[0].icon; |
|
|
this.currentIcon = res[0].marketInfoList[0].icon; |
|
|
} |
|
|
} |
|
|
} else { |
|
|
}else{ |
|
|
// 币种切换获取icon |
|
|
// 币种切换获取icon |
|
|
for (let item of res[0].marketInfoList) { |
|
|
console.log('11111'); |
|
|
if (this.activeSymbol == item.symbol) { |
|
|
for(let item of res[0].marketInfoList){ |
|
|
|
|
|
if(this.activeSymbol==item.symbol){ |
|
|
this.currentIcon = item.icon; |
|
|
this.currentIcon = item.icon; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
}); |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
// 获取持仓 |
|
|
// 获取持仓 |
|
|
@ -377,20 +336,17 @@ |
|
|
let data = { |
|
|
let data = { |
|
|
symbol: (this.holdPositionAll && this.activeSymbol) || "" |
|
|
symbol: (this.holdPositionAll && this.activeSymbol) || "" |
|
|
}; |
|
|
}; |
|
|
Contract.holdPosition(data, { |
|
|
Contract.holdPosition(data, { loading: false }).then(res => { |
|
|
loading: false |
|
|
|
|
|
}).then(res => { |
|
|
|
|
|
// console.info(res) |
|
|
// console.info(res) |
|
|
res.map(item => { |
|
|
res.map(item=>{ |
|
|
if (item.symbol == this.activeContract.symbol) item.realtimePrice = this |
|
|
if(item.symbol==this.activeContract.symbol) item.realtimePrice=this.activeContract.price |
|
|
.activeContract.price |
|
|
|
|
|
}) |
|
|
}) |
|
|
this.holdPositionList = res; |
|
|
this.holdPositionList = res; |
|
|
}); |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
// 获取永续合约开通状态 |
|
|
// 获取永续合约开通状态 |
|
|
openStatus() { |
|
|
openStatus() { |
|
|
if (!this.isLogin) return; |
|
|
if(!this.isLogin) return; |
|
|
Contract.openStatus().then(res => { |
|
|
Contract.openStatus().then(res => { |
|
|
this.contractOpen = res.open; |
|
|
this.contractOpen = res.open; |
|
|
if (!this.contractOpen) { |
|
|
if (!this.contractOpen) { |
|
|
@ -416,8 +372,8 @@ |
|
|
}).catch((res) => {}); |
|
|
}).catch((res) => {}); |
|
|
}, |
|
|
}, |
|
|
//获取某一个持仓订单的数据 |
|
|
//获取某一个持仓订单的数据 |
|
|
setactiveItem(index = 0) { |
|
|
setactiveItem(index=0){ |
|
|
this.accountInfo = this.holdPositionList[index] |
|
|
this.accountInfo=this.holdPositionList[index] |
|
|
}, |
|
|
}, |
|
|
// 线上最新数据有延迟，多请求两次以保拿到 |
|
|
// 线上最新数据有延迟，多请求两次以保拿到 |
|
|
getLastHoldPosition(){ |
|
|
getLastHoldPosition(){ |
|
|
@ -431,86 +387,10 @@ |
|
|
}, 1000) |
|
|
}, 1000) |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
</script> |
|
|
</script> |
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
.justify-content-between ::v-deep .dark-app .theme-switch .theme-switch-button .left, |
|
|
.justify-content-between ::v-deep .dark-app .theme-switch .theme-switch-button .left, .dark-app .theme-switch .theme-switch-button .right{ |
|
|
.dark-app .theme-switch .theme-switch-button .right { |
|
|
color:white !important |
|
|
color: white !important |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
thead th, |
|
|
|
|
|
table td { |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
tbody tr { |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.page-top table tbody tr:hover { |
|
|
|
|
|
background-color: #f8f8ff; |
|
|
|
|
|
|
|
|
|
|
|
td:first-child { |
|
|
|
|
|
color: #2C60DC; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.page-top table tbody tr.active { |
|
|
|
|
|
background-color: #f8f8ff; |
|
|
|
|
|
|
|
|
|
|
|
td:first-child { |
|
|
|
|
|
color: #2C60DC; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.page-top table tbody td { |
|
|
|
|
|
border: none; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.decreace { |
|
|
|
|
|
color: #E33F31; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.increase { |
|
|
|
|
|
color: #6EB189; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.decreace2 { |
|
|
|
|
|
color: #BB4965; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.text-secondary { |
|
|
|
|
|
color: #636363 !important; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.search_box { |
|
|
|
|
|
width: 95%; |
|
|
|
|
|
height: 40px; |
|
|
|
|
|
margin: 10px auto; |
|
|
|
|
|
border: 1px solid #D9D9D9; |
|
|
|
|
|
border-radius: 5px; |
|
|
|
|
|
color: #2e2e2e; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
|
|
i { |
|
|
|
|
|
width: 40px; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
input { |
|
|
|
|
|
background-color: transparent; |
|
|
|
|
|
border: none; |
|
|
|
|
|
border-left: 1px solid #D9D9D9; |
|
|
|
|
|
padding: 0px 10px; |
|
|
|
|
|
height: 40px; |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
color: #fff; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.min-width-B { |
|
|
|
|
|
min-width: 130px; |
|
|
|
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
