From 631dc512b226b346fefaebbedf1ddd79c06cab71 Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Thu, 09 Oct 2025 11:06:15 +0800
Subject: [PATCH] 二三给的
---
src/components/Transform/perpetual-open/index.vue | 351 ++++++++++++++++++++++++++++++++++------------------------
1 files changed, 204 insertions(+), 147 deletions(-)
diff --git a/src/components/Transform/perpetual-open/index.vue b/src/components/Transform/perpetual-open/index.vue
index efe0591..e5a18bd 100644
--- a/src/components/Transform/perpetual-open/index.vue
+++ b/src/components/Transform/perpetual-open/index.vue
@@ -35,10 +35,122 @@
</div>
</div>
<div class="pt-30 pb-20">
- <div class="flex">
+ <div class="flex justify-between">
+ <div>
+ <div class="w-290 flex justify-between text-grey font-22">
+ <div>
+ <div>{{ $t("价格") }}</div>
+ <div class="mt-4">{{ queryType === 'cryptos' ? '(USDT)' : '(USD)' }}</div>
+ </div>
+ <div class="text-right items-end justify-end">
+ <div class="">{{ $t("数量") }}</div>
+ <div class="mt-4">{{ queryType === 'cryptos' ?
+ `(${symbol_data.toUpperCase() || "--"})` : '(USD)' }}</div>
+ </div>
+ </div>
+ <div class="deep-div">
+ <!-- <div v-if="showType == 0 || showType == 2" class="w-290 flex justify-between pt-1 font-26"
+ v-for="(item, index) in redData" :key="item + index" @click="onQuickPrice(item.price)" :style="{
+ background:
+ `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
+ } 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 v-show="(showType == 0 || showType == 2)" class="w-290 flex justify-between pt-1 font-26"
+ v-for="(item, index) in redData" :key="item + index" @click="onQuickPrice(item.price)" :style="{
+ background:
+ `linear-gradient(to right,${$store.state.vant.theme == 'dark' ? '#131A2E' : '#fff'
+ } 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>
+ <div class="w-290 text-red pt-5 font-34 font-700 text-center">
+ {{ price || '--' }}
+ </div>
+ <div class="pb-5 font-20 text-center">
+ ≈ {{ ((price *
+ currency.rate).toFixed(price.toString().split('.')[1] ?
+ price.toString().split('.')[1].length : 2)) || '--' }}
+ </div>
+ <div class="deep-div">
+ <!-- <div v-if="showType == 0 || showType == 1" class="w-290 flex justify-between pt-1 font-26"
+ v-for="(item, index) in greenData" :key="index" @click="onQuickPrice(item.price)" :style="{
+ background:
+ `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
+ } 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 v-if="showType == 0 || showType == 1" class="w-290 flex justify-between pt-1 font-26"
+ v-for="(item, index) in greenData" :key="index" @click="onQuickPrice(item.price)" :style="{
+ background:
+ `linear-gradient(to right,${$store.state.vant.theme == 'dark' ? '#131A2E' : '#fff'
+ } 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_data == 'shib'">
+ {{ fixDate(item.amount, $i18n) || "--" }}
+ </div>
+ <div class="text-right textColor" v-else>
+ {{ item.amount || "--" }}
+ </div>
+
+ </div>
+ </div>
+ <div class="flex k-select-box">
+ <div class=" mb-22 select-box pl-5 pr-5" 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 font-28 textColor" style="width: 80%">
+ {{ dataArrTitle }}
+ </div>
+ <img src="../../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 mr-10" />
+ </div>
+ <div class="option-box" v-show="arryIsShow">
+ <div class="font-28" 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 ml-10" />
+ </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">
+ <div class="flex items-center h-66 greyBg textColor">
<p class="font-28 flex-1 flex items-center justify-center h-66 "
:class="currentType == 'long' ? 'long' : ''" @click="changeTab('long')">
{{ $t("开多") }}
@@ -49,8 +161,7 @@
</p>
</div>
<div class="mt-22 mb-30" style="position:relative;">
- <div class="greyBg flex justify-between items-center w-full h-76 rounded-lg textColor"
- @click="selectBtn">
+ <div class="greyBg flex justify-between items-center w-full h-76 greyBg textColor" @click="selectBtn">
<img src="../../../assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 ml-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 mr-20" />
@@ -64,14 +175,14 @@
</template>
<contract-futrue v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'" class="mb-20"
:initFutrue="initFutrue" @paraId="onParaId" />
- <div class="h-76 lh-76 greyBg mb-30 flex pr-20 justify-center rounded-lg textColor" v-if="selectIndex == 1">
+ <div class="h-76 lh-76 greyBg mb-30 flex pr-20 justify-center greyBg textColor" v-if="selectIndex == 1">
<input placeholder="" class="greyBg 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">{{ queryType === 'cryptos' ? 'USDT' : 'USD' }}</span>
</div>
<div class="w-440 h-76" v-if="selectIndex == 2"></div>
- <div class="w-440 flex items-center greyBg h-76 lh-76 pr-5 pl-5 rounded-lg" v-if="initFutrue">
+ <div class="w-440 flex items-center greyBg h-76 lh-76 pr-5 pl-5 greyBg" v-if="initFutrue">
<div v-if="selectIndex == 1 && initFutrue.para && initFutrue.para.length > 0"
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" />
@@ -121,8 +232,12 @@
<span class="flex-1 text-right">100%</span>
</div> -->
<!-- 张数输入 -->
- <amount-slider ref="sliderRef" :maxAmount="maxUSDT" @getAmount="getAmount"
- :propsAmount="form.amount"></amount-slider>
+ <!-- <amount-slider ref="sliderRef" :maxAmount="maxUSDT" @getAmount="getAmount"
+ :propsAmount="form.amount"></amount-slider> -->
+ <div class="btns_box">
+ <div :class="bfbindex == index ? 'btns_box_boxs' : 'btns_box_box'" @click="bfbclick(item, index)"
+ v-for="(item, index) in bfblist" :key="index">{{ item.name }}%</div>
+ </div>
</template>
<template v-if="selectIndex == 1 && userInfo.token">
<div class="flex justify-between mt-30">
@@ -134,13 +249,12 @@
<span>{{ 'USDT' }}</span>
</div>
</div>
- <div class="flex justify-between mt-30">
+ <!-- <div class="flex justify-between mt-30">
<div class="text-grey">{{ $t("保证金") }}</div>
<div class="textColor">
- <!-- {{ (initData.amount * (form.amount / 1)) }} {{ queryType === 'cryptos' ? 'USDT' : 'USD' }} -->
{{ form.lever_rate * form.amount }} {{ 'USDT' }}
</div>
- </div>
+ </div> -->
<div class="flex justify-between mt-30">
<div class="text-grey">{{ $t("建仓手续费") }}</div>
<div class="textColor">{{ reserve(userInfo.perpetual_contracts_status === '1' ?
@@ -150,9 +264,9 @@
</div>
</template>
- <div class="flex font-24 text-grey justify-between mt-32" v-if="selectIndex == 2">
+ <div class="flex font-24 text-grey justify-between mt-32">
<div>{{ $t("可用USDT") }}</div>
- <div class="textColor">{{ initFutrue.amount }} {{ queryType === 'cryptos' ? 'USDT' : 'USD' }}</div>
+ <div class="textColor">{{ initFutrue.amount }} USDT</div>
</div>
<div class="flex font-24 text-grey justify-between mt-20"
v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'">
@@ -172,33 +286,33 @@
<template v-if="userInfo.token">
<template v-if="selectIndex == 1">
- <div class="w-full h-80 lh-80 bg-green flex text-white rounded-ban mt-70" v-if="currentType == 'long'"
+ <div class=" flex-center text-white " style="margin-top: 10px" v-if="currentType == 'long'"
@click="order('long')">
- <div class="font-34 relative text-center" style="flex-grow:1;" v-if="selectIndex == 1">
+ <div class="long flex-center" style="flex-grow:1;padding: 20px" 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>
+ <div class="long flex-center" style="flex-grow:1;padding: 20px" v-else>
{{ $t('做多买入') }}
</div>
</div>
- <div class="w-full h-80 lh-80 bg-red flex text-white rounded-ban mt-70" v-if="currentType == 'short'"
+ <div class="flex-center text-white " v-if="currentType == 'short'"
@click="order('short')">
- <div class="relative font-34 text-center" style="flex-grow:1;" v-if="selectIndex == 1">
+ <div class="short flex-center" style="flex-grow:1;padding: 20px" 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>
+ <div class="short flex-center" style="flex-grow:1;padding: 20px" 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-ban mt-10 " @click="order('open')"
+ <div class="w-full h-80 lh-80 bg-green flex text-white mt-10 " @click="order('open')"
v-if="userInfo.token">
<div class="font-34 relative text-center" style="flex-grow: 1">
{{ $t("开多") }}
@@ -207,9 +321,8 @@
}}</span> -->
</div>
</div>
- <div class="w-full h-80 lh-80 bg-red flex text-white rounded-ban mt-20 mb-10"
- style="position: relative;" :class="{ 'mt-22': selectIndex == 2 }" @click="order('close')"
- v-if="userInfo.token">
+ <div class="w-full h-80 lh-80 bg-red flex text-white 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">{{
@@ -229,118 +342,7 @@
{{ $t('logIn') }}</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">{{ queryType === 'cryptos' ? '(USDT)' : '(USD)' }}</div>
- </div>
- <div class="text-right items-end justify-end">
- <div class="">{{ $t("数量") }}</div>
- <div class="mt-4">{{ queryType === 'cryptos' ?
- `(${symbol_data.toUpperCase() || "--"})` : '(USD)' }}</div>
- </div>
- </div>
- <div class="deep-div">
- <!-- <div v-if="showType == 0 || showType == 2" class="w-290 flex justify-between pt-1 font-26"
- v-for="(item, index) in redData" :key="item + index" @click="onQuickPrice(item.price)" :style="{
- background:
- `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
- } 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 v-if="showType == 0 || showType == 2" class="w-290 flex justify-between pt-1 font-26"
- v-for="(item, index) in redData" :key="item + index" @click="onQuickPrice(item.price)" :style="{
- background:
- `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
- } 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>
- <div class="w-290 text-red pt-5 font-34 font-700 text-center">
- {{ price || '--' }}
- </div>
- <div class="pb-5 font-20 text-center">
- ≈ {{ ((price *
- currency.rate).toFixed(price.toString().split('.')[1] ?
- price.toString().split('.')[1].length : 2)) || '--' }}
- </div>
- <div class="deep-div">
- <!-- <div v-if="showType == 0 || showType == 1" class="w-290 flex justify-between pt-1 font-26"
- v-for="(item, index) in greenData" :key="index" @click="onQuickPrice(item.price)" :style="{
- background:
- `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
- } 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 v-if="showType == 0 || showType == 1" class="w-290 flex justify-between pt-1 font-26"
- v-for="(item, index) in greenData" :key="index" @click="onQuickPrice(item.price)" :style="{
- background:
- `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
- } 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_data == 'shib'">
- {{ fixDate(item.amount, $i18n) || "--" }}
- </div>
- <div class="text-right textColor" v-else>
- {{ item.amount || "--" }}
- </div>
-
- </div>
- </div>
- <div class="flex k-select-box">
- <div class="mt-22 mb-22 select-box pl-5 pr-5" 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 font-28 textColor" style="width: 80%">
- {{ dataArrTitle }}
- </div>
- <img src="../../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 mr-10" />
- </div>
- <div class="option-box" v-show="arryIsShow">
- <div class="font-28" 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 ml-10" />
- </div>
- </div>
- </div>
</div>
</div>
<van-popup v-model:show="show" class="rounded-2xl">
@@ -539,6 +541,13 @@
return {
THEME,
fixDate,
+ bfbindex: null,
+ bfblist: [
+ { name: '25' },
+ { name: '50' },
+ { name: '75' },
+ { name: '100' }
+ ],
currentBuyType: '', // 交割合约当前下单的类型，用于弹窗倒计时结束以后，点击再下一单
timeout2: null,
timeout: null,
@@ -615,6 +624,14 @@
},
methods: {
reserve,
+ bfbclick(e, i) {
+ this.bfbindex = i
+ e = parseInt(e.name)
+ const rate = e / 100; //如0.25
+ this.form.amount = this.maxUSDT * rate
+ var a = this.form.amount
+ this.form.amount = Math.floor(a * 100) / 100
+ },
//获取张数
getAmount(val) {
if (!val) {
@@ -940,6 +957,27 @@
<style lang="scss">
@import "@/assets/init.scss";
+.btns_box_boxs {
+ width: 23%;
+ border: 1px solid #F7B600;
+ text-align: center;
+ border-radius: 10px;
+ color: #F7B600;
+}
+
+.btns_box_box {
+ width: 23%;
+ border: 1px solid #cbcbcb;
+ text-align: center;
+ border-radius: 10px;
+}
+
+.btns_box {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
#cryptos {
.perpetual-open {
font-size: 26px;
@@ -1060,13 +1098,18 @@
right: 0;
top: 90px;
width: 100%;
- background-color: $grey_bg;
+ // background-color: $grey_bg;
text-align: center;
- box-shadow: 0px 0px 3px 3px $grey_bg;
+ // box-shadow: 0px 0px 3px 3px $grey_bg;
border-radius: 4px;
- color: $text-color;
+ // color: $text-color;
z-index: 10;
+ @include themify() {
+ background: themed("input_background");
+ color: themed("text_color");
+ box-shadow: 0px 0px 3px 3px themed("input_background");
+ }
}
.option-box>div {
@@ -1104,17 +1147,28 @@
}
.long {
- background-color: $green;
- background: url(@/assets/image/public/open-bg.png) no-repeat right center;
- background-size: 100% 100%;
+ // background-color: $green;
+ // background: url(@/assets/image/public/open-bg.png) no-repeat right center;
+ // background-size: 100% 100%;
color: white;
+ border-radius: 6px;
+ background: #24c18d;
+ font-size: 14px;
+ font-size: 19px;
+ height: 60px;
+ // border-radius: 5rem;
}
.short {
- background-color: $green;
- background: url(@/assets/image/public/close-bg.png) no-repeat left center;
- background-size: 100% 100%;
+ // background-color: $green;
+ // background: url(@/assets/image/public/close-bg.png) no-repeat left center;
+ // background-size: 100% 100%;
color: white;
+ border-radius: 6px;
+ background: #f14b3f;
+ font-size: 19px;
+ height: 60px;
+ // border-radius: 5rem;
}
.van-action-sheet__content {
@@ -1142,14 +1196,17 @@
.select-box {
width: 220px;
- border-radius: 2.5rem;
- background: #1E1E1E;
-
+ // border-radius: 2.5rem;
+ // background: #1E1E1E;
margin-right: 20px;
+
+ @include themify() {
+ background: themed("input_background");
+ }
}
}
.deep-div {
- min-height: 370px;
+ min-height: 200px;
}
</style>
--
Gitblit v1.9.3