From 05b2cd59596baebaebe1773c4ca3ba45deacf2e8 Mon Sep 17 00:00:00 2001
From: zzzz <690498789@qq.com>
Date: Sun, 21 Apr 2024 17:40:41 +0800
Subject: [PATCH] first
---
src/page/perpetualContract/index.vue | 1184 +++++++++++++++++++++++++++++++---------------------------
1 files changed, 625 insertions(+), 559 deletions(-)
diff --git a/src/page/perpetualContract/index.vue b/src/page/perpetualContract/index.vue
index ebae7d5..4120a15 100644
--- a/src/page/perpetualContract/index.vue
+++ b/src/page/perpetualContract/index.vue
@@ -1,525 +1,590 @@
<template>
- <div :key="symbol" class="pb-108 no_touch">
- <!-- 头部区 -->
- <ContractHeader v-if="symbol === 'wld'" :symbol="'FTB'" :range="range" :selectIndex="selectIndex" :balance="userInfo.balance"
- @tab="onTopTab" @update-coin="onUpdate">
- </ContractHeader>
- <ContractHeader v-else-if="symbol === 'mln'" :symbol="'DKL'" :range="range" :selectIndex="selectIndex" :balance="userInfo.balance"
- @tab="onTopTab" @update-coin="onUpdate">
- </ContractHeader>
- <ContractHeader v-else-if="symbol === 'qtum'" :symbol="'BQHN'" :range="range" :selectIndex="selectIndex" :balance="userInfo.balance"
- @tab="onTopTab" @update-coin="onUpdate">
- </ContractHeader>
- <ContractHeader v-else-if="symbol === 'knc'" :symbol="'XCM'" :range="range" :selectIndex="selectIndex" :balance="userInfo.balance"
- @tab="onTopTab" @update-coin="onUpdate">
- </ContractHeader>
- <ContractHeader v-else-if="symbol === 'vet'" :symbol="'ACG'" :range="range" :selectIndex="selectIndex" :balance="userInfo.balance"
- @tab="onTopTab" @update-coin="onUpdate">
- </ContractHeader>
- <ContractHeader v-else :symbol="symbol" :range="range" :selectIndex="selectIndex" :balance="userInfo.balance"
- @tab="onTopTab" @update-coin="onUpdate">
- </ContractHeader>
+ <div :key="symbol" class="pb-108 no_touch">
+ <!-- 头部区 -->
- <div :class="{ slide2: animated1 }" v-if="selectIndex === 1">
- <div class="mainBackground" key="x">
- <PerpetualOpen class="pl-30 pr-30" :key="keyIndex + 'a'" :selectIndex="selectIndex" :symbol="symbol"
- :green-data="bids" :red-data="asks" :price="price" :init-open="initOpen" :init-close="initClose"
- :init-futrue="initFutrue" @ordered="onOrdered" :currentType="currentType"
- @changeCurrentType="changeCurrentType" @changeValueBack="changeValueBack">
- </PerpetualOpen>
- <div class="line"></div>
- <!-- 委托/持仓-->
- <PerpetualOrder class="pl-30 pr-30" :key="keyIndex + 'b'" :symbol="symbol" :order-cur="orderCur"
- :order-hold="orderHold" :topIndex="selectIndex" :futrue-hold="futrueHold"
- :futrue-histroy="futrueHistroy" @tab="onTab" @recall="onRecall">
- </PerpetualOrder>
- </div>
- </div>
- <div :class="{ slide1: animated2 }" v-else>
- <div class="mainBackground" key="y">
- <PerpetualOpen class="pl-30 pr-30" :key="keyIndex + 'c'" :selectIndex="selectIndex" :symbol="symbol"
- :green-data="bids" :red-data="asks" :price="price" :init-open="initOpen" :init-close="initClose"
- :init-futrue="initFutrue" @ordered="onOrdered" @changeValueBack="changeValueBack">
- </PerpetualOpen>
- <div class="line"></div>
- <!-- 委托/持仓-->
- <PerpetualOrder class="pl-30 pr-30" :key="keyIndex + 'd'" :symbol="symbol" :order-cur="orderCur"
- :order-hold="orderHold" :price="price" :topIndex="selectIndex" :futrue-hold="futrueHold"
- :futrue-histroy="futrueHistroy" @tab="onTab" @recall="onRecall">
- </PerpetualOrder>
- </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"v-if="symbol === 'wld'">FTB/USDT {{ $t('k线图表') }}</span>
- <span class="font-24 textColor2"v-else-if="symbol === 'mln'">DKL/USDT {{ $t('k线图表') }}</span>
- <span class="font-24 textColor2"v-else-if="symbol === 'qtum'">BQHN/USDT {{ $t('k线图表') }}</span>
- <span class="font-24 textColor2"v-else-if="symbol === 'knc'">XCM/USDT {{ $t('k线图表') }}</span>
- <span class="font-24 textColor2"v-else-if="symbol === 'vet'">ACG/USDT {{ $t('k线图表') }}</span>
- <span class="font-24 textColor2" v-else>{{ symbol.toUpperCase() }}/USDT {{ $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>
+ <ContractHeader
+ :symbol="symbol"
+ :range="range"
+ :selectIndex="selectIndex"
+ :balance="userInfo.balance"
+ @tab="onTopTab"
+ @update-coin="onUpdate"
+ >
+ </ContractHeader>
+
+ <div :class="{ slide2: animated1 }" v-if="selectIndex === 1">
+ <div class="mainBackground" key="x">
+ <PerpetualOpen
+ class="pl-30 pr-30"
+ :key="keyIndex + 'a'"
+ :selectIndex="selectIndex"
+ :symbol="symbol"
+ :green-data="bids"
+ :red-data="asks"
+ :price="price"
+ :init-open="initOpen"
+ :init-close="initClose"
+ :init-futrue="initFutrue"
+ @ordered="onOrdered"
+ :currentType="currentType"
+ @changeCurrentType="changeCurrentType"
+ @changeValueBack="changeValueBack"
+ >
+ </PerpetualOpen>
+ <!-- <div class="line"></div> -->
+ <PerpetualOrder
+ class="pl-30 pr-30"
+ :key="keyIndex + 'b'"
+ :symbol="symbol"
+ :order-cur="orderCur"
+ :order-hold="orderHold"
+ :topIndex="selectIndex"
+ :futrue-hold="futrueHold"
+ :futrue-histroy="futrueHistroy"
+ @tab="onTab"
+ @recall="onRecall"
+ >
+ </PerpetualOrder>
+ </div>
</div>
+ <div :class="{ slide1: animated2 }" v-else>
+ <div class="mainBackground" key="y">
+ <PerpetualOpen
+ class="pl-30 pr-30"
+ :key="keyIndex + 'c'"
+ :selectIndex="selectIndex"
+ :symbol="symbol"
+ :green-data="bids"
+ :red-data="asks"
+ :price="price"
+ :init-open="initOpen"
+ :init-close="initClose"
+ :init-futrue="initFutrue"
+ @ordered="onOrdered"
+ @changeValueBack="changeValueBack"
+ >
+ </PerpetualOpen>
+ <div class="line"></div>
+ <!-- 委托/持仓-->
+ <PerpetualOrder
+ class="pl-30 pr-30"
+ :key="keyIndex + 'd'"
+ :symbol="symbol"
+ :order-cur="orderCur"
+ :order-hold="orderHold"
+ :price="price"
+ :topIndex="selectIndex"
+ :futrue-hold="futrueHold"
+ :futrue-histroy="futrueHistroy"
+ @tab="onTab"
+ @recall="onRecall"
+ >
+ </PerpetualOrder>
+ </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">
+ {{ symbol | _symbolName(1) }} {{ $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>
+ </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 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'
-import { _getHomeList } from '@/API/home.api'
-import { Popup, Swipe, SwipeItem } from 'vant';
-import { mapActions, mapGetters } from 'vuex'
-import { SET_COIN_LIST } from '@/store/const.store'
-import { WS_URL } from '@/config'
-import { getStorage } from '@/utils/utis'
-import KLineCharts from '@/components/kline-charts'
-var showLength = 7
+import {
+ _getBalance,
+ _getDeepData,
+ _initOpen,
+ _initClose,
+ _orderListCur,
+ _orderListHold,
+ _futrueOrderInit,
+ _futrueOrderList,
+} from "@/API/trade.api";
+import { _getHomeList } from "@/API/home.api";
+import { Popup, Swipe, SwipeItem } from "vant";
+import { mapActions, mapGetters } from "vuex";
+import { SET_COIN_LIST } from "@/store/const.store";
+import { WS_URL } from "@/config";
+import { getStorage } from "@/utils/utis";
+import KLineCharts from "@/components/kline-charts";
+var showLength = 7;
export default {
- name: "perpetualContract",
- components: {
- ContractHeader,
- PerpetualOpen,
- PerpetualOrder,
- [Popup.name]: Popup,
- [Swipe.name]: Swipe,
- [SwipeItem.name]: SwipeItem,
- KLineCharts
+ name: "perpetualContract",
+ components: {
+ ContractHeader,
+ PerpetualOpen,
+ PerpetualOrder,
+ [Popup.name]: Popup,
+ [Swipe.name]: Swipe,
+ [SwipeItem.name]: SwipeItem,
+ KLineCharts,
+ },
+ computed: {
+ ...mapGetters("user", ["userInfo"]),
+ ...mapGetters({
+ coinList: "home/coinList",
+ }),
+ },
+ watch: {
+ selectIndex(val) {
+ showLength = 7;
},
- computed: {
- ...mapGetters('user', ['userInfo']),
- ...mapGetters({
- coinList: 'home/coinList',
- }),
- },
- watch: {
- selectIndex(val) {
- showLength = 7
- }
- },
- data() {
- const initArr = []
- for (let i = 0; i < showLength; i++) {
- initArr.push({
- amount: '--',
- 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:'',
- initOpen: {},
- 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,
- currentType: '',
- showCharts: false
- // curRequest: [], //
- }
- },
- async created() {
+ },
+ data() {
+ const initArr = [];
+ for (let i = 0; i < showLength; i++) {
+ initArr.push({
+ amount: "--",
+ 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: "",
+ initOpen: {},
+ 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,
+ currentType: "",
+ showCharts: false,
+ // curRequest: [], //
+ };
+ },
+ 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
+ });
+ },
+ methods: {
+ ...mapActions("home", [SET_COIN_LIST]),
+ ...mapActions("user", ["GET_UERS_KYC"]),
- 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
- })
+ onUpdate(symbol) {
+ // 更新
+ this.symbol = symbol;
+ this.closeSocket();
+ this.init(symbol);
},
- methods: {
- ...mapActions('home', [SET_COIN_LIST]),
- onUpdate(symbol) { // 更新
- this.symbol = symbol
- this.closeSocket()
- this.init(symbol)
- },
- onRecall() { // 撤单or 平仓 evt
- this.clearTimer()
- _orderListHold(this.symbol).then(data => {
+ 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);
+ },
+ onOrdered(evt) {
+ // 下单过后的回调
+ this.clearTimer();
+ // this.clearTimeout()
+ 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('下单后更新数据')
+ },
+ onTab(evt) {
+ // 点击tab后的回调
+ console.log("evt", evt);
+ this.clearTimer();
+ // this.clearTimeout()
+ this.curTab = evt;
+ this[evt](this.symbol);
+ },
+ fetchQoutes(symbol) {
+ // 获取当前行情
+ _getHomeList(symbol).then((data) => {
+ // 获取行情
+ this.handleQoutes(data);
+ this.startQuoteSocket(); // socket
+ });
+ },
+ handleQoutes(data) {
+ if (data && data.length) {
+ const cur = data[0];
+ this.price = cur.close;
+ 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);
+ },
+ 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);
+ }
+ };
+ },
+ startDeepSocket() {
+ // 开启socket链接
+ this.closeSocket();
- 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)
- },
- onOrdered(evt) { // 下单过后的回调
- this.clearTimer()
- // this.clearTimeout()
- 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)
+ this.socket = new WebSocket(`${WS_URL}/3/${this.symbol}`);
- }
- //console.log('下单后更新数据')
- },
- onTab(evt) { // 点击tab后的回调
- console.log('evt', evt)
- this.clearTimer()
- // this.clearTimeout()
- this.curTab = evt
- this[evt](this.symbol)
- },
- fetchQoutes(symbol) { // 获取当前行情
- _getHomeList(symbol).then(data => { // 获取行情
- this.handleQoutes(data)
- this.startQuoteSocket() // socket
- })
- },
- handleQoutes(data) {
- if (data && data.length) {
- const cur = data[0]
- this.price = cur.close
- 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) {
- 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)
- },
- 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)
- }
- }
- },
- startDeepSocket() {
- this.sockets.deep = new WebSocket(`${WS_URL}/3/${this.symbol}`)
- this.sockets.deep.onmessage = (evt) => {
- const { data } = evt
- const { code, data: _data } = JSON.parse(data)
- if (code / 1 === 0) {
- this.handleDeep(_data)
- }
- }
- },
- 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
- })
- }
- },
- 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 = []
- }
- },
- fetchOrderListHold(symbol) { // 当前持仓
- 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 (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.socket.onopen = () => {
+ console.log("WebSocket connection established");
+ };
- 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()
+ 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);
+ // 重新连接，可以根据需求添加重连的逻辑，这里只是简单的示例
+ };
+ },
+
+ 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;
})
- },
- 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)
- }
- },
- closeSocket() {
- this.sockets.quotes && this.sockets.quotes.close()
- this.sockets.deep && this.sockets.deep.close()
- this.sockets.quotes = null
- this.sockets.deep = null
- },
- // clearTimeout(noNeed) {
- // clearTimeout(this.timeout)
- // if (noNeed) { // 防止timout定时器因接口返回继续触发
- // this.timeout = ''
- // return
- // }
- // this.timeout = null
- // },
- clearTimer() {
- clearInterval(this.timer)
- // if (isNeed) {
- // this.timer = ''
+ .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;
+ });
+ }
+ },
+ 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.timer = null
- },
- changeCurrentType(type) {
- this.currentType = type
- },
- changeValueBack(val) {
- if (val == 0) {
- showLength = 7
- } else {
- showLength = 13
- }
- },
- sortData(a, b) {
- return new Date(b.open_time).getTime() - new Date(a.open_time).getTime()
- }
+ this.orderCur = data;
+ });
+ }, 1000);
+ } else {
+ this.orderCur = [];
+ }
},
- mounted() {
- 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
- this.init(symbol)
+ 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 = [];
+ }
},
- 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
- this.init(symbol)
- },
- // beforeRouteEnter(to, from, next) {
- // let { params: { symbol }, query: { selectIndex } } = to
- // // if(this.$route.query.selectIndex) {
- // // this.selectIndex = this.$route.query.selectIndex
- // // }
- // let catchSymbol = getStorage('symbol')
- // if (!symbol && catchSymbol) {
- // symbol = catchSymbol
- // }
- // if (symbol) {
- // next(vm => {
- // if (selectIndex) {
- // vm.selectIndex = selectIndex
- // if (vm.selectIndex / 1 === 2) {
- // vm.curTab = 'fetchFutrueHoldList'
- // } else {
- // //vm.curTab = 'fetchOrderListCur'
- // vm.curTab = 'fetchOrderListHold'
- // }
- // } else {
- // //vm.curTab = 'fetchOrderListCur'
- // vm.curTab = 'fetchOrderListHold'
- // }
- // vm.symbol = symbol
- // vm.init(symbol)
- // })
- // } else {
- // next()
- // }
- // },
- deactivated() {
- this.closeSocket()
- this.clearTimer()
- },
- activated() {
- this.currentType = this.$route.query.currentType ? this.$route.query.currentType : 'long'
- },
- beforeDestroy() {
- this.closeSocket()
- // this.clearTimeout(true)
- this.clearTimer()
- }
-}
+ fetchFutrueHoldList(symbol) {
+ // 交割持仓
+ 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()
+ });
+ },
+ 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);
+ }
+ },
+ closeSocket() {
+ this.sockets.quotes && this.sockets.quotes.close();
+ this.sockets.deep && this.sockets.deep.close();
+ this.sockets.quotes = null;
+ this.sockets.deep = null;
+ },
+ // clearTimeout(noNeed) {
+ // clearTimeout(this.timeout)
+ // if (noNeed) { // 防止timout定时器因接口返回继续触发
+ // this.timeout = ''
+ // return
+ // }
+ // this.timeout = null
+ // },
+ clearTimer() {
+ clearInterval(this.timer);
+ // if (isNeed) {
+ // this.timer = ''
+ // return
+ // }
+ this.timer = null;
+ },
+ changeCurrentType(type) {
+ this.currentType = type;
+ },
+ changeValueBack(val) {
+ if (val == 0) {
+ showLength = 7;
+ } else {
+ showLength = 13;
+ }
+ },
+ sortData(a, b) {
+ return new Date(b.open_time).getTime() - new Date(a.open_time).getTime();
+ },
+ },
+ mounted() {
+ this.GET_UERS_KYC();
+ 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;
+ this.init(symbol);
+ },
+ 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;
+ this.init(symbol);
+ },
+
+ deactivated() {
+ this.closeSocket();
+ this.clearTimer();
+ },
+ activated() {
+ this.currentType = this.$route.query.currentType
+ ? this.$route.query.currentType
+ : "long";
+ },
+ beforeDestroy() {
+ this.closeSocket();
+ // this.clearTimeout(true)
+ this.clearTimer();
+ },
+};
</script>
<style lang="scss" scoped>
@@ -532,109 +597,110 @@
// transform: translateY(0)
//}
.no_touch {
- -webkit-user-select: none;
- user-select: none;
- -ms-user-select: none;
- -moz-user-select: none;
- padding-bottom: 150px !important;
+ -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;
+ will-change: transform;
+ transition: all 250ms;
}
.list-enter {
- opacity: 0;
- transform: translate3d(-100%, 0, 0);
+ opacity: 0;
+ transform: translate3d(-100%, 0, 0);
}
.list-leave {
- opacity: 0;
- transform: translate3d(100%, 0, 0);
+ opacity: 0;
+ transform: translate3d(100%, 0, 0);
}
.rounded-view {
- border-top-left-radius: 20px;
- border-top-right-radius: 20px;
- box-sizing: border-box;
+ border-top-left-radius: 20px;
+ border-top-right-radius: 20px;
+ box-sizing: border-box;
}
.my-swipe {
- width: 100%;
+ width: 100%;
}
-.my-swipe .van-swipe-item {}
+.my-swipe .van-swipe-item {
+}
.line {
- height: 13px;
+ height: 13px;
- @include themify() {
- background: themed("tab_background");
- }
+ @include themify() {
+ background: themed("tab_background");
+ }
}
@keyframes animate1 {
- 0% {
- opacity: 1;
- transform: translate3d(100%, 0, 0);
- }
+ 0% {
+ opacity: 1;
+ transform: translate3d(100%, 0, 0);
+ }
- // 40% {
- // opacity: 1;
- // transform: translate3d(50%, 0, 0);
- // }
- 100% {
- opacity: 1;
- transform: translate3d(0%, 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);
- }
+ 0% {
+ opacity: 1;
+ transform: translate3d(-100%, 0, 0);
+ }
- // 40% {
- // opacity: 1;
- // transform: translate3d(50%, 0, 0);
- // }
- 100% {
- opacity: 1;
- transform: translate3d(0%, 0, 0);
- }
+ // 40% {
+ // opacity: 1;
+ // transform: translate3d(50%, 0, 0);
+ // }
+ 100% {
+ opacity: 1;
+ transform: translate3d(0%, 0, 0);
+ }
}
.slide1 {
- animation: animate1 200ms linear;
+ animation: animate1 200ms linear;
}
.slide2 {
- animation: animate2 200ms linear;
+ animation: animate2 200ms linear;
}
.line {
- @include themify() {
- background: themed("divi_line");
- }
+ @include themify() {
+ background: themed("divi_line");
+ }
}
::v-deep .contract-header {
- @include themify() {
- background: themed("main_background");
- }
+ @include themify() {
+ background: themed("main_background");
+ }
}
.tabBackground1 {
- @include themify() {
- border: 1px solid themed("border_color1");
- }
+ @include themify() {
+ border: 1px solid themed("border_color1");
+ }
}
.shadow {
- bottom: 108px;
- box-sizing: border-box;
+ bottom: 108px;
+ box-sizing: border-box;
}
</style>
--
Gitblit v1.9.3