first

zzzz

2024-04-21 3f3e2d5977787b0c6e09cd5cba7b41e5fb7d3fd0

 src/page/perpetualContract/perpetualHistory.vue

@@ -1,369 +1,360 @@
<template>
   <!-- U本位合约历史 -->
   <div class="perpetualHistory">
      <assets-head :title="$t('U本位合约历史')" :backFunc="() => {
      if ($route.query.goback) {
        $router.push({
          path: '/funds',
          query: {
            tab: 2,
            index: 0 // 0: 查看理财订单 1: 矿机
  <!-- U本位合约历史 -->
  <div class="perpetualHistory">
    <assets-head
      :title="$t('U本位合约历史')"
      :backFunc="
        () => {
          if ($route.query.goback) {
            $router.push({
              path: '/funds',
              query: {
                tab: 2,
                index: 0, // 0: 查看理财订单 1: 矿机
              },
            });
          } else {
            //$router.push(`/perpetualContract/${symbol}?selectIndex=1`)
            $router.go(-1);
          }
        })
      } else {
        //$router.push(`/perpetualContract/${symbol}?selectIndex=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">
                  <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>
      <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">
            <div class="select-box flex" @click.stop="isAll = !isAll">
              <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.symbol.toUpperCase() }}/USDT
                </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" :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>
                  </van-list>
               </template>
            </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"
              >
              </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>
            </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>
                     </div>
                  </van-list>
               </template>
            </van-tab>
         </van-tabs>
      </div>
   </div>
          <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>
              </div>
            </van-list>
          </template>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<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';
   export default {
      data() {
         return {
            type: "orders",
            dataList: {
               orders: [],
               hisorders: []
            },
            isAll: false,
            symbol: '',
            selectData: [{
                  title: this.$t('当前委托'),
                  type: 'orders'
               },
               {
                  title: this.$t('历史仓位'),
                  type: 'hisorders'
               },
            ],
            loading: false,
            finished: false,
            page: 1,
         };
      },
      mounted() {
         this.getCoins()
         this.symbol = this.$route.query.symbol
      },
      methods: {
         getCoins() {
            _getCoins().then((res) => {
               console.log(res)
               this.currencyList = res
            })
         },
         onChange(e) {
            this.dataList[e] = []
            this.finished = false
            this.page = 1
            this.type = e
            this.loading = true;
            if (this.loading) {
               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
               if (data.length < 10) {
                  this.finished = true
               }
               this.page++
            })
         },
         recall() {
            this.page = 1;
            this.dataList.orders = []
            this.fetchList(this.symbol)
         },
         onLoad() {
            this.fetchList(this.symbol)
         },
         //选择币种
         selectItem(item) {
            this.dataList[this.type] = []
            this.page = 1
            this.symbol = item.symbol
            this.fetchList(this.symbol)
            this.isAll = false
         }
      },
      components: {
         PerpetualEntrustList,
         PerpetualHistoryPosition,
         assetsHead,
         [DropdownMenu.name]: DropdownMenu,
         [DropdownItem.name]: DropdownItem,
         [List.name]: List,
         [Tabs.name]: Tabs,
         [Tab.name]: Tab
      },
      beforeRouteEnter(to, from, next) {
         const {
            query: {
               symbol
            }
         } = to
         next(vm => {
            vm.symbol = symbol

         })
      }
   }
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 { _symbolName } from "@/utils/filter";
export default {
  data() {
    return {
      type: "orders",
      dataList: {
        orders: [],
        hisorders: [],
      },
      isAll: false,
      symbol: "",
      selectData: [
        {
          title: this.$t("当前委托"),
          type: "orders",
        },
        {
          title: this.$t("历史仓位"),
          type: "hisorders",
        },
      ],
      loading: false,
      finished: false,
      page: 1,
    };
  },
  mounted() {
    this.getCoins();
    this.symbol = this.$route.query.symbol;
  },
  methods: {
    getCoins() {
      _getCoins().then((res) => {
        console.log(res);
        this.currencyList = res;
      });
    },
    onChange(e) {
      this.dataList[e] = [];
      this.finished = false;
      this.page = 1;
      this.type = e;
      this.loading = true;
      if (this.loading) {
        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;
        if (data.length < 10) {
          this.finished = true;
        }
        this.page++;
      });
    },
    recall() {
      this.page = 1;
      this.dataList.orders = [];
      this.fetchList(this.symbol);
    },
    onLoad() {
      this.fetchList(this.symbol);
    },
    //选择币种
    selectItem(item) {
      this.dataList[this.type] = [];
      this.page = 1;
      this.symbol = item.symbol;
      this.fetchList(this.symbol);
      this.isAll = false;
    },
  },
  components: {
    PerpetualEntrustList,
    PerpetualHistoryPosition,
    assetsHead,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [List.name]: List,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
  },
  beforeRouteEnter(to, from, next) {
    const {
      query: { symbol },
    } = to;
    next((vm) => {
      vm.symbol = symbol;
    });
  },
};
</script>
<style lang="scss" scoped>
   .perpetualHistory {
      width: 100%;
      box-sizing: border-box;
      min-height: 100vh;
.perpetualHistory {
  width: 100%;
  box-sizing: border-box;
  min-height: 100vh;

      @include themify() {
         background: themed("main_background");
      }
  @include themify() {
    background: themed("main_background");
  }

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

      ::v-deep .van-tabs__nav {
         @include themify() {
            background: themed("tab_background");
         }
      }
  ::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-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 {
    @include themify() {
      background: themed("main_background");
    }
  }

      ::v-deep .van-nav-bar__title {
         @include themify() {
            color: themed("text_color");
         }
      }
  ::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__nav {
    @include themify() {
      background: themed("tab_background");
    }
  }

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

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

   }
.active-line::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  right: 0;
  width: 280px;
  height: 8px;

   .active-line {
      position: relative;
      padding-bottom: 30px;
      color: #1194F7;
   }
  @include themify() {
    background-color: themed("color_main");
  }
}

   .active-line::after {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      right: 0;
      width: 280px;
      height: 8px;
::v-deep .van-tabs {
  padding: 0 40px !important;
}

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

   ::v-deep .van-tabs {
      padding: 0 40px !important;
   }
::v-deep .van-nav-bar__title {
  @include themify() {
    color: themed("text_color");
  }
}

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

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

   ::v-deep .van-tabs__nav {
      @include themify() {
         background: themed("main_background");
      }
   }
.all-select {
  padding: 30px 30px;

   ::v-deep .van-tab--active {
      color: #fff;
   }
  .select-box {
    width: 160px;
    height: 50px;

   .all-select {
      padding: 30px 30px;
    @include themify() {
      background: themed("input_background");
    }

      .select-box {
         width: 160px;
         height: 50px;
    @include themify() {
      color: themed("text_color");
    }

         @include themify() {
            background: themed("input_background");
         }
    display: flex;
    align-items: center;
    font-size: 14px;
    padding: 0 20px;
    position: relative;

         @include themify() {
            color: themed("text_color");
         }
    .select-data {
      position: absolute;
      top: 55px;
      left: 0;
      z-index: 10;
      width: 100%;
      height: 300px;
      overflow-y: auto;

         display: flex;
         align-items: center;
         font-size: 14px;
         padding: 0 20px;
         position: relative;
      @include themify() {
        background: themed("input_background");
      }

         .select-data {
            position: absolute;
            top: 55px;
            left: 0;
            z-index: 10;
            width: 100%;
            height: 300px;
            overflow-y: auto;
      .select-item {
        padding: 20px 20px;
        text-align: center;

            @include themify() {
               background: themed("input_background");
            }


            .select-item {
               padding: 20px 20px;
               text-align: center;

               @include themify() {
                  border-bottom: 1px solid themed("border_color");
               }
            }
         }
      }
   }
        @include themify() {
          border-bottom: 1px solid themed("border_color");
        }
      }
    }
  }
}
</style>