4 changed files with 643 additions and 987 deletions
|
After Width: | Height: | Size: 939 B |
@ -1,516 +1,396 @@ |
|||||
<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> |
<div class="d-flex align-items-center"> |
||||
<div class="price"> |
<div class="coin d-flex align-items-center"> |
||||
<div class="item fn-16" style="font-weight: bold;">{{ activeContract.pair_name }}</div> |
<el-popover placement="bottom" ref="popover" width="400" trigger="click"> |
||||
</div> |
<div slot="reference" style="display: flex;align-items: center;"> |
||||
<div class="d-flex fn-14 px-4 p-l-A align-items-center py-2"> |
<img :src="currentIcon" width="20" height="20" /> |
||||
<div class="item px-2 min-width-A" style="font-weight: bold;"> |
<div style="font-weight: 500;color: #000;margin: 0px 5px;">{{ activeContract.pair_name }}</div> |
||||
<div class="title" :class="{ decreace2: activeContract.increase < 0, increase: activeContract.increase >= 0}" style="margin-bottom: 10px;"> |
<el-button size="mini"> |
||||
{{ activeContract.price }} |
<img src="@/assets/img/home/arrow_down.svg" width="10" height="10" /> |
||||
</div> |
<!-- <i class="el-icon-arrow-down"></i> --> |
||||
<div :class="{ decreace2: activeContract.increase < 0, increase: activeContract.increase >= 0}"> |
</el-button> |
||||
{{ activeContract.increaseStr }} |
</div> |
||||
</div> |
<div class="markets-pair-list" style="max-height:300px;overflow:auto;"> |
||||
</div> |
<template v-for="parent in contractList"> |
||||
</div> |
<div class="px-3 text-primary" :key="parent.coin_name"> |
||||
<!-- 币种价值数据 --> |
{{ parent.coin_name }} |
||||
<div class="d-flex fn-14"> |
</div> |
||||
<div class="item px-2 min-width-B"> |
<table class="table" :key="parent.coin_name + 1"> |
||||
<div class="title text-secondary" style="margin-bottom: 10px;"> |
<thead> |
||||
24h {{ $t("contract.h7") }} |
<tr class="text-secondary"> |
||||
</div> |
<th class="w-10/24">{{ $t("contract.h5") }}</th> |
||||
<div class="fn-12" style="color: #a8263b;font-weight: bold;"> |
<th class="w-7/24">{{ $t("contract.g3") }}</th> |
||||
{{ activeContract.high }} |
<th class="w-7/24 text-right"> |
||||
</div> |
{{ $t("contract.h6") }} |
||||
</div> |
</th> |
||||
<div class="item px-2 min-width-B"> |
</tr> |
||||
<div class="title text-secondary" style="margin-bottom: 10px;"> |
</thead> |
||||
24h {{ $t("contract.h8") }} |
<tbody> |
||||
</div> |
<!-- @click="activeSymbol = item.symbol" --> |
||||
<div class="fn-12" style="color: #a8263b;font-weight: bold;"> |
<tr v-for="item in parent.marketInfoList" :key="item.symbol" |
||||
{{ activeContract.low }} |
:class="{ active: item.symbol == activeSymbol }" @click="ispopover1(item.symbol)"> |
||||
</div> |
<td class="" style="display: flex;"> |
||||
</div> |
<div v-for="items in Liste" :key="items.symbol"> |
||||
<div class="item px-2 min-width-B"> |
<img :src="items.icon" width="20" height="20" v-if="items.symbol==item.symbol" /> |
||||
<div class="title text-secondary" style="margin-bottom: 10px;"> |
</div> |
||||
24h {{ $t("contract.h9") }} |
<div style="font-weight: 500;color: #000;">{{ item.symbol }}/{{ parent.coin_name }}</div> |
||||
(USDT) |
</td> |
||||
</div> |
<td class="w-7/24 " :class="item.increase < 0 ? 'decreace' : 'increace'" style="font-weight: bold;"> |
||||
<div class="fn-12" style="color: #a8263b;font-weight: bold;"> |
{{ item.price }} |
||||
{{ activeContract.vol }} |
</td> |
||||
</div> |
<td class="w-7/24" :class="item.increase < 0 ? 'decreace' : 'increace'" style="font-weight: bold;"> |
||||
</div> |
{{ item.increaseStr }} |
||||
</div> |
</td> |
||||
</div> |
</tr> |
||||
<div class="page-top d-flex pt-2"> |
</tbody> |
||||
<!-- 交易对 --> |
</table> |
||||
<div style="width: 23%;background-color: #fff;margin-right: 7px;"> |
</template> |
||||
<div class="d-flex search_box"> |
</div> |
||||
<i class="el-icon-search"></i> |
</el-popover> |
||||
<input type="text" :placeholder="$t('exchange.search')" v-model="filterCoin" style="color: black;"> |
</div> |
||||
</div> |
<div class="price border-right" style="padding: 0px 30px;" :class="{ decreace: activeContract.increase < 0, increace: activeContract.increase >= 0 }"> |
||||
<div class="bottom-box-left"> |
<div class="current">{{ activeContract.price }}$</div> |
||||
<template v-for="parent in contractListFilter"> |
<div class="zf">{{ activeContract.increaseStr }}</div> |
||||
<table class="table" :key="parent.coin_name + 1"> |
</div> |
||||
<thead> |
<!-- 币种价值数据 --> |
||||
<tr class=""> |
<div class="d-flex fn-12"> |
||||
<th class="w-9/24">{{ $t("contract.h5") }}</th> |
<div class="item" style="padding: 0px 20px;"> |
||||
<th class="w-7/24 text-right">{{ $t("contract.g3") }}</th> |
<div class="title" style="margin-bottom: 10px;color: #000;"> |
||||
<th class="w-8/24 text-right"> |
24h {{ $t("contract.h7") }} |
||||
{{ $t("contract.h6") }} |
</div> |
||||
</th> |
<div style="color: rgb(168, 38, 59);font-weight: bold;"> |
||||
</tr> |
{{ activeContract.high }} |
||||
</thead> |
</div> |
||||
<tbody> |
</div> |
||||
<tr v-for="item in Liste" :key="item.symbol" |
<div class="item" style="padding: 0px 20px;"> |
||||
:class="{ active: item.symbol == activeSymbol }" @click="ispopover1(item.symbol)"> |
<div class="title" style="margin-bottom: 10px;color: #000;"> |
||||
<td class="w-9/24 tr-text" style="font-weight: bold;color: #000;padding: 15px 18px;"> |
24h {{ $t("contract.h8") }} |
||||
<img :src="item.icon" width="20" height="20" /> |
</div> |
||||
{{ item.symbol }}/{{ parent.coin_name }} |
<div style="color: rgb(168, 38, 59);font-weight: bold;"> |
||||
</td> |
{{ activeContract.low }} |
||||
<td class="w-7/24 text-right" :class="item.increase < 0 ? 'decreace' : 'increase'" style="font-weight: bold;padding: 15px 18px;"> |
</div> |
||||
{{ item.close }} |
</div> |
||||
</td> |
<div class="item" style="padding: 0px 20px;"> |
||||
<td class="w-8/24 text-right" :class="item.increase < 0 ? 'decreace' : 'increase'" style="font-weight: bold;padding: 15px 18px;"> |
<div class="title" style="margin-bottom: 10px;color: #000;"> |
||||
{{ item.increaseStr }} |
24h {{ $t("contract.h9") }} |
||||
</td> |
<!-- （{{ $t("contract.e2") }}） --> |
||||
</tr> |
<!-- (USDT) --> |
||||
</tbody> |
</div> |
||||
</table> |
<div style="color: rgb(168, 38, 59);font-weight: bold;"> |
||||
</template> |
{{ activeContract.vol }} |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
<div class="kline-box flex-fill mr-2"> |
</div> |
||||
<kline :activeCoin="{ pair_name: activeContract.pair_name }" v-if="activeContract.pair_name" |
</div> |
||||
:contract="true" :wsUrl="wsUrl" /> |
<!-- <div><theme-change /></div> --> |
||||
<!-- 交易 --> |
</div> |
||||
<exchange-store :holdPositionList="holdPositionList" :symbol="activeSymbol" :defaultPrice="defaultPrice" |
<kline |
||||
:newPriceObj="newPriceObj" :contractOpen="contractOpen" @accountInfo="accountInfo = $event" |
:activeCoin="{ pair_name: activeContract.pair_name }" |
||||
@position="getLastHoldPosition" @getSymbolDetail="symbolDetail=$event" /> |
v-if="activeContract.pair_name" |
||||
</div> |
:contract="true" |
||||
<div style="width: 20%;"> |
:wsUrl="wsUrl" |
||||
<!-- 盘口 --> |
/> |
||||
<handicap @input="newPriceObj = $event" @selectprice="defaultPrice = $event" :symbol="activeSymbol" |
</div> |
||||
:wsUrl="wsUrl" :ws="ws" class="" ref="handicap" /> |
<!-- 盘口 --> |
||||
<!-- 合约账户 --> |
<handicap |
||||
<div style="margin-top: 8px;"> |
@input="newPriceObj = $event" |
||||
<account class="bg-plain" :accountInfo="accountInfo" /> |
@selectprice="defaultPrice = $event" |
||||
</div> |
:symbol="activeSymbol" |
||||
</div> |
:wsUrl="wsUrl" |
||||
|
:ws="ws" |
||||
</div> |
class="mr-2" |
||||
<page-bottom @position="getLastHoldPosition" @isall=" holdPositionAll = $event; holdPosition();" |
ref="handicap" |
||||
@setactiveItem="setactiveItem" :accountInfo="accountInfo" :newPriceObj="newPriceObj" |
/> |
||||
:holdPositionList="holdPositionList" :holdPositionAll="holdPositionAll" :symbol="activeSymbol" |
<!-- 交易 --> |
||||
:symbolDetail="symbolDetail" /> |
<exchange-store |
||||
<div class="modal fade" id="openContract" tabindex="-1" role="dialog" aria-labelledby="contractClose" |
:holdPositionList="holdPositionList" |
||||
aria-hidden="true"> |
:symbol="activeSymbol" |
||||
<div class="modal-dialog modal-dialog-centered"> |
:defaultPrice="defaultPrice" |
||||
<div class="modal-content"> |
:newPriceObj="newPriceObj" |
||||
<div class="modal-header"> |
:contractOpen="contractOpen" |
||||
<h5 class="modal-title" id="contractClose"> |
@accountInfo="accountInfo = $event" |
||||
{{ contractAgreement.title }} |
@position="getLastHoldPosition" |
||||
</h5> |
@getSymbolDetail="symbolDetail=$event" |
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
/> |
||||
<span aria-hidden="true">×</span> |
</div> |
||||
</button> |
<page-bottom |
||||
</div> |
@position="getLastHoldPosition" |
||||
<div class="modal-body"> |
@isall=" |
||||
<div v-html="contractAgreement.body"></div> |
holdPositionAll = $event; |
||||
</div> |
holdPosition(); |
||||
<div class="modal-footer d-flex justify-content-center"> |
" |
||||
|
@setactiveItem="setactiveItem" |
||||
<button type="button" class="btn btn-primary" @click="opening"> |
:accountInfo="accountInfo" |
||||
{{$t('contract.j8')}} |
:newPriceObj="newPriceObj" |
||||
</button> |
:holdPositionList="holdPositionList" |
||||
</div> |
:holdPositionAll="holdPositionAll" |
||||
</div> |
:symbol="activeSymbol" |
||||
</div> |
:symbolDetail="symbolDetail" |
||||
</div> |
/> |
||||
</div> |
<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> |
</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, |
||||
account, |
account, |
||||
exchangeStore, |
exchangeStore, |
||||
pageBottom |
pageBottom |
||||
}, |
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
contractList: [], |
contractList: [], |
||||
activeSymbol: "", |
activeSymbol: "", |
||||
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, |
||||
ws: new Socket(this.Globals.Server.Path.WS1), |
ws: new Socket(this.Globals.Server.Path.WS1), |
||||
_time: null, |
_time: null, |
||||
contractOpen: false, |
contractOpen: false, |
||||
contractAgreement: {}, |
contractAgreement: {}, |
||||
symbolDetail: {}, |
symbolDetail:{}, |
||||
currentIcon: '', |
currentIcon: '', |
||||
filterCoin: "", |
imge:[], |
||||
contractListFilter: [], |
Liste:[] |
||||
imgList:[], |
}; |
||||
imge:[], |
}, |
||||
Liste:[] |
computed: { |
||||
}; |
activeContract(val) { |
||||
}, |
let contractList=this.contractList |
||||
computed: { |
.map(item => item.marketInfoList) |
||||
activeContract(val) { |
.flat() |
||||
let contractList = this.contractList |
.find(item => item.symbol == this.activeSymbol) || {} |
||||
.map(item => item.marketInfoList) |
if(val.price){ |
||||
.flat() |
delete contractList.price |
||||
.find(item => item.symbol == this.activeSymbol) || {} |
} |
||||
if (val.price) { |
return contractList; |
||||
delete contractList.price |
}, |
||||
|
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); |
wsOpen(){ |
||||
}, |
this.ws.on("open", () => { |
||||
// contractListFilter(){ |
this.swapMarketList(); |
||||
// return this.contractList.map((item1, index1)=>{ |
this.$refs.handicap.linkSocket() |
||||
// item1.marketInfoList.filter(item2=>{ |
}); |
||||
// return item2.symbol.indexOf(this.filterCoin)!=-1 |
}, |
||||
// }) |
// 获取合约市场 |
||||
// return item1; |
getMarketList() { |
||||
// }) |
this.currentIcon = ""; |
||||
// } |
Contract.getMarketList().then(res => { |
||||
}, |
if(this.activeSymbol==''){ |
||||
watch: { |
this.contractList = res; |
||||
activeSymbol() { |
this.imge = res; |
||||
this.holdPosition(); |
// 默认值 |
||||
}, |
let firstParent = res[0]; |
||||
filterCoin: { |
if (firstParent) { |
||||
handler(n, o) { |
let first = firstParent.marketInfoList[0]; |
||||
if (!n) { |
if (first) this.activeSymbol = first.symbol; |
||||
this.contractListFilter = this.contractList; |
this.currentIcon = res[0].marketInfoList[0].icon; |
||||
} 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 |
|
||||
} |
} |
||||
}, |
}else{ |
||||
destroyed() { |
// 币种切换获取icon |
||||
clearInterval(this._time); |
console.log('11111'); |
||||
}, |
for(let item of res[0].marketInfoList){ |
||||
created() { |
if(this.activeSymbol==item.symbol){ |
||||
// this.openStatus(); |
this.currentIcon = item.icon; |
||||
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) |
|
||||
} |
} |
||||
} |
} |
||||
}; |
}); |
||||
|
}, |
||||
|
// 获取持仓 |
||||
|
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> |
</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> |
||||
Loading…
Reference in new issue