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.
397 lines
13 KiB
397 lines
13 KiB
<template>
|
|
<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: '',
|
|
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;
|
|
console.log(this.contractList);
|
|
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
|
|
})
|
|
}
|
|
})
|
|
})
|
|
},
|
|
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;
|
|
}
|
|
}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
|
|
}
|
|
</style>
|