| | |
| | | <div> |
| | | <div class="perpeCreateOrder" style="background: #1a1a1a"> |
| | | <!-- 开仓+ 平仓 --> |
| | | <div class="titles"> |
| | | <!-- <div class="titles"> |
| | | <span |
| | | v-for="(item, index) in title" |
| | | :key="index" |
| | |
| | | @click="changeTitle(item, index)" |
| | | >{{ item }}</span |
| | | > |
| | | </div> |
| | | </div> --> |
| | | <!-- 全仓+杠杆 --> |
| | | <div class="crossSettingBox"> |
| | | <div class="crossSettingItem" style="margin-right: 20px"> |
| | |
| | | : '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> |
| | | <!-- 限价+市价 --> |
| | |
| | | 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.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"> |
| | |
| | | ], |
| | | newPageData: {}, //替代pageData,因为不能修改props的数据 |
| | | isActive: 0, //开仓0or平仓1 |
| | | activeName: "limit", //限价or市价 |
| | | activeName: "opponent", //限价or市价 |
| | | directionName: "", //buy Or sell |
| | | price: undefined, //输入的价格 |
| | | sessionObj: {}, // |
| | |
| | | |
| | | initClose: {}, |
| | | initOpen: {}, |
| | | inputAmount: "0.00", |
| | | availableMoney: "0.00", |
| | | inputAmount: "0.000000", |
| | | availableMoney: "0.000000", |
| | | closeBuyAmount: 0, |
| | | closeSellAmount: 0, |
| | | isNewPrice: 0, |
| | |
| | | data = this.sessionObj?.amount * amount * 1; |
| | | } |
| | | } |
| | | return bigDecimal.round(data, 2); |
| | | return bigDecimal.round(data, 6); |
| | | }, |
| | | // 获取保证金,开仓才需要 |
| | | getMargin: function () { |
| | | 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 |
| | | ); |
| | | if ( |
| | | this.isActive === 0 && |
| | | amount != undefined && |
| | | this.lever_rate.length != undefined && |
| | | amount !== undefined && |
| | | this.lever_rate.length !== undefined && |
| | | this.sessionObj.amount |
| | | ) { |
| | | if (this.lever_rate.length > 0) { |
| | |
| | | data = this.sessionObj.amount * amount * 1; |
| | | } |
| | | } |
| | | return bigDecimal.round(data, 2); |
| | | // 校验保证金不能大于余额 |
| | | 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, 6); |
| | | }, |
| | | // 获取手续费 |
| | | 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 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; |
| | | } |
| | | let data = 0; |
| | | if (amount && this.isActive == 0) { |
| | | // 每手的数量*多少手(张)*每手的手续费 |
| | | data = amount * this.sessionObj.fee; |
| | | data = amount * rate * 100; // 乘以100显示百分比 |
| | | } |
| | | return bigDecimal.round(data, 2); |
| | | }, |
| | |
| | | current_lever_rate(val) { |
| | | this.$refs.sliderRef?.emptyValue(); |
| | | this.$refs.sliderRef?.cleanAmount(); |
| | | this.inputAmount = "0.00"; |
| | | this.inputAmount = "0.000000"; |
| | | }, |
| | | // 市价单,主动赋值 |
| | | clickData(val) { |
| | |
| | | }, |
| | | }, |
| | | 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) { |
| | | this.inputAmount = val; |
| | |
| | | // 获取张数,数据转换 |
| | | getVolumnByLever() { |
| | | let amount = this.initOpen.volume; |
| | | console.log("amount: ", amount); |
| | | if (this.isActive == 1) { |
| | | amount = Math.max(this.closeSellAmount, this.closeBuyAmount); |
| | | } |
| | |
| | | } else { |
| | | if (this.lever_rate.length > 0) { |
| | | return parseInt(amount / this.current_lever_rate_num); |
| | | // const contractSize = 1; |
| | | // const price = this.price || this.newPageData.close || 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); |
| | | } |
| | |
| | | return; |
| | | } |
| | | if (this.isActive === 0) { |
| | | // 开仓弹窗 |
| | | this.$refs.openDialog.open(); |
| | | // 开仓弹窗 不弹出直接确认 |
| | | this.$refs.openDialog.handleSubmit(); |
| | | } else { |
| | | // 平仓弹窗 |
| | | this.$refs.closeDialog.open(); |
| | | this.$refs.closeDialog.handleSubmit(); |
| | | } |
| | | } |
| | | }, |
| | |
| | | }); |
| | | } |
| | | if (!this.current_lever_rate) { |
| | | this.current_lever_rate = hasLever ? this.lever_rate[0] : "1.00X"; |
| | | this.current_lever_rate = hasLever |
| | | ? this.lever_rate[this.lever_rate.length - 1] |
| | | : "1.00X"; |
| | | this.current_lever_rate_num = hasLever |
| | | ? this.origin_lever[0] |
| | | ? this.origin_lever[this.lever_rate.length - 1] |
| | | : "1"; |
| | | } |
| | | } |
| | |
| | | color: #fff; |
| | | } |
| | | .noLogin div:nth-child(1) { |
| | | background: #1d91ff; |
| | | background: #f7b328; |
| | | } |
| | | .noLogin div:nth-child(2) { |
| | | 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> |