first

zzzz

2024-04-21 05b2cd59596baebaebe1773c4ca3ba45deacf2e8

 src/page/perpetualContract/index.vue

@@ -1,58 +1,8 @@
<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"
@@ -81,8 +31,7 @@
          @changeValueBack="changeValueBack"
        >
        </PerpetualOpen>
        <div class="line"></div>
        <!-- 委托/持仓-->
        <!-- <div class="line"></div> -->
        <PerpetualOrder
          class="pl-30 pr-30"
          :key="keyIndex + 'b'"
@@ -135,24 +84,9 @@
    </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
        >
        <span class="font-24 textColor2">
          {{ symbol | _symbolName(1) }}&nbsp;{{ $t("k线图表") }}
        </span>
        <van-icon
          class="textColor"
          @click.stop="showCharts = !showCharts"
@@ -273,6 +207,8 @@
  },
  methods: {
    ...mapActions("home", [SET_COIN_LIST]),
    ...mapActions("user", ["GET_UERS_KYC"]),

    onUpdate(symbol) {
      // 更新
      this.symbol = symbol;
@@ -375,6 +311,9 @@
      });
    },
    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);
@@ -396,15 +335,34 @@
      };
    },
    startDeepSocket() {
      this.sockets.deep = new WebSocket(`${WS_URL}/3/${this.symbol}`);
      this.sockets.deep.onmessage = (evt) => {
      // 开启socket链接
      this.closeSocket();

      this.socket = new WebSocket(`${WS_URL}/3/${this.symbol}`);

      this.socket.onopen = () => {
        console.log("WebSocket connection established");
      };

      this.socket.onmessage = (evt) => {
        const { data } = evt;
        const { code, data: _data } = JSON.parse(data);
        if (code / 1 === 0) {
          this.handleDeep(_data);
        }
      };

      this.socket.onerror = (error) => {
        console.error("WebSocket error:", error);
        setTimeout(this.startDeepSocket, 5000); // 5秒后尝试重新连接
      };

      this.socket.onclose = (event) => {
        console.log("WebSocket connection closed:", event);
        // 重新连接，可以根据需求添加重连的逻辑，这里只是简单的示例
      };
    },

    initParam(symbol, type) {
      // 初始化参数
      if (type === "open" || type === "long" || type === "short" || !type) {
@@ -473,6 +431,9 @@
    },
    fetchOrderListHold(symbol) {
      // 当前持仓
      if (!symbol) {
        return;
      }
      if (this.userInfo.token) {
        _orderListHold(symbol).then((data) => {
          // this.orderHold = data
@@ -580,7 +541,7 @@
    },
  },
  mounted() {
    // this.$route.params.type;
    this.GET_UERS_KYC();
    let symbol = this.$route.params.symbol;
    let catchSymbol = getStorage("symbol");
    if (!symbol && catchSymbol) {
@@ -608,36 +569,7 @@
    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();