first

zzzz

2024-04-21 3f3e2d5977787b0c6e09cd5cba7b41e5fb7d3fd0

 src/page/perpetualContract/perpetualHistory.vue

@@ -1,98 +1,104 @@
<template>
   <!-- U本位合约历史 -->
   <div class="perpetualHistory">
      <assets-head :title="$t('U本位合约历史')" :backFunc="() => {
    <assets-head
      :title="$t('U本位合约历史')"
      :backFunc="
        () => {
      if ($route.query.goback) {
        $router.push({
          path: '/funds',
          query: {
            tab: 2,
            index: 0 // 0: 查看理财订单 1: 矿机
          }
        })
                index: 0, // 0: 查看理财订单 1: 矿机
              },
            });
      } else {
        //$router.push(`/perpetualContract/${symbol}?selectIndex=1`)
        $router.go(-1)
            $router.go(-1);
      }
    }" />
        }
      "
    />
      <div>
         <van-tabs ref="tabs" v-model="type" @change="onChange" sticky>
            <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">
        <van-tab
          :title="item.title"
          v-for="item in selectData"
          :key="item.title"
          :name="item.type"
        >
          <div class="all-select flex justify-end">
                  <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>
              <div class="flex-1 font-24">{{ 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
                  class="select-item font-24"
                  @click.stop="selectItem(item2)"
                  v-for="(item2, index) in currencyList"
                  :key="index"
                >
                  {{ item2.symbol.toUpperCase() }}/USDT
              </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>
               </div>
               <template v-if="type === 'orders'">
                  <van-list v-model="loading" :loading-text="$t('加载中...')" :finished="finished"
                     :finished-text="dataList.orders.length ? $t('已经全部加载完毕') : ''" @load="onLoad" :offset="130">
                     <PerpetualEntrustList v-if="type === 'orders'" :list-data="dataList.orders"
                        @recall="recall">
            <van-list
              v-model="loading"
              :loading-text="$t('加载中...')"
              :finished="finished"
              :finished-text="
                dataList.orders.length ? $t('已经全部加载完毕') : ''
              "
              @load="onLoad"
              :offset="130"
            >
              <PerpetualEntrustList
                v-if="type === 'orders'"
                :list-data="dataList.orders"
                @recall="recall"
              >
                     </PerpetualEntrustList>
                     <div class="flex flex-col justify-center pt-50 pb-20 items-center"
                        v-if="!dataList.orders.length && !loading">
                        <img src="@/assets/image/assets-center/no-data.png" alt="" class="w-180 h-180" />
                        <p class="text-grey mt-10">{{ $t('暂无记录') }}</p>
              <div
                class="flex flex-col justify-center pt-50 pb-20 items-center"
                v-if="!dataList.orders.length && !loading"
              >
                <img
                  src="@/assets/image/assets-center/no-data.png"
                  alt=""
                  class="w-180 h-180"
                />
                <p class="text-grey mt-10">{{ $t("暂无记录") }}</p>
                     </div>
                  </van-list>
               </template>

               <template v-if="type === 'hisorders'">

                  <van-list v-model="loading" :loading-text="$t('加载中...')" :finished="finished"
                     :finished-text="dataList.hisorders.length ? $t('已经全部加载完毕') : ''" @load="onLoad"
                     :offset="130">

                     <PerpetualHistoryPosition :list-data="dataList.hisorders"></PerpetualHistoryPosition>
                     <div class="flex flex-col justify-center pt-50 pb-20 items-center"
                        v-if="!dataList.hisorders.length && !loading">
                        <img src="@/assets/image/assets-center/no-data.png" alt="" class="w-180 h-180" />
                        <p class="text-grey mt-10">{{ $t('暂无记录') }}</p>
            <van-list
              v-model="loading"
              :loading-text="$t('加载中...')"
              :finished="finished"
              :finished-text="
                dataList.hisorders.length ? $t('已经全部加载完毕') : ''
              "
              @load="onLoad"
              :offset="130"
            >
              <PerpetualHistoryPosition
                :list-data="dataList.hisorders"
              ></PerpetualHistoryPosition>
              <div
                class="flex flex-col justify-center pt-50 pb-20 items-center"
                v-if="!dataList.hisorders.length && !loading"
              >
                <img
                  src="@/assets/image/assets-center/no-data.png"
                  alt=""
                  class="w-180 h-180"
                />
                <p class="text-grey mt-10">{{ $t("暂无记录") }}</p>
                     </div>
                  </van-list>
               </template>
@@ -104,39 +110,30 @@

<script>
   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 {
      _orderListCur,
      _orderListHold
   } from '@/API/trade.api'
   import {
      _getCoins
   } from '@/API/home.api'
   import {
      List,
      Tab,
      Tabs,
      DropdownMenu,
      DropdownItem
   } from 'vant';
import PerpetualEntrustList from "@/components/perpetual-entrust-list/index.vue";
import PerpetualHistoryPosition from "@/components/perpetual-history-position/index.vue";
import { _orderListCur, _orderListHold } from "@/API/trade.api";
import { _getCoins } from "@/API/home.api";
import { List, Tab, Tabs, DropdownMenu, DropdownItem } from "vant";
import { _symbolName } from "@/utils/filter";
   export default {
      data() {
         return {
            type: "orders",
            dataList: {
               orders: [],
               hisorders: []
        hisorders: [],
            },
            isAll: false,
            symbol: '',
            selectData: [{
                  title: this.$t('当前委托'),
                  type: 'orders'
      symbol: "",
      selectData: [
        {
          title: this.$t("当前委托"),
          type: "orders",
               },
               {
                  title: this.$t('历史仓位'),
                  type: 'hisorders'
          title: this.$t("历史仓位"),
          type: "hisorders",
               },
            ],
            loading: false,
@@ -145,57 +142,57 @@
         };
      },
      mounted() {
         this.getCoins()
         this.symbol = this.$route.query.symbol
    this.getCoins();
    this.symbol = this.$route.query.symbol;
      },
      methods: {
         getCoins() {
            _getCoins().then((res) => {
               console.log(res)
               this.currencyList = res
            })
        console.log(res);
        this.currencyList = res;
      });
         },
         onChange(e) {
            this.dataList[e] = []
            this.finished = false
            this.page = 1
            this.type = e
      this.dataList[e] = [];
      this.finished = false;
      this.page = 1;
      this.type = e;
            this.loading = true;
            if (this.loading) {
               this.fetchList(this.symbol)
        this.fetchList(this.symbol);
            }
         },
         onClickLeft() {
            this.$router.go(-1);
         },
         async fetchList(symbol) {
            const _api = this.type === 'orders' ? _orderListCur : _orderListHold
            const type = this.type
            _api(symbol, type, this.page).then(data => {
               this.dataList[type] = this.dataList[type].concat(data)
               this.loading = false
      const _api = this.type === "orders" ? _orderListCur : _orderListHold;
      const type = this.type;
      _api(symbol, type, this.page).then((data) => {
        this.dataList[type] = this.dataList[type].concat(data);
        this.loading = false;
               if (data.length < 10) {
                  this.finished = true
          this.finished = true;
               }
               this.page++
            })
        this.page++;
      });
         },
         recall() {
            this.page = 1;
            this.dataList.orders = []
            this.fetchList(this.symbol)
      this.dataList.orders = [];
      this.fetchList(this.symbol);
         },
         onLoad() {
            this.fetchList(this.symbol)
      this.fetchList(this.symbol);
         },
         //选择币种
         selectItem(item) {
            this.dataList[this.type] = []
            this.page = 1
            this.symbol = item.symbol
            this.fetchList(this.symbol)
            this.isAll = false
         }
      this.dataList[this.type] = [];
      this.page = 1;
      this.symbol = item.symbol;
      this.fetchList(this.symbol);
      this.isAll = false;
    },
      },
      components: {
         PerpetualEntrustList,
@@ -205,20 +202,17 @@
         [DropdownItem.name]: DropdownItem,
         [List.name]: List,
         [Tabs.name]: Tabs,
         [Tab.name]: Tab
    [Tab.name]: Tab,
      },
      beforeRouteEnter(to, from, next) {
         const {
            query: {
               symbol
            }
         } = to
         next(vm => {
            vm.symbol = symbol

         })
      }
   }
      query: { symbol },
    } = to;
    next((vm) => {
      vm.symbol = symbol;
    });
  },
};
</script>
<style lang="scss" scoped>
   .perpetualHistory {
@@ -243,7 +237,7 @@
      }

      ::v-deep .van-tab--active {
         background: #1194F7;
    background: #1194f7;
         border-radius: 5px;
         color: #fff !important;
      }
@@ -268,19 +262,17 @@

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

      }

   }

   .active-line {
      position: relative;
      padding-bottom: 30px;
      color: #1194F7;
  color: #1194f7;
   }

   .active-line::after {
      content: '';
  content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
@@ -353,7 +345,6 @@
            @include themify() {
               background: themed("input_background");
            }


            .select-item {
               padding: 20px 20px;