5.10航天ui交易所pc端,代码jiem-pc
lxf
2025-07-09 1b3431ccdb0efcb22798d71d75ddcdc3175f220b
src/components/constract/PerpetualContract/createOrder.vue
@@ -2,7 +2,7 @@
  <div>
    <div class="perpeCreateOrder" style="background: #1a1a1a">
      <!-- 开仓+ 平仓 -->
      <div class="titles">
      <!-- <div class="titles">
        <span
          v-for="(item, index) in title"
          :key="index"
@@ -10,7 +10,7 @@
          @click="changeTitle(item, index)"
          >{{ item }}</span
        >
      </div>
      </div> -->
      <!-- 全仓+杠杆 -->
      <div class="crossSettingBox">
        <div class="crossSettingItem" style="margin-right: 20px">
@@ -25,10 +25,23 @@
                : 'not-allowed',
          }"
        >
          <div @click="openLeverDialog">
          <!-- <div @click="openLeverDialog">
            <span> {{ current_lever_rate }}</span
            ><i class="icon iconfont icon-Mul_triangle lever-icon"></i>
          </div>
          </div> -->
          <!-- 替换弹窗为下拉选择 -->
          <el-select
            v-model="current_lever_rate_num"
            @change="changeLeverSelect"
          >
            <el-option
              v-for="item in [25, 50, 100, 200]"
              :key="item"
              :value="item"
            >
              {{ item }}X
            </el-option>
          </el-select>
        </div>
      </div>
      <!-- 限价+市价 -->
@@ -37,18 +50,18 @@
        v-if="existToken"
        @tab-click="handleTabClick"
      >
        <el-tab-pane :label="$t('message.home.xianjia')" name="limit">
        </el-tab-pane>
        <!-- <el-tab-pane :label="$t('message.home.shijia')" name="opponent">
        <!-- <el-tab-pane :label="$t('message.home.xianjia')" name="limit">
        </el-tab-pane> -->
        <el-tab-pane :label="$t('message.home.shijia')" name="opponent">
        </el-tab-pane>
      </el-tabs>
      <!-- 下单 -->
      <div class="place-order-form-box">
        <div class="common-form-box" id="leftPoForm">
          <div class="avaliable-USD">
          <!-- <div class="avaliable-USD">
            <div>{{ $t("message.jiaoyi.heyuezongzican") }}</div>
            <div>{{ availableMoney }} {{ unit }}</div>
          </div>
          </div> -->
          <!-- 价格输入 -->
          <div class="place-order-input-box" v-show="activeName === 'limit'">
            <div class="input-label-box">
@@ -91,6 +104,7 @@
            :symbol="newPageData.symbol"
            :lever_rate="current_lever_rate_num"
            :typeNum="isActive"
            :initOpen="initOpen"
            @getAmount="getAmount"
          ></amount-slider>
          <!-- 操作按钮-->
@@ -115,7 +129,7 @@
              </div>
            </div>
            <!-- 做空 -->
            <div class="btn-wrapper" v-show="isActive == 1">
            <div class="btn-wrapper">
              <div class="submit-btn-box">
                <button
                  side="sell"
@@ -139,7 +153,7 @@
            <!-- 合约金额=保证金-->
            <div class="submit-info-item">
              <div>{{ $t("message.home.heyuejine") }}:</div>
              <div>{{ getMargin }} {{ unit }}</div>
              <div>{{ getContractAmount }} {{ unit }}</div>
            </div>
            <!-- 保证金 -->
            <div class="submit-info-item">
@@ -182,6 +196,7 @@
      ref="openDialog"
      :type="activeName"
      :sellOrBuy="directionName"
      this.maxAmount
      :info="getSubmitInfo('open')"
    ></open-dialog>
  </div>
@@ -223,7 +238,7 @@
      ],
      newPageData: {}, //替代pageData,因为不能修改props的数据
      isActive: 0, //开仓0or平仓1
      activeName: "limit", //限价or市价
      activeName: "opponent", //限价or市价
      directionName: "", //buy Or sell
      price: undefined, //输入的价格
      sessionObj: {}, //
@@ -232,12 +247,12 @@
      lever_rate: ["1.00X"], // 后端返回的杠杆 ['1.00X','2.00X',...]
      origin_lever: [], // 支持的杠杆 [1,2,3]
      current_lever_rate: "", //当前选中
      current_lever_rate_num: 1, //当前选中的杠杆数字 1
      current_lever_rate_num: 200, //当前选中的杠杆数字 1
      initClose: {},
      initOpen: {},
      inputAmount: "0.00",
      availableMoney: "0.00",
      inputAmount: "0.000000",
      availableMoney: "0.000000",
      closeBuyAmount: 0,
      closeSellAmount: 0,
      isNewPrice: 0,
@@ -254,9 +269,11 @@
    // 登录之后才能调用
    if (this.existToken) {
      this.initContractparams();
      this.timer = setInterval(() => {
      this.$nextTick(() => {
        // this.timer = setInterval(() => {
        this.initContractparams();
      }, 2000);
        // }, 2000);
      });
    }
    this.price = this.newPageData.close;
@@ -268,12 +285,16 @@
    });
    // params:type类型
    bus.on("getSesstionToken", (type) => {
      setTimeout(() => {
      this.$nextTick(() => {
        //   setTimeout(() => {
        this.initContractparams(type);
      }, 2000); //延迟调用
        //   }, 2000); //延迟调用
      });
    });
    bus.on("moneyContract", (val) => {
      this.availableMoney = val;
      if (val) {
        this.availableMoney = val;
      }
    }); //合约可用余额
  },
  //销毁定时器
@@ -302,28 +323,31 @@
    },
    // 获取合约金额
    getContractAmount: function () {
      console.log("获取合约金额", this.initOpen.amount, this.inputAmount);
      const amount = this.inputAmount;
      let data = "0.00";
      if (amount != undefined && this.lever_rate != undefined) {
        if (this.lever_rate?.length > 0) {
          data = this.sessionObj?.amount * amount * this.current_lever_rate_num;
        } else if (this.lever_rate.length == 0) {
          data = this.sessionObj?.amount * amount * 1;
        }
      }
      return bigDecimal.round(data, 2);
      // if (amount != undefined && this.lever_rate != undefined) {
      //   if (this.lever_rate?.length > 0) {
      data = amount * this.initOpen.amount;
      //   }
      //   else if (this.lever_rate.length == 0) {
      //     data = this.sessionObj?.amount * amount * 1;
      //   }
      // }
      return data;
    },
    // 获取保证金,开仓才需要
    getMargin: function () {
      // if (this.availableMoney > 0) return;
      const amount = this.inputAmount;
      let data = "0.00";
      let data = "0.000000";
      console.log(
        "getMargin",
        this.isActive,
        amount,
        this.lever_rate,
        this.sessionObj.amount,
        this.current_lever_rate_num
        parseInt(amount / this.current_lever_rate_num),
        this.availableMoney, //
        this.sessionObj.amount, //
        this.current_lever_rate_num // 倍数
      );
      if (
        this.isActive === 0 &&
@@ -332,20 +356,62 @@
        this.sessionObj.amount
      ) {
        if (this.lever_rate.length > 0) {
          data = this.sessionObj.amount * amount * this.current_lever_rate_num;
          data =
            parseInt(amount * this.initOpen.amount) /
            this.current_lever_rate_num;
        } else if (this.lever_rate.length == 0) {
          data = this.sessionObj.amount * amount * 1;
        }
      }
      // 校验保证金不能大于余额
      // if (
      //   Number(this.availableMoney) > 0 &&
      //   Number(data) > Number(this.availableMoney)
      // ) {
      // 自动限制为最大可用余额
      // data = this.availableMoney;
      // 可选:提示
      // this.$nextTick(() => {
      //   ElMessage.warning(this.$t("message.home.baozhengjinbuzu")); // 保证金不足
      // });
      // }
      return bigDecimal.round(data, 2);
    },
    // 获取手续费
    getFee: function () {
      // const amount = this.inputAmount;
      // let data = "0.00";
      // if (amount && this.isActive == 0) {
      //   // 每手的数量*多少手(张)*每手的手续费
      //   data = amount * this.sessionObj.fee;
      // }
      // return bigDecimal.round(data);
      const amount = this.inputAmount;
      let data = "0.00";
      let data = 0;
      // if(amount) {return bigDecimal.round(data, 2);};
      let rate = 0;
      // 根据当前杠杆设置费率
      switch (Number(this.current_lever_rate_num)) {
        case 25:
          rate = 0.0375;
          break;
        case 50:
          rate = 0.075;
          break;
        case 100:
          rate = 0.15;
          break;
        case 200:
          rate = 0.3;
          break;
        default:
          rate = 0;
      }
      if (amount && this.isActive == 0) {
        // 每手的数量*多少手(张)*每手的手续费
        data = amount * this.sessionObj.fee;
        data =
          (parseInt(amount * this.initOpen.amount) /
            this.current_lever_rate_num) *
          rate; // 乘以100显示百分比
      }
      return bigDecimal.round(data, 2);
    },
@@ -355,7 +421,7 @@
    current_lever_rate(val) {
      this.$refs.sliderRef?.emptyValue();
      this.$refs.sliderRef?.cleanAmount();
      this.inputAmount = "0.00";
      this.inputAmount = "0.000000";
    },
    // 市价单,主动赋值
    clickData(val) {
@@ -377,8 +443,14 @@
    },
  },
  methods: {
    changeLeverSelect(e) {
      const newLever = Number(this.current_lever_rate_num);
      this.current_lever_rate = `${newLever}.00X`;
      this.current_lever_rate_num = newLever;
    },
    //获取张数
    getAmount(val) {
      console.log("val: ", val);
      this.inputAmount = val;
    },
    // 切换限价单和市价单
@@ -400,18 +472,39 @@
    // 获取张数,数据转换
    getVolumnByLever() {
      let amount = this.initOpen.volume;
      console.log("amount: ", amount);
      if (this.isActive == 1) {
        amount = Math.max(this.closeSellAmount, this.closeBuyAmount);
      }
      // console.log("amount: ", amount);
      // if (this.isActive == 1) {
      //   amount = Math.max(this.closeSellAmount, this.closeBuyAmount);
      // }
      if (!amount) {
        return 0;
      } else {
        if (this.lever_rate.length > 0) {
          return parseInt(amount / this.current_lever_rate_num);
        } else if (this.lever_rate.length == 0) {
          return parseInt(amount / 1);
        }
        // if (this.lever_rate.length > 0) {
        const price = this.initOpen.amount;
        // console.log(
        //   "price: ",
        //   price,
        //   this.current_lever_rate_num,
        //   this.availableMoney,
        //   (this.availableMoney * this.current_lever_rate_num) / price
        // );
        // 最大可开张数
        return parseInt(
          (this.availableMoney * this.current_lever_rate_num) / price
        );
        // }
        // const contractSize = 1;
        // const availableMargin = amount; // 可用保证金
        // const lever = this.current_lever_rate_num;
        // const maxVolume = parseInt(
        //   (availableMargin * lever) / (contractSize * price)
        // );
        // return maxVolume > 0 ? maxVolume : 0;
        // } else if (this.lever_rate.length == 0) {
        //   return parseInt(amount / 1);
        // }
      }
    },
@@ -441,10 +534,10 @@
        }
        if (this.isActive === 0) {
          // 开仓弹窗 不弹出直接确认
          this.$refs.openDialog.handleSubmit();
          this.$refs.openDialog.handleSubmit(type);
        } else {
          // 平仓弹窗
          this.$refs.closeDialog.handleSubmit();
          this.$refs.closeDialog.handleSubmit(type);
        }
      }
    },
@@ -492,10 +585,10 @@
            if (!this.current_lever_rate) {
              this.current_lever_rate = hasLever
                ? this.lever_rate[this.lever_rate.length - 1]
                : "1.00X";
                : "200.00X";
              this.current_lever_rate_num = hasLever
                ? this.origin_lever[this.lever_rate.length - 1]
                : "1";
                : "200";
            }
          }
        });
@@ -638,4 +731,16 @@
  background: #484d56;
  margin-top: 20px;
}
::v-deep .el-select__wrapper {
  background: #303133;
  box-shadow: 0 0 0 1px #303133 inset;
}
::v-deep .el-select__placeholder {
  color: #fff !important;
}
::v-deep .el-select-dropdown__item.is-selected {
  color: #f7b328 !important;
}
</style>