<template>
|
<div class="pb-108 no_touch trade">
|
<div class="typebox" style="display: flex;">
|
<div :class="typeindex==index?'typebox_box':'typebox_boxa'" @click="typeclick(index)"
|
v-for="(item,index) in typelist" :key="index">{{index?$t("合约"):$t("交易")}}</div>
|
</div>
|
<div v-if="typeindex==0">
|
<trade-head :backFunc="() => $router.push('/')" :symbol="symbol" :newname="newname" :price="price" :range="range"
|
:isTrade="true" @update-coin="onUpdate" @data="quote = $event" />
|
|
<div class="trade-buy-sell flex justify-between px-30 py-30">
|
<keep-alive>
|
<trade-deep-data :selectValue="selectValue" @getList="getList" :showType="showType" :symbol="symbol"
|
v-if="symbol" :price="price" class="w-290 mr-30" />
|
</keep-alive>
|
<trade-order-area :symbol="symbol" :init-open="initOpena" :newname="newname" :init-close="initClose" :price="price"
|
@ordered="onOrdereda" />
|
</div>
|
|
<div class="list-data">
|
<div>
|
<div class="flex justify-between pb-20 items-center pt-10">
|
<div class="flex pl-30 mar-23">
|
<template>
|
<div class="px-10 py-10 flex items-center text-grey" @click="tabClick('1')"
|
:class="tabType == '1' ? 'active-line' : ''">
|
{{ $t("当前委托")
|
}}<span v-if="tabType == '1'">({{ entrustList.length }})</span>
|
</div>
|
<div class="px-10 ml-50 py-10 flex items-center text-grey" @click="tabClick('3')"
|
:class="tabType == '3' ? 'active-line' : ''">
|
{{ $t("历史委托") }}
|
</div>
|
<div class="px-10 py-10 flex items-center ml-50 text-grey" @click="tabClick('2')"
|
:class="tabType == '2' ? 'active-line' : ''">
|
{{ $t("资产") }}
|
</div>
|
</template>
|
</div>
|
<span @click="goHistory">
|
<img src="@/assets/3x/names8.png" alt="record-img" class="w-32 h-35 pr-30" />
|
</span>
|
</div>
|
</div>
|
<div class="pl-32 pr-32 pb-100" v-if="tabType == '1'">
|
<entrust-item v-for="item in entrustList" :key="item.order_no" :entrust="item" state="submitted"
|
@cancelOrder="cancelOrder" />
|
</div>
|
<div class="pl-32 pr-32 pb-100" v-else-if="tabType == '3'">
|
<history-item v-for="item in entrustList" :key="item.order_no" :coinPrice="coinPrice"
|
:entrust="item" :state="item.state" @cancelOrder="cancelOrder" />
|
</div>
|
<div class="pl-32 pr-32" v-else>
|
<div class="mb-20 border-b">
|
<p class="font-28 text-grey mt-24 mb-42">{{ $t("当前币对资产") }}</p>
|
<ul>
|
<li v-for="item in pairsList" :key="item.symbol" class="flex justify-between py-10">
|
<div class="flex items-center">
|
<img :src="
|
item.symbol
|
? `${HOST_URL}/wap/symbol/${item.symbol}.png`
|
: require('@/assets/loading-default.png')
|
" class="w-52 h-52 rounded-full mr-16" />
|
<p class="flex flex-col">
|
<strong class="font-28 textColor mb-6">{{
|
item.symbol.toUpperCase()
|
}}</strong>
|
<span class="font-20 text-grey">{{ item.full_name }}</span>
|
</p>
|
</div>
|
<div class="flex flex-col items-end text-grey">
|
<strong class="font-28 textColor mb-6">{{
|
item.volume
|
}}</strong>
|
<span class="font-20 text-grey">
|
{{ currency.currency_symbol }}
|
{{
|
item.usdt ? (item.usdt * currency.rate).toFixed(2) : "0.0"
|
}}
|
</span>
|
</div>
|
</li>
|
</ul>
|
</div>
|
<div class="mb-60 border-b">
|
<p class="font-28 text-grey mt-24 mb-42">{{ $t("其他非0资产") }}</p>
|
<ul>
|
<li v-for="item in no_zeroList" :key="item.symbol" class="flex justify-between py-10">
|
<div class="flex items-center">
|
<img :src="
|
item.symbol
|
? `${HOST_URL}/wap/symbol/${item.symbol}.png`
|
: require('@/assets/loading-default.png')
|
" class="w-52 h-52 rounded-full mr-16" />
|
<p class="flex flex-col">
|
<strong class="font-28 textColor mb-6">{{
|
item.symbol.toUpperCase()
|
}}</strong>
|
<span class="font-20 text-grey">{{ item.full_name }}</span>
|
</p>
|
</div>
|
<div class="flex flex-col items-end">
|
<strong class="font-28 textColor mb-6">{{
|
item.volume
|
}}</strong>
|
<span class="font-20 text-grey">
|
{{ currency.currency_symbol }}
|
{{
|
item.usdt ? (item.usdt * currency.rate).toFixed(2) : "0.0"
|
}}
|
</span>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<div v-if="tabType == '1' && !entrustList.length"
|
class="flex flex-col justify-center items-center pt-155 pb-100">
|
<img src="@/assets/image/assets-center/no-data.png" alt="no-date" class="w-180 h-180" />
|
<p class="textColor">{{ $t("暂无数据") }}</p>
|
</div>
|
</div>
|
<div class="fixed w-full shadow z-10 tabBackground1">
|
<div class="flex justify-between px-30 py-10">
|
<span class="font-24 textColor2">
|
{{ newname }} {{ $t("k线图表") }}
|
</span>
|
<van-icon class="textColor" @click.stop="showCharts = !showCharts"
|
:name="showCharts ? 'arrow-down' : 'arrow-up'"></van-icon>
|
</div>
|
<k-line-charts :update-key="updateKey" :update-data="quote" :symbol="symbol" v-if="symbol && showCharts"
|
:showBottom="false" />
|
</div>
|
<van-action-sheet v-model="isSelectShow" @select="onSelect" :actions="actions" :cancel-text="$t('取消')"
|
close-on-click-action @cancel="onCancel" />
|
</div>
|
<div v-if="typeindex==1">
|
<aaa></aaa>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import ContractHeader from "@/components/contract-header/index.vue";
|
import PerpetualOpen from "@/components/perpetual-open/index.vue";
|
import PerpetualOrder from "@/components/perpetual-order/index.vue";
|
|
import {
|
_getBalance,
|
_getDeepData,
|
_initOpen,
|
_initClose,
|
_orderListCur,
|
_orderListHold,
|
_futrueOrderInit,
|
_futrueOrderList,
|
} from "@/API/trade.api";
|
var showLength = 7;
|
|
|
import TradeHead from "@/components/trade-head/index.vue";
|
import TradeOrderArea from "@/components/trade-order-area/index.vue";
|
import TradeDeepData from "@/components/trade-deep-data/index.vue";
|
import EntrustItem from "@/components/entrust-item";
|
import KLineCharts from "@/components/kline-charts";
|
import historyItem from "@/components/history-item";
|
import aaa from "../../page/perpetualContract/index.vue"
|
import Axios from "@/API/trading";
|
import {
|
_getHomeList
|
} from "@/API/home.api";
|
import {
|
Popup,
|
Swipe,
|
SwipeItem,
|
Circle,
|
Icon,
|
ActionSheet
|
} from "vant";
|
import {
|
mapActions,
|
mapGetters
|
} from "vuex";
|
import {
|
SET_COIN_LIST
|
} from "@/store/const.store";
|
import {
|
WS_URL,
|
HOST_URL
|
} from "@/config";
|
import TradeApi from "@/API/trading.js";
|
import {
|
getStorage
|
} from "@/utils/utis";
|
|
export default {
|
name: "TradePage",
|
components: {
|
ContractHeader,
|
PerpetualOpen,
|
PerpetualOrder,
|
[Popup.name]: Popup,
|
[Swipe.name]: Swipe,
|
[SwipeItem.name]: SwipeItem,
|
KLineCharts,
|
TradeHead,
|
TradeOrderArea,
|
TradeDeepData,
|
[Popup.name]: Popup,
|
[Swipe.name]: Swipe,
|
[SwipeItem.name]: SwipeItem,
|
[Circle.name]: Circle,
|
[Icon.name]: Icon,
|
[ActionSheet.name]: ActionSheet,
|
EntrustItem,
|
KLineCharts,
|
historyItem,
|
aaa
|
},
|
computed: {
|
...mapGetters("user", ["userInfo"]),
|
...mapGetters({
|
coinList: "home/coinList",
|
currency: "home/currency",
|
}),
|
},
|
watch: {
|
selectIndex(val) {
|
showLength = 7;
|
},
|
},
|
data() {
|
const initArr = [];
|
for (let i = 0; i < showLength; i++) {
|
initArr.push({
|
amount: "--",
|
price: "--",
|
});
|
}
|
// const initArr = [];
|
// for (let i = 0; i < 8; i++) {
|
// initArr.push({
|
// volume: "--",
|
// price: "--",
|
// });
|
// }
|
return {
|
quote: {},
|
initTimer: null,
|
keyIndex: 0,
|
timeout: null,
|
timer: null, // 底部持仓等的公用定时器
|
timer1: null, // tab切换动画
|
timer2: null, // 交割合约底部持仓等的公用定时器
|
balance: 0,
|
symbol: "",
|
price: "",
|
range: "",
|
stop_price_profit: "",
|
stop_price_loss: "",
|
initClose: {},
|
asks: initArr, // 卖单
|
bids: initArr, // 买单
|
orderCur: [], // 当前委托
|
orderHold: [], // 持有仓位
|
futrueHold: [], // 交割持仓
|
futrueHistroy: [], // 交割历史
|
sockets: {
|
quotes: null, // 行情
|
deep: null, /// 深度
|
},
|
curTab: "", // 当前委托还是持有仓位
|
selectIndex: 1, // 当前tab
|
initFutrue: {}, /// 交割合约
|
show: false, // popup
|
animated1: false,
|
animated2: false,
|
newname:'',
|
currentType: "",
|
showCharts: false,
|
// curRequest: [], //
|
|
HOST_URL,
|
quote: {},
|
typelist: [this.$t("交易"), this.$t("合约")],
|
typeindex: 0,
|
showCharts: false,
|
updateKey: 1,
|
initTimer: null,
|
keyIndex: 0,
|
timeout: null,
|
timer: null, // 底部持仓等的公用定时器
|
timer2: null, // 交割合约底部持仓等的公用定时器
|
price: "",
|
range: "",
|
initOpena: {},
|
initOpen: {},
|
initClose: {},
|
asks: initArr, // 卖单
|
bids: initArr, // 买单
|
orderCur: [], // 当前委托
|
orderHold: [], // 持有仓位
|
name:'',
|
futrueHold: [], // 交割持仓
|
futrueHistroy: [], // 交割历史
|
socket: null, // 行情
|
sockets: {
|
quotes: null, // 行情
|
deep: null, /// 深度
|
},
|
curTab: "", // 当前委托还是持有仓位
|
selectIndex: 1, // 当前tab
|
initFutrue: {}, /// 交割合约
|
show: false, // popup
|
entrustList: [], //当前委托订单
|
tabType: 1,
|
no_zeroList: [], //其他非0资产数组
|
pairsList: {}, //当前资产
|
// curRequest: [], //
|
isShow: false,
|
title: 1,
|
isSelectShow: false,
|
actions: [{
|
name: this.$t("默认"),
|
value: 0,
|
className: "actions-active"
|
},
|
{
|
name: this.$t("展示买单"),
|
value: 1,
|
className: ""
|
},
|
{
|
name: this.$t("展示卖单"),
|
value: 2,
|
className: ""
|
},
|
],
|
showType: 0,
|
sortList: [],
|
selectValue: 0,
|
coinPrice: 0,
|
};
|
},
|
async created() {
|
if (!this.coinList.length) {
|
await this.SET_COIN_LIST();
|
}
|
_getBalance().then((data) => {
|
// 获取用户余额
|
this.$store.commit("user/SET_USERINFO", { balance: data.money });
|
// const { money } = data
|
// this.balance = money
|
});
|
},
|
mounted() {
|
this.GET_UERS_KYC();
|
let symbol = this.$route.params.symbol;
|
let type = this.$route.params.aa;
|
let catchSymbol = getStorage("symbol");
|
if (!symbol && catchSymbol) {
|
symbol = catchSymbol;
|
}
|
if (this.selectIndex / 1 === 2) {
|
this.curTab = "fetchFutrueHoldList";
|
} else {
|
this.curTab = "fetchOrderListHold";
|
}
|
this.symbol = symbol;
|
if(this.typeindex==0){
|
this.inita(symbol);
|
}else{
|
this.init(symbol);
|
}
|
},
|
methods: {
|
...mapActions("home", [SET_COIN_LIST]),
|
...mapActions("user", ["GET_UERS_KYC"]),
|
typeclick(e) {
|
this.typeindex = e
|
if(e==0){
|
this.initParama(this.symbol)
|
}else{
|
// this.symbol = 'wld'
|
this.initParam(this.symbol)
|
}
|
this.$forceUpdate()
|
},
|
onUpdate(symbol,name) {
|
// 更新
|
this.symbol = symbol;
|
this.newname = name
|
this.closeSocket();
|
if(this.typeindex==0){
|
this.closeSocketa();
|
}else{
|
this.closeSocket();
|
}
|
if(this.typeindex==0){
|
this.inita(symbol);
|
}else{
|
this.init(symbol);
|
}
|
},
|
onRecall() {
|
// 撤单or 平仓 evt
|
this.clearTimer();
|
_orderListHold(this.symbol).then((data) => {
|
this.orderHold = data;
|
});
|
this[this.curTab](this.symbol);
|
_initOpen(this.symbol).then((data) => {
|
this.initOpen = data;
|
});
|
},
|
onTopTab(evt) {
|
// 当前tab 永续/交割
|
this.keyIndex += 1;
|
this.selectIndex = evt;
|
this.clearTimer();
|
if (this.selectIndex / 1 === 1) {
|
//this.curTab = 'fetchOrderListCur'
|
this.curTab = "fetchOrderListHold";
|
// this.animated1 = true
|
// this.timer = setTimeout(() => {
|
// this.animated1 = false
|
// clearTimeout(this.timer)
|
// }, 200)
|
this.animated2 = true;
|
this.timer1 = setTimeout(() => {
|
this.animated2 = false;
|
clearTimeout(this.timer1);
|
}, 200);
|
} else {
|
// this.animated2 = true
|
// this.timer = setTimeout(() => {
|
// this.animated2 = false
|
// clearTimeout(this.timer)
|
// }, 200)
|
this.animated1 = true;
|
this.timer1 = setTimeout(() => {
|
this.animated1 = false;
|
clearTimeout(this.timer1);
|
}, 200);
|
}
|
console.log(this.curTab);
|
this[this.curTab](this.symbol);
|
},
|
getCoinPrce(val) {
|
_getHomeList(val).then((res) => {
|
this.coinPrice = res[0].close;
|
});
|
},
|
tabClick(type) {
|
this.tabType = type;
|
if (type == 2 && !this.userInfo.token) {
|
this.$router.push("/login");
|
return;
|
}
|
this.entrustList = [];
|
this.getOrderList();
|
},
|
changeCurrentType(type) {
|
this.currentType = type;
|
},
|
fetchOrderListHold(symbol) {
|
// 当前持仓
|
if (!symbol) {
|
return;
|
}
|
if (this.userInfo.token) {
|
_orderListHold(symbol).then((data) => {
|
// this.orderHold = data
|
this.orderHold = data.sort(this.sortData);
|
});
|
this.timer = setInterval(() => {
|
_orderListHold(symbol).then((data) => {
|
// if (typeof this.timer === 'string') {
|
// this.timer = null
|
// return
|
// }
|
// this.orderHold = data
|
this.orderHold = data.sort(this.sortData);
|
});
|
}, 1000);
|
} else {
|
this.orderHold = [];
|
}
|
},
|
fetchFutrueHoldList(symbol) {
|
if (!symbol) {
|
return;
|
}
|
// 交割持仓
|
if (this.userInfo.token) {
|
let length = 0;
|
_futrueOrderList(symbol).then((data) => {
|
// this.futrueHold = data
|
this.futrueHold = data.sort(this.sortData);
|
length = data.length;
|
});
|
this.timer = setInterval(() => {
|
_futrueOrderList(symbol).then((data) => {
|
// if (typeof this.timer === 'string') {
|
// this.timer = null
|
// return
|
// }
|
|
this.futrueHold = data.sort(this.sortData);
|
if (length != data.length) {
|
length = data.length;
|
_futrueOrderInit(symbol).then((dataList) => {
|
this.initFutrue = dataList;
|
});
|
}
|
});
|
}, 1000);
|
} else {
|
this.futrueHold = [];
|
}
|
},
|
fetchFutrueHistory(symbol) {
|
// 交割历史持仓
|
_futrueOrderList(symbol, "hisorders").then((data) => {
|
this.futrueHistroy = data;
|
// this.clearTimeout()
|
});
|
},
|
onOrdereda(evt) {
|
// 下单过后的回调
|
this.clearTimer();
|
// this.clearTimeout()
|
if(this.typeindex==0){
|
this.initParama(this.symbol, evt); // 重新初始化
|
}else{
|
this.initParam(this.symbol, evt); // 重新初始化
|
}
|
//console.log('下单后更新数据')
|
},
|
onOrdered(evt) {
|
// 下单过后的回调
|
this.clearTimer();
|
// this.clearTimeout()
|
if(this.typeindex==0){
|
this.initParama(this.symbol, evt); // 重新初始化
|
}else{
|
this.initParam(this.symbol, evt); // 重新初始化
|
}
|
// TODO: 这里要做判断
|
if (this.selectIndex / 1 === 1) {
|
this[this.curTab](this.symbol); // 重新调取记录
|
console.log("this.curTab", this.curTab);
|
} else {
|
// 交割合约
|
this[this.curTab](this.symbol);
|
// this.show = true
|
console.log("curTab", evt, this.curTab);
|
}
|
//console.log('下单后更新数据')
|
},
|
changeValueBack(val) {
|
if (val == 0) {
|
showLength = 7;
|
} else {
|
showLength = 13;
|
}
|
},
|
onTab(evt) {
|
// 点击tab后的回调
|
console.log("evt", evt);
|
this.clearTimer();
|
// this.clearTimeout()
|
this.curTab = evt;
|
this[evt](this.symbol);
|
},
|
fetchQoutes(symbol) {
|
// 获取当前行情
|
// symbol.order = "desc"
|
_getHomeList(symbol).then((data) => {
|
// 获取行情
|
this.handleQoutes(data);
|
this.startQuoteSocket(); // socket
|
if(this.typeindex==0){
|
this.startQuoteSocketa(); // socket
|
}else{
|
this.startQuoteSocket(); // socket
|
}
|
});
|
},
|
handleQoutes(data) {
|
if (data && data.length) {
|
const cur = data[0];
|
this.price = cur.close;
|
this.newname = cur.name;
|
this.range = cur.change_ratio + "";
|
this.quote = cur;
|
this.updateKey++;
|
}
|
},
|
fetchDeepData(symbol) {
|
console.log("sd");
|
_getDeepData(symbol).then((data) => {
|
// 获取深度
|
console.log(data);
|
this.handleDeep(data);
|
this.startDeepSocket(); // socket
|
});
|
},
|
handleDeep(data) {
|
if (this.symbol !== data.symbol) {
|
return;
|
}
|
this.deepData = data;
|
const { asks, bids } = data;
|
this.asks = asks.sort((a, b) => a.price - b.price).slice(0, showLength);
|
this.bids = bids.sort((a, b) => a.price - b.price).slice(-showLength);
|
},
|
fetchOrderListCur(symbol) {
|
// 当前委托
|
//console.log('当前委托')
|
if (this.userInfo.token) {
|
_orderListCur(symbol).then((data) => {
|
this.orderCur = data;
|
});
|
this.clearTimer();
|
this.timer = setInterval(() => {
|
_orderListCur(symbol).then((data) => {
|
// if (typeof this.timer === 'string') {
|
// this.timer = null
|
// return
|
// }
|
this.orderCur = data;
|
});
|
}, 1000);
|
} else {
|
this.orderCur = [];
|
}
|
},
|
startDeepSocket() {
|
// 开启socket链接
|
if(this.typeindex==0){
|
this.closeSocketa();
|
}else{
|
this.closeSocket();
|
}
|
|
this.socket = new WebSocket(`${WS_URL}/3/${this.symbol}`);
|
|
this.socket.onopen = () => {
|
console.log("WebSocket connection established");
|
};
|
|
this.socket.onmessage = (evt) => {
|
const { data } = evt;
|
const { code, data: _data } = JSON.parse(data);
|
if (code / 1 === 0) {
|
this.handleDeep(_data);
|
}
|
};
|
|
this.socket.onerror = (error) => {
|
console.error("WebSocket error:", error);
|
setTimeout(this.startDeepSocket, 5000); // 5秒后尝试重新连接
|
};
|
|
this.socket.onclose = (event) => {
|
console.log("WebSocket connection closed:", event);
|
// 重新连接，可以根据需求添加重连的逻辑，这里只是简单的示例
|
};
|
},
|
startQuoteSocketa() {
|
// 行情socket
|
console.log("symbol", this.symbol);
|
if (!this.symbol) {
|
return;
|
}
|
this.socket = new WebSocket(`${WS_URL}/1/${this.symbol}`);
|
this.socket.onmessage = (evt) => {
|
const {
|
data
|
} = evt;
|
const {
|
code,
|
data: _data
|
} = JSON.parse(data);
|
// console.log(_data);
|
if (code / 1 === 0) {
|
this.handleQoutes(_data);
|
}
|
};
|
},
|
initParama(symbol, type) {
|
// 初始化参数
|
if (type === "open" || !type) {
|
//console.log('开仓数据')
|
Axios.tradeBuyToken({}).then((res) => {
|
this.initOpena = res.data;
|
console.log(this.initOpen.volume, res.data.volume, type);
|
});
|
}
|
if (type === "close" || !type) {
|
Axios.tradeSellToken({
|
symbol,
|
}).then((res) => {
|
this.initClose = res.data;
|
});
|
}
|
this.getWallet();
|
if (this.userInfo.token) {
|
this.getOrderList();
|
}
|
},
|
initParam(symbol, type) {
|
// 初始化参数
|
if (type === "open" || type === "long" || type === "short" || !type) {
|
let initFunTimer = null;
|
let initFun = () => {
|
_initOpen(symbol)
|
.then((data) => {
|
this.initOpen = data;
|
clearTimeout(initFunTimer);
|
initFunTimer = null;
|
})
|
.catch((err) => {
|
initFunTimer = setTimeout(() => {
|
initFun();
|
}, 3000);
|
});
|
};
|
initFun();
|
}
|
if (type === "close" || !type) {
|
let initFunTimer = null;
|
let initFun = () => {
|
_initClose(symbol)
|
.then((data) => {
|
this.initClose = data;
|
console.log(this.initClose);
|
clearTimeout(initFunTimer);
|
initFunTimer = null;
|
})
|
.catch((err) => {
|
initFunTimer = setTimeout(() => {
|
initFun();
|
}, 3000);
|
});
|
};
|
initFunTimer = setTimeout(() => {
|
initFun();
|
}, 600);
|
}
|
if (type === "futrue" || !type) {
|
_futrueOrderInit(symbol).then((data) => {
|
this.initFutrue = data;
|
});
|
}
|
},
|
init(symbol) {
|
// 初始化页面
|
this.symbol = symbol.toLowerCase();
|
this.fetchQoutes(symbol);
|
this.fetchDeepData(symbol);
|
this.initParam(symbol); // 'open'
|
this.clearTimer();
|
//if (this.curTab === 'fetchOrderListCur') {
|
if (this.curTab === "fetchOrderListHold") {
|
//this.fetchOrderListCur(symbol)
|
this.fetchOrderListHold(symbol);
|
} else {
|
this.fetchFutrueHoldList(symbol);
|
}
|
},
|
inita(symbol) {
|
// 初始化页面
|
this.symbol = symbol.toLowerCase();
|
if (!this.socket) {
|
if(this.typeindex==0){
|
this.startQuoteSocketa(); // socket
|
}else{
|
this.startQuoteSocket(); // socket
|
}
|
}
|
// this.initParam(symbol); // 'open'
|
if(this.typeindex==0){
|
this.initParama(symbol); // 'open'
|
}else{
|
this.initParam(symbol); // 'open'
|
}
|
this.clearTimer();
|
this.getCoinPrce(symbol);
|
},
|
closeSocketa() {
|
this.socket && this.socket.close();
|
this.socket = null;
|
},
|
closeSocket() {
|
this.sockets.quotes && this.sockets.quotes.close();
|
this.sockets.deep && this.sockets.deep.close();
|
this.sockets.quotes = null;
|
this.sockets.deep = null;
|
},
|
clearTimer() {
|
clearInterval(this.timer);
|
this.timer = null;
|
},
|
tradeBuy() {
|
Axios.tradeBuy({
|
volume: 1,
|
session_token: "",
|
symbol: "",
|
price: 1,
|
order_price_type: "", //limit限价 opponent市价
|
})
|
.then((res) => {
|
console.log(res);
|
})
|
.catch((error) => {
|
if (error.code === "ECONNABORTED") {
|
this.$toast(this.$t("网络超时！"));
|
} else if (error.msg !== undefined) {
|
this.$toast(this.$t(error.msg));
|
}
|
});
|
},
|
getOrderList() {
|
TradeApi.tradeRecord({
|
page_no: 1,
|
symbol: this.$route.params.symbol,
|
type: this.tabType == 1 ? "orders" : "hisorders",
|
})
|
.then((res) => {
|
console.log(res.data);
|
this.entrustList = res.data;
|
})
|
.catch(() => {});
|
},
|
cancelOrder(order) {
|
TradeApi.tradeCancel({
|
order_no: order,
|
})
|
.then((res) => {
|
if(this.typeindex==0){
|
this.initParama(this.symbol);
|
}else{
|
this.initParam(this.symbol);
|
}
|
this.$toast(this.$t("成功"));
|
})
|
.catch(() => {});
|
},
|
getWallet() {
|
TradeApi.getPairs({
|
pairs: `${this.symbol}/usdt`,
|
}).then((res) => {
|
this.pairsList = res.data.pairs;
|
this.no_zeroList = res.data.no_zero;
|
});
|
},
|
goHistory() {
|
this.$router.push(`/tradeRecord/${this.symbol}`);
|
},
|
//价格类型下拉框切换
|
selectBtn() {
|
this.isShow = !this.isShow;
|
},
|
//选择价格类型
|
selectItem(item) {
|
this.title = item.name;
|
this.isShow = false;
|
this.selectValue = item.value;
|
},
|
onSelect(item) {
|
this.showType = item.value;
|
this.actions.map((item) => {
|
item.className = "";
|
});
|
item.className = "actions-active";
|
},
|
onCancel() {
|
this.isSelectShow = false;
|
},
|
getList(val) {
|
if (val.numberLength <= 2) {
|
this.title = val.arry[0].name;
|
} else {
|
this.title = val.arry[val.arry.length - 1].name;
|
}
|
this.sortList = val.arry;
|
},
|
},
|
startQuoteSocket() {
|
// 行情socket
|
this.sockets.quotes = new WebSocket(`${WS_URL}/1/${this.symbol}`);
|
// socket.onopen = () => {
|
// console.log('open')
|
// socket.send('hello')
|
// }
|
this.sockets.quotes.onmessage = (evt) => {
|
const { data } = evt;
|
const { code, data: _data } = JSON.parse(data);
|
if (code / 1 === 0) {
|
this.handleQoutes(_data);
|
}
|
};
|
},
|
|
beforeRouteEnter(to, from, next) {
|
var that = this
|
let {
|
params: {
|
symbol
|
},
|
} = to;
|
let catchTradeSymbol = getStorage("tradeSymbol");
|
if (catchTradeSymbol) {
|
symbol = catchTradeSymbol;
|
}
|
if (symbol) {
|
// debugger
|
// if(that.typeindex==0){
|
// next((vm) => {
|
// vm.symbol = symbol;
|
// vm.inita(symbol);
|
// });
|
// }else{
|
next((vm) => {
|
vm.symbol = symbol;
|
vm.init(symbol);
|
});
|
// }
|
|
} else {
|
next();
|
}
|
},
|
activated() {
|
let symbol = this.$route.params.symbol;
|
let catchSymbol = getStorage("symbol");
|
if (!symbol && catchSymbol) {
|
symbol = catchSymbol;
|
}
|
if (this.selectIndex / 1 === 2) {
|
this.curTab = "fetchFutrueHoldList";
|
} else {
|
this.curTab = "fetchOrderListHold";
|
}
|
this.symbol = symbol;
|
if(this.typeindex==0){
|
this.inita(symbol);
|
}else{
|
this.init(symbol);
|
}
|
},
|
activated() {
|
this.currentType = this.$route.query.currentType
|
? this.$route.query.currentType
|
: "long";
|
},
|
deactivated() {
|
if(this.typeindex==0){
|
this.closeSocketa();
|
}else{
|
this.closeSocket();
|
}
|
this.clearTimer();
|
},
|
|
|
beforeDestroy() {
|
if(this.typeindex==0){
|
this.closeSocketa();
|
}else{
|
this.closeSocket();
|
}
|
// this.clearTimeout(true)
|
this.clearTimer();
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
//.list-enter-active, .list-leave-active {
|
// transition: all .5s;
|
// transform: translateY(30px)
|
//}
|
//.list-enter, .list-leave-to
|
// /* .list-leave-active for below version 2.1.8 */ {
|
// transform: translateY(0)
|
//}
|
.typebox_box {
|
width: 50%;
|
background-color: #9691fa;
|
color: #fff;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.typebox_boxa {
|
width: 50%;
|
background-color: #fff;
|
color: #9691fa;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.no_touch {
|
-webkit-user-select: none;
|
user-select: none;
|
-ms-user-select: none;
|
-moz-user-select: none;
|
|
@include themify() {
|
background: themed("main_background");
|
}
|
|
min-height: 100vh;
|
}
|
|
.typebox {
|
width: 100%;
|
height: 100px;
|
|
}
|
|
.list-enter-active,
|
.list-leave-active {
|
will-change: transform;
|
transition: all 250ms;
|
}
|
|
.list-enter {
|
opacity: 0;
|
transform: translate3d(-100%, 0, 0);
|
}
|
|
.list-leave {
|
opacity: 0;
|
transform: translate3d(100%, 0, 0);
|
}
|
|
.rounded-view {
|
border-top-left-radius: 20px;
|
border-top-right-radius: 20px;
|
padding: 0 30px;
|
box-sizing: border-box;
|
}
|
|
.my-swipe {
|
width: 100%;
|
}
|
|
.active-line {
|
position: relative;
|
// padding: 15px 0;
|
color: #9691fa;
|
font-weight: 600;
|
|
@include themify() {
|
// background-color: themed("color_main");
|
}
|
}
|
|
// .active-line::after {
|
// content: '';
|
// position: absolute;
|
// left: 50%;
|
// transform: translateX(-50%);
|
// bottom: 0;
|
// right: 0;
|
// width: 280px;
|
// height: 8px;
|
// @include themify() {
|
// background-color: themed("color_main");
|
// }
|
// }
|
|
.shadow {
|
bottom: 108px;
|
box-sizing: border-box;
|
}
|
|
// .textColor {
|
// color: #DAD5DC;
|
// }
|
|
.borderColor,
|
.border-solid-grey {
|
@include themify() {
|
border: 1px solid themed("border_color");
|
}
|
}
|
|
.tabBackground1 {
|
@include themify() {
|
border: 1px solid themed("border_color1");
|
}
|
}
|
|
// 下拉
|
.option-box {
|
position: absolute;
|
left: 0;
|
right: 0;
|
top: 90px;
|
width: 100%;
|
|
@include themify() {
|
background: themed("grey_bg");
|
}
|
|
text-align: center;
|
border-radius: 4px;
|
|
@include themify() {
|
color: themed("text_color3");
|
}
|
|
z-index: 10;
|
}
|
|
.option-box>div {
|
padding: 30px 0;
|
}
|
|
.option-box>div:hover {
|
// background-color: #F5F5F5;
|
}
|
|
.k-select-box {
|
position: relative;
|
top: -130px;
|
// justify-content: flex-end;
|
padding: 0 30px;
|
align-items: center;
|
|
.select-box {
|
width: 220px;
|
|
@include themify() {
|
background: themed("input_background");
|
}
|
|
margin-right: 20px;
|
}
|
}
|
|
.van-popup {
|
@include themify() {
|
background: themed("color_main");
|
}
|
}
|
|
.actions-active {
|
@include themify() {
|
background: themed("color_main") !important;
|
}
|
}
|
|
.trade {
|
|
::v-deep .van-action-sheet__item,
|
::v-deep .van-action-sheet__cancel {
|
@include themify() {
|
background: themed("input_background1");
|
}
|
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
|
::v-deep .van-action-sheet__gap {
|
@include themify() {
|
background: themed("cont_background");
|
}
|
}
|
}
|
|
.list-data {
|
margin: 30px;
|
min-height: 550px;
|
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
|
//
|
}
|
|
//.list-enter-active, .list-leave-active {
|
// transition: all .5s;
|
// transform: translateY(30px)
|
//}
|
//.list-enter, .list-leave-to
|
// /* .list-leave-active for below version 2.1.8 */ {
|
// transform: translateY(0)
|
//}
|
.no_touch {
|
-webkit-user-select: none;
|
user-select: none;
|
-ms-user-select: none;
|
-moz-user-select: none;
|
padding-bottom: 150px !important;
|
}
|
|
.list-enter-active,
|
.list-leave-active {
|
will-change: transform;
|
transition: all 250ms;
|
}
|
|
.list-enter {
|
opacity: 0;
|
transform: translate3d(-100%, 0, 0);
|
}
|
|
.list-leave {
|
opacity: 0;
|
transform: translate3d(100%, 0, 0);
|
}
|
|
.rounded-view {
|
border-top-left-radius: 20px;
|
border-top-right-radius: 20px;
|
box-sizing: border-box;
|
}
|
|
.my-swipe {
|
width: 100%;
|
}
|
|
.my-swipe .van-swipe-item {
|
}
|
|
.line {
|
height: 13px;
|
|
@include themify() {
|
background: themed("tab_background");
|
}
|
}
|
|
@keyframes animate1 {
|
0% {
|
opacity: 1;
|
transform: translate3d(100%, 0, 0);
|
}
|
|
// 40% {
|
// opacity: 1;
|
// transform: translate3d(50%, 0, 0);
|
// }
|
100% {
|
opacity: 1;
|
transform: translate3d(0%, 0, 0);
|
}
|
}
|
|
@keyframes animate2 {
|
0% {
|
opacity: 1;
|
transform: translate3d(-100%, 0, 0);
|
}
|
|
// 40% {
|
// opacity: 1;
|
// transform: translate3d(50%, 0, 0);
|
// }
|
100% {
|
opacity: 1;
|
transform: translate3d(0%, 0, 0);
|
}
|
}
|
|
.slide1 {
|
animation: animate1 200ms linear;
|
}
|
|
.slide2 {
|
animation: animate2 200ms linear;
|
}
|
|
.line {
|
@include themify() {
|
background: themed("divi_line");
|
}
|
}
|
|
::v-deep .contract-header {
|
@include themify() {
|
background: themed("main_background");
|
}
|
}
|
|
.tabBackground1 {
|
@include themify() {
|
border: 1px solid themed("border_color1");
|
}
|
}
|
|
.shadow {
|
bottom: 108px;
|
box-sizing: border-box;
|
}
|
</style>
|
