feat

lxf

2025-06-24 916757dbb9d08ef2875fd3a8bd7a16ebe6d8f97c

 src/components/perpetual-order/index.vue

@@ -7,41 +7,74 @@
                    <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>
            <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>
            <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" />
        <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>
          <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>
          <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" />
          <futrue-hold-list
            :price="price"
            :symbol="symbol"
            :list-data="futrueHold"
          />
                </div>
                <div v-if="type == '4'">
                    <futrue-histroy-position  :list-data="futrueHistroy" />
@@ -52,123 +85,133 @@
</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：交割历史
      type: "1", // 1：永续持有，2：永续当前，3：交割持有，4：交割历史
        };
    },
    props: {
        topIndex: {
            type: [Number, String],
            default: 1
      default: 1,
        },
        symbol: {
            type: String,
            default: ''
      default: "",
        },
        orderCur: { //
    orderCur: {
      //
            type: Array,
            default() {
                return []
            }
        return [];
      },
        },
        orderHold: {
            type: Array,
            default() {
                return []
            }
        return [];
      },
        },
        futrueHold: {
            type: Array,
            default() {
                return []
            }
        return [];
      },
        },
        futrueHistroy: {
            type: Array,
            default() {
                return []
            }
        return [];
      },
        },
        price: {
            type: [Number, String],
            default: '0.00'
      default: "0.00",
        },
    },
    watch: {
        topIndex(val) {
            if (val / 1 === 1) {
                this.type = '1'
                this.tabClick('1')
        this.type = "1";
        this.tabClick("1");
            } else {
                this.type = '3'
                this.tabClick('3')
        this.type = "3";
        this.tabClick("3");
            }
        }
    },
    },
    mounted() {
        if (this.topIndex == 1) {
            this.type = '1'
            this.tabClick('1')
      this.type = "1";
      this.tabClick("1");
        } else {
            this.type = '3'
            this.tabClick('3')
      this.type = "3";
      this.tabClick("3");
        }
    },
    activated() {
        if (this.topIndex == 1) {
            this.type = '1'
            this.tabClick('1')
      this.type = "1";
      this.tabClick("1");
        } else {
            this.type = '3'
            this.tabClick('3')
      this.type = "3";
      this.tabClick("3");
        }
    },
    methods: {
        tabClick(type) {
            this.type = type;
            if (type == '1') { //  && !this.orderCur.length
      if (type == "1") {
        //  && !this.orderCur.length
                //this.$emit('tab', 'fetchOrderListCur')
                this.$emit('tab', 'fetchOrderListHold')
        this.$emit("tab", "fetchOrderListHold");
            }
            if (type === '2') { //  && !this.orderHold.length
      if (type === "2") {
        //  && !this.orderHold.length
                //this.$emit('tab', 'fetchOrderListHold')
                this.$emit('tab', 'fetchOrderListCur')
        this.$emit("tab", "fetchOrderListCur");
            }
            if (type === '3') {
                this.$emit('tab', 'fetchFutrueHoldList')
      if (type === "3") {
        this.$emit("tab", "fetchFutrueHoldList");
            }
            if (type === '4') {
                this.$emit('tab', 'fetchFutrueHistory')
      if (type === "4") {
        this.$emit("tab", "fetchFutrueHistory");
            }
            // this.$emit(type)
        },
        goHistory() {
            const url = this.topIndex / 1 === 1 ? 'perpetualHistory' : 'deliveryContractHistory'
      const url =
        this.topIndex / 1 === 1
          ? "perpetualHistory"
          : "deliveryContractHistory";
            this.$router.push({
                path: `/${url}?symbol=${this.symbol}`
        path: `/${url}?symbol=${this.symbol}`,
            });
        }
    },
    components: { PerpetualEntrustList, PerpetualPositionList, futrueHistroyPosition, futrueHoldList }
}

  },
  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 {