From 916757dbb9d08ef2875fd3a8bd7a16ebe6d8f97c Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Tue, 24 Jun 2025 20:13:07 +0800
Subject: [PATCH] feat
---
src/components/perpetual-order/index.vue | 353 +++++++++++++++++++++++++++++++++-------------------------
1 files changed, 198 insertions(+), 155 deletions(-)
diff --git a/src/components/perpetual-order/index.vue b/src/components/perpetual-order/index.vue
index ca187e0..395f56f 100644
--- a/src/components/perpetual-order/index.vue
+++ b/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>
--
Gitblit v1.9.3