123

dcc

2024-06-28 25b2ba1cf86bc3439e7ad2acf2cd4a9ea7e4b0ed

 src/page/perpetualContract/index.vue

@@ -1,59 +1,11 @@
<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"
     :newname="newname"
      :range="range"
      :selectIndex="selectIndex"
      :balance="userInfo.balance"
@@ -112,6 +64,7 @@
          :init-futrue="initFutrue"
          @ordered="onOrdered"
          @changeValueBack="changeValueBack"
        @iszyzs="oniszyzs"
        >
        </PerpetualOpen>
        <div class="line"></div>
@@ -128,30 +81,16 @@
          :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" 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 class="font-24 textColor2">
          {{ symbol | _symbolName(1) }}&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"
@@ -223,6 +162,7 @@
      });
    }
    return {

      quote: {},
      initTimer: null,
      keyIndex: 0,
@@ -233,6 +173,7 @@
      balance: 0,
      symbol: "",
      price: "",
     newname:'',
      range: "",
      stop_price_profit: "",
      stop_price_loss: "",
@@ -272,12 +213,18 @@
  },
  methods: {
    ...mapActions("home", [SET_COIN_LIST]),
    ...mapActions("user", ["GET_UERS_KYC"]),

    onUpdate(symbol) {
      // 更新
      this.symbol = symbol;
      this.closeSocket();
      this.init(symbol);
    },
   oniszyzs(){
      debugger
      this.iszyzs = true
   },
    onRecall() {
      // 撤单or 平仓 evt
      this.clearTimer();
@@ -360,6 +307,7 @@
        const cur = data[0];
        this.price = cur.close;
        this.range = cur.change_ratio + "";
      this.newname = cur.name
        this.quote = cur;
        this.updateKey++;
      }
@@ -374,6 +322,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);
@@ -395,15 +346,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) {
@@ -472,6 +442,9 @@
    },
    fetchOrderListHold(symbol) {
      // 当前持仓
      if (!symbol) {
        return;
      }
      if (this.userInfo.token) {
        _orderListHold(symbol).then((data) => {
          // this.orderHold = data
@@ -492,6 +465,9 @@
      }
    },
    fetchFutrueHoldList(symbol) {
      if (!symbol) {
        return;
      }
      // 交割持仓
      if (this.userInfo.token) {
        let length = 0;
@@ -579,6 +555,7 @@
    },
  },
  mounted() {
    this.GET_UERS_KYC();
    let symbol = this.$route.params.symbol;
    let catchSymbol = getStorage("symbol");
    if (!symbol && catchSymbol) {
@@ -606,36 +583,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();
@@ -654,6 +602,7 @@
</script>

<style lang="scss" scoped>
	
//.list-enter-active, .list-leave-active {
//  transition: all .5s;
//  transform: translateY(30px)