| | |
| | | <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.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"> |
| | |
| | | :symbol="newPageData.symbol" |
| | | :lever_rate="current_lever_rate_num" |
| | | :typeNum="isActive" |
| | | :initOpen="initOpen" |
| | | @getAmount="getAmount" |
| | | ></amount-slider> |
| | | <!-- 操作按钮--> |
| | |
| | | </div> |
| | | </div> |
| | | <!-- 做空 --> |
| | | <div class="btn-wrapper" v-show="isActive == 1"> |
| | | <div class="btn-wrapper"> |
| | | <div class="submit-btn-box"> |
| | | <button |
| | | side="sell" |
| | |
| | | <!-- 合约金额=保证金--> |
| | | <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"> |
| | |
| | | ref="openDialog" |
| | | :type="activeName" |
| | | :sellOrBuy="directionName" |
| | | this.maxAmount |
| | | :info="getSubmitInfo('open')" |
| | | ></open-dialog> |
| | | </div> |
| | |
| | | ], |
| | | newPageData: {}, //替代pageData,因为不能修改props的数据 |
| | | isActive: 0, //开仓0or平仓1 |
| | | activeName: "limit", //限价or市价 |
| | | activeName: "opponent", //限价or市价 |
| | | directionName: "", //buy Or sell |
| | | price: undefined, //输入的价格 |
| | | sessionObj: {}, // |
| | |
| | | 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, |
| | |
| | | // 登录之后才能调用 |
| | | if (this.existToken) { |
| | | this.initContractparams(); |
| | | this.timer = setInterval(() => { |
| | | this.$nextTick(() => { |
| | | // this.timer = setInterval(() => { |
| | | this.initContractparams(); |
| | | }, 2000); |
| | | // }, 2000); |
| | | }); |
| | | } |
| | | |
| | | this.price = this.newPageData.close; |
| | |
| | | }); |
| | | // 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; |
| | | } |
| | | }); //合约可用余额 |
| | | }, |
| | | //销毁定时器 |
| | |
| | | }, |
| | | // 获取合约金额 |
| | | 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 && |
| | |
| | | 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); |
| | | }, |
| | |
| | | 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) { |
| | | console.log("val: ", 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); |
| | | } |
| | | // 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); |
| | | // } |
| | | } |
| | | }, |
| | | |
| | |
| | | } |
| | | if (this.isActive === 0) { |
| | | // 开仓弹窗 不弹出直接确认 |
| | | this.$refs.openDialog.handleSubmit(); |
| | | this.$refs.openDialog.handleSubmit(type); |
| | | } else { |
| | | // 平仓弹窗 |
| | | this.$refs.closeDialog.handleSubmit(); |
| | | this.$refs.closeDialog.handleSubmit(type); |
| | | } |
| | | } |
| | | }, |
| | |
| | | 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"; |
| | | } |
| | | } |
| | | }); |
| | |
| | | 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> |