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 ++++++++++++---------
src/i18n/en-US/index.js | 2
src/components/perpetual-open/index.vue | 102 +++--
src/page/perpetualContract/index.vue | 4
src/components/perpetual-position-list/index2.vue | 364 ++++++++++++++++++++++
src/page/perpetualContract/perpetualHistory.vue | 19 +
src/components/perpetual-history-position/index.vue | 89 +++++
src/i18n/CN/index.js | 2
8 files changed, 732 insertions(+), 203 deletions(-)
diff --git a/src/components/perpetual-history-position/index.vue b/src/components/perpetual-history-position/index.vue
index 42cbd26..3a8bd09 100644
--- a/src/components/perpetual-history-position/index.vue
+++ b/src/components/perpetual-history-position/index.vue
@@ -40,6 +40,54 @@
{{ item.state ? handleText(item.state) : "--" }}
</div>
</div>
+ <div class="list-b">
+ <div>{{ $t("开仓价格") }}</div>
+ <div class="list-value">
+ {{ item.trade_avg_price }}
+ </div>
+ </div>
+ <div class="list-b">
+ <div>{{ $t("平仓价格") }}</div>
+ <div class="list-value">
+ {{ item.close_avg_price }}
+ </div>
+ </div>
+ <div class="list-b">
+ <div>{{ $t("保证金") }}</div>
+ <div class="list-value">
+ {{ item.deposit_open }}
+ </div>
+ </div>
+ <div class="list-b">
+ <div>{{ $t("手续费") }}</div>
+ <div class="list-value">
+ {{ item.fee }}
+ </div>
+ </div>
+ <div class="list-b">
+ <div>{{ $t("盈利率") }}</div>
+ <div
+ class="list-value"
+ :class="{
+ 'text-green': item.profit / 1 > 0,
+ 'text-red': item.profit / 1 < 0,
+ }"
+ >
+ {{ calculateProfitRate(item) }}
+ </div>
+ </div>
+ <div class="list-b">
+ <div>{{ $t("盈利") }}</div>
+ <div
+ class="list-value"
+ :class="{
+ 'text-green': item.profit / 1 > 0,
+ 'text-red': item.profit / 1 < 0,
+ }"
+ >
+ {{ item.profit }}
+ </div>
+ </div>
</div>
</div>
</div>
@@ -88,7 +136,31 @@
</template> -->
</div>
</template>
-
+<!-- {
+ "order_no": "25062319103773064243", // 订单编号
+ "amount_open": 169350.0, // 开仓金额(USDT)
+ "symbol": "eth", // 交易对符号(ETH)
+ "lever_rate": 200.0, // 杠杆倍数(200倍)
+ "amount": 0.0, // 当前持仓金额(已平仓为0)
+ "create_time": "2025-06-23 07:10:37 AM", // 开仓时间
+ "fee": 10.161, // 手续费(USDT)
+ "qiangPing": "2160.74289", // 强平价格
+ "mark_price": 2414.6, // 标记价格
+ "deposit_open": 270.96, // 开仓保证金(USDT)
+ "stop_price_loss": 0.0, // 止损价格(未设置)
+ "change_ratio": 0.0, // 价格变动比率
+ "close_time": "2025-06-23 12:16:22 PM", // 平仓时间
+ "trade_avg_price": 2246.69, // 开仓均价(USDT)
+ "close_avg_price": 2226.53, // 平仓均价(USDT)
+ "stop_price_profit": 0.0, // 止盈价格(未设置)
+ "volume": 0.0, // 当前持仓量(已平仓为0)
+ "volume_open": 75.0, // 开仓数量(ETH)
+ "name": "ETH/USDT", // 交易对名称
+ "deposit": 0.0, // 当前保证金(已平仓为0)
+ "state": "created", // 状态(已平仓)
+ "profit": "-486.28", // 盈亏金额(亏损486.28 USDT)
+ "direction": "buy" // 方向(买入/做多)
+} -->
<script>
export default {
name: "perpetualHistoryPosition",
@@ -128,6 +200,14 @@
},
},
methods: {
+ calculateProfitRate(item) {
+ if (!item.trade_avg_price || !item.close_avg_price) return "--";
+ const profitRate = (
+ ((item.close_avg_price - item.trade_avg_price) / item.trade_avg_price) *
+ 100
+ ).toFixed(2);
+ return profitRate + "%";
+ },
handleText(state) {
let str = "";
if (state == "created") {
@@ -251,4 +331,11 @@
height: 1px;
background: rgba(60, 58, 58, 0.6);
}
+
+.text-red {
+ color: #ff0000 !important;
+}
+.text-green {
+ color: #1cd36d !important;
+}
</style>
diff --git a/src/components/perpetual-open/index.vue b/src/components/perpetual-open/index.vue
index 24caf67..0f20263 100644
--- a/src/components/perpetual-open/index.vue
+++ b/src/components/perpetual-open/index.vue
@@ -197,44 +197,8 @@
<!-- {{ initFutrue.amount }} // 余额 -->
</span>
<!-- {{ form.lever_rate }} -->
- <span
- class="font-22 font-400 textColor"
- v-if="form.lever_rate == 25"
- >
- {{
- Math.floor(initFutrue.amount / (initData.amount + 0.0375)) *
- form.lever_rate
- }}
- {{ $t("手数") }}
- </span>
- <span
- class="font-22 font-400 textColor"
- v-if="form.lever_rate == 50"
- >
- {{
- Math.floor(initFutrue.amount / (initData.amount + 0.075)) *
- form.lever_rate
- }}
- {{ $t("手数") }}
- </span>
- <span
- class="font-22 font-400 textColor"
- v-if="form.lever_rate == 100"
- >
- {{
- Math.floor(initFutrue.amount / (initData.amount + 0.15)) *
- form.lever_rate
- }}
- {{ $t("手数") }}
- </span>
- <span
- class="font-22 font-400 textColor"
- v-if="form.lever_rate == 200"
- >
- {{
- Math.floor(initFutrue.amount / (initData.amount + 0.3)) *
- form.lever_rate
- }}
+ <span class="font-22 font-400 textColor">
+ {{ maxItems }}
{{ $t("手数") }}
</span>
</div>
@@ -253,10 +217,10 @@
<span class="flex-1 text-right">75%</span>
<span class="flex-1 text-right">100%</span>
</div> -->
- <!-- 张数输入 -->
+ <!-- 张数 滑块 -->
<amount-slider
ref="sliderRef"
- :maxAmount="getVolumnByLever()"
+ :maxAmount="maxItems"
@getAmount="getAmount"
></amount-slider>
</template>
@@ -271,9 +235,7 @@
<div class="flex justify-between mt-30">
<div class="text-grey">{{ $t("保证金") }}</div>
<div class="textColor">
- {{
- ((form.amount * initData.amount) / form.lever_rate).toFixed(4)
- }}
+ {{ margin.toFixed(4) }}
USDT
</div>
</div>
@@ -284,7 +246,7 @@
? initData.fee * (form.amount / 1)
: (initData.fee * (form.amount / 1) * form.lever_rate) | nan
}} -->
- <div class="textColor">{{ calculatedFee.toFixed(4) }} USDT</div>
+ <div class="textColor">{{ fee.toFixed(4) }} USDT</div>
</div>
</template>
<div
@@ -750,6 +712,52 @@
// 可买数量
return Math.floor(this.initOpen.volume / 1 / this.form.lever_rate);
},
+ // 每份保证金
+ perItemMargin() {
+ console.log(
+ this.initData,
+ ": 每份保证金",
+ this.initData.amount / this.form.lever_rate
+ );
+ return this.initData.amount / this.form.lever_rate;
+ },
+ // 每份手续费（基于保证金）
+ perItemFee() {
+ const rateMap = {
+ 25: 0.0375,
+ 50: 0.075,
+ 100: 0.15,
+ 200: 0.3,
+ };
+ const rate = rateMap[this.form.lever_rate];
+ return this.perItemMargin * rate;
+ },
+ // 每份总支出
+ perItemTotalCost() {
+ return this.perItemMargin + this.perItemFee;
+ },
+ // 最大可购买整数份数
+ maxItems() {
+ console.log(this.initFutrue.amount, ": initFutrue.amount");
+ if (this.perItemTotalCost <= 0) return 0;
+ return Math.floor(this.initFutrue.amount / this.perItemTotalCost);
+ },
+ // 实际交易金额
+ actualTradeValue() {
+ return this.form.amount * this.initData.amount;
+ },
+ // 总保证金
+ margin() {
+ return this.form.amount * this.perItemMargin;
+ },
+ // 总手续费
+ fee() {
+ return this.form.amount * this.perItemFee;
+ },
+ // 总支出
+ totalExpenditure() {
+ return this.margin + this.fee;
+ },
calculatedFee() {
const rateMap = {
25: 0.0375,
@@ -758,7 +766,10 @@
200: 0.3,
};
const rate = rateMap[this.form.lever_rate];
- return (this.form.amount * rate) / this.form.lever_rate;
+ console.log(this.initData.amount, ": initData.amount");
+ return (
+ (this.form.amount * this.initData.amount * rate) / this.form.lever_rate
+ );
// : this.initData.amount * (this.form.amount / 1) * rate;
},
},
@@ -857,6 +868,7 @@
methods: {
//获取张数
getAmount(val) {
+ console.log(val, "获取张数");
this.form.amount = val || 0;
// if(this.form.lever_rate==25){
// this.form.amount = Math.floor((this.initFutrue.amount-(this.initFutrue.amount * 0.0375))/this.initData.amount)
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>
diff --git a/src/components/perpetual-position-list/index2.vue b/src/components/perpetual-position-list/index2.vue
new file mode 100644
index 0000000..a28e84f
--- /dev/null
+++ b/src/components/perpetual-position-list/index2.vue
@@ -0,0 +1,364 @@
+<template>
+ <!-- 持有仓位列表 -->
+ <div>
+ <!-- <div class="flex justify-between" v-if="listData.length">-->
+ <!-- <div class="flex" @click.stop="changeIcon">-->
+ <!-- <img v-show="!iconShow" src="../../assets/image/public/grey-rounded.png" alt="" class="w-38 h-38"/>-->
+ <!-- <img v-show="iconShow" src="../../assets/image/public/blue-rounded.png" alt="" class="w-38 h-38"/>-->
+ <!-- <div class="ml-37">{{ $t('隐藏其它合约') }}</div>-->
+ <!-- </div>-->
+ <!-- <button class="border-none all-cancel-btn pl-34 pr-34 pt-10 pb-10 font-25" @click="onSellAll">{{ $t('一键平仓') }}</button>-->
+ <!-- </div>-->
+ <div
+ :class="[isStyle ? 'border-b-color' : '']"
+ v-for="item in listData"
+ :key="item.order_no"
+ >
+ <div class="flex justify-between pt-44 pb-44">
+ <div class="flex flex-col">
+ <div class="flex items-center">
+ <div
+ class="pl-29 pr-29 pt-11 pb-11 text-white open-btn"
+ :class="item.direction == 'buy' ? ' bg-green' : 'bg-red'"
+ >
+ {{ item.direction == "buy" ? $t("开多") : $t("开空") }}
+ </div>
+ <div class="ml-22 font-31 font-600">
+ <span class="" :class="[isStyle ? 'textColor1 ' : 'textColor']"
+ >{{ item.name }} {{ $t("永续") }}</span
+ >
+ <span class="text-grey font-28 font-400 ml-17 mr-17"
+ >{{ $t("全仓") }}
+ <!-- {{ item.lever_rate }}x -->
+ </span>
+ </div>
+ <img
+ v-if="item.direction == 'buy'"
+ src="../../assets/image/public/green-leverage.png"
+ alt=""
+ class="w-32 h-32"
+ />
+ <img
+ v-else
+ src="../../assets/image/public/red-leverage.png"
+ alt=""
+ class="w-32 h-32"
+ />
+ </div>
+ </div>
+ </div>
+ <div class="flex justify-between">
+ <!-- <div class="flex-1 text-left">
+ <div class="text-grey">
+ {{ $t("未实现盈亏（USDT）") }}
+ </div>
+ <div
+ class="mt-20"
+ :class="item.profit > 0 ? 'text-green' : 'text-red'"
+ >
+ {{ item.profit > 0 ? "+" + item.profit : item.profit }}
+ </div>
+ </div>
+
+ <div class="flex-1 flex flex-col text-left">
+ <div class="text-grey">ROE</div>
+ <div
+ class="mt-20"
+ :class="item.change_ratio / 1 > 0 ? 'text-green' : 'text-red'"
+ >
+ {{ item.change_ratio }}%
+ </div>
+ </div> -->
+ <div class="flex-1 text-left">
+ <div class="text-grey h40">{{ $t("时间") }}</div>
+ <div
+ class="mt-20"
+ :class="[isStyle ? 'textColor1 ' : 'textColor']"
+ style="width: 80px"
+ >
+ {{ item.create_time }}
+ </div>
+ </div>
+ <div class="flex-1 text-left">
+ <div class="text-grey h40">{{ $t("持仓数量") }}</div>
+ <div class="mt-20" :class="[isStyle ? 'textColor1 ' : 'textColor']">
+ {{ item.amount }}
+ </div>
+ </div>
+ <div class="flex-1 text-left">
+ <div class="text-grey h40">{{ $t("保证金") }}</div>
+ <div class="mt-20" :class="[isStyle ? 'textColor1 ' : 'textColor']">
+ {{ item.deposit }}
+ </div>
+ </div>
+
+ <div class="flex-2 flex flex-col text-center justify-cen">
+ <button
+ class="greyBg border-none pl-34 pr-34 pt-10 pb-10 rounded"
+ @click="onSell(item.order_no)"
+ >
+ {{ $t("平仓") }}
+ </button>
+ </div>
+ </div>
+ <!-- <div class="flex pt-44 pb-32"> -->
+
+ <!-- <div class="flex-2 flex flex-col text-center justify-end">
+ <div
+ class="font-25 border-light-blue detail-btn colorMain"
+ @click.stop="clickzyzs(item)"
+ style="padding: 4px 8px"
+ >
+ {{ $t("止盈") }}{{ $t("止损") }}
+ </div>
+ </div> -->
+ <!-- </div> -->
+ <!-- <div class="flex pb-32"> -->
+ <!-- <div class="flex-1 flex flex-col text-left">
+ <div class="text-grey">{{ $t("开仓价格") }}</div>
+ <div class="mt-20" :class="[isStyle ? 'textColor1 ' : 'textColor']">
+ {{ item.trade_avg_price }}
+ </div>
+ </div>
+ <div class="flex-1 flex flex-col text-left">
+ <div class="text-grey">{{ $t("强平价格") }}</div>
+ <div class="mt-20" :class="[isStyle ? 'textColor1 ' : 'textColor']">
+ {{ item.qiangPing }}
+ </div>
+ </div> -->
+ <!-- <div class="flex-1">
+ <div class="text-grey">{{ $t("标记价格") }}</div>
+ <div class="mt-20" :class="[isStyle ? 'textColor1 ' : 'textColor']">
+ {{ item.mark_price }}
+ </div>
+ </div> -->
+ <!-- <div class="flex-2 flex flex-col items-center justify-end">
+ <button
+ class="font-30 border-light-blue detail-btn colorMain w-125 h-60"
+ @click="goDetail(item)"
+ >
+ {{ $t("详情") }}
+ </button>
+ </div> -->
+ <!-- </div> -->
+ </div>
+ <van-popup
+ :closeable="true"
+ v-if="iszyzs && selectIndex == 1"
+ v-model="iszyzs"
+ style="
+ width: 350px;
+ height: 220px;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ "
+ class="rounded-2xl"
+ >
+ <div
+ class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
+ style="margin-top: 20px; width: 80%; margin-left: 10%"
+ >
+ <input
+ :placeholder="selectIndex == 1 ? $t('请输入止盈金额') : ''"
+ class="inputBackground pl-20 h-76 border-none text-left rounded-lg"
+ v-model="stop_price_profit"
+ />
+ <span class="font-22 font-400 textColor">{{ $t("止盈") }}</span>
+ </div>
+ <div
+ class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
+ style="margin-bottom: 20px; width: 80%; margin-left: 10%"
+ v-if="selectIndex == 1"
+ >
+ <input
+ :placeholder="selectIndex == 1 ? $t('请输入止损金额') : ''"
+ class="inputBackground pl-20 h-76 border-none text-left rounded-lg"
+ v-model="stop_price_loss"
+ />
+ <span class="font-22 font-400 textColor">{{ $t("止损") }}</span>
+ </div>
+ <div
+ class="btn"
+ style="
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ "
+ >
+ <div
+ class="btn_right"
+ @click="iszyzs = false"
+ style="
+ width: 50%;
+ text-align: center;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ "
+ >
+ {{ $t("取消") }}
+ </div>
+ <div
+ class="btn_left"
+ @click="zyzsclick"
+ style="
+ width: 50%;
+ text-align: center;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ "
+ >
+ {{ $t("确认") }}
+ </div>
+ </div>
+ </van-popup>
+ <div class="text-grey text-center py-300" v-if="!listData.length">
+ {{ $t("您目前没有持仓") }}
+ </div>
+ </div>
+</template>
+
+<script>
+import { _orderSell, _orderSellBatch, _getzyzs } from "@/API/trade.api";
+import { Dialog, Popup } from "vant";
+//import { i18n } from "@/i18n";
+export default {
+ name: "perpetualPositionList",
+ data() {
+ return {
+ iconShow: false,
+ isStyle: true,
+ selectIndex: 1,
+ xzitem: {},
+ iszyzs: false,
+ stop_price_loss: "",
+ stop_price_profit: "",
+ };
+ },
+ props: {
+ type: {
+ type: String,
+ default: "2", // 2 永续合约历史持仓，3交割合约持仓
+ },
+ listData: {
+ type: Array,
+ default() {
+ return [];
+ },
+ },
+ },
+ mounted() {
+ if (this.$route.path == "/funds") {
+ this.isStyle = false;
+ }
+ },
+ components: {
+ [Popup.name]: Popup,
+ },
+ methods: {
+ clickzyzs(item) {
+ this.iszyzs = true;
+ this.xzitem = item;
+ },
+ zyzsclick() {
+ console.log(this.xzitem.order_no);
+ var data = {
+ stop_price_loss: this.stop_price_loss,
+ order_no: this.xzitem.order_no,
+ stop_price_profit: this.stop_price_profit,
+ };
+ _getzyzs(data).then((res) => {
+ this.$toast(this.$t("成功"));
+ this.iszyzs = false;
+ });
+ },
+ changeIcon() {
+ this.iconShow = !this.iconShow;
+ },
+ goDetail(item) {
+ this.$router.push({
+ path: "/orderDetail?order_no=" + item.order_no,
+ });
+ },
+ onSell(order_no) {
+ // 平仓单个
+ Dialog.confirm({
+ confirmButtonText: this.$t("确定"),
+ cancelButtonText: this.$t("取消"),
+ title: this.$t("平仓提示"),
+ message: this.$t("是否平仓?"),
+ })
+ .then(() => {
+ _orderSell({ order_no }).then(() => {
+ this.$toast(this.$t("平仓成功"));
+ this.$emit("sell", order_no);
+ });
+ })
+ .catch(() => {});
+ },
+ onSellAll() {
+ // 平仓全部
+ _orderSellBatch().then(() => {
+ this.$toast(this.$t("平仓成功"));
+ this.$emit("sell");
+ });
+ },
+ },
+};
+</script>
+<style scoped lang="scss">
+.text-grey {
+ color: #868c9a;
+ font-size: 25px;
+}
+.open-btn {
+ border-radius: 7px;
+}
+
+.detail-btn {
+ border: 1px solid;
+ border-radius: 7px;
+
+ @include themify() {
+ background: themed("btn_background1");
+ }
+
+ @include themify() {
+ border: themed("btn_background1");
+ }
+}
+
+// .detail-btn1 {
+// border: 1px solid;
+// border-radius: 7px;
+// }
+// .textColor{
+// color: #333;
+// }
+// .textColor1{
+// color: #333;
+// color: #fff;
+// }
+.greyBg {
+ @include themify() {
+ background: themed("btn_background2");
+ }
+
+ color: #818181;
+}
+
+.border-b-color {
+ @include themify() {
+ border-bottom: 1px solid themed("border_color");
+ }
+}
+
+.h40 {
+ height: 3rem;
+}
+</style>
diff --git a/src/i18n/CN/index.js b/src/i18n/CN/index.js
index ca93bd8..c3ea517 100644
--- a/src/i18n/CN/index.js
+++ b/src/i18n/CN/index.js
@@ -1526,6 +1526,8 @@
"加载完毕": "加載完畢",
"操作": "操作",
"盈亏": "盈虧",
+ "盈利": "盈利",
+ "盈利率": "盈利率",
"开仓金额": "開倉金額",
"可平金额": "可平金額",
"建仓成本": "建倉成本",
diff --git a/src/i18n/en-US/index.js b/src/i18n/en-US/index.js
index 9a05757..30758c5 100644
--- a/src/i18n/en-US/index.js
+++ b/src/i18n/en-US/index.js
@@ -1553,6 +1553,8 @@
"加载完毕": "Loading complete",
"操作": "Operate",
"盈亏": "P/L",
+ "盈利": "Profit",
+ "盈利率": "Profit rate",
"开仓金额": "Amount",
"可平金额": "Closable amount",
"建仓成本": "Average",
diff --git a/src/page/perpetualContract/index.vue b/src/page/perpetualContract/index.vue
index 0a63170..c1d6871 100644
--- a/src/page/perpetualContract/index.vue
+++ b/src/page/perpetualContract/index.vue
@@ -90,9 +90,9 @@
</div>
<!-- <div class="fixed w-full shadow z-10 tabBackground1"> -->
<div class="flex justify-between px-30 py-10">
- <span class="font-24 textColor2"
+ <!-- <span class="font-24 textColor2"
>{{ symbolname }} {{ $t("k线图表") }}</span
- >
+ > -->
<!-- <van-icon class="textColor" @click.stop="showCharts = !showCharts"
:name="showCharts ? 'arrow-down' : 'arrow-up'"></van-icon> -->
</div>
diff --git a/src/page/perpetualContract/perpetualHistory.vue b/src/page/perpetualContract/perpetualHistory.vue
index ac02bb4..f5491fb 100644
--- a/src/page/perpetualContract/perpetualHistory.vue
+++ b/src/page/perpetualContract/perpetualHistory.vue
@@ -86,6 +86,12 @@
</div>
</van-list>
</template>
+
+ <div v-if="type === 'position'">
+ <PerpetualPositionList
+ :list-data="orderHold"
+ ></PerpetualPositionList>
+ </div>
</van-tab>
</van-tabs>
</div>
@@ -96,6 +102,7 @@
import assetsHead from "@/components/assets-head";
import PerpetualEntrustList from "@/components/perpetual-entrust-list/index.vue";
import PerpetualHistoryPosition from "@/components/perpetual-history-position/index.vue";
+import PerpetualPositionList from "@/components/perpetual-position-list/index.vue";
import { _orderListCur, _orderListHold } from "@/API/trade.api";
import { _getCoins } from "@/API/home.api";
import { List, Tab, Tabs, DropdownMenu, DropdownItem } from "vant";
@@ -103,6 +110,7 @@
data() {
return {
type: "orders",
+ orderHold: [], // 永续持有仓位
dataList: {
orders: [],
hisorders: [],
@@ -117,6 +125,10 @@
{
title: this.$t("历史委托"),
type: "hisorders",
+ },
+ {
+ title: this.$t("当前持仓"),
+ type: "position",
},
],
loading: false,
@@ -149,6 +161,12 @@
this.$router.go(-1);
},
async fetchList(symbol) {
+ if (this.type === "position") {
+ _orderListHold().then((data) => {
+ this.orderHold = data;
+ });
+ return;
+ }
const _api = this.type === "orders" ? _orderListCur : _orderListHold;
const type = this.type;
symbol = "";
@@ -181,6 +199,7 @@
components: {
PerpetualEntrustList,
PerpetualHistoryPosition,
+ PerpetualPositionList,
assetsHead,
[DropdownMenu.name]: DropdownMenu,
[DropdownItem.name]: DropdownItem,
--
Gitblit v1.9.3