feat

lxf

2025-06-24 916757dbb9d08ef2875fd3a8bd7a16ebe6d8f97c

 src/components/perpetual-order/index.vue

@@ -1,184 +1,227 @@
<template>
    <!-- 永续合约订单列表页 -->
    <div>
        <div class="items-center mt-18">
            <div class="flex justify-between border-b-color">
                <div class="flex pb-10">
                    <template v-if="topIndex / 1 === 1">
                        <!-- <div class="w-280 flex flex-col items-center textColor1" @click="tabClick('1')"  :class="type=='1'?'active-line':''">{{ $t('当前委托') }}</div>
  <!-- 永续合约订单列表页 -->
  <div>
    <div class="items-center mt-18">
      <div class="flex justify-between border-b-color">
        <div class="flex pb-10">
          <template v-if="topIndex / 1 === 1">
            <!-- <div class="w-280 flex flex-col items-center textColor1" @click="tabClick('1')"  :class="type=='1'?'active-line':''">{{ $t('当前委托') }}</div>
                        <div class="w-280 flex flex-col items-center ml-30 textColor1" @click="tabClick('2')" :class="type=='2'?'active-line':''">{{ $t('持有仓位') }}</div> -->
                        <div class="px-10  py-10 flex  items-center text-grey" @click="tabClick('1')"
                            :class="type == '1' ? 'active-line' : ''">{{ $t('持有仓位') }}<span v-if="type == '1'">({{
                                orderHold.length }})</span></div>
                        <div class="px-10  ml-50  py-10 flex  items-center text-grey" @click="tabClick('2')"
                            :class="type == '2' ? 'active-line' : ''">{{ $t('当前委托') }}</div>
                    </template>
                    <template v-else>
                        <div class="px-10  py-10 flex  items-center text-grey" @click="tabClick('3')"
                            :class="type == '3' ? 'active-line' : ''">{{ $t('持有仓位') }}<span v-if="type == '2'">({{
                                orderCur.length
                            }})111</span></div>
                        <div class="px-10  ml-50  py-10 flex  items-center text-grey" @click="tabClick('4')"
                            :class="type == '4' ? 'active-line' : ''">{{ $t('历史仓位') }}</div>
                    </template>
                </div>
                <img src="../../assets/image/public/record.png" alt="record-img" class="w-32 h-35 pr-30 py-15  "
                    @click="goHistory" />
            <div
              class="px-10 py-10 flex items-center text-grey"
              @click="tabClick('1')"
              :class="type == '1' ? 'active-line' : ''"
            >
              {{ $t("持有仓位")
              }}<span v-if="type == '1'">({{ orderHold.length }})</span>
            </div>
            <!-- 永续-->
            <template v-if="topIndex / 1 === 1">
                <!-- 委托列表 -->
                <div v-if="type == '1'">
                    <!-- <PerpetualEntrustList :list-data="orderCur" @recall="$emit('recall', $event)"></PerpetualEntrustList> -->
                    <PerpetualPositionList :list-data="orderHold" @sell="$emit('recall', $event)"></PerpetualPositionList>
                </div>
                <!-- 持有仓位列表 -->
                <div v-if="type == '2'">
                    <!-- <PerpetualPositionList :list-data="orderHold" @sell="$emit('recall', $event)"></PerpetualPositionList> -->
                    <PerpetualEntrustList :list-data="orderCur" @recall="$emit('recall', $event)"></PerpetualEntrustList>
                </div>
            </template>
            <!-- 交割-->
            <template v-else>
                <div v-if="type == '3'">
                    <futrue-hold-list :price="price" :symbol="symbol" :list-data="futrueHold" />
                </div>
                <div v-if="type == '4'">
                    <futrue-histroy-position  :list-data="futrueHistroy" />
                </div>
            </template>
            <div
              class="px-10 ml-50 py-10 flex items-center text-grey"
              @click="tabClick('2')"
              :class="type == '2' ? 'active-line' : ''"
            >
              {{ $t("当前委托") }}
            </div>
          </template>
          <template v-else>
            <div
              class="px-10 py-10 flex items-center text-grey"
              @click="tabClick('3')"
              :class="type == '3' ? 'active-line' : ''"
            >
              {{ $t("持有仓位")
              }}<span v-if="type == '2'">({{ orderCur.length }})111</span>
            </div>
            <div
              class="px-10 ml-50 py-10 flex items-center text-grey"
              @click="tabClick('4')"
              :class="type == '4' ? 'active-line' : ''"
            >
              {{ $t("历史仓位") }}
            </div>
          </template>
        </div>
        <img
          src="../../assets/image/public/record.png"
          alt="record-img"
          class="w-32 h-35 pr-30 py-15"
          @click="goHistory"
        />
      </div>
      <!-- 永续-->
      <template v-if="topIndex / 1 === 1">
        <!-- 委托列表 -->
        <div v-if="type == '1'">
          <!-- <PerpetualEntrustList :list-data="orderCur" @recall="$emit('recall', $event)"></PerpetualEntrustList> -->
          <PerpetualPositionList
            :list-data="orderHold"
            @sell="$emit('recall', $event)"
          ></PerpetualPositionList>
        </div>
        <!-- 持有仓位列表 -->
        <div v-if="type == '2'">
          <!-- <PerpetualPositionList :list-data="orderHold" @sell="$emit('recall', $event)"></PerpetualPositionList> -->
          <PerpetualEntrustList
            :list-data="orderCur"
            @recall="$emit('recall', $event)"
          ></PerpetualEntrustList>
        </div>
      </template>
      <!-- 交割-->
      <template v-else>
        <div v-if="type == '3'">
          <futrue-hold-list
            :price="price"
            :symbol="symbol"
            :list-data="futrueHold"
          />
        </div>
        <div v-if="type == '4'">
          <futrue-histroy-position :list-data="futrueHistroy" />
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import PerpetualEntrustList from '../perpetual-entrust-list/index.vue';
import PerpetualPositionList from '../perpetual-position-list/index.vue';
import futrueHoldList from '@/page/deliveryContract/hold.vue'
import futrueHistroyPosition from '@/page/deliveryContract/position.vue'
import PerpetualEntrustList from "../perpetual-entrust-list/index.vue";
import PerpetualPositionList from "../perpetual-position-list/index2.vue";
import futrueHoldList from "@/page/deliveryContract/hold.vue";
import futrueHistroyPosition from "@/page/deliveryContract/position.vue";

