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.
843 lines
25 KiB
843 lines
25 KiB
<template>
|
|
<div class="contract-page" style="background-color: black;padding-top: 5px;">
|
|
<!-- <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: #121212;min-height:58px;">
|
|
<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">
|
|
<div class="title" :class="{
|
|
decreace2: activeContract.increase < 0,
|
|
increase: activeContract.increase >= 0
|
|
}">
|
|
<!-- {{ activeContract.price }} -->
|
|
{{price1}}
|
|
</div>
|
|
<!-- <div class="title mb-1 text-secondary">
|
|
{{ $t("contract.h6") }}
|
|
</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 mb-1 text-secondary">
|
|
24h {{ $t("contract.h7") }}
|
|
</div>
|
|
<div class="fn-12" style="color: #a8263b;">
|
|
{{ activeContract.high }}
|
|
</div>
|
|
</div>
|
|
<div class="item px-2 min-width-B">
|
|
<div class="title mb-1 text-secondary">
|
|
24h {{ $t("contract.h8") }}
|
|
</div>
|
|
<div class="fn-12" style="color: #a8263b;">
|
|
{{ activeContract.low }}
|
|
</div>
|
|
</div>
|
|
<div class="item px-2 min-width-B">
|
|
<div class="title mb-1 text-secondary">
|
|
24h {{ $t("contract.h9") }}
|
|
(USDT)
|
|
</div>
|
|
<div class="fn-12" style="color: #a8263b;">
|
|
{{ activeContract.vol }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="page-top d-flex pt-2">
|
|
<!-- 交易对 -->
|
|
<div style="width: 20%;background-color: #121212;margin-right: 7px;">
|
|
<div
|
|
class="coin-change d-flex align-items-center py-2 pl-2 heading justify-content-between" style="border-bottom: 1px solid #2e2e2e;height: 43px;font-size: 16px;"
|
|
>{{ $t("contact.market") }}
|
|
</div>
|
|
<div class="d-flex search_box">
|
|
<i class="el-icon-search"></i>
|
|
<input type="text" :placeholder="$t('exchange.search')" v-model="filterCoin" @input="enterFilter">
|
|
</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 parent.marketInfoList"
|
|
:key="item.symbol"
|
|
:class="{ active: item.symbol == activeSymbol }"
|
|
@click="ispopover1(item.symbol)"
|
|
v-show="isShow(item)"
|
|
>
|
|
<td class="w-9/24 tr-text">
|
|
{{ item.symbol }}/{{ parent.coin_name }}
|
|
</td>
|
|
<td class="w-7/24 text-right" >
|
|
<!-- :class="item.increase < 0 ? 'decreace' : 'increase'" -->
|
|
{{item.symbol == activeSymbol ? price1 : item.price}}
|
|
</td>
|
|
<td
|
|
class="w-8/24 text-right"
|
|
:class="item.increase < 0 ? 'decreace' : 'increase'"
|
|
>
|
|
{{ item.increaseStr }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div class="kline-box flex-fill mr-2">
|
|
<div
|
|
class="d-flex align-items-center py-2 pl-2 heading justify-content-between" style="border-bottom: 1px solid #2e2e2e;height: 43px;font-size: 16px;"
|
|
>{{ $t("contact.chart") }}
|
|
</div>
|
|
<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="holdPosition"
|
|
@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="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:{},
|
|
// currentIcon: '',
|
|
// filterCoin: "",
|
|
// contractListFilter: [],
|
|
// 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);
|
|
// },
|
|
// // 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.contractListFilter = this.contractList.map((item1, index1)=>{
|
|
// let arr = item1;
|
|
// arr.marketInfoList = item1.marketInfoList.filter(item2=>{
|
|
// return item2.symbol.indexOf(n.toUpperCase())!=-1
|
|
// })
|
|
// return arr;
|
|
// })
|
|
// }
|
|
// },
|
|
// immediate: true
|
|
// }
|
|
// },
|
|
// 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;
|
|
// 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;
|
|
// }
|
|
// }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() {
|
|
// this.currentIcon = "";
|
|
// Contract.getMarketList().then(res => {
|
|
// if(this.activeSymbol==''){
|
|
// // 页面初始获取
|
|
// this.contractList = res;
|
|
// if(this.filterCoin==''){
|
|
// this.contractListFilter = 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
|
|
// 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]
|
|
// },
|
|
// enterFilter(){
|
|
|
|
// }
|
|
// }
|
|
// };
|
|
|
|
|
|
|
|
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: "",
|
|
|
|
// 保证全局唯一 Socket 实例
|
|
wsUrl: this.Globals.Server.Path.WS1,
|
|
ws: null,
|
|
|
|
_time: null,
|
|
holdTimer: null, // 新增：保存挂载时的持仓定时器
|
|
contractOpen: false,
|
|
contractAgreement: {},
|
|
symbolDetail:{},
|
|
currentIcon: '',
|
|
filterCoin: "",
|
|
contractListFilter: [],
|
|
Liste:[],
|
|
price1:0,
|
|
intervalId:'',
|
|
|
|
// ✅ 防内存泄漏：保存事件函数引用
|
|
swapMarketHandler: null,
|
|
wsOpenHandler: null,
|
|
collapseHandler: null,
|
|
|
|
// 🔥 看门狗机制：监控左侧市场列表的数据流
|
|
lastMessageTime: 0,
|
|
watchdogTimer: null,
|
|
watchdogTimeout: 15000 // 15秒没收到数据判定为后端假死
|
|
};
|
|
},
|
|
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);
|
|
},
|
|
set_price() {
|
|
return this.$store.getters.set_price;
|
|
}
|
|
},
|
|
watch: {
|
|
activeSymbol() {
|
|
this.holdPosition();
|
|
},
|
|
},
|
|
created() {
|
|
// 实例化底层的 Socket，让子组件共享
|
|
this.ws = new Socket(this.wsUrl);
|
|
|
|
this.getMarketList();
|
|
this.holdPosition();
|
|
this.indexList();
|
|
|
|
this._time = setInterval(() => {
|
|
if (this.contractOpen) {
|
|
this.holdPosition();
|
|
}
|
|
}, 3000);
|
|
|
|
// 绑定全局价格变动事件
|
|
this.collapseHandler = 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
|
|
})
|
|
};
|
|
bus.$on('collapse', this.collapseHandler);
|
|
|
|
// 🔥 定义 WebSocket 的 Open 回调，让底层重连时自动恢复市场订阅
|
|
this.wsOpenHandler = () => {
|
|
console.log("PC主页面 WebSocket 连上/重连成功，请求市场列表...");
|
|
this.swapMarketList();
|
|
};
|
|
this.ws.on("open", this.wsOpenHandler);
|
|
|
|
this.startWatchingPrice();
|
|
this.startWatchdog(); // 启动看门狗
|
|
},
|
|
|
|
mounted() {
|
|
// ✅ 修复：必须把这个定时器存起来，否则组件销毁时内存会泄漏
|
|
this.holdTimer = setInterval(() => {
|
|
this.holdPosition();
|
|
}, 2000);
|
|
},
|
|
|
|
// ✅ 核心重构：在组件卸载时，杀掉所有后台偷跑的定时器和事件监听！
|
|
beforeDestroy() {
|
|
clearInterval(this._time);
|
|
clearInterval(this.intervalId);
|
|
if (this.holdTimer) clearInterval(this.holdTimer);
|
|
|
|
this.stopWatchdog();
|
|
|
|
if (this.collapseHandler) {
|
|
bus.$off('collapse', this.collapseHandler);
|
|
}
|
|
|
|
if (this.ws) {
|
|
if (this.wsOpenHandler) this.ws.off("open", this.wsOpenHandler);
|
|
if (this.swapMarketHandler) this.ws.off("message", this.swapMarketHandler);
|
|
|
|
this.ws.send({ cmd: "unsub", msg: "swapMarketList" });
|
|
this.ws.destroy();
|
|
this.ws = null;
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
startWatchingPrice(){
|
|
// ⚠️ 性能优化：把 10 毫秒改成了 100 毫秒。肉眼看不出延迟，但极大释放了电脑 CPU 性能！
|
|
this.intervalId = setInterval(() => {
|
|
let newPrice = localStorage.getItem('price');
|
|
this.price1 = newPrice;
|
|
}, 100);
|
|
},
|
|
|
|
ispopover1(item){
|
|
this.activeSymbol=item;
|
|
this.getMarketList();
|
|
},
|
|
|
|
// 🔥 暴力强杀重连看门狗
|
|
startWatchdog() {
|
|
this.stopWatchdog();
|
|
this.lastMessageTime = Date.now();
|
|
|
|
this.watchdogTimer = setInterval(() => {
|
|
if (Date.now() - this.lastMessageTime > this.watchdogTimeout) {
|
|
console.error("[PC市场列表看门狗] 超过15秒未收到推送数据，判定后端假死！正在强行掐断并新建 WS...");
|
|
|
|
// 保底拉一下 HTTP 数据
|
|
this.getMarketList();
|
|
|
|
// 强行掐断并重启
|
|
if (this.ws) {
|
|
if (this.ws.socket) this.ws.socket.close();
|
|
this.ws.isReconnecting = false;
|
|
this.ws.manualClose = false;
|
|
this.ws.reconnect();
|
|
}
|
|
|
|
this.lastMessageTime = Date.now(); // 喂狗，防止疯狂重启
|
|
}
|
|
}, 5000);
|
|
},
|
|
|
|
stopWatchdog() {
|
|
if (this.watchdogTimer) {
|
|
clearInterval(this.watchdogTimer);
|
|
this.watchdogTimer = null;
|
|
}
|
|
},
|
|
|
|
swapMarketList() {
|
|
let msg = "swapMarketList";
|
|
|
|
// 如果已连接，则发送订阅
|
|
if (this.ws && this.ws.checkOpen()) {
|
|
this.ws.send({ cmd: "sub", msg: msg });
|
|
}
|
|
|
|
// 清理旧监听器，防止多次触发重复渲染
|
|
if (this.swapMarketHandler) {
|
|
this.ws.off("message", this.swapMarketHandler);
|
|
}
|
|
|
|
// 声明并绑定最新的接收方法
|
|
this.swapMarketHandler = res => {
|
|
let { data, sub, cmd } = res;
|
|
|
|
// 只要收到消息就“喂狗”，刷新活跃时间
|
|
if (sub == msg || cmd == "ping") {
|
|
this.lastMessageTime = Date.now();
|
|
}
|
|
|
|
if (sub == msg) {
|
|
if( data.symbol=='BTC' )(data.price).toFixed(1)
|
|
this.contractList = data;
|
|
if(this.filterCoin==''){
|
|
this.contractListFilter = data;
|
|
this.Listes();
|
|
}
|
|
} else if (cmd == "ping") {
|
|
this.ws.send({ cmd: "pong" });
|
|
}
|
|
};
|
|
|
|
this.ws.on("message", this.swapMarketHandler);
|
|
},
|
|
|
|
// 获取合约市场
|
|
getMarketList() {
|
|
this.currentIcon = "";
|
|
Contract.getMarketList().then(res => {
|
|
if(this.activeSymbol==''){
|
|
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 {
|
|
if (res && res[0]) {
|
|
for(let item of res[0].marketInfoList){
|
|
if(this.activeSymbol==item.symbol){
|
|
this.currentIcon = item.icon;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
Listes(){
|
|
this.Liste = [];
|
|
if (!this.contractListFilter || !this.contractListFilter[0] || !this.contractListFilter[0].marketInfoList) return;
|
|
|
|
this.contractListFilter[0].marketInfoList.map(item => {
|
|
this.Liste.push({
|
|
pair_name: item.pair_name,
|
|
symbol: item.symbol,
|
|
icon: item.icon
|
|
});
|
|
});
|
|
},
|
|
|
|
// 获取持仓
|
|
holdPosition() {
|
|
if (!this.isLogin) return;
|
|
let data = {
|
|
symbol: (this.holdPositionAll && this.activeSymbol) || ""
|
|
};
|
|
Contract.holdPosition(data, { loading: false }).then(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
|
|
}).catch((res) => {});
|
|
},
|
|
|
|
setactiveItem(index=0){
|
|
this.accountInfo = this.holdPositionList[index];
|
|
},
|
|
|
|
isShow(symbol) {
|
|
const reg = new RegExp(this.filterCoin, "gi");
|
|
if (!this.filterCoin) return true;
|
|
else {
|
|
let name = symbol.pair_name || symbol.symbol;
|
|
return name.search(reg) >= 0;
|
|
}
|
|
},
|
|
|
|
enterFilter(){
|
|
// 此方法原来为空，保持即可
|
|
}
|
|
}
|
|
};
|
|
|
|
</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: #242424;
|
|
|
|
td:first-child{
|
|
color: #2C60DC;
|
|
}
|
|
}
|
|
.page-top table tbody tr.active{
|
|
background-color: #242424;
|
|
|
|
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 #2e2e2e;
|
|
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 #2e2e2e;
|
|
padding: 0px 10px;
|
|
height: 40px;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.min-width-B{
|
|
min-width: 130px;
|
|
}
|
|
</style>
|
|
|