From 0b909dcd3e4c925b23c69a375a5077fb733766aa Mon Sep 17 00:00:00 2001
From: jhzh <1628036192@qq.com>
Date: Thu, 15 Aug 2024 14:07:52 +0800
Subject: [PATCH] 1
---
src/page/trade/index.vue | 6
src/components/perpetual-open/index.vue | 6
src/router/router.js | 2
src/page/TtrendDetails/index.vue | 2
src/page/perpetualContract/index.vue | 1338 +++++++++++++++++++++++++++++----------------------------
src/components/kline-charts/index.vue | 2
6 files changed, 694 insertions(+), 662 deletions(-)
diff --git a/src/components/kline-charts/index.vue b/src/components/kline-charts/index.vue
index a008bc1..8464840 100644
--- a/src/components/kline-charts/index.vue
+++ b/src/components/kline-charts/index.vue
@@ -168,7 +168,7 @@
chart.applyNewData(data);
this.$emit('updataLine', false)
})
- }, 10000);
+ }, 1000);
},
setChartType() {
let type = 'area'
diff --git a/src/components/perpetual-open/index.vue b/src/components/perpetual-open/index.vue
index b12dc59..d09b07b 100644
--- a/src/components/perpetual-open/index.vue
+++ b/src/components/perpetual-open/index.vue
@@ -64,7 +64,7 @@
</div>
<div class="text-right items-end justify-end">
<div class="">{{ $t("数量") }}</div>
- <div class="mt-4" v-if="symbol=='love'">(ORBITAL)</div>
+ <div class="mt-4" v-if="symbol=='MOTHER'">(ORBITAL)</div>
<div class="mt-4" v-else>({{ symbol | _symbolName() }})</div>
</div>
</div>
@@ -664,7 +664,7 @@
obj = this.initOpen;
if (!obj.lever || !obj.lever.length) {
// 倍数
- obj.lever = [{ id: 1, lever_rate: 1 }];
+ obj.lever = [{ id: 1, lever_rate: 100 }];
}
return obj;
}
@@ -705,7 +705,7 @@
session_token: "",
direction: "buy", // 买or卖
price_type: "opponent", // 市价or限价
- lever_rate: 1, // 杠杆
+ lever_rate: 100, // 杠杆
stop_price_profit: "",
stop_price_loss: "",
price: "",
diff --git a/src/page/TtrendDetails/index.vue b/src/page/TtrendDetails/index.vue
index f288135..92b6670 100644
--- a/src/page/TtrendDetails/index.vue
+++ b/src/page/TtrendDetails/index.vue
@@ -16,7 +16,7 @@
<trade-head
@openRecord="openRecord"
:backFunc="() => $router.push('/')"
- :symbol="symbol=='love'?'ORBITAL':symbol.toUpperCase()"
+ :symbol="symbol=='mother'?'ORBITAL':symbol.toUpperCase()"
:islevel="true"
@update-coin="onUpdate"
@data="quote = $event"
diff --git a/src/page/perpetualContract/index.vue b/src/page/perpetualContract/index.vue
index c735903..e7a3c5e 100644
--- a/src/page/perpetualContract/index.vue
+++ b/src/page/perpetualContract/index.vue
@@ -1,692 +1,720 @@
<template>
- <div :key="symbol" class="pb-108 no_touch">
+ <div :key="symbol" class="pb-108 no_touch">
+
+ <!-- 头部区 -->
+ <ContractHeader
+ :symbol="symbol"
+ :newname="newname"
+ :range="range"
+ :selectIndex="selectIndex"
+ :balance="userInfo.balance"
+ @tab="onTopTab"
+ @update-coin="onUpdate"
+ >
+ </ContractHeader>
- <!-- 头部区 -->
-
- <ContractHeader :symbol="symbol" :newname="newname" :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"
- @iszyzs="oniszyzs">
- </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" @iszyzs="oniszyzs">
- </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">
- {{ 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>
- </div>
+ <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"
+ @iszyzs="oniszyzs"
+ >
+ </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"
+ @iszyzs="oniszyzs"
+ >
+ </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">
+ {{ 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>
+ </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;
- export default {
- 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;
- },
- },
- data() {
- const initArr = [];
- for (let i = 0; i < showLength; i++) {
- initArr.push({
- amount: "--",
- price: "--",
- });
- }
- return {
+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,
+ },
+ 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: "",
- newname: '',
- 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"]),
+ quote: {},
+ initTimer: null,
+ keyIndex: 0,
+ timeout: null,
+ timer: null, // 底部持仓等的公用定时器
+ timer1: null, // tab切换动画
+ timer2: null, // 交割合约底部持仓等的公用定时器
+ balance: 0,
+ symbol: "",
+ price: "",
+ newname:'',
+ 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"]),
- onUpdate(symbol) {
- // 更新
- this.symbol = symbol;
- this.closeSocket();
- this.init(symbol);
- },
- oniszyzs() {
- this.iszyzs = true
- },
- 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(); // k线socket
- this.startDeepSocket(); // socket
- });
- },
- handleQoutes(data) {
- if (data && data.length) {
- const cur = data[0];
- this.price = cur.close;
- this.range = cur.change_ratio + "";
- this.newname = cur.name
- 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();
+ onUpdate(symbol) {
+ // 更新
+ this.symbol = symbol;
+ this.closeSocket();
+ this.init(symbol);
+ },
+ oniszyzs(){
+ debugger
+ this.iszyzs = true
+ },
+ 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.newname = cur.name
+ 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.socket = new WebSocket(`${WS_URL}/3/${this.symbol}`);
+ this.socket = new WebSocket(`${WS_URL}/3/${this.symbol}`);
- this.socket.onopen = () => {
- console.log("WebSocket connection established");
- };
+ 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.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.onerror = (error) => {
+ console.error("WebSocket error:", error);
+ setTimeout(this.startDeepSocket, 5000); // 5秒后尝试重新连接
+ };
- this.socket.onclose = (event) => {
- console.log("WebSocket connection closed:", event);
- // 重新连接，可以根据需求添加重连的逻辑，这里只是简单的示例
- };
- },
+ 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;
- })
- .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 (!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
- // }
+ 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 (!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()
- });
- },
- 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);
- },
+ 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();
- },
- };
+ 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>
- //.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 {
+// 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-active,
+.list-leave-active {
+ will-change: transform;
+ transition: all 250ms;
+}
- .list-enter {
- opacity: 0;
- transform: translate3d(-100%, 0, 0);
- }
+.list-enter {
+ opacity: 0;
+ transform: translate3d(-100%, 0, 0);
+}
- .list-leave {
- 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;
- }
+.rounded-view {
+ border-top-left-radius: 20px;
+ border-top-right-radius: 20px;
+ box-sizing: border-box;
+}
- .my-swipe {
- width: 100%;
- }
+.my-swipe {
+ width: 100%;
+}
- .my-swipe .van-swipe-item {}
+.my-swipe .van-swipe-item {
+}
- .line {
- height: 13px;
+.line {
+ height: 13px;
- @include themify() {
- background: themed("tab_background");
- }
- }
+ @include themify() {
+ background: themed("tab_background");
+ }
+}
- @keyframes animate1 {
- 0% {
- opacity: 1;
- transform: translate3d(100%, 0, 0);
- }
+@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);
- }
- }
+ // 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);
- }
+@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);
- }
- }
+ // 40% {
+ // opacity: 1;
+ // transform: translate3d(50%, 0, 0);
+ // }
+ 100% {
+ opacity: 1;
+ transform: translate3d(0%, 0, 0);
+ }
+}
- .slide1 {
- animation: animate1 200ms linear;
- }
+.slide1 {
+ animation: animate1 200ms linear;
+}
- .slide2 {
- animation: animate2 200ms linear;
- }
+.slide2 {
+ animation: animate2 200ms linear;
+}
- .line {
- @include themify() {
- background: themed("divi_line");
- }
- }
+.line {
+ @include themify() {
+ background: themed("divi_line");
+ }
+}
- ::v-deep .contract-header {
- @include themify() {
- background: themed("main_background");
- }
- }
+::v-deep .contract-header {
+ @include themify() {
+ background: themed("main_background");
+ }
+}
- .tabBackground1 {
- @include themify() {
- border: 1px solid themed("border_color1");
- }
- }
+.tabBackground1 {
+ @include themify() {
+ border: 1px solid themed("border_color1");
+ }
+}
- .shadow {
- bottom: 108px;
- box-sizing: border-box;
- }
-</style>
\ No newline at end of file
+.shadow {
+ bottom: 108px;
+ box-sizing: border-box;
+}
+</style>
diff --git a/src/page/trade/index.vue b/src/page/trade/index.vue
index cad1604..93962a6 100644
--- a/src/page/trade/index.vue
+++ b/src/page/trade/index.vue
@@ -370,6 +370,9 @@
this.curTab = "fetchOrderListHold";
}
this.symbol = symbol;
+ // if(this.symbol == 'ORBITAL'){
+ // this.symbol = 'mother'
+ // }
if (this.typeindex == 0) {
this.inita(symbol);
} else {
@@ -729,7 +732,8 @@
if (type === "open" || type === "long" || type === "short" || !type) {
let initFunTimer = null;
let initFun = () => {
- _initOpen(symbol)
+
+ _initOpen(symbol.toLowerCase())
.then((data) => {
this.initOpen = data;
clearTimeout(initFunTimer);
diff --git a/src/router/router.js b/src/router/router.js
index d9f4292..3f9bbaa 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -510,7 +510,7 @@
{
path: "/trade/:symbol",
name: "Trade",
- meta: { footer: true, keepAlive: true },
+ meta: { footer: true, keepAlive: true, requireAuth: true },
component: () =>
import(
/* webpackChunkName: "Home" */ /* webpackPrefetch: true */ "@/page/trade/index.vue"
--
Gitblit v1.9.3