export default {
    name: "perpetualOrder",
    data() {
        return {
            type: '1', // 1：永续持有，2：永续当前，3：交割持有，4：交割历史
        };
  name: "perpetualOrder",
  data() {
    return {
      type: "1", // 1：永续持有，2：永续当前，3：交割持有，4：交割历史
    };
  },
  props: {
    topIndex: {
      type: [Number, String],
      default: 1,
    },
    props: {
        topIndex: {
            type: [Number, String],
            default: 1
        },
        symbol: {
            type: String,
            default: ''
        },
        orderCur: { //
            type: Array,
            default() {
                return []
            }
        },
        orderHold: {
            type: Array,
            default() {
                return []
            }
        },
        futrueHold: {
            type: Array,
            default() {
                return []
            }
        },
        futrueHistroy: {
            type: Array,
            default() {
                return []
            }
        },
        price: {
            type: [Number, String],
            default: '0.00'
        },
    symbol: {
      type: String,
      default: "",
    },
    watch: {
        topIndex(val) {
            if (val / 1 === 1) {
                this.type = '1'
                this.tabClick('1')
            } else {
                this.type = '3'
                this.tabClick('3')
            }
        }
    orderCur: {
      //
      type: Array,
      default() {
        return [];
      },
    },
    mounted() {
        if (this.topIndex == 1) {
            this.type = '1'
            this.tabClick('1')
        } else {
            this.type = '3'
            this.tabClick('3')
        }
    orderHold: {
      type: Array,
      default() {
        return [];
      },
    },
    activated() {
        if (this.topIndex == 1) {
            this.type = '1'
            this.tabClick('1')
        } else {
            this.type = '3'
            this.tabClick('3')
        }
    futrueHold: {
      type: Array,
      default() {
        return [];
      },
    },
    methods: {
        tabClick(type) {
            this.type = type;
            if (type == '1') { //  && !this.orderCur.length
                //this.$emit('tab', 'fetchOrderListCur')
                this.$emit('tab', 'fetchOrderListHold')
            }
            if (type === '2') { //  && !this.orderHold.length
                //this.$emit('tab', 'fetchOrderListHold')
                this.$emit('tab', 'fetchOrderListCur')
            }
            if (type === '3') {
                this.$emit('tab', 'fetchFutrueHoldList')
            }
            if (type === '4') {
                this.$emit('tab', 'fetchFutrueHistory')
            }
            // this.$emit(type)
        },
        goHistory() {
            const url = this.topIndex / 1 === 1 ? 'perpetualHistory' : 'deliveryContractHistory'
            this.$router.push({
                path: `/${url}?symbol=${this.symbol}`
            });
        }
    futrueHistroy: {
      type: Array,
      default() {
        return [];
      },
    },
    components: { PerpetualEntrustList, PerpetualPositionList, futrueHistroyPosition, futrueHoldList }
}

    price: {
      type: [Number, String],
      default: "0.00",
    },
  },
  watch: {
    topIndex(val) {
      if (val / 1 === 1) {
        this.type = "1";
        this.tabClick("1");
      } else {
        this.type = "3";
        this.tabClick("3");
      }
    },
  },
  mounted() {
    if (this.topIndex == 1) {
      this.type = "1";
      this.tabClick("1");
    } else {
      this.type = "3";
      this.tabClick("3");
    }
  },
  activated() {
    if (this.topIndex == 1) {
      this.type = "1";
      this.tabClick("1");
    } else {
      this.type = "3";
      this.tabClick("3");
    }
  },
  methods: {
    tabClick(type) {
      this.type = type;
      if (type == "1") {
        //  && !this.orderCur.length
        //this.$emit('tab', 'fetchOrderListCur')
        this.$emit("tab", "fetchOrderListHold");
      }
      if (type === "2") {
        //  && !this.orderHold.length
        //this.$emit('tab', 'fetchOrderListHold')
        this.$emit("tab", "fetchOrderListCur");
      }
      if (type === "3") {
        this.$emit("tab", "fetchFutrueHoldList");
      }
      if (type === "4") {
        this.$emit("tab", "fetchFutrueHistory");
      }
      // this.$emit(type)
    },
    goHistory() {
      const url =
        this.topIndex / 1 === 1
          ? "perpetualHistory"
          : "deliveryContractHistory";
      this.$router.push({
        path: `/${url}?symbol=${this.symbol}`,
      });
    },
  },
  components: {
    PerpetualEntrustList,
    PerpetualPositionList,
    futrueHistroyPosition,
    futrueHoldList,
  },
};
</script>

<style lang="scss" scoped>
.all-cancel-btn {
    background-color: #EAEBEF;
  background-color: #eaebef;
}

.cancel-btn {
    background-color: #EAEBEF;
  background-color: #eaebef;
}

.active-line {
    position: relative;
    // padding: 15px 0;
    color: #fff;
  position: relative;
  // padding: 15px 0;
  color: #fff;

    @include themify() {
        background-color: themed("color_main");
    }
  @include themify() {
    background-color: themed("color_main");
  }
}

// .active-line::after{
@@ -194,6 +237,6 @@
//        }
// }
.textColor1 {
    color: #fff;
  color: #fff;
}
</style>