dcc
2024-06-07 d5381ec06ab5f549fade867c3a874de613bdd5d4
src/page/deliveryContract/position.vue
@@ -1,90 +1,123 @@
<template>
  <div class="position">
    <div class="position-padding" v-for="item in listData" :key="item.order_no">
      <div class="position-tag ">
        <div class="position-tag-style" :class="item.direction === 'buy' ? 'green' : 'red'">
          {{ item.direction === 'buy' ? $t('开多') : $t('开空') }}</div>
        <div class="position-tag-title textColor">{{ item.name }} {{ $t('交割') }}</div>
        <div class="position-tag-title2">{{ $t('全仓') }}</div>
        <img class="position-tag-img" src="../../assets/image/deliveryContract/Group1042.png" />
      <div class="position-tag">
        <div
          class="position-tag-style"
          :class="item.direction === 'buy' ? 'green' : 'red'"
        >
          {{ item.direction === "buy" ? $t("开多") : $t("开空") }}
        </div>
        <div class="position-tag-title textColor">
          {{ item.name }} {{ $t("交割") }}
        </div>
        <div class="position-tag-title2">{{ $t("全仓") }}</div>
        <img
          class="position-tag-img"
          src="../../assets/image/deliveryContract/Group1042.png"
        />
      </div>
      <div class="position-div1">
        <span class="position-text1">{{ $t('数量') }}</span>
        <span class="position-text1">{{ $t("数量") }}</span>
        <span class="position-text2 textColor">{{ item.volume }}</span>
      </div>
      <div class="position-div1">
        <span class="position-text1">{{ $t('方向') }}</span>
        <span class="position-text2" :class="item.direction === 'buy' ? 'color-green' : 'color-red'">
          {{ item.direction === 'buy' ? $t('开多') : $t('开空') }}</span>
        <span class="position-text1">{{ $t("方向") }}</span>
        <span
          class="position-text2"
          :class="item.direction === 'buy' ? 'color-green' : 'color-red'"
        >
          {{ item.direction === "buy" ? $t("开多") : $t("开空") }}</span
        >
      </div>
      <div class="position-div1">
        <span class="position-text1">{{ $t('交割时间') }}</span>
        <span class="position-text2 textColor">{{ item.time_num + item.time_unit }}</span>
        <span class="position-text1">{{ $t("交割时间") }}</span>
        <span class="position-text2 textColor">{{
          item.time_num + item.time_unit
        }}</span>
      </div>
      <div class="position-div1">
        <span class="position-text1">{{ $t('购买价') }}(USDT)</span>
        <span class="position-text1">{{ $t("购买价") }}(USDT)</span>
        <span class="position-text2 textColor">{{ item.open_price }}</span>
      </div>
      <div class="position-div1">
        <span class="position-text1">{{ $t('结算价') }}(USDT)</span>
        <span class="position-text1">{{ $t("结算价") }}(USDT)</span>
        <span class="position-text2 textColor">{{ item.close_price }}</span>
      </div>
      <div class="position-div1">
        <span class="position-text1">{{ $t('盈亏') }}</span>
        <span class="position-text2" :class="item.profit > 0 ? 'color-green' : 'color-red'">
          {{ item.profit > 0 ? '+' + item.profit : item.profit }}
        <span class="position-text1">{{ $t("盈亏") }}</span>
        <span
          class="position-text2"
          :class="item.profit > 0 ? 'color-green' : 'color-red'"
        >
          {{ item.profit > 0 ? "+" + item.profit : item.profit }}
        </span>
      </div>
      <div class="position-div1">
        <span class="position-text1">{{ $t('到期时间') }}</span>
        <span class="position-text1">{{ $t("到期时间") }}</span>
        <span class="position-text2 textColor">{{ item.close_time }}</span>
      </div>
      <div class="position-div1">
        <span class="position-text1">{{ $t('操作') }}</span>
        <span class="position-text2 colorMain" @click="onDetail(item)">{{ $t('详情') }}</span>
        <span class="position-text1">{{ $t("操作") }}</span>
        <span class="position-text2 colorMain" @click="onDetail(item)">{{
          $t("详情")
        }}</span>
      </div>
      <div style="margin-top: 33px;width: 100%;height: 1px;float: left;" class="bgDark"></div>
      <div
        style="margin-top: 33px; width: 100%; height: 1px; float: left"
        class="bgDark"
      ></div>
    </div>
    <div class="text-grey text-center py-300" v-if="!listData.length && $route.name == 'perpetualContract'">{{
      $t('您目前没有持仓') }}</div>
    <div
      class="text-grey text-center py-300"
      v-if="!listData.length && $route.name == 'perpetualContract'"
    >
      {{ $t("您目前没有持仓") }}
    </div>
    <van-popup v-model="show">
      <popup-delivery showBtns :detailData="detailData" :key="detailData.order_no" @close="show = false"
        :disabled="true" />
      <popup-delivery
        showBtns
        :detailData="detailData"
        :key="detailData.order_no"
        @close="show = false"
        :disabled="true"
      />
    </van-popup>
  </div>
</template>
<script>
import { Tab, Tabs, Popup } from 'vant';
import PopupDelivery from '@/components/popup-delivery'
import { Tab, Tabs, Popup } from "vant";
import PopupDelivery from "@/components/popup-delivery";
export default {
  data() {
    return {
      active: 2,
      show: false,
      detailData: {}
    }
      detailData: {},
    };
  },
  props: {
    listData: {
      type: Array,
      default() {
        return []
      }
    }
        return [];
      },
    },
  },
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Popup.name]: Popup,
    PopupDelivery
    PopupDelivery,
  },
  methods: {
    onDetail(item) { // 详细界面
      this.show = true
      this.detailData = item
    }
  }
}
    onDetail(item) {
      // 详细界面
      this.show = true;
      this.detailData = item;
    },
  },
};
</script>
<style lang="scss" scoped>
.position {
@@ -124,7 +157,7 @@
        font-style: normal;
        font-weight: 400;
        font-size: 26.4981px;
        color: #FFFFFF;
        color: #ffffff;
      }
      .position-tag-title {
@@ -138,7 +171,7 @@
        font-style: normal;
        font-weight: 400;
        font-size: 30.9145px;
        color: #848E9C;
        color: #848e9c;
      }
      .position-tag-img {
@@ -149,12 +182,12 @@
    }
    .red {
      background: #F6465D;
      background: #f6465d;
      border-radius: 6.6266px;
    }
    .green {
      background: #5EBA89;
      background: #5eba89;
      border-radius: 6.62453px;
    }
@@ -168,7 +201,7 @@
        font-style: normal;
        font-weight: 400;
        font-size: 30px;
        color: #848E9C;
        color: #848e9c;
      }
      .position-text2 {
@@ -187,15 +220,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;
  }
}