From 568283b10129fb8f116436829785ba67edd975e4 Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Wed, 14 May 2025 10:53:51 +0800
Subject: [PATCH] 1
---
src/components/perpetual-open/index.vue | 2495 +++++++++++++++++++++++++++++++---------------------------
1 files changed, 1,339 insertions(+), 1,156 deletions(-)
diff --git a/src/components/perpetual-open/index.vue b/src/components/perpetual-open/index.vue
index 0be562e..80483ac 100644
--- a/src/components/perpetual-open/index.vue
+++ b/src/components/perpetual-open/index.vue
@@ -1,114 +1,209 @@
<template>
- <!-- 永续合约开仓页 -->
- <div class="perpetual-open">
- <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-80 h-60 lh-60 ml-29 rounded tabBackground textColor" style="text-align:center">1x</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>
- <img src="../../assets/image/public/k-line.png" alt="line-img" class="w-38 h-35" @click="jump" />
- </div>
- </div>
- <div class="pt-30 pb-20">
- <div class="flex">
- <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 "
- :class="currentType == 'long' ? 'long' : ''" @click="changeTab('long')">
- {{ $t("开多") }}
- </p>
- <p class="font-28 flex-1 flex items-center justify-center h-66"
- :class="currentType == 'short' ? 'short' : ''" @click="changeTab('short')">
- {{ $t("开空") }}
- </p>
- </div>
- <div class="mt-30 mb-30" style="position: relative">
- <div class="inputBackground 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 class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
- v-if="selectIndex == 1">
- <input placeholder="" class="inputBackground 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 class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
- 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_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"
- 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="w-440 flex items-center inputBackground 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 inputBackground 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="mt-40 mb-30 w-full flex justify-between items-center">
- <span class="font-22 font-400 text-grey">{{ $t("可开张数") }}</span>
- <span class="font-22 font-400 textColor">
- {{ Math.floor(initOpen.volume/form.lever_rate) || initData.volume }}
- {{ $t("张") }}
- </span>
- </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%"
+ <!-- 永续合约开仓页 -->
+ <div class="perpetual-open">
+ <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-80 h-60 lh-60 ml-29 rounded tabBackground textColor" style="text-align:center">1x</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>
+ <img
+ src="../../assets/image/public/k-line.png"
+ alt="line-img"
+ class="w-38 h-35"
+ @click="jump"
+ />
+ </div>
+ </div>
+ <div class="pt-30 pb-20">
+ <div class="flex">
+ <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"
+ :class="currentType == 'long' ? 'long' : ''"
+ @click="changeTab('long')"
+ >
+ {{ $t("开多") }}
+ </p>
+ <p
+ class="font-28 flex-1 flex items-center justify-center h-66"
+ :class="currentType == 'short' ? 'short' : ''"
+ @click="changeTab('short')"
+ >
+ {{ $t("开空") }}
+ </p>
+ </div>
+ <div class="mt-30 mb-30" style="position: relative">
+ <div
+ class="inputBackground 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
+ class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
+ v-if="selectIndex == 1"
+ >
+ <input
+ placeholder=""
+ class="inputBackground 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
+ class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
+ 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_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"
+ 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="w-440 flex items-center inputBackground 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 inputBackground 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="mt-40 mb-30 w-full flex justify-between items-center">
+ <span class="font-22 font-400 text-grey">{{
+ $t("可开张数")
+ }}</span>
+ <span class="font-22 font-400 textColor">
+ {{
+ Math.floor(initOpen.volume * form.lever_rate) ||
+ initData.volume
+ }}
+ {{ $t("张") }}
+ </span>
+ </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 }">
@@ -122,36 +217,52 @@
<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="text-grey">{{ $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="text-grey">{{ $t("保证金") }}</div>
- <div class="textColor">
- {{ (initData.amount * (form.amount / 1)) | nan }} USDT
- </div>
- </div>
- <div class="flex justify-between mt-30">
- <div class="text-grey">{{ $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">
- {{
+ <!-- 张数输入 -->
+ <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="text-grey">{{ $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="text-grey">{{ $t("保证金") }}</div>
+ <div class="textColor">
+ {{ (initData.amount * (form.amount / 1)) | nan }} USDT
+ </div>
+ </div>
+ <div class="flex justify-between mt-30">
+ <div class="text-grey">{{ $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
@@ -159,1100 +270,1172 @@
: "")
).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"
- v-if="currentType == 'long'" @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"
- v-if="currentType == 'short'" @click="order('short')">
- <div class="relative font-34 text-center" style="flex-grow:1;" v-if="selectIndex == 1">
- {{ $t('开空') }}
- <span class="right-word font-22 text-center">{{ $t('看跌') }}</span>
- </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">{{
+ 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"
+ v-if="currentType == 'long'"
+ @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>
- <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">{{
+ </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"
+ v-if="currentType == 'short'"
+ @click="order('short')"
+ >
+ <div
+ class="relative font-34 text-center"
+ style="flex-grow: 1"
+ v-if="selectIndex == 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 class="ml-30">
- <div class="w-290 flex justify-between text-grey font-22">
- <div>
- <div>{{ $t("价格") }}</div>
- <div class="mt-4">(USDT)</div>
- </div>
- <div class="text-right items-end justify-end">
- <div class="">{{ $t('数量') }}</div>
- <div class="mt-5">({{ 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="{
+ </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 class="ml-30">
+ <div class="w-290 flex justify-between text-grey font-22">
+ <div>
+ <div>{{ $t("价格") }}</div>
+ <div class="mt-4">(USDT)</div>
+ </div>
+ <div class="text-right items-end justify-end">
+ <div class="">{{ $t("数量") }}</div>
+ <div class="mt-5">({{ 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'
+ `linear-gradient(to right,${
+ theme == 'dark' ? '#121212' : '#ffffff'
} 0%` +
(1 - item.amount / greenData[greenData.length - 1].amount) *
- 100 +
+ 100 +
'%,rgba(94,186,137,.1) ' +
(1 - item.amount / greenData[greenData.length - 1].amount) *
- 100 +
+ 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 text-red pt-12 font-34 font-700 text-center">
- {{ 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="{
+ }"
+ >
+ <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 text-red pt-12 font-34 font-700 text-center"
+ >
+ {{ 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'
+ `linear-gradient(to right,${
+ theme == 'dark' ? '#121212' : '#ffffff'
} 0%` +
(1 - item.amount / greenData[greenData.length - 1].amount) *
- 100 +
+ 100 +
'%,rgba(246,70,93,.1) ' +
(1 - item.amount / greenData[greenData.length - 1].amount) *
- 100 +
+ 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">
- <!-- <img src="@/assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20"/> -->
- <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>
- </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" :symbol="symbol" />
- </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>
+ }"
+ >
+ <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"
+ >
+ <!-- <img src="@/assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20"/> -->
+ <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>
+ </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"
+ :symbol="symbol"
+ />
+ </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: "",
- },
- symbolname: {
- 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: {
- // 'form.lever_rate': {
- // handler(val) {
- // if (this.selectIndex / 1 === 1) {
- // // 当杠杆率变化时，重新计算可开张数
- // this.handleInitSliderOption();
- // }
- // },
- // immediate: true
- // },
- 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);
- this.symbolname = getStorage('symbolname')
- setInterval(() => {
- // 刷新页面
- if (location.href.indexOf("#reloaded") == -1 && location.href.indexOf("perpetualContract") > 0) {
- location.href = location.href + "#reloaded";
- location.reload();
- }
- }, 1000); // 1000毫秒 = 1秒
+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: "",
+ },
+ symbolname: {
+ 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: {
+ // 'form.lever_rate': {
+ // handler(val) {
+ // if (this.selectIndex / 1 === 1) {
+ // // 当杠杆率变化时，重新计算可开张数
+ // this.handleInitSliderOption();
+ // }
+ // },
+ // immediate: true
+ // },
+ 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);
+ this.symbolname = getStorage("symbolname");
+ 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: 1,
+ },
+ ];
+ }
+ 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("市价"),
+ 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: 1, // 杠杆
+ 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);
+ },
- },
- computed: {
- ...mapGetters({
- userInfo: 'user/userInfo',
- theme: 'home/theme'
- }),
- initData() {
- let obj = null
- if (this.selectIndex / 1 === 1) {
+ 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);
- obj = this.initOpen
- if (!obj.lever || !obj.lever.length) { // 倍数
- obj.lever = [{
- id: 1,
- lever_rate: 1
- }]
- }
- 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("市价"),
- 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: 1, // 杠杆
- 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
- },
+ if (this.currentType === type) {
+ return;
+ }
+ this.$emit("changeCurrentType", type);
+ // this.currentType = type;
- methods: {
- //获取张数
- getAmount(val) {
- this.form.amount = val;
- },
- // 获取张数,数据转换
- getVolumnByLever() {
- let vol;
- vol = this.initOpen.volume / 1;
- return Math.floor(vol);
- },
+ 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;
+ }
- 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;
- },
- },
- };
+ // 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>
- .perpetual-open {
- font-size: 26px;
- }
+.perpetual-open {
+ font-size: 26px;
+}
- .options {
- box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.3);
- border-radius: 6px;
+.options {
+ box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.3);
+ border-radius: 6px;
- @include themify() {
- background: themed("tab_background");
- }
+ @include themify() {
+ background: themed("tab_background");
+ }
- div {
- font-size: 22px;
- text-align: center;
- width: 140px;
- height: 50px;
- line-height: 50px;
+ div {
+ font-size: 22px;
+ text-align: center;
+ width: 140px;
+ height: 50px;
+ line-height: 50px;
- &.option-active {
- @include themify() {
- background: themed("tab_background");
- }
- }
- }
- }
+ &.option-active {
+ @include themify() {
+ background: themed("tab_background");
+ }
+ }
+ }
+}
- .right-word {
- top: 50%;
- transform: translateY(-50%);
- right: 19px;
- position: absolute;
- border-radius: 6px;
- }
+.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 {
+ height: 3px !important;
+ padding: 0 20px !important;
+}
- .vue-slider-dot {
- width: 32px !important;
- height: 32px !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 {
+ font-size: 16px;
+ margin-top: 14px !important;
+}
- .vue-slider-mark-label-active {
- color: #868d9a !important;
- }
+.vue-slider-mark-label-active {
+ color: #868d9a !important;
+}
- .vue-slider-dot-handle {
- border: 3px solid #2c78f8;
- }
+.vue-slider-dot-handle {
+ border: 3px solid #2c78f8;
+}
- .vue-slider-mark {
- width: 20px !important;
- height: 20px !important;
+.vue-slider-mark {
+ width: 20px !important;
+ height: 20px !important;
- &:nth-child(1) {
- .vue-slider-mark-label {
- transform: translateX(-14px) !important;
- }
- }
+ &:nth-child(1) {
+ .vue-slider-mark-label {
+ transform: translateX(-14px) !important;
+ }
+ }
- &:nth-child(5) {
- .vue-slider-mark-label {
- transform: translateX(-60px) !important;
- }
- }
- }
+ &:nth-child(5) {
+ .vue-slider-mark-label {
+ transform: translateX(-60px) !important;
+ }
+ }
+}
- // 开仓样式
- .tabcon {
- // padding-bottom: 16%;
- position: relative;
- height: 80px;
- }
+// 开仓样式
+.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 {
+ 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 > * {
+ height: 100%;
+}
- .tab>img {
- margin-left: -2px;
- margin-right: -2px;
- }
+.tab > img {
+ margin-left: -2px;
+ margin-right: -2px;
+}
- .tab>a {
- flex-grow: 1;
- display: flex;
- justify-content: center;
- align-items: center;
- cursor: pointer;
- }
+.tab > a {
+ flex-grow: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+}
- .open,
- .long {
- background-color: #12b298;
- color: white;
- }
+.open,
+.long {
+ background-color: #12b298;
+ color: white;
+}
- // 下拉
- .option-box {
- position: absolute;
- left: 0;
- right: 0;
- top: 90px;
- width: 100%;
+// 下拉
+.option-box {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 90px;
+ width: 100%;
- @include themify() {
- background: themed("grey_bg");
- }
+ @include themify() {
+ background: themed("grey_bg");
+ }
- text-align: center;
+ text-align: center;
- @include themify() {
- box-shadow: 0px 0px 3px 3px themed("grey_bg");
- }
+ @include themify() {
+ box-shadow: 0px 0px 3px 3px themed("grey_bg");
+ }
- border-radius: 4px;
+ border-radius: 4px;
- @include themify() {
- color: themed("text_color3");
- }
- }
+ @include themify() {
+ color: themed("text_color3");
+ }
+}
- .option-box>div {
- padding: 30px 0;
- }
+.option-box > div {
+ padding: 30px 0;
+}
- .option-box>div:hover {
- // background-color: #f5f5f5;
- }
+.option-box > div:hover {
+ // background-color: #f5f5f5;
+}
- .num-text-color {
- color: #4c4a54;
- }
+.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;
- }
+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%;
- }
+.with100 {
+ width: 100%;
+}
- .height100 {
- height: 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;
- }
+.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;
- }
+.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 {
+// 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;
- // }
+// .custom-step.active {
+// box-shadow: 0 0 0 2px #1d91ff;
+// background-color: #1d91ff;
+// }
- .all-div {
- @include themify() {
- background: themed("input_background1");
- }
- }
+.all-div {
+ @include themify() {
+ background: themed("input_background1");
+ }
+}
- .select-wrap {
- @include themify() {
- background: themed("input_background1");
- }
+.select-wrap {
+ @include themify() {
+ background: themed("input_background1");
+ }
- border: none;
- }
+ border: none;
+}
- .greyBg {
- @include themify() {
- border: 1px solid themed("input_background1");
- }
+.greyBg {
+ @include themify() {
+ border: 1px solid themed("input_background1");
+ }
- @include themify() {
- background: themed("input_background1");
- }
- }
+ @include themify() {
+ background: themed("input_background1");
+ }
+}
- .usdt-bg {
- @include themify() {
- background: themed("input_background1");
- }
- }
+.usdt-bg {
+ @include themify() {
+ background: themed("input_background1");
+ }
+}
- .header-open {
- align-items: center;
- }
+.header-open {
+ align-items: center;
+}
- .k-select-box {
- justify-content: flex-end;
- padding-right: 40px;
- align-items: center;
+.k-select-box {
+ justify-content: flex-end;
+ padding-right: 40px;
+ align-items: center;
- .select-box {
- width: 220px;
+ .select-box {
+ width: 220px;
- @include themify() {
- background: themed("input_background");
- }
+ @include themify() {
+ background: themed("input_background");
+ }
- margin-right: 20px;
- }
- }
+ margin-right: 20px;
+ }
+}
- .van-popup {
- @include themify() {
- background: themed("input_background1");
- }
- }
+.van-popup {
+ @include themify() {
+ background: themed("input_background1");
+ }
+}
- ::v-deep .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;
- }
+.actions-active {
+ @include themify() {
+ background: themed("color_main") !important;
+ }
- color: #fff !important;
- }
+ color: #fff !important;
+}
- .perpetual-open {
+.perpetual-open {
+ ::v-deep .van-action-sheet__item,
+ ::v-deep .van-action-sheet__cancel {
+ @include themify() {
+ background: themed("input_background1");
+ }
- ::v-deep .van-action-sheet__item,
- ::v-deep .van-action-sheet__cancel {
+ @include themify() {
+ color: themed("text_color");
+ }
+ }
- @include themify() {
- background: themed("input_background1");
- }
+ ::v-deep .van-action-sheet__gap {
+ @include themify() {
+ background: themed("cont_background");
+ }
+ }
+}
- @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>
\ No newline at end of file
+.approximately-text {
+ @include themify() {
+ color: themed("text_color1");
+ }
+}
+</style>
--
Gitblit v1.9.3