4 changed files with 643 additions and 987 deletions
|
After Width: | Height: | Size: 939 B |
@ -1,516 +1,396 @@ |
|||
<template> |
|||
<div class="contract-page" style="background-color: #F8F8F8;"> |
|||
<!-- <div class="banner-block col-xs-8">--> |
|||
<!-- <el-carousel :interval="6000" height="450px">--> |
|||
<!-- <el-carousel-item v-for="item in pcBannerList" :key="item.id">--> |
|||
<!-- <img :src="item.imgurl" width="100%" height="100%" />--> |
|||
<!-- </el-carousel-item>--> |
|||
<!-- </el-carousel>--> |
|||
<!-- </div>--> |
|||
<div class="d-flex align-items-center" style="background-color: #fff;"> |
|||
<div class="price px-3"> |
|||
<img :src="currentIcon" alt="" style="width: 26px;height: 26px;"> |
|||
</div> |
|||
<div class="price"> |
|||
<div class="item fn-16" style="font-weight: bold;">{{ activeContract.pair_name }}</div> |
|||
</div> |
|||
<div class="d-flex fn-14 px-4 p-l-A align-items-center py-2"> |
|||
<div class="item px-2 min-width-A" style="font-weight: bold;"> |
|||
<div class="title" :class="{ decreace2: activeContract.increase < 0, increase: activeContract.increase >= 0}" style="margin-bottom: 10px;"> |
|||
{{ activeContract.price }} |
|||
</div> |
|||
<div :class="{ decreace2: activeContract.increase < 0, increase: activeContract.increase >= 0}"> |
|||
{{ activeContract.increaseStr }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 币种价值数据 --> |
|||
<div class="d-flex fn-14"> |
|||
<div class="item px-2 min-width-B"> |
|||
<div class="title text-secondary" style="margin-bottom: 10px;"> |
|||
24h {{ $t("contract.h7") }} |
|||
</div> |
|||
<div class="fn-12" style="color: #a8263b;font-weight: bold;"> |
|||
{{ activeContract.high }} |
|||
</div> |
|||
</div> |
|||
<div class="item px-2 min-width-B"> |
|||
<div class="title text-secondary" style="margin-bottom: 10px;"> |
|||
24h {{ $t("contract.h8") }} |
|||
</div> |
|||
<div class="fn-12" style="color: #a8263b;font-weight: bold;"> |
|||
{{ activeContract.low }} |
|||
</div> |
|||
</div> |
|||
<div class="item px-2 min-width-B"> |
|||
<div class="title text-secondary" style="margin-bottom: 10px;"> |
|||
24h {{ $t("contract.h9") }} |
|||
(USDT) |
|||
</div> |
|||
<div class="fn-12" style="color: #a8263b;font-weight: bold;"> |
|||
{{ activeContract.vol }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="page-top d-flex pt-2"> |
|||
<!-- 交易对 --> |
|||
<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 class="kline-box flex-fill mr-2"> |
|||
<kline :activeCoin="{ pair_name: activeContract.pair_name }" v-if="activeContract.pair_name" |
|||
:contract="true" :wsUrl="wsUrl" /> |
|||
<!-- 交易 --> |
|||
<exchange-store :holdPositionList="holdPositionList" :symbol="activeSymbol" :defaultPrice="defaultPrice" |
|||
:newPriceObj="newPriceObj" :contractOpen="contractOpen" @accountInfo="accountInfo = $event" |
|||
@position="getLastHoldPosition" @getSymbolDetail="symbolDetail=$event" /> |
|||
</div> |
|||
<div style="width: 20%;"> |
|||
<!-- 盘口 --> |
|||
<handicap @input="newPriceObj = $event" @selectprice="defaultPrice = $event" :symbol="activeSymbol" |
|||
:wsUrl="wsUrl" :ws="ws" class="" ref="handicap" /> |
|||
<!-- 合约账户 --> |
|||
<div style="margin-top: 8px;"> |
|||
<account class="bg-plain" :accountInfo="accountInfo" /> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<page-bottom @position="getLastHoldPosition" @isall=" holdPositionAll = $event; holdPosition();" |
|||
@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-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="contractClose"> |
|||
{{ contractAgreement.title }} |
|||
</h5> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body"> |
|||
<div v-html="contractAgreement.body"></div> |
|||
</div> |
|||
<div class="modal-footer d-flex justify-content-center"> |
|||
|
|||
<button type="button" class="btn btn-primary" @click="opening"> |
|||
{{$t('contract.j8')}} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="contract-page"> |
|||
<!-- <div class="banner-block col-xs-8">--> |
|||
<!-- <el-carousel :interval="6000" height="450px">--> |
|||
<!-- <el-carousel-item v-for="item in pcBannerList" :key="item.id">--> |
|||
<!-- <img :src="item.imgurl" width="100%" height="100%" />--> |
|||
<!-- </el-carousel-item>--> |
|||
<!-- </el-carousel>--> |
|||
<!-- </div>--> |
|||
<div class="page-top d-flex pt-2"> |
|||
<div class="kline-box flex-fill mr-2"> |
|||
<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 class="markets-pair-list" style="max-height:300px;overflow:auto;"> |
|||
<template v-for="parent in contractList"> |
|||
<div class="px-3 text-primary" :key="parent.coin_name"> |
|||
{{ parent.coin_name }} |
|||
</div> |
|||
<table class="table" :key="parent.coin_name + 1"> |
|||
<thead> |
|||
<tr class="text-secondary"> |
|||
<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 style="font-weight: 500;color: #000;">{{ item.symbol }}/{{ parent.coin_name }}</div> |
|||
</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> |
|||
</el-popover> |
|||
</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 class="d-flex fn-12"> |
|||
<div class="item" style="padding: 0px 20px;"> |
|||
<div class="title" style="margin-bottom: 10px;color: #000;"> |
|||
24h {{ $t("contract.h7") }} |
|||
</div> |
|||
<div style="color: rgb(168, 38, 59);font-weight: bold;"> |
|||
{{ activeContract.high }} |
|||
</div> |
|||
</div> |
|||
<div class="item" style="padding: 0px 20px;"> |
|||
<div class="title" style="margin-bottom: 10px;color: #000;"> |
|||
24h {{ $t("contract.h8") }} |
|||
</div> |
|||
<div style="color: rgb(168, 38, 59);font-weight: bold;"> |
|||
{{ activeContract.low }} |
|||
</div> |
|||
</div> |
|||
<div class="item" style="padding: 0px 20px;"> |
|||
<div class="title" style="margin-bottom: 10px;color: #000;"> |
|||
24h {{ $t("contract.h9") }} |
|||
<!-- （{{ $t("contract.e2") }}） --> |
|||
<!-- (USDT) --> |
|||
</div> |
|||
<div style="color: rgb(168, 38, 59);font-weight: bold;"> |
|||
{{ activeContract.vol }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- <div><theme-change /></div> --> |
|||
</div> |
|||
<kline |
|||
:activeCoin="{ pair_name: activeContract.pair_name }" |
|||
v-if="activeContract.pair_name" |
|||
:contract="true" |
|||
:wsUrl="wsUrl" |
|||
/> |
|||
</div> |
|||
<!-- 盘口 --> |
|||
<handicap |
|||
@input="newPriceObj = $event" |
|||
@selectprice="defaultPrice = $event" |
|||
:symbol="activeSymbol" |
|||
:wsUrl="wsUrl" |
|||
:ws="ws" |
|||
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> |
|||
<page-bottom |
|||
@position="getLastHoldPosition" |
|||
@isall=" |
|||
holdPositionAll = $event; |
|||
holdPosition(); |
|||
" |
|||
@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-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="contractClose"> |
|||
{{ contractAgreement.title }} |
|||
</h5> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body"> |
|||
<div v-html="contractAgreement.body"></div> |
|||
</div> |
|||
<div class="modal-footer d-flex justify-content-center"> |
|||
<button type="button" class="btn btn-primary" @click="opening"> |
|||
{{$t('contract.j8')}} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import kline from "../option/kline"; |
|||
import handicap from "./handicap.vue"; |
|||
import account from "./account.vue"; |
|||
import exchangeStore from "./exchange-store.vue"; |
|||
import pageBottom from "./page-bottom.vue"; |
|||
import Contract from "../../api/contract"; |
|||
import Socket from "@/api/server/Socket.js"; |
|||
import Home from "@/api/home"; |
|||
import bus from "@/components/bus.js"; |
|||
export default { |
|||
components: { |
|||
kline, |
|||
handicap, |
|||
account, |
|||
exchangeStore, |
|||
pageBottom |
|||
}, |
|||
data() { |
|||
return { |
|||
contractList: [], |
|||
activeSymbol: "", |
|||
holdPositionAll: false, |
|||
holdPositionList: [], |
|||
newPriceObj: {}, |
|||
pcBannerList: [], |
|||
accountInfo: {}, |
|||
defaultPrice: "", |
|||
wsUrl: this.Globals.Server.Path.WS1, |
|||
ws: new Socket(this.Globals.Server.Path.WS1), |
|||
_time: null, |
|||
contractOpen: false, |
|||
contractAgreement: {}, |
|||
symbolDetail: {}, |
|||
currentIcon: '', |
|||
filterCoin: "", |
|||
contractListFilter: [], |
|||
imgList:[], |
|||
imge:[], |
|||
Liste:[] |
|||
}; |
|||
}, |
|||
computed: { |
|||
activeContract(val) { |
|||
let contractList = this.contractList |
|||
.map(item => item.marketInfoList) |
|||
.flat() |
|||
.find(item => item.symbol == this.activeSymbol) || {} |
|||
if (val.price) { |
|||
delete contractList.price |
|||
import kline from "../option/kline"; |
|||
import handicap from "./handicap.vue"; |
|||
import account from "./account.vue"; |
|||
import exchangeStore from "./exchange-store.vue"; |
|||
import pageBottom from "./page-bottom.vue"; |
|||
import Contract from "../../api/contract"; |
|||
import Socket from "@/api/server/Socket.js"; |
|||
import Home from "@/api/home"; |
|||
import bus from "@/components/bus.js"; |
|||
export default { |
|||
components: { |
|||
kline, |
|||
handicap, |
|||
account, |
|||
exchangeStore, |
|||
pageBottom |
|||
}, |
|||
data() { |
|||
return { |
|||
contractList: [], |
|||
activeSymbol: "", |
|||
holdPositionAll: false, |
|||
holdPositionList: [], |
|||
newPriceObj: {}, |
|||
pcBannerList:[], |
|||
accountInfo: {}, |
|||
defaultPrice: "", |
|||
wsUrl: this.Globals.Server.Path.WS1, |
|||
ws: new Socket(this.Globals.Server.Path.WS1), |
|||
_time: null, |
|||
contractOpen: false, |
|||
contractAgreement: {}, |
|||
symbolDetail:{}, |
|||
currentIcon: '', |
|||
imge:[], |
|||
Liste:[] |
|||
}; |
|||
}, |
|||
computed: { |
|||
activeContract(val) { |
|||
let contractList=this.contractList |
|||
.map(item => item.marketInfoList) |
|||
.flat() |
|||
.find(item => item.symbol == this.activeSymbol) || {} |
|||
if(val.price){ |
|||
delete contractList.price |
|||
} |
|||
return contractList; |
|||
}, |
|||
isLogin() { |
|||
return Boolean(localStorage.token); |
|||
} |
|||
}, |
|||
watch: { |
|||
activeSymbol() { |
|||
this.holdPosition(); |
|||
}, |
|||
}, |
|||
destroyed() { |
|||
clearInterval(this._time); |
|||
}, |
|||
created() { |
|||
// this.openStatus(); |
|||
this.getMarketList(); |
|||
this.holdPosition(); |
|||
this.indexList(); |
|||
this._time = setInterval(() => { |
|||
if (this.contractOpen) { |
|||
// mounted 中有定时器跑holdPosition了 |
|||
this.holdPosition(); |
|||
} |
|||
}, 3000); |
|||
this.ws.on("open", () => { |
|||
this.swapMarketList(); |
|||
}); |
|||
// console.info(this.$refs) |
|||
bus.$on('collapse', msg => { |
|||
this.activeContract.price =this.activeContract.symbol=='BTC'? (msg.close).toFixed(1):(msg.close).toFixed(3); |
|||
this.holdPositionList.map(item=>{ |
|||
if(item.symbol==this.activeContract.symbol) item.realtimePrice=this.activeContract.price |
|||
}) |
|||
}); |
|||
}, |
|||
//三秒更新一次数据 |
|||
mounted: function () { |
|||
|
|||
setInterval(() => { |
|||
this.holdPosition(); |
|||
}, 2000) |
|||
}, |
|||
methods: { |
|||
ispopover1(item){ |
|||
this.activeSymbol=item; |
|||
this.getMarketList(); |
|||
this.$refs.popover.showPopper = false; |
|||
}, |
|||
swapMarketList() { |
|||
let msg = "swapMarketList"; |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg: msg |
|||
}); |
|||
this.ws.on("message", res => { |
|||
let { data, sub,cmd } = res; |
|||
|
|||
if (sub == msg) { |
|||
// console.log(data, '11--------------------') |
|||
if( data.symbol=='BTC' )(data.price).toFixed(1) |
|||
this.contractList = data; |
|||
this.Listes(); |
|||
}else if (cmd == "ping") { |
|||
this.ws.send({ |
|||
cmd: "pong" |
|||
}); |
|||
} |
|||
}); |
|||
this.ws.on('close',()=>{ |
|||
this.ws= new Socket(this.Globals.Server.Path.WS1), |
|||
console.log('链接关闭'); |
|||
this.wsOpen(); |
|||
}) |
|||
}, |
|||
Listes(){ |
|||
this.Liste = [] |
|||
this.contractList[0].marketInfoList.map(item=>{ |
|||
this.imge[0].marketInfoList.map(items=>{ |
|||
if(item.symbol==items.symbol){ |
|||
this.Liste.push({ |
|||
pair_name: item.pair_name, |
|||
symbol: item.symbol, |
|||
icon:items.icon |
|||
}) |
|||
} |
|||
return contractList; |
|||
}, |
|||
isLogin() { |
|||
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: { |
|||
activeSymbol() { |
|||
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 |
|||
}) |
|||
}) |
|||
}, |
|||
wsOpen(){ |
|||
this.ws.on("open", () => { |
|||
this.swapMarketList(); |
|||
this.$refs.handicap.linkSocket() |
|||
}); |
|||
}, |
|||
// 获取合约市场 |
|||
getMarketList() { |
|||
this.currentIcon = ""; |
|||
Contract.getMarketList().then(res => { |
|||
if(this.activeSymbol==''){ |
|||
this.contractList = res; |
|||
this.imge = res; |
|||
// 默认值 |
|||
let firstParent = res[0]; |
|||
if (firstParent) { |
|||
let first = firstParent.marketInfoList[0]; |
|||
if (first) this.activeSymbol = first.symbol; |
|||
this.currentIcon = res[0].marketInfoList[0].icon; |
|||
} |
|||
}, |
|||
destroyed() { |
|||
clearInterval(this._time); |
|||
}, |
|||
created() { |
|||
// this.openStatus(); |
|||
this.getMarketList(); |
|||
this.holdPosition(); |
|||
this.indexList(); |
|||
this._time = setInterval(() => { |
|||
if (this.contractOpen) { |
|||
this.holdPosition(); |
|||
} |
|||
}, 3000); |
|||
this.ws.on("open", () => { |
|||
this.swapMarketList(); |
|||
}); |
|||
// console.info(this.$refs) |
|||
bus.$on('collapse', msg => { |
|||
this.activeContract.price = this.activeContract.symbol == 'BTC' ? (msg.close).toFixed(1) : (msg |
|||
.close).toFixed(3); |
|||
this.holdPositionList.map(item => { |
|||
if (item.symbol == this.activeContract.symbol) item.realtimePrice = this.activeContract |
|||
.price |
|||
}) |
|||
}); |
|||
|
|||
|
|||
}, |
|||
//三秒更新一次数据 |
|||
mounted: function() { |
|||
setInterval(() => { |
|||
this.holdPosition(); |
|||
}, 2000) |
|||
}, |
|||
methods: { |
|||
ispopover1(item) { |
|||
this.activeSymbol = item; |
|||
// this.$refs.popover.showPopper = false; |
|||
this.getMarketList(); |
|||
}, |
|||
swapMarketList() { |
|||
let msg = "swapMarketList"; |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg: msg |
|||
}); |
|||
this.ws.on("message", res => { |
|||
let { |
|||
data, |
|||
sub, |
|||
cmd |
|||
} = res; |
|||
|
|||
if (sub == msg) { |
|||
if (data.symbol == 'BTC')(data.price).toFixed(1) |
|||
this.contractList = data; |
|||
if (this.filterCoin == '') { |
|||
this.contractListFilter = data; |
|||
this.Listes(); |
|||
// console.log(this.Liste,'2222'); |
|||
} |
|||
} else if (cmd == "ping") { |
|||
this.ws.send({ |
|||
cmd: "pong" |
|||
}); |
|||
} |
|||
}); |
|||
this.ws.on('close', () => { |
|||
this.ws = new Socket(this.Globals.Server.Path.WS1), |
|||
console.log('链接关闭'); |
|||
this.wsOpen(); |
|||
}) |
|||
}, |
|||
wsOpen() { |
|||
this.ws.on("open", () => { |
|||
this.swapMarketList(); |
|||
this.$refs.handicap.linkSocket() |
|||
}); |
|||
}, |
|||
Listes(){ |
|||
this.Liste = [] |
|||
this.contractListFilter[0].marketInfoList.map(item=>{ |
|||
this.imge[0].marketInfoList.map(items=>{ |
|||
if(item.symbol==items.symbol){ |
|||
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, |
|||
price:item.price, |
|||
symbol: item.symbol, |
|||
trade_turnover: item.trade_turnover, |
|||
type: item.type, |
|||
vol: item.vol, |
|||
icon:items.icon |
|||
}) |
|||
} |
|||
}) |
|||
}) |
|||
}, |
|||
// 获取合约市场 |
|||
getMarketList() { |
|||
this.currentIcon = ""; |
|||
Contract.getMarketList().then(res => { |
|||
if (this.activeSymbol == '') { |
|||
// 页面初始获取 |
|||
this.imge = res |
|||
this.contractList = res; |
|||
if (this.filterCoin == '') { |
|||
this.contractListFilter = res; |
|||
this.Listes(); |
|||
} |
|||
// 默认值 |
|||
let firstParent = res[0]; |
|||
if (firstParent) { |
|||
let first = firstParent.marketInfoList[0]; |
|||
if (first) this.activeSymbol = first.symbol; |
|||
this.currentIcon = res[0].marketInfoList[0].icon; |
|||
} |
|||
} else { |
|||
// 币种切换获取icon |
|||
for (let item of res[0].marketInfoList) { |
|||
if (this.activeSymbol == item.symbol) { |
|||
this.currentIcon = item.icon; |
|||
} |
|||
} |
|||
} |
|||
|
|||
}); |
|||
}, |
|||
// 获取持仓 |
|||
holdPosition() { |
|||
if (!this.isLogin) return; |
|||
let data = { |
|||
symbol: (this.holdPositionAll && this.activeSymbol) || "" |
|||
}; |
|||
Contract.holdPosition(data, { |
|||
loading: false |
|||
}).then(res => { |
|||
// console.info(res) |
|||
res.map(item => { |
|||
if (item.symbol == this.activeContract.symbol) item.realtimePrice = this |
|||
.activeContract.price |
|||
}) |
|||
this.holdPositionList = res; |
|||
}); |
|||
}, |
|||
// 获取永续合约开通状态 |
|||
openStatus() { |
|||
if (!this.isLogin) return; |
|||
Contract.openStatus().then(res => { |
|||
this.contractOpen = res.open; |
|||
if (!this.contractOpen) { |
|||
this.contractAgreement = res.contractAgreement; |
|||
$("#openContract").modal("show"); |
|||
} |
|||
}); |
|||
}, |
|||
// 开通永续合约 |
|||
opening() { |
|||
Contract.opening().then(res => { |
|||
$("#openContract").modal("hide"); |
|||
this.contractOpen = true; |
|||
this.$message.success(this.$t('contract.j9')); |
|||
}); |
|||
}, |
|||
indexList() { |
|||
Home.indexList().then((res) => { |
|||
this.pcBannerList = res.pcBannerList |
|||
// setTimeout(() => { |
|||
// this.skroll(); |
|||
// }, 100); |
|||
}).catch((res) => {}); |
|||
}, |
|||
//获取某一个持仓订单的数据 |
|||
setactiveItem(index = 0) { |
|||
this.accountInfo = this.holdPositionList[index] |
|||
}, |
|||
// 线上最新数据有延迟，多请求两次以保拿到 |
|||
getLastHoldPosition(){ |
|||
let ti = 0,timer=null; |
|||
timer = setInterval(()=>{ |
|||
this.holdPosition(); |
|||
ti++; |
|||
if(ti==3){ |
|||
clearInterval(timer); |
|||
} |
|||
}, 1000) |
|||
}else{ |
|||
// 币种切换获取icon |
|||
console.log('11111'); |
|||
for(let item of res[0].marketInfoList){ |
|||
if(this.activeSymbol==item.symbol){ |
|||
this.currentIcon = item.icon; |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
}); |
|||
}, |
|||
// 获取持仓 |
|||
holdPosition() { |
|||
if (!this.isLogin) return; |
|||
let data = { |
|||
symbol: (this.holdPositionAll && this.activeSymbol) || "" |
|||
}; |
|||
Contract.holdPosition(data, { loading: false }).then(res => { |
|||
// console.info(res) |
|||
res.map(item=>{ |
|||
if(item.symbol==this.activeContract.symbol) item.realtimePrice=this.activeContract.price |
|||
}) |
|||
this.holdPositionList = res; |
|||
}); |
|||
}, |
|||
// 获取永续合约开通状态 |
|||
openStatus() { |
|||
if(!this.isLogin) return; |
|||
Contract.openStatus().then(res => { |
|||
this.contractOpen = res.open; |
|||
if (!this.contractOpen) { |
|||
this.contractAgreement = res.contractAgreement; |
|||
$("#openContract").modal("show"); |
|||
} |
|||
}); |
|||
}, |
|||
// 开通永续合约 |
|||
opening() { |
|||
Contract.opening().then(res => { |
|||
$("#openContract").modal("hide"); |
|||
this.contractOpen = true; |
|||
this.$message.success(this.$t('contract.j9')); |
|||
}); |
|||
}, |
|||
indexList() { |
|||
Home.indexList().then((res) => { |
|||
this.pcBannerList = res.pcBannerList |
|||
// setTimeout(() => { |
|||
// this.skroll(); |
|||
// }, 100); |
|||
}).catch((res) => {}); |
|||
}, |
|||
//获取某一个持仓订单的数据 |
|||
setactiveItem(index=0){ |
|||
this.accountInfo=this.holdPositionList[index] |
|||
}, |
|||
// 线上最新数据有延迟，多请求两次以保拿到 |
|||
getLastHoldPosition(){ |
|||
let ti = 0,timer=null; |
|||
timer = setInterval(()=>{ |
|||
this.holdPosition(); |
|||
ti++; |
|||
if(ti==3){ |
|||
clearInterval(timer); |
|||
} |
|||
}, 1000) |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.justify-content-between ::v-deep .dark-app .theme-switch .theme-switch-button .left, |
|||
.dark-app .theme-switch .theme-switch-button .right { |
|||
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; |
|||
} |
|||
.justify-content-between ::v-deep .dark-app .theme-switch .theme-switch-button .left, .dark-app .theme-switch .theme-switch-button .right{ |
|||
color:white !important |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue