feat

lxf

2025-06-24 916757dbb9d08ef2875fd3a8bd7a16ebe6d8f97c

feat

 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>

 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)

 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>

 src/components/perpetual-position-list/index2.vue

New file
@@ -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>

 src/i18n/CN/index.js

@@ -1526,6 +1526,8 @@
    "加载完毕": "加載完畢",
    "操作": "操作",
    "盈亏": "盈虧",
    "盈利": "盈利",
    "盈利率": "盈利率",
    "开仓金额": "開倉金額",
    "可平金额": "可平金額",
    "建仓成本": "建倉成本",

 src/i18n/en-US/index.js

@@ -1553,6 +1553,8 @@
  "加载完毕": "Loading complete",
  "操作": "Operate",
  "盈亏": "P/L",
  "盈利": "Profit",
  "盈利率": "Profit rate",
  "开仓金额": "Amount",
  "可平金额": "Closable amount",
  "建仓成本": "Average",

 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 }}&nbsp;{{ $t("k线图表") }}</span
      >
      > -->
      <!-- <van-icon class="textColor" @click.stop="showCharts = !showCharts"
                    :name="showCharts ? 'arrow-down' : 'arrow-up'"></van-icon> -->
    </div>

 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,