first commit

huzheng12

2024-05-06 3ed2cb78a690b64c3b2646d35e1500081186dfa3

 src/page/DeliveryContractHistory/index.vue

@@ -1,55 +1,101 @@
<template>
  <div class="DeliveryContractHistory">
    <assets-head :title="$t('交割合约历史')" :backFunc="() => {
      if ($route.query.goback) {
        $router.push({
          path: '/funds',
          query: {
            tab: 2,
            index: 1// 0: 查看理财订单 1: 矿机
    <assets-head
      :title="$t('交割合约历史')"
      :backFunc="
        () => {
          if ($route.query.goback) {
            $router.push({
              path: '/funds',
              query: {
                tab: 2,
                index: 1, // 0: 查看理财订单 1: 矿机
              },
            });
          } else {
            $router.go(-1);
          }
        })
      } else {
        $router.go(-1)
      }

    }" />
        }
      "
    />
    <div class="px-32">
      <van-tabs ref="tabs" v-model="type" swipeable @change="onChange" sticky>
        <van-tab :title="item.title" v-for="item in selectData" :key="item.title" :name="item.type">
        <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">
                {{ symbol.toUpperCase() }}/USDT
              </div>
              <div class="flex-1">{{ symbol.toUpperCase() }}/USDT</div>
              <van-icon name="arrow-down" />
              <div class="select-data" v-if="isAll">
                <div class="select-item" @click.stop="selectItem(item2)" v-for="(item2, index) in currencyList"
                  :key="index">{{ item2.symbol.toUpperCase() || item2.symbol }}/USDT</div>
                <div
                  class="select-item"
                  @click.stop="selectItem(item2)"
                  v-for="(item2, index) in currencyList"
                  :key="index"
                >
                  {{ item2.symbol.toUpperCase() || item2.symbol }}/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="30">
              <futrue-hold-list v-if="type === 'orders'" :list-data="dataList.orders">
            <van-list
              v-model="loading"
              :loading-text="$t('加载中...')"
              :finished="finished"
              :finished-text="
                dataList.orders.length ? $t('已经全部加载完毕') : ''
              "
              @load="onLoad"
              :offset="30"
            >
              <futrue-hold-list
                v-if="type === 'orders'"
                :list-data="dataList.orders"
              >
              </futrue-hold-list>
              <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="30">
              <futrue-histroy-position :list-data="dataList.hisorders"></futrue-histroy-position>
              <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="30"
            >
              <futrue-histroy-position
                :list-data="dataList.hisorders"
              ></futrue-histroy-position>
              <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>
@@ -59,10 +105,10 @@
  </div>
</template>
<script>
import { List, Tab, Tabs, DropdownMenu, DropdownItem } from 'vant';
import futrueHoldList from '@/page/deliveryContract/hold.vue'
import futrueHistroyPosition from '@/page/deliveryContract/position.vue'
import { _futrueOrderList } from '@/API/trade.api'
import { List, Tab, Tabs, DropdownMenu, DropdownItem } from "vant";
import futrueHoldList from "@/page/deliveryContract/hold.vue";
import futrueHistroyPosition from "@/page/deliveryContract/position.vue";
import { _futrueOrderList } from "@/API/trade.api";
import assetsHead from "@/components/assets-head";
import { _getCoins } from "@/API/home.api";
export default {
@@ -71,18 +117,18 @@
      type: "orders",
      dataList: {
        orders: [],
        hisorders: []
        hisorders: [],
      },
      isAll: false,
      symbol: '',
      symbol: "",
      selectData: [
        { title: this.$t('当前委托'), type: 'orders' },
        { title: this.$t('历史仓位'), type: 'hisorders' },
        { title: this.$t("当前委托"), type: "orders" },
        { title: this.$t("历史仓位"), type: "hisorders" },
      ],
      loading: false,
      finished: false,
      page: 1,
    }
    };
  },
  components: {
    [Tab.name]: Tab,
@@ -90,62 +136,64 @@
    [List.name]: List,
    futrueHoldList,
    futrueHistroyPosition,
    assetsHead
    assetsHead,
  },
  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.fetchData(this.symbol, this.type)
        this.fetchData(this.symbol, this.type);
      }
    },
    onClickLeft() {
      this.$router.go(-1)
      this.$router.go(-1);
    },
    fetchData(symbol) {
      // TODO: 分页
      _futrueOrderList(symbol, this.type, this.page).then(data => {
        this.dataList[this.type] = this.dataList[this.type].concat(data)
        this.loading = false
      _futrueOrderList(symbol, this.type, this.page).then((data) => {
        this.dataList[this.type] = this.dataList[this.type].concat(data);
        this.loading = false;
        if (data.length < 10) {
          this.finished = true
          this.finished = true;
        }
        this.page++
      })
        this.page++;
      });
    },
    onLoad() {
      this.fetchData(this.symbol, this.type)
      this.fetchData(this.symbol, this.type);
    },
    //选择币种
    selectItem(item) {
      this.page = 1
      this.symbol = item.symbol
      this.dataList[this.type] = []
      this.fetchData(this.symbol, this.type)
      this.isAll = false
    }
      this.page = 1;
      this.symbol = item.symbol;
      this.dataList[this.type] = [];
      this.fetchData(this.symbol, this.type);
      this.isAll = false;
    },
  },
  beforeRouteEnter(to, from, next) {
    const { query: { symbol } } = to
    next(vm => {
      vm.symbol = symbol
    })
  }
}
    const {
      query: { symbol },
    } = to;
    next((vm) => {
      vm.symbol = symbol;
    });
  },
};
</script>
<style lang="scss" scoped>
.DeliveryContractHistory {
@@ -170,7 +218,7 @@
  }

  ::v-deep .van-tab--active {
    background: #1194F7;
    background: #1194f7;
    border-radius: 5px;
    color: #fff !important;
  }
@@ -195,7 +243,6 @@

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

  }

  .position-padding {
@@ -215,7 +262,7 @@
        font-style: normal;
        font-weight: 400;
        font-size: 26.4981px;
        color: #FFFFFF;
        color: #ffffff;
      }

      .position-tag-title {
@@ -229,7 +276,7 @@
        font-style: normal;
        font-weight: 400;
        font-size: 30.9145px;
        color: #848E9C;
        color: #848e9c;
      }

      .position-tag-img {
@@ -240,12 +287,12 @@
    }

    .red {
      background: #F6465D;
      background: #f6465d;
      border-radius: 6.6266px;
    }

    .green {
      background: #5EBA89;
      background: #5eba89;
      border-radius: 6.62453px;
    }

@@ -259,7 +306,7 @@
        font-style: normal;
        font-weight: 400;
        font-size: 30px;
        color: #848E9C;
        color: #848e9c;
      }

      .position-text2 {
@@ -278,15 +325,15 @@
  }

  .color-red {
    color: #F6465D !important;
    color: #f6465d !important;
  }

  .color-green {
    color: #5EBA89 !important;
    color: #5eba89 !important;
  }

  .color-blue {
    color: #1D91FF !important;
    color: #1d91ff !important;
  }

  .van-tabs__nav {
@@ -300,7 +347,6 @@
      color: themed("text_color");
    }
  }

}

::v-deep .van-nav-bar {
@@ -326,7 +372,7 @@
}

.border-b-color {
  border-bottom: 1px solid #2F3244 !important;
  border-bottom: 1px solid #2f3244 !important;
}

.all-select {
@@ -362,7 +408,6 @@
      @include themify() {
        background: themed("input_background");
      }


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