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.
402 lines
12 KiB
402 lines
12 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"
|
|
>
|
|
<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">
|
|
{{ activeContract.pair_name }}
|
|
<el-button size="mini">
|
|
<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="w-10/24">
|
|
{{ item.symbol }}/{{ parent.coin_name }}
|
|
</td>
|
|
<td
|
|
class="w-7/24 "
|
|
:class="item.increase < 0 ? 'decreace' : 'increase'"
|
|
>
|
|
{{item.symbol == activeSymbol ? price1 : item.price}}
|
|
</td>
|
|
<td
|
|
class="w-7/24"
|
|
:class="item.increase < 0 ? 'decreace' : 'increase'"
|
|
>
|
|
{{ item.increaseStr }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
</div>
|
|
</el-popover>
|
|
</div>
|
|
<div
|
|
class="price px-3 border-right"
|
|
:class="{
|
|
decreace: activeContract.increase < 0,
|
|
increace: activeContract.increase >= 0
|
|
}"
|
|
>
|
|
<!-- <span class="current">{{ activeContract.price }}$</span> -->
|
|
<span class="current">{{price1}}$</span>
|
|
|
|
<span class="zf">{{ activeContract.increaseStr }}</span>
|
|
</div>
|
|
<!-- 币种价值数据 -->
|
|
<div class="d-flex fn-12">
|
|
<div class="item px-2">
|
|
<div class="title mb-1 text-secondary">
|
|
24h {{ $t("contract.h7") }}
|
|
</div>
|
|
<div>
|
|
{{ activeContract.high }}
|
|
</div>
|
|
</div>
|
|
<div class="item px-2">
|
|
<div class="title mb-1 text-secondary">
|
|
24h {{ $t("contract.h8") }}
|
|
</div>
|
|
<div>
|
|
{{ activeContract.low }}
|
|
</div>
|
|
</div>
|
|
<div class="item px-2">
|
|
<div class="title mb-1 text-secondary">
|
|
24h {{ $t("contract.h9") }}
|
|
<!-- （{{ $t("contract.e2") }}） -->
|
|
(USDT)
|
|
</div>
|
|
<div>
|
|
{{ 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="holdPosition"
|
|
@getSymbolDetail="symbolDetail=$event"
|
|
/>
|
|
</div>
|
|
<page-bottom
|
|
@position="holdPosition"
|
|
@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:{},
|
|
price1:0,
|
|
intervalId:''
|
|
};
|
|
},
|
|
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) {
|
|
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
|
|
})
|
|
});
|
|
this.startWatchingPrice();
|
|
},
|
|
//三秒更新一次数据
|
|
mounted: function () {
|
|
setInterval(() => {
|
|
this.holdPosition();
|
|
}, 2000)
|
|
},
|
|
methods: {
|
|
startWatchingPrice(){
|
|
this.intervalId = setInterval(() => {
|
|
let newPrice = localStorage.getItem('price');
|
|
this.price1 = newPrice;
|
|
}, 10); // 每秒检查一次
|
|
},
|
|
ispopover1(item){
|
|
this.activeSymbol=item;
|
|
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) {
|
|
if( data.symbol=='BTC' )(data.price).toFixed(1)
|
|
this.contractList = data;
|
|
}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()
|
|
});
|
|
},
|
|
// 获取合约市场
|
|
getMarketList() {
|
|
Contract.getMarketList().then(res => {
|
|
this.contractList = res;
|
|
// 默认值
|
|
let firstParent = res[0];
|
|
if (firstParent) {
|
|
let first = firstParent.marketInfoList[0];
|
|
if (first) this.activeSymbol = first.symbol;
|
|
}
|
|
});
|
|
},
|
|
// 获取持仓
|
|
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]
|
|
}
|
|
}
|
|
};
|
|
</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
|
|
}
|
|
.increase{
|
|
color: #53b987;
|
|
}
|
|
.active{
|
|
// background-color: #eee;
|
|
background-color: #141e2c;
|
|
}
|
|
</style>
|
|
|