<template>
|
<!-- 永续合约开仓页 -->
|
<div class="perpetual-open">
|
<!-- 隐藏杠杠 全仓 k 线图入口 -->
|
<div class="flex header-open">
|
<div class="flex flex-1 pt-34">
|
<div
|
class="w-180 h-60 lh-60 text-center rounded inputBackground textColor"
|
>
|
{{ $t("全仓") }}
|
</div>
|
<div
|
class="w-140 h-60 lh-60 ml-29 rounded tabBackground textColor"
|
v-if="selectIndex / 1 === 1"
|
>
|
<div
|
@click="showOptions = !showOptions"
|
style="height: 100%; box-sizing: border-box"
|
class="relative word-30 pl-28 pr-10 w-140 h-60 select-wrap flex justify-between items-center"
|
>
|
{{ form.lever_rate }}x
|
<img
|
src="../../assets/image/public/grey-select.png"
|
alt="select-icon"
|
class="w-22 h-11"
|
/>
|
<div
|
v-if="showOptions"
|
class="options w-140 absolute top-97 left-0 z-10"
|
>
|
<div
|
class="w-full"
|
@click.stop="handleChoose(item)"
|
:class="{
|
'option-active': form.lever_rate === item.lever_rate,
|
}"
|
:value="item.lever_rate"
|
v-for="item in initData.lever"
|
:key="item.id"
|
>
|
{{ item.lever_rate }}x
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div>
|
<span @click="jump">
|
<img
|
src="../../assets/image/public/k-line.png"
|
alt="line-img"
|
class="w-38 h-35"
|
/>
|
</span>
|
</div>
|
</div>
|
<div class="pt-30 pb-20">
|
<div class="flex">
|
<div class="mr-30">
|
<div class="w-290 flex justify-between newcolor1 font-22">
|
<div>
|
<div class="">{{ $t("价格") }}</div>
|
<div class="mt-4">(USDT)</div>
|
</div>
|
<div class="text-right items-end justify-end">
|
<div class="">{{ $t("数量") }}</div>
|
<div class="mt-4" v-if="symbol=='MOTHER'">(ORBITAL)</div>
|
<div class="mt-4" v-else-if="symbol=='ZKP'">(ZYD)</div>
|
<div class="mt-4" v-else-if="symbol=='DEA'">(DIA)</div>
|
<div class="mt-4" v-else-if="symbol=='AXFD'">(XETA)</div>
|
<div class="mt-4" v-else-if="symbol=='SMK'">(OG)</div>
|
<div class="mt-4" v-else-if="symbol=='FPP'">(FIL)</div>
|
<div class="mt-4" v-else-if="symbol=='JKRT'">(JKRT)</div>
|
<div class="mt-4" v-else-if="symbol=='ASK'">(ASK)</div>
|
<div class="mt-4" v-else-if="symbol=='EGT'">(EGT)</div>
|
<div class="mt-4" v-else>({{ symbol | _symbolName() }})</div>
|
</div>
|
</div>
|
<div
|
v-if="showType == 0 || showType == 1"
|
class="w-290 flex justify-between pt-12 font-26"
|
v-for="(item, index) in greenData"
|
:key="index"
|
@click="onQuickPrice(item.price)"
|
:style="{
|
background:
|
`linear-gradient(to right,${
|
theme == 'dark' ? '#121212' : '#ffffff'
|
} 0%` +
|
(1 - item.amount / greenData[greenData.length - 1].amount) *
|
100 +
|
'%,rgba(94,186,137,.1) ' +
|
(1 - item.amount / greenData[greenData.length - 1].amount) *
|
100 +
|
'%,rgba(94,186,137,.1) 100%)',
|
}"
|
>
|
<div class="text-green">{{ item.price }}</div>
|
<div class="text-right textColor" v-if="symbol == 'shib'">
|
{{ fixDate(item.amount, $i18n) || "--" }}
|
</div>
|
<div class="text-right textColor" v-else>
|
{{ item.amount || "--" }}
|
</div>
|
</div>
|
<div
|
v-if="showType == 0 || showType == 1 || showType == 2"
|
class="w-290 mt-38 mb-38 text-red pt-12 font-34 font-700"
|
>
|
{{ approximately || "--" }}
|
</div>
|
<!-- <div
|
v-if="showType == 0 || showType == 1 || showType == 2"
|
class="approximately-text pb-12 font-20 text-center"
|
>
|
≈ {{ price || "--" }}
|
</div> -->
|
<div
|
v-if="showType == 0 || showType == 2"
|
class="w-290 flex justify-between pt-12 font-26"
|
v-for="(item, index) in redData"
|
:key="item + index"
|
@click="onQuickPrice(item.price)"
|
:style="{
|
background:
|
`linear-gradient(to right,${
|
theme == 'dark' ? '#121212' : '#ffffff'
|
} 0%` +
|
(1 - item.amount / greenData[greenData.length - 1].amount) *
|
100 +
|
'%,rgba(246,70,93,.1) ' +
|
(1 - item.amount / greenData[greenData.length - 1].amount) *
|
100 +
|
'%,rgba(246,70,93,.1) 100%)',
|
}"
|
>
|
<div class="text-red">{{ item.price }}</div>
|
<div class="text-right textColor" v-if="symbol == 'shib'">
|
{{ fixDate(item.amount, $i18n) || "--" }}
|
</div>
|
<div class="text-right textColor" v-else>
|
{{ item.amount || "--" }}
|
</div>
|
</div>
|
<!-- <div class="flex k-select-box">
|
<div class="mt-30 mb-30 select-box" style="position: relative">
|
<div
|
class="flex justify-between items-center w-full h-70"
|
@click="selectArryBtn"
|
>
|
<div class="pl-16 textColor" style="width: 80%">
|
{{ dataArrTitle }}
|
</div>
|
<img
|
src="@/assets/image/public/grey-select.png"
|
alt="select-icon"
|
class="w-22 h-11 pr-20"
|
/>
|
</div>
|
<div class="option-box" v-show="arryIsShow">
|
<div
|
class="font-30"
|
v-for="(item, index) in selectDataArry"
|
:key="index"
|
@click="selectItemArry(item)"
|
>
|
{{ item.name }}
|
</div>
|
</div>
|
</div>
|
<div @click="isSelectShow = true">
|
<img
|
src="@/assets/image/selectIcon.png"
|
alt="warn-icon"
|
class="w-36 h-30"
|
/>
|
</div>
|
</div> -->
|
</div>
|
<div class="w-440 flex flex-col">
|
<template v-if="selectIndex == 1">
|
<!-- <div class="flex items-center h-66 rounded-lg text-grey"> -->
|
<!-- <p
|
class="font-28 flex-1 flex items-center justify-center h-66 long"
|
:class="currentType == 'long' ? 'long' : ''"
|
@click="changeTab('long')"
|
>
|
{{ $t("开多") }}
|
</p> -->
|
<!-- <p
|
class="font-28 flex-1 ml-20 flex items-center justify-center h-66 short"
|
:class="currentType == 'short' ? 'short' : ''"
|
@click="changeTab('short')"
|
>
|
{{ $t("开空") }}
|
</p> -->
|
<!-- </div> -->
|
<div class="mt-30 mb-30" style="position: relative">
|
<div
|
class="box-show flex justify-between items-center w-full h-76 rounded-lg textColor"
|
@click="selectBtn"
|
>
|
<img
|
src="../../assets/image/public/warn.png"
|
alt="warn-icon"
|
class="w-25 h-25 pl-20"
|
/>
|
<div class="text-center" style="width: 80%">{{ title }}</div>
|
<img
|
src="../../assets/image/public/grey-select.png"
|
alt="select-icon"
|
class="w-22 h-11 pr-20"
|
/>
|
</div>
|
<div class="option-box" v-show="isShow">
|
<div
|
class="font-30"
|
v-for="item in selectData"
|
:key="item.type"
|
@click="selectItem(item)"
|
>
|
{{ item.title }}
|
</div>
|
</div>
|
</div>
|
</template>
|
<contract-futrue
|
v-if="selectIndex == 2"
|
class="mb-20"
|
:initFutrue="initFutrue"
|
@paraId="onParaId"
|
/>
|
|
<div style="border: 1px solid #a6a6a6; border-radius: 4px;" class="h-76 lh-76 inputBackground2 mb-30 flex pr-20 justify-center rounded-lg textColor"
|
v-if="selectIndex == 1">
|
<!-- <input v-if="type / 1 === 1" :placeholder="$t('价格最优')" class="w-full pl-20 h-76 border-none text-left rounded-lg"
|
:disabled="type / 1 === 1" @focus="focus = true" />
|
<input v-else class="w-full pl-20 h-76 border-none text-left rounded-lg"
|
:disabled="type / 1 === 1" @focus="focus = true" v-model="form.price" /> -->
|
|
<input class="w-full pl-20 h-76 border-none text-left rounded-lg"
|
:disabled="type / 1 === 1" @focus="focus = true" v-model="form.price" />
|
<span class="ml-20">USDT</span>
|
</div>
|
|
<div v-if="selectIndex == 2" class="w-440 flex items-center inputBackground2 h-76 lh-76 rounded-lg">
|
<div v-if="selectIndex == 1" class="w-80 flex items-center justify-center" style="height: 100%"
|
@click="onReduce">
|
<img src="../../assets/image/public/reduce.png" alt="add" class="w-30 h-6" />
|
</div>
|
<input :placeholder="selectIndex == 1 ? $t('交易数量')
|
: $t('最少') + initFutrue && initFutrue.para
|
? $t('最小金额') + initFutrue.para[paraIndex].buy_min
|
: ''
|
" class="border-none text-center textColor" style="width: 156px" v-model="form.amount"
|
type="number" @input="onInput" />
|
<div class="w-80 flex items-center justify-center" style="height: 100%">
|
<template v-if="selectIndex == 1">
|
<img @click="onAdd" src="../../assets/image/public/add.png" alt="reduce" class="w-30 h-30" />
|
</template>
|
<template v-else>
|
<span class="textColor">USDT</span>
|
</template>
|
</div>
|
</div>
|
<template v-if="selectIndex == 1">
|
<div class="mb-20 w-full flex justify-between items-center">
|
<span class="font-22 font-400 newcolor1">{{
|
$t("可开张数")
|
}}</span>
|
<span class="font-22 font-400 newcolor1">
|
{{ initData.volume }}
|
U
|
</span>
|
</div>
|
<div style="border: 1px solid #a6a6a6; border-radius: 4px;" class="h-76 lh-76 inputBackground2 mb-30 flex pr-20 justify-center rounded-lg textColor"
|
v-if="selectIndex == 1">
|
<input :placeholder="selectIndex == 1 ? $t('交易数量')
|
: $t('最少') + initFutrue && initFutrue.para
|
? $t('最小金额') + initFutrue.para[paraIndex].buy_min
|
: ''
|
" class="border-none text-center textColor" style="width: 156px" v-model="form.amount"
|
type="number" @input="onInput" />
|
</div>
|
|
<!-- <div
|
class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor" style="margin-top:20px"
|
>
|
<input
|
:placeholder="selectIndex == 1 ? $t('请输入止盈金额') : ''"
|
class="inputBackground pl-20 h-76 border-none text-left rounded-lg"
|
v-model="form.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"
|
v-if="selectIndex == 1"
|
>
|
<input
|
:placeholder="selectIndex == 1 ? $t('请输入止损金额') : ''"
|
class="inputBackground pl-20 h-76 border-none text-left rounded-lg"
|
v-model="form.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" style="width: 50%;text-align: center;height: 100%;display: flex;justify-content: center;align-items: center;">{{$t('取消')}}</div>
|
<div class="btn_left" @click="iszyzs=false" style="width: 50%;text-align: center;height: 100%;display: flex;justify-content: center;align-items: center;">{{$t('确认')}}</div>
|
</div> -->
|
<!-- <vue-slider v-bind="options" v-model="form.amount"></vue-slider> -->
|
<!-- <vue-slider class="mainBox" v-bind="options" :marks="marks" v-model="form.volume" :hide-label="true" width="90%"
|
:railStyle="{ background: '#404040', height: '4px' }"
|
:processStyle="{ background: '#266BFF', height: '4px' }">
|
<template v-slot:step="{ active }">
|
<div :class="['custom-step', { active }]"></div>
|
</template>
|
</vue-slider>
|
<div style="color: #868D9A" class="mt-36 font-24 w-full flex justify-between items-center">
|
<span class="flex-1 text-left">0%</span>
|
<span class="flex-1 text-left">25%</span>
|
<span class="flex-1 text-center">50%</span>
|
<span class="flex-1 text-right">75%</span>
|
<span class="flex-1 text-right">100%</span>
|
</div> -->
|
<!-- 张数输入 -->
|
<amount-slider
|
ref="sliderRef"
|
:maxAmount="getVolumnByLever()"
|
@getAmount="getAmount"
|
></amount-slider>
|
</template>
|
<template v-if="selectIndex == 1 && userInfo.token">
|
<div class="flex justify-between mt-30">
|
<div class="newcolor1">{{ $t("可用USDT") }}</div>
|
<div class="textColor">{{ initFutrue.amount | nan }} USDT</div>
|
</div>
|
<div class="flex justify-between mt-30">
|
<div class="newcolor1">{{ $t("合约金额") }}</div>
|
<div class="textColor">
|
{{ initData.amount * (form.amount / 1) * form.lever_rate }} USDT
|
</div>
|
</div>
|
<div class="flex justify-between mt-30">
|
<div class="newcolor1">{{ $t("保证金") }}</div>
|
<div class="textColor">
|
{{ (initData.amount * (form.amount / 1)) | nan }} USDT
|
</div>
|
</div>
|
<!-- <div class="flex justify-between mt-30">
|
<div class="newcolor1">{{ $t("建仓手续费") }}</div>
|
<div class="textColor">
|
{{
|
userInfo.perpetual_contracts_status === "1"
|
? initData.fee * (form.amount / 1)
|
: (initData.fee * (form.amount / 1) * form.lever_rate) | nan
|
}}
|
USDT
|
</div>
|
</div> -->
|
</template>
|
<div
|
class="flex font-24 text-grey justify-between mt-32"
|
v-if="selectIndex == 2"
|
>
|
<div>{{ $t("可用USDT") }}</div>
|
<div class="textColor">{{ initFutrue.amount | nan }} USDT</div>
|
</div>
|
<div
|
class="flex font-24 text-grey justify-between mt-20"
|
v-if="selectIndex == 2"
|
>
|
<div>{{ $t("手续费") }}</div>
|
<div class="textColor">
|
{{
|
(
|
form.amount *
|
(initFutrue && initFutrue.para
|
? initData.para[paraIndex].unit_fee
|
: "")
|
).toFixed(2) | nan
|
}}
|
USDT
|
</div>
|
</div>
|
<template v-if="userInfo.token">
|
<template v-if="selectIndex == 1">
|
<div
|
class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-50"
|
@click="order('long')"
|
>
|
<div
|
class="font-34 relative text-center"
|
style="flex-grow: 1"
|
v-if="selectIndex == 1"
|
>
|
{{ $t("开多") }}
|
<!-- <span class="right-word font-22 text-center">{{
|
$t("看涨")
|
}}</span> -->
|
</div>
|
<div
|
class="font-34 relative text-center"
|
style="flex-grow: 1"
|
v-else
|
>
|
{{ $t("做多买入") }}
|
</div>
|
</div>
|
<div
|
class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-50"
|
@click="order('short')"
|
>
|
<div
|
class="relative font-34 text-center"
|
style="flex-grow: 1"
|
v-if="selectIndex == 1"
|
>
|
{{ $t("开空") }}
|
</div>
|
<div
|
class="relative font-34 text-center"
|
style="flex-grow: 1"
|
v-else
|
>
|
{{ $t("做空买入") }}
|
</div>
|
</div>
|
</template>
|
<template v-if="selectIndex == 2">
|
<div
|
class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-30"
|
@click="order('open')"
|
v-if="userInfo.token"
|
>
|
<div class="font-34 relative text-center" style="flex-grow: 1">
|
{{ $t("开多") }}
|
<!-- <span class="right-word font-22 text-center">{{
|
$t("看涨")
|
}}</span> -->
|
</div>
|
</div>
|
<div
|
class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-20 mb-10"
|
style="position: relative"
|
:class="{ 'mt-22': selectIndex == 2 }"
|
@click="order('close')"
|
v-if="userInfo.token"
|
>
|
<div class="relative font-34 text-center" style="flex-grow: 1">
|
{{ $t("开空") }}
|
<!-- <span class="right-word font-22 text-center">{{
|
$t("看跌")
|
}}</span> -->
|
</div>
|
</div>
|
</template>
|
</template>
|
<div v-else class="w-full mt-120">
|
<div class="textColor">
|
<p>{{ $t("套期保值，风险对冲") }}</p>
|
<p class="pt-8">{{ $t("登陆后继续") }}</p>
|
</div>
|
<div
|
class="h-80 lh-80 btnBackground flex text-white rounded-md justify-center mt-50"
|
@click="$router.push('/login')"
|
>
|
{{ $t("登录后进行交易") }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<van-popup v-model="show" class="rounded-2xl">
|
<popup-delivery
|
showBtns
|
:detailData="detailData"
|
:key="detailData.order_no"
|
@close="onClose"
|
@continueToBuy="continueTobuy"
|
@timeEnd="handleTimeEnd"
|
:price="price"
|
/>
|
</van-popup>
|
<van-action-sheet
|
v-model="isSelectShow"
|
@select="onSelect"
|
:actions="actions"
|
:cancel-text="$t('取消')"
|
close-on-click-action
|
@cancel="onCancel"
|
>
|
</van-action-sheet>
|
</div>
|
</template>
|
|
<script>
|
import config from "@/config";
|
import { Popup, ActionSheet } from "vant";
|
import { mapGetters } from "vuex";
|
// import VueSlider from "vue-slider-component";
|
import AmountSlider from "./amountSlider.vue";
|
import "vue-slider-component/theme/default.css";
|
import {
|
_orderOpen,
|
_orderClose,
|
_futrueOrder,
|
_futrueOrderDetail,
|
_getBalance,
|
_futrueOrderInit,
|
} from "@/API/trade.api";
|
import ContractFutrue from "@/components/contract-futrue";
|
import PopupDelivery from "@/components/popup-delivery";
|
import { fixDate } from "@/utils/utis";
|
import { _getHomeList } from "@/API/home.api";
|
import { getStorage } from "@/utils/utis";
|
// import PopupConfirmOrder from '@/components/popup-confirm-order'
|
export default {
|
name: "perpetualPosition",
|
components: {
|
// VueSlider,
|
AmountSlider,
|
ContractFutrue,
|
[Popup.name]: Popup,
|
PopupDelivery,
|
[ActionSheet.name]: ActionSheet,
|
// PopupConfirmOrder
|
},
|
props: {
|
greenData: {
|
// 买单
|
type: Array,
|
default() {
|
return [];
|
},
|
},
|
redData: {
|
// 卖单
|
type: Array,
|
default() {
|
return [];
|
},
|
},
|
symbol: {
|
type: String,
|
default: "",
|
},
|
price: {
|
type: [Number, String],
|
default: "0.00",
|
},
|
initOpen: {
|
type: Object,
|
default() {
|
return {};
|
},
|
},
|
initClose: {
|
type: Object,
|
default() {
|
return {};
|
},
|
},
|
initFutrue: {
|
type: Object,
|
default() {
|
return {};
|
},
|
},
|
selectIndex: {
|
type: [String, Number],
|
default: 1,
|
},
|
currentType: {
|
type: String,
|
default: "long",
|
},
|
},
|
watch: {
|
price(val) {
|
if (this.type === "1") {
|
// !this.focus &&
|
this.form.price = val;
|
}
|
this.form.para_id =
|
this.initFutrue.para && this.initFutrue.para[this.paraIndex]?.para_id; // 不优雅，不可靠
|
// this.form.symbol = this.symbol.toLowerCase()
|
},
|
initOpen: {
|
// 处理滚动条初始值
|
deep: true,
|
handler(val) {
|
this.handleInitSliderOption();
|
},
|
},
|
initClose: {
|
// 处理滚动条初始值
|
deep: true,
|
handler(newVal, oldVal) {
|
if (newVal.amount / 1 > 0) {
|
this.handleInitSliderOption(true);
|
}
|
},
|
},
|
symbol(val) {
|
this.getHomeList(val);
|
},
|
greenData(val) {
|
if (this.dataArrValue >= 1) {
|
this.greenData.map((item) => {
|
item.price = parseFloat(item.price).toFixed(this.dataArrValue);
|
});
|
this.redData.map((item) => {
|
item.price = parseFloat(item.price).toFixed(this.dataArrValue);
|
});
|
} else {
|
if (this.dataArrValue == -1) {
|
this.greenData.map((item) => {
|
item.price = item.price.substring(0, item.price.indexOf("."));
|
});
|
this.redData.map((item) => {
|
item.price = item.price.substring(0, item.price.indexOf("."));
|
});
|
}
|
if (this.dataArrValue == -2) {
|
this.greenData.map((item) => {
|
item.price =
|
item.price.substring(0, item.price.indexOf(".") - 1) + "0";
|
});
|
this.redData.map((item) => {
|
item.price =
|
item.price.substring(0, item.price.indexOf(".") - 1) + "0";
|
});
|
}
|
if (this.dataArrValue == -3) {
|
this.greenData.map((item) => {
|
item.price =
|
item.price.substring(0, item.price.indexOf(".") - 2) + "00";
|
});
|
this.redData.map((item) => {
|
item.price =
|
item.price.substring(0, item.price.indexOf(".") - 2) + "00";
|
});
|
}
|
}
|
this.approximately = this.redData[0].price;
|
},
|
},
|
mounted() {
|
this.getHomeList(this.$route.params.symbol);
|
setInterval(() => {
|
// 刷新页面
|
if (
|
location.href.indexOf("#reloaded") == -1 &&
|
location.href.indexOf("perpetualContract") > 0
|
) {
|
location.href = location.href + "#reloaded";
|
location.reload();
|
}
|
}, 1000); // 1000毫秒 = 1秒
|
},
|
computed: {
|
...mapGetters({
|
userInfo: "user/userInfo",
|
theme: "home/theme",
|
}),
|
initData() {
|
|
let obj = null;
|
if (this.selectIndex / 1 === 1) {
|
obj = this.initOpen;
|
if (!obj.lever || !obj.lever.length) {
|
// 倍数
|
obj.lever = [{ id: 1, lever_rate: 100 }];
|
}
|
return obj;
|
}
|
return this.initFutrue;
|
},
|
coudBuyVolume() {
|
// 可买数量
|
return Math.floor(this.initOpen.volume / 1 / this.form.lever_rate);
|
},
|
},
|
filters: {
|
nan(val) {
|
return isNaN(val) ? "--" : val;
|
},
|
},
|
data() {
|
return {
|
fixDate,
|
currentBuyType: "", // 交割合约当前下单的类型，用于弹窗倒计时结束以后，点击再下一单
|
timeout2: null,
|
timeout: null,
|
detailData: {}, // 交割合约订单详情数据
|
show: false,
|
popType: "confirm", // 弹框类型 confirm / counting
|
showOptions: false,
|
options: config.sliderOptions,
|
value: 0,
|
isShow: false,
|
title: this.$t("市价"),
|
iszyzs:false,
|
paraIndex: 0,
|
selectData: [
|
{ title: this.$t("市价"), type: "1" },
|
{ title: this.$t("限价"), type: "2" },
|
],
|
form: {
|
symbol: "", // 币种
|
session_token: "",
|
direction: "buy", // 买or卖
|
price_type: "opponent", // 市价or限价
|
lever_rate: 100, // 杠杆
|
stop_price_profit: "",
|
stop_price_loss: "",
|
price: "",
|
amount: "", // 数量
|
para_id: "", // 交割周琦id
|
},
|
focus: false,
|
type: "1", //选中市价或限价类型
|
// currentType:"open", //开仓类型
|
// action: _orderOpen // 开仓or
|
isShow: false,
|
selectDataArry: [],
|
isSelectShow: false,
|
actions: [
|
{ name: this.$t("默认"), value: 0, className: "actions-active" },
|
{ name: this.$t("展示买单"), value: 1, className: "" },
|
{ name: this.$t("展示卖单"), value: 2, className: "" },
|
],
|
showType: 0,
|
dataArrTitle: 0,
|
dataArrValue: 0,
|
arryIsShow: false,
|
marks: (val) => val % 50 === 0,
|
approximately: "",
|
};
|
},
|
beforeDestroy() {
|
this.clearTimeout();
|
},
|
activated() {
|
this.selectData = [
|
{ title: this.$t("市价"), type: "1" },
|
{ title: this.$t("限价"), type: "2" },
|
];
|
this.title = this.selectData[0].title;
|
this.type = this.selectData[0].type;
|
},
|
|
methods: {
|
//获取张数
|
getAmount(val) {
|
this.form.amount = val;
|
},
|
// 获取张数,数据转换
|
getVolumnByLever() {
|
let vol;
|
vol = this.initOpen.volume / 1;
|
return Math.floor(vol);
|
},
|
|
getHomeList(symbol) {
|
_getHomeList(symbol).then((res) => {
|
let numberText = res[0].close;
|
let numberLength = numberText.substring(
|
numberText.indexOf(".") + 1,
|
numberText.length
|
).length;
|
let arry = [];
|
let str = "0.";
|
for (let j = 0; j < numberLength - 1; j++) {
|
str = str + "0";
|
arry.push(str);
|
}
|
let newArry = [];
|
arry.map((item) => {
|
let obj = {
|
name: item + "1",
|
value:
|
item.substring(item.indexOf(".") + 1, item.length).length + 1,
|
};
|
newArry.push(obj);
|
});
|
if (numberLength <= 2) {
|
let obj = [
|
{
|
name: "0.1",
|
value: 1,
|
},
|
{
|
name: "1",
|
value: -1,
|
},
|
{
|
name: "10",
|
value: -2,
|
},
|
// {
|
// name: '100',
|
// value: -3,
|
// }
|
];
|
let arryItem = {
|
name: "100",
|
value: -3,
|
};
|
if (numberText.substring(0, numberText.indexOf(".")).length > 2) {
|
obj.push(arryItem);
|
}
|
newArry = newArry.concat(obj);
|
}
|
if (this.symbol == "shib") {
|
newArry = newArry.slice(-4);
|
}
|
let dataObj = {
|
arry: newArry,
|
numberLength: numberLength,
|
};
|
this.selectDataArry = dataObj.arry;
|
if (numberLength >= 2) {
|
this.dataArrTitle = this.selectDataArry[0].name;
|
} else {
|
this.dataArrTitle =
|
this.selectDataArry[this.selectDataArry.length - 1].name;
|
}
|
});
|
},
|
continueTobuy(detailData) {
|
this.show = false;
|
setTimeout(() => {
|
this.$router.push(
|
`/trendDetails/${detailData.symbol}?direction=${detailData.direction}`
|
);
|
}, 300);
|
},
|
onQuickPrice(price) {
|
// 点击金额变化
|
if (this.type === "2") {
|
this.form.price = price;
|
}
|
},
|
clearTimeout() {
|
clearTimeout(this.timeout);
|
this.timeout = null;
|
},
|
handleTimeEnd(order) {
|
if (this.selectIndex / 1 === 2) {
|
// 交割合约需要弹出详情框
|
_futrueOrderDetail(order).then((data) => {
|
this.clearTimeout();
|
this.detailData = data;
|
if (data.state !== "created") {
|
this.timeout = setTimeout(() => {
|
this.handleTimeEnd(order);
|
}, 1000);
|
}
|
});
|
}
|
},
|
handleInitSliderOption(amount) {
|
if (!amount) {
|
// 金额是否需要变动
|
this.form.amount = "";
|
}
|
console.log(this.initOpen.volume, this.form.lever_rate);
|
let vol;
|
vol = this.initOpen.volume / 1;
|
this.options.max = Math.floor(vol);
|
console.log("this.options.max", this.options.max);
|
if (this.options.max > 0) {
|
this.options.disabled = false;
|
} else {
|
this.options.disabled = true;
|
}
|
},
|
handleChoose(item) {
|
this.showOptions = !this.showOptions;
|
this.form.lever_rate = item.lever_rate;
|
console.log("handleChoose");
|
this.handleInitSliderOption();
|
},
|
onAdd() {
|
// +
|
if (this.options.max === 0) {
|
return;
|
}
|
if (this.form.amount === this.options.max) {
|
return;
|
}
|
console.log(this.options.max);
|
this.form.amount++;
|
},
|
onReduce() {
|
// -
|
if (this.form.amount > 1) {
|
this.form.amount--;
|
}
|
},
|
jump() {
|
this.$router.push(`/trendDetails/${this.symbol}`);
|
},
|
onParaId({ id, index }) {
|
// 交割日期
|
// console.log(evt)
|
this.form.para_id = id;
|
this.form.amount = "";
|
this.paraIndex = index;
|
},
|
onInput() {
|
// 数量变化
|
// console.log(1111111, this.form.amount, this.selectIndex)
|
if (this.selectIndex == 1 && this.options.max == 0) {
|
this.form.amount = this.form.amount / 1;
|
} else if (
|
this.selectIndex == 1 &&
|
this.form.amount / 1 > this.options.max / 1
|
) {
|
this.form.amount = this.options.max / 1;
|
}
|
if (this.selectIndex / 1 === 1) {
|
this.$refs.sliderRef.amountChange(this.form.amount);
|
}
|
},
|
//价格类型下拉框切换
|
selectBtn() {
|
this.isShow = !this.isShow;
|
},
|
//选择价格类型
|
selectItem(item) {
|
if (item.type == 1) {
|
this.form.price = this.price;
|
}
|
this.form.price_type = item.type === "1" ? "opponent" : "limit";
|
this.title = item.title;
|
this.type = item.type;
|
this.isShow = false;
|
},
|
//选择开仓类型
|
changeTab(type) {
|
// 开仓和
|
console.log("changeTab", type);
|
|
if (this.currentType === type) {
|
return;
|
}
|
this.$emit("changeCurrentType", type);
|
// this.currentType = type;
|
|
this.$refs.sliderRef.emptyValue();
|
this.handleInitSliderOption();
|
},
|
onClose() {
|
// 关闭
|
this.show = false;
|
setTimeout(() => {
|
this.popType = "confirm";
|
}, 500);
|
},
|
// onOrderConfirm() {
|
// /// 交割合约确认
|
// this.show = false;
|
// this.popType = "counting";
|
// this.order(this.form.direction === "buy" ? "open" : "close");
|
// },
|
order(type) {
|
if (!this.userInfo.token) {
|
this.$router.push("/login");
|
return false;
|
}
|
// if (!this.form.stop_price_profit) {
|
// this.$toast.fail(this.$t("请输入止盈金额"));
|
// return false;
|
// }
|
// if (!this.form.stop_price_loss) {
|
// this.$toast.fail(this.$t("请输入止损金额"));
|
// return false;
|
// }
|
if (!this.form.amount) {
|
if (this.selectIndex == 1) {
|
this.$toast.fail(this.$t("请输入合约张数"));
|
} else {
|
this.$toast.fail(this.$t("请输入金额"));
|
}
|
return;
|
}
|
|
// this.form.direction = type
|
this.form.symbol = this.$route.params.symbol;
|
if (type == "long" || type == "open") {
|
this.form.direction = "buy";
|
} else {
|
this.form.direction = "sell";
|
}
|
let _order = null; // api
|
let emitFunc = null; // 触发函数
|
if (this.selectIndex / 1 === 1) {
|
// 永续合约
|
this.form.session_token = this.initOpen.session_token;
|
_order = _orderOpen;
|
emitFunc = this.currentType;
|
this.openOrder(_order, emitFunc);
|
} else {
|
// 交割合约
|
this.form.session_token = this.initFutrue.session_token;
|
_order = _futrueOrder;
|
emitFunc = "futrue";
|
if (
|
this.initFutrue.session_token == undefined ||
|
this.initFutrue.session_token == ""
|
) {
|
_futrueOrderInit(this.symbol)
|
.then((data) => {
|
this.form.session_token = data.session_token;
|
this.openOrder(_order, emitFunc);
|
})
|
.catch((err) => {
|
if (err.code == "ECONNABORTED") {
|
this.$toast(this.$t("网络超时！"));
|
} else if (err.msg != undefined) {
|
this.$toast(this.$t(err.msg));
|
}
|
});
|
} else {
|
this.form.session_token = this.initFutrue.session_token;
|
this.openOrder(_order, emitFunc);
|
}
|
}
|
},
|
openOrder(_order, emitFunc) {
|
_order(this.form)
|
.then((res) => {
|
if (this.selectIndex / 1 === 1) {
|
this.$refs.sliderRef.emptyValue();
|
}
|
this.$toast(this.$t("操作成功"));
|
_getBalance().then((data) => {
|
// 刷新余额
|
this.$store.commit("user/SET_USERINFO", { balance: data.money });
|
});
|
this.$emit("ordered", emitFunc);
|
if (this.selectIndex / 1 === 2) {
|
// 交割合约需要弹出详情框
|
_futrueOrderDetail(res.order_no).then((data) => {
|
this.detailData = data;
|
this.show = true;
|
});
|
}
|
})
|
.catch(() => {
|
// 也需要重新初始化
|
this.$emit("ordered", emitFunc);
|
if (this.selectIndex / 1 === 1) {
|
this.$refs.sliderRef.emptyValue();
|
}
|
});
|
},
|
//价格类型下拉框切换
|
selectBtn() {
|
this.isShow = !this.isShow;
|
},
|
selectArryBtn() {
|
this.arryIsShow = !this.arryIsShow;
|
},
|
onSelect(item) {
|
this.actions.map((item) => {
|
item.className = "";
|
});
|
item.className = "actions-active";
|
this.showType = item.value;
|
this.$emit("changeValueBack", this.showType);
|
},
|
onCancel() {
|
this.isSelectShow = false;
|
},
|
selectItemArry(item) {
|
this.dataArrValue = item.value;
|
this.arryIsShow = false;
|
this.dataArrTitle = item.name;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
input:disabled {
|
background: transparent;
|
}
|
.perpetual-open {
|
font-size: 26px;
|
}
|
|
.options {
|
box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.3);
|
border-radius: 6px;
|
|
@include themify() {
|
background: themed("tab_background");
|
}
|
|
div {
|
font-size: 22px;
|
text-align: center;
|
width: 140px;
|
height: 50px;
|
line-height: 50px;
|
|
&.option-active {
|
@include themify() {
|
background: themed("tab_background");
|
}
|
}
|
}
|
}
|
|
.right-word {
|
top: 50%;
|
transform: translateY(-50%);
|
right: 19px;
|
position: absolute;
|
border-radius: 6px;
|
}
|
|
.vue-slider {
|
height: 3px !important;
|
padding: 0 20px !important;
|
}
|
|
.vue-slider-dot {
|
width: 32px !important;
|
height: 32px !important;
|
}
|
|
.vue-slider-mark-label {
|
font-size: 16px;
|
margin-top: 14px !important;
|
}
|
|
.vue-slider-mark-label-active {
|
color: #868d9a !important;
|
}
|
|
.vue-slider-dot-handle {
|
border: 3px solid #2c78f8;
|
}
|
|
.vue-slider-mark {
|
width: 20px !important;
|
height: 20px !important;
|
|
&:nth-child(1) {
|
.vue-slider-mark-label {
|
transform: translateX(-14px) !important;
|
}
|
}
|
|
&:nth-child(5) {
|
.vue-slider-mark-label {
|
transform: translateX(-60px) !important;
|
}
|
}
|
}
|
|
// 开仓样式
|
.tabcon {
|
// padding-bottom: 16%;
|
position: relative;
|
height: 80px;
|
}
|
|
.tab {
|
position: absolute;
|
left: 0px;
|
right: 0px;
|
top: 0px;
|
bottom: 0px;
|
display: flex;
|
align-items: center;
|
background-color: #f3f3f3;
|
border-radius: 5px;
|
overflow: hidden;
|
}
|
|
.tab > * {
|
height: 100%;
|
}
|
|
.tab > img {
|
margin-left: -2px;
|
margin-right: -2px;
|
}
|
|
.tab > a {
|
flex-grow: 1;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
cursor: pointer;
|
}
|
|
.open,
|
.long {
|
background-color: #12b298;
|
color: white;
|
}
|
|
// 下拉
|
.option-box {
|
position: absolute;
|
left: 0;
|
right: 0;
|
top: 90px;
|
width: 100%;
|
|
@include themify() {
|
background: themed("grey_bg");
|
}
|
|
text-align: center;
|
|
@include themify() {
|
box-shadow: 0px 0px 3px 3px themed("grey_bg");
|
}
|
|
border-radius: 4px;
|
|
@include themify() {
|
color: themed("text_color3");
|
}
|
}
|
|
.option-box > div {
|
padding: 30px 0;
|
}
|
|
.option-box > div:hover {
|
// background-color: #f5f5f5;
|
}
|
|
.num-text-color {
|
color: #4c4a54;
|
}
|
|
select {
|
appearance: none;
|
/* 去掉默认图标 */
|
-moz-appearance: none;
|
/* Firefox */
|
-webkit-appearance: none;
|
/* Safari and Chrome */
|
padding: 0 20px 0 20px;
|
background: url("../../assets/image/public/grey-select.png") no-repeat scroll
|
right center transparent;
|
/* 自己的图*/
|
background-size: 20px 11px;
|
}
|
|
.with100 {
|
width: 100%;
|
}
|
|
.height100 {
|
height: 100%;
|
}
|
|
.open {
|
background-color: #12b298;
|
// background: url(@/assets/image/public/open-bg.png) no-repeat right center;
|
// background-size: 100% 100%;
|
color: white;
|
}
|
|
.close,
|
.short {
|
background-color: #f6465d;
|
// background: url(@/assets/image/public/close-bg.png) no-repeat left center;
|
// background-size: 100% 100%;
|
color: white;
|
}
|
|
// .custom-step {
|
// width: 10px;
|
// height: 10px;
|
// border-radius: 50%;
|
// background: fff;
|
// border: solid 1px #1d91ff;
|
// background: #fff;
|
// }
|
|
// .custom-step.active {
|
// box-shadow: 0 0 0 2px #1d91ff;
|
// background-color: #1d91ff;
|
// }
|
|
.all-div {
|
@include themify() {
|
background: themed("input_background1");
|
}
|
}
|
|
.select-wrap {
|
@include themify() {
|
background: themed("input_background1");
|
}
|
|
border: none;
|
}
|
|
.greyBg {
|
@include themify() {
|
border: 1px solid themed("input_background1");
|
}
|
|
@include themify() {
|
background: themed("input_background1");
|
}
|
}
|
|
.usdt-bg {
|
@include themify() {
|
background: themed("input_background1");
|
}
|
}
|
|
.header-open {
|
align-items: center;
|
}
|
|
.k-select-box {
|
justify-content: flex-end;
|
padding-right: 40px;
|
align-items: center;
|
|
.select-box {
|
width: 220px;
|
|
@include themify() {
|
background: themed("input_background");
|
}
|
|
margin-right: 20px;
|
}
|
}
|
|
.van-popup {
|
@include themify() {
|
background: themed("input_background1");
|
}
|
}
|
|
::v-deep .van-popup {
|
@include themify() {
|
background: themed("input_background1");
|
}
|
}
|
|
.actions-active {
|
@include themify() {
|
background: themed("color_main") !important;
|
}
|
|
color: #fff !important;
|
}
|
|
.perpetual-open {
|
::v-deep .van-action-sheet__item,
|
::v-deep .van-action-sheet__cancel {
|
@include themify() {
|
background: themed("input_background1");
|
}
|
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
|
::v-deep .van-action-sheet__gap {
|
@include themify() {
|
background: themed("cont_background");
|
}
|
}
|
}
|
|
.approximately-text {
|
@include themify() {
|
color: themed("text_color1");
|
}
|
}
|
</style>
|
