dcc
2024-06-07 d5381ec06ab5f549fade867c3a874de613bdd5d4
src/components/assetsCenter/contract.vue
@@ -1,65 +1,128 @@
<template>
  <div class="contract">
    <div class="flex justify-between box-border px-30 mt-43">
      <div @click="onTap(0)" :class="{ active: tapIndex === 0 }"
        class=" w-370 h-75 lh-75 rounded-lg font-27 text-center mr-20">{{ $t('永续合约') }}</div>
      <div @click="onTap(1)" :class="{ active: tapIndex === 1 }" class=" w-370 h-75 lh-75 rounded-lg font-27 text-center">
        {{ $t('交割合约') }}</div>
      <div
        @click="onTap(0)"
        :class="{ active: tapIndex === 0 }"
        class="w-370 h-75 lh-75 rounded-lg font-27 text-center mr-20"
      >
        {{ $t("永续合约") }}
      </div>
      <div
        @click="onTap(1)"
        :class="{ active: tapIndex === 1 }"
        class="w-370 h-75 lh-75 rounded-lg font-27 text-center"
      >
        {{ $t("交割合约") }}
      </div>
    </div>
    <div>
      <div class="box-border px-30 mt-42">
        <div class="flex justify-between text-grey relative">
          <div class="flex">
            <span class="text-grey font-30">{{ $t('总资产') }}(USDT)</span>
            <span class="text-grey font-30">{{ $t("总资产") }}(USDT)</span>
            <div @click.stop="changeEyes">
              <img :src="require('../../assets/image/assets-center/eye-open.png')" class="w-32 h-18" v-show="!eyetel" />
              <img :src="require('../../assets/image/assets-center/eye-close.png')" class="w-32 h-18" v-show="eyetel" />
              <img
                :src="require('../../assets/image/assets-center/eye-open.png')"
                class="w-32 h-18"
                v-show="!eyetel"
              />
              <img
                :src="require('../../assets/image/assets-center/eye-close.png')"
                class="w-32 h-18"
                v-show="eyetel"
              />
            </div>
          </div>
          <div class="right-clock">
            <img @click="goHistory" :src="require('../../assets/image/assets-center/Subtract.png')" class="w-44 h-38" />
          <div class="right-clock" @click="goHistory">
            <img
              :src="require('../../assets/image/assets-center/Subtract.png')"
              class="w-44 h-38"
            />
          </div>
        </div>
        <div class="font-700 font-66 mt-18 textColor" v-if="!eyetel">
          {{ tapIndex === 0 ? funds.money_contract : funds.money_futures }}
          <span class="font-39 text-grey">≈{{ currency.currency_symbol }}{{ funds.money_contract ? (((tapIndex === 0 ?
            funds.money_contract :
            funds.money_futures) * currency.rate).toFixed(2)) : ' --' }}</span>
          <span class="font-39 text-grey"
            >≈{{ currency.currency_symbol
            }}{{
              funds.money_contract
                ? (
                    (tapIndex === 0
                      ? funds.money_contract
                      : funds.money_futures) * currency.rate
                  ).toFixed(2)
                : " --"
            }}</span
          >
        </div>
        <div class="font-70 font-66 mt-18 textColor" v-else>******** </div>
        <div class="font-70 font-66 mt-18 textColor" v-else>********</div>
        <div class="flex font-26 lh-32 mb-35 mt-40">
          <div class="flex flex-col ">
            <div>{{ tapIndex === 0 ? $t('保证金余额') : $t('全部未实现盈亏') }}(USDT)</div>
          <div class="flex flex-col">
            <div>
              {{
                tapIndex === 0 ? $t("保证金余额") : $t("全部未实现盈亏")
              }}(USDT)
            </div>
            <template v-if="!eyetel">
              <div class="font-40 mt-17 mb-9 textColor">{{ tapIndex === 0 ? funds.money_contract_deposit :
                funds.money_futures_profit }}</div>
              <div>≈{{ currency.currency_symbol }}{{ funds.money_contract_deposit ? (((tapIndex === 0 ?
                funds.money_contract_deposit :
                funds.money_futures_profit) * currency.rate).toFixed(2)) : ' --' }}</div>
              <div class="font-40 mt-17 mb-9 textColor">
                {{
                  tapIndex === 0
                    ? funds.money_contract_deposit
                    : funds.money_futures_profit
                }}
              </div>
              <div>
                ≈{{ currency.currency_symbol
                }}{{
                  funds.money_contract_deposit
                    ? (
                        (tapIndex === 0
                          ? funds.money_contract_deposit
                          : funds.money_futures_profit) * currency.rate
                      ).toFixed(2)
                    : " --"
                }}
              </div>
            </template>
            <template v-else>
              <div class="font-40 mt-17 mb-9 textColor">*********</div>
            </template>
          </div>
          <div class="flex flex-col ml-110">
            <div>{{ $t('钱包余额(USDT)') }}</div>
            <div>{{ $t("钱包余额(USDT)") }}</div>
            <template v-if="!eyetel">
              <div class="font-40 mt-17 mb-9 textColor">{{ funds.money_wallet }}</div>
              <div>≈{{ currency.currency_symbol }}{{ funds.money_wallet ? (funds.money_wallet * currency.rate).toFixed(2)
                :
                ' --' }}</div>
              <div class="font-40 mt-17 mb-9 textColor">
                {{ funds.money_wallet }}
              </div>
              <div>
                ≈{{ currency.currency_symbol
                }}{{
                  funds.money_wallet
                    ? (funds.money_wallet * currency.rate).toFixed(2)
                    : " --"
                }}
              </div>
            </template>
            <template v-else>
              <div class="font-40 mt-17 mb-9 textColor">*********</div>
            </template>
          </div>
        </div>
        <div v-if="tapIndex === 0" class="flex flex-col lh-32 mb-35 ">
        <div v-if="tapIndex === 0" class="flex flex-col lh-32 mb-35">
          <template v-if="!eyetel">
            <div>{{ $t('全部未实现盈亏') }}(USDT)</div>
            <div class="font-40 mt-17 mb-9 textColor">{{ funds.money_contract_profit }}</div>
            <div>≈{{ currency.currency_symbol }}{{ funds.money_contract_profit ? (funds.money_contract_profit *
              currency.rate).toFixed(2) : ' --' }}</div>
            <div>{{ $t("全部未实现盈亏") }}(USDT)</div>
            <div class="font-40 mt-17 mb-9 textColor">
              {{ funds.money_contract_profit }}
            </div>
            <div>
              ≈{{ currency.currency_symbol
              }}{{
                funds.money_contract_profit
                  ? (funds.money_contract_profit * currency.rate).toFixed(2)
                  : " --"
              }}
            </div>
          </template>
          <template v-else>
            <div class="font-40 mt-17 mb-9 textColor">*********</div>
