From 0dbc7465447164fef24327b5d494870832d798dd Mon Sep 17 00:00:00 2001
From: 李 <344137771@qq.com>
Date: Tue, 26 May 2026 11:15:18 +0800
Subject: [PATCH] 1
---
src/components/Transform/perpetual-open/index.vue | 131 ++++++++++++++++++++++++-------------------
1 files changed, 74 insertions(+), 57 deletions(-)
diff --git a/src/components/Transform/perpetual-open/index.vue b/src/components/Transform/perpetual-open/index.vue
index 71b14da..677c61f 100644
--- a/src/components/Transform/perpetual-open/index.vue
+++ b/src/components/Transform/perpetual-open/index.vue
@@ -3,7 +3,7 @@
<div id="cryptos">
<div class="perpetual-open">
<div class="flex pt-8">
- <div class="w-40 h-16 text-center rounded tabBackground textColor">{{ $t('全仓') }}</div>
+ <div class="w-40 h-16 flex items-center justify-center rounded tabBackground textColor">{{ $t('全仓') }}</div>
<div class="w-36 h-16 ml-8 rounded tabBackground textColor" v-if="selectIndex / 1 === 1">
<div @click="showOptions = !showOptions" style="height:100%; box-sizing: border-box"
class="relative word-30 pl-7 pr-2 w-36 h-16 tabBackground select-wrap flex justify-between items-center">
@@ -48,7 +48,7 @@
</div>
</div>
</template>
- <contract-futrue v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'" class="mb-5"
+ <contract-futrue v-if="selectIndex == 2 && Array.isArray(initFutrue.para) && initFutrue.para.length" class="mb-5"
:initFutrue="initFutrue" @paraId="onParaId" />
<div class="h-18 greyBg mb-8 flex pr-5 justify-center rounded-lg textColor items-center"
v-if="selectIndex == 1">
@@ -66,8 +66,8 @@
<input v-if="selectIndex == 1" :placeholder="$t('张数')" class="border-none greyBg text-center textColor"
:class="['HK-stocks', 'JP-stocks','UK-stocks','DE-stocks','BZ-stocks'].includes(queryType) ? 'full-input' : 'half-input'"
v-model="form.amount" type="number" @input="onInput" />
- <input v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'"
- :placeholder="($t('最少') + initFutrue && initFutrue.para ? $t('最小金额') + initFutrue.para[paraIndex].buy_min : '')"
+ <input v-if="selectIndex == 2 && Array.isArray(initFutrue.para) && initFutrue.para.length"
+ :placeholder="($t('最少') + (initFutrue && Array.isArray(initFutrue.para) && initFutrue.para[paraIndex] ? $t('最小金额') + initFutrue.para[paraIndex].buy_min : ''))"
class="border-none greyBg text-center textColor"
:class="['HK-stocks', 'JP-stocks','UK-stocks','DE-stocks','BZ-stocks'].includes(queryType) ? 'full-input' : 'half-input'"
v-model="form.amount" type="number" @input="onInput" />
@@ -106,7 +106,7 @@
<!-- 张数输入 -->
<amount-slider ref="sliderRef" :maxAmount="getVolumnByLever()" @getAmount="getAmount"></amount-slider>
</template>
- <template v-if="selectIndex == 1 && userInfo.token">
+ <template v-if="selectIndex == 1 && userInfo && userInfo.token">
<div class="flex justify-between mt-8">
<div class="text-grey">{{ $t('合约金额') }}</div>
<div class="textColor">{{ initData.amount * (form.amount / 1) * form.lever_rate }}
@@ -129,13 +129,12 @@
</div>
</template>
- <!-- <div class="flex text-24 text-grey justify-between mt-8" v-if="selectIndex == 2"> -->
- <div class="flex text-24 text-grey justify-between mt-8">
+ <div class="flex text-24 text-grey justify-between mt-8" v-if="selectIndex == 2">
<div>{{ $t("可用") }}</div>
<div class="textColor">{{ initFutrue.amount }} {{ getCurrentUnit() }}</div>
</div>
- <div class="flex text-24 text-grey justify-between mt-5"
- v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'">
+ <div class="flex text-24 text-grey justify-between mt-5"
+ v-if="selectIndex == 2 && Array.isArray(initFutrue.para) && initFutrue.para.length">
<div>{{ $t("手续费") }}</div>
<div class="textColor">
{{
@@ -150,7 +149,7 @@
</div>
</div>
- <template v-if="userInfo.token">
+ <template v-if="userInfo && userInfo.token">
<template v-if="selectIndex == 1">
<div class="w-full h-20 bg-green flex text-white rounded-md mt-16 justify-center items-center"
v-if="currentType == 'long'" @click="throttleFn('long')">
@@ -179,7 +178,7 @@
</template>
<template v-if="selectIndex == 2">
<div class="w-full h-20 bg-green flex text-white rounded-md mt-2 justify-center items-center"
- @click="throttleFn('open')" v-if="userInfo.token">
+ @click="throttleFn('open')" v-if="userInfo && userInfo.token">
<div class="text-34 relative text-center" style="flex-grow: 1">
{{ $t("开多") }}
<span class="right-word text-22 text-center">{{
@@ -189,7 +188,7 @@
</div>
<div class="w-full h-20 bg-red flex text-white rounded-md mt-5 mb-2 justify-center items-center"
style="position: relative;" :class="{ 'mt-22': selectIndex == 2 }" @click="throttleFn('close')"
- v-if="userInfo.token">
+ v-if="userInfo && userInfo.token">
<div class="relative text-34 text-center" style="flex-grow: 1">
{{ $t("开空") }}
<span class="right-word text-22 text-center">{{
@@ -225,26 +224,28 @@
</div>
</div>
<div class="deep-div">
- <div v-if="showType == 0 || showType == 2" class="w-72 flex justify-between pt-1 text-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) || "--" }}
+ <template v-if="showType == 0 || showType == 2">
+ <div class="w-72 flex justify-between pt-1 text-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 class="text-right textColor" v-else>
- {{ item.amount || "--" }}
- </div>
- </div>
+ </template>
</div>
<div class="w-72 text-red pt-1 text-34 font-bold text-center">
{{ price || '--' }}
@@ -257,27 +258,28 @@
}}
</div>
<div class="deep-div">
-
- <div v-if="showType == 0 || showType == 1" class="w-72 flex justify-between pt-1 text-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 == 'shib'">
- {{ fixDate(item.amount, $i18n) || "--" }}
+ <template v-if="showType == 0 || showType == 1">
+ <div class="w-72 flex justify-between pt-1 text-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 == 'shib'">
+ {{ fixDate(item.amount, $i18n) || "--" }}
+ </div>
+ <div class="text-right textColor" v-else>
+ {{ item.amount || "--" }}
+ </div>
</div>
- <div class="text-right textColor" v-else>
- {{ item.amount || "--" }}
- </div>
- </div>
+ </template>
</div>
<div class="flex k-select-box">
<div class="mt-2 mb-2 select-box" style="position: relative">
@@ -341,6 +343,11 @@
[Popup.name]: Popup,
},
props: {
+ // 非路由场景（例如嵌入到其它页面）用于指定品种类型
+ queryTypeProp: {
+ type: String,
+ default: ''
+ },
greenData: { // 买单
type: Array,
default() {
@@ -452,10 +459,14 @@
}
},
symbol(val) {
- // this.getHomeList(val);
+ if (val) {
+ this.getHomeList(val);
+ }
},
'$route'(val) {
- this.getHomeList(val.params.symbol);
+ if (val && val.params && val.params.symbol) {
+ this.getHomeList(val.params.symbol);
+ }
},
initData(val) {
if (this.selectIndex / 1 === 1) {
@@ -538,7 +549,10 @@
}
},
created() {
- if (this.$route.query.type) {
+ // 优先使用外部传入的 type，其次才从路由读取
+ if (this.queryTypeProp) {
+ this.queryType = this.queryTypeProp
+ } else if (this.$route && this.$route.query && this.$route.query.type) {
this.queryType = this.$route.query.type
}
},
@@ -550,7 +564,8 @@
this.title = this.$t('市价');
},
mounted() {
- this.getHomeList(this.$route.params.symbol);
+ // trade/options 等页面没有 params.symbol，优先使用 props.symbol
+ this.getHomeList(this.symbol || (this.$route && this.$route.params && this.$route.params.symbol));
this.form.price = this.price
},
beforeUnmount() {
@@ -597,7 +612,9 @@
this.arryIsShow = !this.arryIsShow;
},
getHomeList(symbol) {
+ if (!symbol) return
_getHomeList(symbol).then((res) => {
+ if (!res || !res[0] || res[0].close == null) return
let numberText = res[0].close.toString();
let numberLength = numberText.substring(numberText.indexOf(".") + 1, numberText.length).length;
let arry = [];
@@ -780,7 +797,7 @@
this.order(type)
}, 500),
order(type) {
- if (!this.userInfo.token) {
+ if (!this.userInfo || !this.userInfo.token) {
this.$router.push('/login')
return false;
}
@@ -801,7 +818,7 @@
// this.form.direction = type
- this.form.symbol = this.$route.params.symbol
+ this.form.symbol = this.symbol || (this.$route && this.$route.params && this.$route.params.symbol) || ''
// this.form.direction = type === 'open' ? 'buy' : 'sell'
if (type == 'long' || type == 'open') {
this.form.direction = 'buy'
--
Gitblit v1.9.3