当前持仓添加轮询

lxf

2025-06-30 0d7c0aa6baba05bfeefd7dd7f37e63a9752caf90

 src/page/perpetualContract/perpetualHistory.vue

@@ -2,7 +2,7 @@
  <!-- U本位合约历史 -->
  <div class="perpetualHistory">
    <assets-head
      :title="$t('U本位合约历史')"
      :title="$t('委托订单')"
      :backFunc="
        () => {
          if ($route.query.goback) {
@@ -21,67 +21,13 @@
      "
    />
    <div>
      <van-tabs ref="tabs" v-model="type" @change="onChange" sticky>
      <van-tabs ref="tabs" v-model="type" @change="onChange">
        <van-tab
          :title="item.title"
          v-for="item in selectData"
          :key="item.title"
          :name="item.type"
        >
          <!-- <div class="all-select flex justify-end" v-if="symbol">
            <div class="select-box flex" @click.stop="isAll = !isAll"> -->
          <!-- <div class="flex-1 font-24" v-if="symbol === 'wld'">FTB/USDT</div>
              <div class="flex-1 font-24" v-else-if="symbol === 'mln'">
                DKL/USDT
              </div>
              <div class="flex-1 font-24" v-else-if="symbol === 'qtum'">
                BQHN/USDT
              </div>
              <div class="flex-1 font-24" v-else-if="symbol === 'knc'">
                XCM/USDT
              </div>
              <div class="flex-1 font-24" v-else-if="symbol === 'vet'">
                ACG/USDT
              </div> -->

          <!-- <div class="flex-1 font-24" v-else>
                {{ symbol.toUpperCase() }}/USDT
              </div>
              <van-icon name="arrow-down" />
              <div class="select-data" v-if="isAll">
                <div
                  class="select-item font-24"
                  @click.stop="selectItem(item2)"
                  v-for="(item2, index) in currencyList"
                  :key="index"
                >
                  {{ item2.symbolFullName }}
                </div>
              </div> -->
          <!--       <div data-v-5764026c="" class="select-data"  @click.stop="selectItem(item2)" v-if="isAll">
                        <div data-v-5764026c="" class="select-item font-24">WLD/USDT</div>
                        <div data-v-5764026c="" class="select-item font-24">WDC/USDT</div>
                        <div data-v-5764026c="" class="select-item font-24">BTC/USDT</div>
                        <div data-v-5764026c="" class="select-item font-24">ETH/USDT</div>
                        <div data-v-5764026c="" class="select-item font-24">XTZ/USDT</div>
                        <div data-v-5764026c="" class="select-item font-24">ADA/USDT</div>
                        <div data-v-5764026c="" class="select-item font-24">YFII/USDT</div>
                        <div data-v-5764026c="" class="select-item font-24">MLN/USDT</div>
                        <div data-v-5764026c="" class="select-item font-24">YFI/USDT</div>
                        <div data-v-5764026c="" class="select-item font-24">DAI/USDT</div>
                        <div data-v-5764026c="" class="select-item font-24">ETC/USDT</div>
                        <div data-v-5764026c="" class="select-item font-24">XRP/USDT</div>
                        <div data-v-5764026c="" class="select-item font-24">LTC/USDT</div>
                        <div data-v-5764026c="" class="select-item font-24">USDC/USDT</div>
                        <div data-v-5764026c="" class="select-item font-24">KNC/USDT</div>
                        <div data-v-5764026c="" class="select-item font-24">DOGE/USDT</div>
                        <div data-v-5764026c="" class="select-item font-24">VET/USDT</div>
                        <div data-v-5764026c="" class="select-item font-24">SHIB/USDT</div>
                        <div data-v-5764026c="" class="select-item font-24">QTUM/USDT</div>
                        <div data-v-5764026c="" class="select-item font-24">ICP/USDT</div>
                     </div> -->
          <!-- </div>
          </div> -->
          <template v-if="type === 'orders'">
            <van-list
              v-model="loading"
@@ -103,12 +49,12 @@
                class="flex flex-col justify-center pt-50 pb-20 items-center"
                v-if="!dataList.orders.length && !loading"
              >
                <img
                <!-- <img
                  src="@/assets/image/assets-center/no-data.png"
                  alt=""
                  class="w-180 h-180"
                />
                <p class="text-grey mt-10">{{ $t("暂无记录") }}</p>
                /> -->
                <!-- <p class="text-grey mt-10">{{ $t("暂无记录") }}</p> -->
              </div>
            </van-list>
          </template>
@@ -140,6 +86,12 @@
              </div>
            </van-list>
          </template>

          <div v-if="type === 'position'">
            <PerpetualPositionList
              :list-data="orderHold"
            ></PerpetualPositionList>
          </div>
        </van-tab>
      </van-tabs>
    </div>
@@ -150,6 +102,7 @@
import assetsHead from "@/components/assets-head";
import PerpetualEntrustList from "@/components/perpetual-entrust-list/index.vue";
import PerpetualHistoryPosition from "@/components/perpetual-history-position/index.vue";
import PerpetualPositionList from "@/components/perpetual-position-list/index.vue";
import { _orderListCur, _orderListHold } from "@/API/trade.api";
import { _getCoins } from "@/API/home.api";
import { List, Tab, Tabs, DropdownMenu, DropdownItem } from "vant";
@@ -157,6 +110,7 @@
  data() {
    return {
      type: "orders",
      orderHold: [], // 永续持有仓位
      dataList: {
        orders: [],
        hisorders: [],
@@ -169,18 +123,35 @@
          type: "orders",
        },
        {
          title: this.$t("历史仓位"),
          title: this.$t("历史委托"),
          type: "hisorders",
        },
        {
          title: this.$t("当前持仓"),
          type: "position",
        },
      ],
      loading: false,
      finished: false,
      page: 1,
      pollTimer: null,
    };
  },
  mounted() {
    this.getCoins();
    // this.symbol = this.$route.query.symbol;
  },
  watch: {
    type(newVal) {
      if (newVal === "position") {
        this.startPolling();
      } else {
        this.stopPolling();
      }
    },
  },
  beforeDestroy() {
    this.stopPolling();
  },
  methods: {
    getCoins() {
@@ -202,7 +173,25 @@
    onClickLeft() {
      this.$router.go(-1);
    },
    startPolling() {
      if (this.pollTimer) return;
      this.pollTimer = setInterval(() => {
        this.fetchList(); // 你的轮询方法
      }, 1500); // 3秒轮询一次，可根据需要调整
    },
    stopPolling() {
      if (this.pollTimer) {
        clearInterval(this.pollTimer);
        this.pollTimer = null;
      }
    },
    async fetchList(symbol) {
      if (this.type === "position") {
        _orderListHold().then((data) => {
          this.orderHold = data;
        });
        return;
      }
      const _api = this.type === "orders" ? _orderListCur : _orderListHold;
      const type = this.type;
      symbol = "";
@@ -235,6 +224,7 @@
  components: {
    PerpetualEntrustList,
    PerpetualHistoryPosition,
    PerpetualPositionList,
    assetsHead,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
@@ -261,46 +251,61 @@
  @include themify() {
    background: themed("main_background");
  }

  ::v-deep .van-tab {
    @include themify() {
      color: themed("text_color");
    }
    width: 10rem;
    flex: none;
  }

  ::v-deep .van-tabs__nav {
    @include themify() {
      background: themed("tab_background");
    }
  }

  ::v-deep .van-tab--active {
    background: #1194f7;
    border-radius: 5px;
    color: #fff !important;
  }

  ::v-deep .van-nav-bar {
    @include themify() {
      background: themed("main_background");
    }
  }

  ::v-deep .van-nav-bar__title {
    @include themify() {
      color: themed("text_color");
    }
  }

  ::v-deep .van-tabs__nav {
    @include themify() {
      background: themed("tab_background");
    }
  }

  ::v-deep .van-tabs__line {
    background-color: transparent !important;
    background: rgb(247, 179, 40);
  }
  ::v-deep .van-tab--active {
    color: rgb(247, 179, 40);
  }

  // ::v-deep .van-tab {
  //   @include themify() {
  //     color: themed("text_color");
  //   }
  // }

  // ::v-deep .van-tabs__nav {
  //   @include themify() {
  //     background: themed("tab_background");
  //   }
  // }

  // ::v-deep .van-tab--active {
  //   background: #1194f7;
  //   border-radius: 5px;
  //   color: #fff !important;
  // }

  // ::v-deep .van-nav-bar {
  //   @include themify() {
  //     background: themed("main_background");
  //   }
  // }

  // ::v-deep .van-nav-bar__title {
  //   @include themify() {
  //     color: themed("text_color");
  //   }
  // }

  // ::v-deep .van-tabs__nav {
  //   @include themify() {
  //     background: themed("tab_background");
  //   }
  // }

  // ::v-deep .van-tabs__line {
  //   background-color: transparent !important;
  // }
}

.active-line {