@@ -70,7 +133,10 @@
      <!--永续合约持有仓位-->
      <div class="px-30">
        <template v-if="tapIndex === 0">
          <PerpetualPositionList :list-data="orderHold" @sell="onRecall"></PerpetualPositionList>
          <PerpetualPositionList
            :list-data="orderHold"
            @sell="onRecall"
          ></PerpetualPositionList>
        </template>
        <!--交割合约持有仓位-->
        <template v-else>
@@ -84,14 +150,14 @@
<script>
import Axios from "@/API/assets";
import { mapGetters } from "vuex";
import PerpetualPositionList from '../perpetual-position-list/index.vue';
import futrueHoldList from '@/page/deliveryContract/hold.vue'
import PerpetualPositionList from "../perpetual-position-list/index.vue";
import futrueHoldList from "@/page/deliveryContract/hold.vue";
import { _futrueOrderList, _orderListHold } from "@/API/trade.api";
export default {
  name: "contract",
  components: {
    PerpetualPositionList,
    futrueHoldList
    futrueHoldList,
  },
  data() {
    return {
@@ -101,79 +167,85 @@
      eyetel: false,
      total: "",
      timer: null,
      timer2: null
    }
      timer2: null,
    };
  },
  props: ['funds', 'index'],
  props: ["funds", "index"],
  computed: {
    ...mapGetters('home', ['currency'])
    ...mapGetters("home", ["currency"]),
  },
  watch: {
    index: {
      handler: function (val) {
        console.log(val)
        this.tapIndex = val / 1
        console.log(val);
        this.tapIndex = val / 1;
      },
      immediate: true
    }
      immediate: true,
    },
  },
  created() {
    this.fetch()
    this.fetch();
  },
  methods: {
    goHistory() {
      if (this.tapIndex === 0) {
        this.$router.push({ path: '/perpetualHistory', query: { goback: 1 } })
        this.$router.push({ path: "/perpetualHistory", query: { goback: 1 } });
      } else {
        this.$router.push({ path: '/deliveryContractHistory', query: { goback: 1 } })
        this.$router.push({
          path: "/deliveryContractHistory",
          query: { goback: 1 },
        });
      }
    },
    onTap(index) {
      this.tapIndex = index
      this.fetch()
      this.tapIndex = index;
      this.fetch();
    },
    fetch() {
      this.clearTimer()
      this.clearTimer();
      if (this.tapIndex === 0) {
        this.fetchOrderListHold()
        this.fetchOrderListHold();
      } else {
        this.fetchFutrueHoldList()
        this.fetchFutrueHoldList();
      }
    },
    onRecall() { // 撤单or 平仓 evt
    onRecall() {
      // 撤单or 平仓 evt
      // this.clearTimer()
      // this[this.curTab](this.symbol)
      // this.fetchOrderListHold()
    },
    clearTimer() {
      clearInterval(this.timer)
      clearInterval(this.timer2)
      this.timer = null
      this.timer2 = null
      clearInterval(this.timer);
      clearInterval(this.timer2);
      this.timer = null;
      this.timer2 = null;
    },
    fetchOrderListHold() { // 获取永续当前持仓
      _orderListHold().then(data => {
        this.orderHold = data
      })
    fetchOrderListHold() {
      // 获取永续当前持仓
      _orderListHold().then((data) => {
        this.orderHold = data;
      });
      this.timer = setInterval(() => {
        _orderListHold().then(data => {
          this.orderHold = data
        })
      }, 2000)
        _orderListHold().then((data) => {
          this.orderHold = data;
        });
      }, 2000);
    },
    fetchFutrueHoldList() { // 获取交割当前持仓
      _futrueOrderList().then(data => {
        this.futrueHold = data
      })
      console.log('fetchFutrueHoldList')
    fetchFutrueHoldList() {
      // 获取交割当前持仓
      _futrueOrderList().then((data) => {
        this.futrueHold = data;
      });
      console.log("fetchFutrueHoldList");
      this.timer2 = setInterval(() => {
        _futrueOrderList().then(data => {
          this.futrueHold = data
        })
      }, 2000)
        _futrueOrderList().then((data) => {
          this.futrueHold = data;
        });
      }, 2000);
    },
    changeEyes() {
      console.log('666')
      console.log("666");
      this.eyetel = !this.eyetel;
    },
    getData() {
@@ -186,19 +258,19 @@
    },
  },
  beforeDestroy() {
    this.clearTimer()
  }
}
    this.clearTimer();
  },
};
</script>
<style lang="scss" scoped>
.w-370 {
  border: 1px solid #EAEDF2;
  color: #868D9A;
  border: 1px solid #eaedf2;
  color: #868d9a;
}
.active {
  color: #FFFFFF;
  color: #ffffff;
  @include themify() {
    background: themed("btn_main");
@@ -210,7 +282,7 @@
}
.lh-32 {
  color: #848E9C;
  color: #848e9c;
}
.font-40 {
@@ -219,7 +291,7 @@
.cl {
  color: #333333;
  background: #EBECF0;
  background: #ebecf0;
}
.mr-13 {
@@ -228,7 +300,7 @@
}
.col {
  color: #848E9C;
  color: #848e9c;
}
.num {
@@ -242,25 +314,25 @@
}
.blue {
  color: #1D91FF;
  color: #1d91ff;
}
.active_green {
  color: #2EBD85;
  color: #2ebd85;
}
.active_red {
  color: #FF3E3E;
  color: #ff3e3e;
}
.active_tab1 {
  background: #FF3E3E;
  color: #FFFFFF;
  background: #ff3e3e;
  color: #ffffff;
}
.active_tab2 {
  background: #2EBD85;
  color: #FFFFFF;
  background: #2ebd85;
  color: #ffffff;
}
.font-6 {