first

zzzz

2024-04-21 05b2cd59596baebaebe1773c4ca3ba45deacf2e8

 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&nbsp;{{ $t('k线图表') }}</span>
            <span class="font-24 textColor2"v-else-if="symbol === 'mln'">DKL/USDT&nbsp;{{ $t('k线图表') }}</span>
            <span class="font-24 textColor2"v-else-if="symbol === 'qtum'">BQHN/USDT&nbsp;{{ $t('k线图表') }}</span>
            <span class="font-24 textColor2"v-else-if="symbol === 'knc'">XCM/USDT&nbsp;{{ $t('k线图表') }}</span>
            <span class="font-24 textColor2"v-else-if="symbol === 'vet'">ACG/USDT&nbsp;{{ $t('k线图表') }}</span>
                <span class="font-24 textColor2" v-else>{{ symbol.toUpperCase() }}/USDT&nbsp;{{ $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) }}&nbsp;{{ $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>