From 03043192ddf00f9a36b7454799a9152cd1b50a0b Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Tue, 06 Jan 2026 11:13:45 +0800
Subject: [PATCH] 1
---
src/views/quotes/components/BuySellTradeTab.vue | 210 ++++++++++++++++++++++++----------------------------
1 files changed, 96 insertions(+), 114 deletions(-)
diff --git a/src/views/quotes/components/BuySellTradeTab.vue b/src/views/quotes/components/BuySellTradeTab.vue
index 289551b..9d9da98 100644
--- a/src/views/quotes/components/BuySellTradeTab.vue
+++ b/src/views/quotes/components/BuySellTradeTab.vue
@@ -5,9 +5,9 @@
<div class="line-first flex">
<div class="line-first-l">
<p>
- <span>{{ t("最新价") }} {{ chartData.close }}</span> <span class="red">{{
- chartData?.changeRatio
- }}</span> <span class="red">{{ chartData?.netChange }}</span>
+ <span>{{ t("最新价") }} {{ chartData.close }}</span>
+ <span class="red">{{ chartData?.changeRatio }}%</span>
+ <span class="red">{{ chartData?.netChange }}</span>
</p>
</div>
<!-- <div class="line-first-r">
@@ -38,7 +38,8 @@
</div> -->
<div class="orderbook-container flex justify-between px-30 py-30">
<div
- :class="{ 'trade-order-area': true, 'sell-box': props.isSell, 'trade-order-area-full': ['JP-stocks', 'HK-stocks','UK-stocks','DE-stocks','BZ-stocks'].includes(symbolType) }">
+ :class="{ 'trade-order-area': true, 'sell-box': props.isSell, 'trade-order-area-full': ['JP-stocks', 'HK-stocks', 'UK-stocks', 'DE-stocks', 'BZ-stocks'].includes(symbolType) }"
+ :style="{ width: `${['US-stocks'].includes(symbolType) ? '100%' : ''}` }">
<!-- TODO: 搜索 -->
<!-- <div class="name-input" @click="showSearch = true"> -->
<div class="name-input">
@@ -51,7 +52,8 @@
<img src="@/assets/image/quotes/grey-select.png" alt="select-icon" class="select-icon" />
</div>
<div class="option-box" v-show="isShow">
- <div class="text-30" v-for="(item, index) in selectData" :key="item.type" @click="selectItem(item, index)">
+ <div class="text-30" v-for="(item, index) in selectData" :key="item.type"
+ @click="selectItem(item, index)">
{{ item.title }}
</div>
</div>
@@ -108,56 +110,60 @@
</span>
</p>
</div>
- <div class="trade-deep-data" v-if="!['HK-stocks', 'JP-stocks','UK-stocks','DE-stocks','BZ-stocks'].includes(symbolType)">
- <keep-alive>
- <trade-deep-data :symbol="symbol" v-if="symbol" :price="form.price" class="trade-deep-container"
- @newPrice="getNewPrice" />
- </keep-alive>
- </div>
- <div class="trade-deep-data" v-else>
- <div class="index-card flex-r" v-if="!['HK-stocks', 'JP-stocks','UK-stocks','DE-stocks','BZ-stocks'].includes(symbolType)">
- <div class="flex-r-item">
- <p>
- <span class="label">{{ $t('最高') }}</span>
- <span class="value">{{ formatMoney(chartData?.high) }}</span>
- </p>
- <p>
- <span class="label">{{ $t('最低') }}</span>
- <span class="value">{{ formatMoney(chartData?.low) }}</span>
- </p>
- <p>
- <span class="label">{{ $t('成交量') }}</span>
- <span class="value">{{ formatMoney(chartData?.volume) }}</span>
- </p>
- <p>
- <span class="label">{{ $t('换手率') }}</span>
- <span class="value">{{
- chartData?.turnoverRate ? formatMoney(chartData?.turnoverRate) + '%' : '-'
- }}</span>
- </p>
- <p>
- <span class="label">{{ t('marketValue') }}</span>
- <span class="value">{{ formatMoney(chartData?.marketCapital) }}</span>
- </p>
- <p>
- <span class="label">{{ $t('amplitude') }}</span>
- <span class="value">{{ formatMoney(chartData?.changeRatio) }}</span>
- </p>
- <p>
- <span class="label">{{ $t('pb') }}</span>
- <span class="value">{{ formatMoney(chartData?.pb) }}</span>
- </p>
- <p>
- <span class="label">{{ $t('eps') }}</span>
- <span class="value">{{ formatMoney(chartData?.eps) }}</span>
- </p>
- <p>
- <span class="label">{{ $t('navps') }}</span>
- <span class="value">{{ formatMoney(chartData?.navps) }}</span>
- </p>
+ <template v-if="!['US-stocks'].includes(symbolType)">
+ <div class="trade-deep-data"
+ v-if="!['HK-stocks', 'JP-stocks', 'UK-stocks', 'DE-stocks', 'BZ-stocks'].includes(symbolType)">
+ <keep-alive>
+ <trade-deep-data :symbol="symbol" v-if="symbol" :price="form.price" class="trade-deep-container"
+ @newPrice="getNewPrice" />
+ </keep-alive>
+ </div>
+ <div class="trade-deep-data" v-else>
+ <div class="index-card flex-r"
+ v-if="!['HK-stocks', 'JP-stocks', 'UK-stocks', 'DE-stocks', 'BZ-stocks'].includes(symbolType)">
+ <div class="flex-r-item">
+ <p>
+ <span class="label">{{ $t('最高') }}</span>
+ <span class="value">{{ formatMoney(chartData?.high) }}</span>
+ </p>
+ <p>
+ <span class="label">{{ $t('最低') }}</span>
+ <span class="value">{{ formatMoney(chartData?.low) }}</span>
+ </p>
+ <p>
+ <span class="label">{{ $t('成交量') }}</span>
+ <span class="value">{{ formatMoney(chartData?.volume) }}</span>
+ </p>
+ <p>
+ <span class="label">{{ $t('换手率') }}</span>
+ <span class="value">{{
+ chartData?.turnoverRate ? formatMoney(chartData?.turnoverRate) + '%' : '-'
+ }}</span>
+ </p>
+ <p>
+ <span class="label">{{ t('marketValue') }}</span>
+ <span class="value">{{ formatMoney(chartData?.marketCapital) }}</span>
+ </p>
+ <p>
+ <span class="label">{{ $t('amplitude') }}</span>
+ <span class="value">{{ formatMoney(chartData?.changeRatio) }}</span>
+ </p>
+ <p>
+ <span class="label">{{ $t('pb') }}</span>
+ <span class="value">{{ formatMoney(chartData?.pb) }}</span>
+ </p>
+ <p>
+ <span class="label">{{ $t('eps') }}</span>
+ <span class="value">{{ formatMoney(chartData?.eps) }}</span>
+ </p>
+ <p>
+ <span class="label">{{ $t('navps') }}</span>
+ <span class="value">{{ formatMoney(chartData?.navps) }}</span>
+ </p>
+ </div>
</div>
</div>
- </div>
+ </template>
</div>
<!-- <div class="orderbook-container flex justify-between px-30 py-30 hk-stocks-orderbook" v-else>
<div :class="{ 'trade-order-area': true, 'sell-box': props.isSell }">
@@ -243,7 +249,8 @@
<!-- <li>{{ t('成交历史') }}</li> -->
</ul>
</div>
- <img src="../../../assets/image/public/record.png" alt="record-img" class="pr-5 record-img" @click="goHistory" />
+ <img src="../../../assets/image/public/record.png" alt="record-img" class="pr-5 record-img"
+ @click="goHistory" />
</div>
</div>
<section class="etf-container">
@@ -254,8 +261,8 @@
@cancelOrder="cancelOrder" />
</div>
<div class="pl-10 pr-10 pb-50" v-else-if="tabType == '2'">
- <history-item :unit="currentUnit(symbolType)" v-for="item in entrustList" :key="item.order_no" :coinPrice="coinPrice"
- :entrust="item" :state="item.state" @cancelOrder="cancelOrder" />
+ <history-item :unit="currentUnit(symbolType)" v-for="item in entrustList" :key="item.order_no"
+ :coinPrice="coinPrice" :entrust="item" :state="item.state" @cancelOrder="cancelOrder" />
</div>
<div class="pl-5 pr-5" v-else>
<div class="mb-10 border-b assets-box">
@@ -263,10 +270,10 @@
<ul>
<li v-for="item in pairsList" :key="item.symbol" class="flex justify-between py-2">
<div class="flex items-center">
- <img :src="item.symbol
+ <!-- <img :src="item.symbol
? `${HOST_URL}/symbol/${item.symbol.toLowerCase()}.png`
: require('@/assets/loading-default.png')
- " class="w-15 h-15 rounded-full mr-5 usdt-icon" />
+ " class="w-15 h-15 rounded-full mr-5 usdt-icon" /> -->
<p class="flex flex-col">
<strong class="text-28 textColor mb-6">{{
item.symbol.toUpperCase()
@@ -278,7 +285,7 @@
<strong class="text-28 textColor mb-6">{{ item.usable }}</strong>
<span class="text-28 text-grey">
{{ currency.currency_symbol }}
- {{ item.usableUsdt ? (item.usableUsdt * currency.rate).toFixed(2) : "0.0" }}
+ {{ item.usableUsdt ? formatNumberWithComma(item.usableUsdt * currency.rate) : "0.0" }}
</span>
</div>
</li>
@@ -304,7 +311,7 @@
<strong class="text-28 textColor mb-6">{{ item.usable }}</strong>
<span class="text-28 text-grey">
{{ currency.currency_symbol }}
- {{ item.usableUsdt ? (item.usableUsdt * currency.rate).toFixed(2) : "0.0" }}
+ {{ item.usableUsdt ? formatNumberWithComma(item.usableUsdt * currency.rate) : "0.0" }}
</span>
</div>
</li>
@@ -384,8 +391,8 @@
</section>
<div class="kline-container flex" v-if="showKlineChart">
<div class="chart-index">
- <fx-kline :height="500" :symbol="symbol" :isShowsolid="true" :chartType="chartType" v-if="symbol" @data="onData"
- :key="`${symbol}-${timeValue}`" />
+ <fx-kline :height="500" :symbol="symbol" :isShowsolid="true" :chartType="chartType" v-if="symbol"
+ @data="onData" :key="`${symbol}-${timeValue}`" />
</div>
</div>
</div>
@@ -430,6 +437,7 @@
import { SET_STAGE } from "@/store/types.store";
import { formatMoney } from '@/utils/index.js'
import { currentUnit } from '@/utils/coinUnit.js'
+import { formatNumberWithComma } from '@/utils/utis';
const thStore = themeStore();
const THEME = thStore.theme;
@@ -449,53 +457,26 @@
},
});
const filterOne = ref([
- { name: t("分时"), paramsValue: "timeSharing", seconds: 1 * 60 * 1000, index: 0 },
- {
- name: "1" + t("天"),
- paramsValue: "1day",
- seconds: 1 * 24 * 60 * 60 * 1000,
- index: 1,
- },
- {
- name: "1" + t("周"),
- paramsValue: "1week",
- seconds: 7 * 24 * 60 * 60 * 1000,
- index: 2,
- },
- {
- name: "1" + t("月"),
- paramsValue: "1mon",
- seconds: 30 * 24 * 60 * 60 * 1000,
- index: 3,
- },
- {
- name: "5" + t("天"),
- paramsValue: "5day",
- seconds: 5 * 24 * 60 * 60 * 1000,
- index: 4,
- },
- {
- name: t("season"),
- paramsValue: "1quarter",
- seconds: 3 * 30 * 24 * 60 * 60 * 1000,
- index: 5,
- },
- {
- name: t("Year"),
- paramsValue: "1year",
- seconds: 12 * 30 * 24 * 60 * 60 * 1000,
- index: 6,
- },
+ { name: '1' + t('分'), paramsValue: '1', seconds: 1 * 60 * 1000, index: 12, },
+ { name: '1' + t('周'), paramsValue: 'W', seconds: 7 * 24 * 60 * 60 * 1000, index: 2, },
+ { name: '1' + t('月'), paramsValue: 'M', seconds: 30 * 24 * 60 * 60 * 1000, index: 3, },
+ { name: '1' + t('天'), paramsValue: 'D', seconds: 1 * 24 * 60 * 60 * 1000, index: 4, },
]);
const filterTwo = ref([
- { name: "120" + t("分"), paramsValue: "120min", seconds: 2 * 60 * 60 * 1000, index: 7 },
- { name: "60" + t("分"), paramsValue: "60min", seconds: 1 * 60 * 60 * 1000, index: 8 },
- { name: "30" + t("分"), paramsValue: "30min", seconds: 30 * 60 * 1000, index: 9 },
- { name: "15" + t("分"), paramsValue: "15min", seconds: 15 * 60 * 1000, index: 10 },
- { name: "5" + t("分"), paramsValue: "5min", seconds: 5 * 60 * 1000, index: 11 },
- { name: "1" + t("分"), paramsValue: "1min", seconds: 1 * 60 * 1000, index: 12 },
+ { name: '60' + t('分'), paramsValue: '60', seconds: 60 * 60 * 1000, index: 7, },
+ { name: '45' + t('分'), paramsValue: '45', seconds: 45 * 60 * 1000, index: 8, },
+ { name: '30' + t('分'), paramsValue: '30', seconds: 30 * 60 * 1000, index: 9, },
+ { name: '15' + t('分'), paramsValue: '15', seconds: 15 * 60 * 1000, index: 10, },
+ { name: '5' + t('分'), paramsValue: '5', seconds: 5 * 60 * 1000, index: 11, },
+
+ // { name: "120" + t("分"), paramsValue: "120min", seconds: 2 * 60 * 60 * 1000, index: 7 },
+ // { name: "60" + t("分"), paramsValue: "60min", seconds: 1 * 60 * 60 * 1000, index: 8 },
+ // { name: "30" + t("分"), paramsValue: "30min", seconds: 30 * 60 * 1000, index: 9 },
+ // { name: "15" + t("分"), paramsValue: "15min", seconds: 15 * 60 * 1000, index: 10 },
+ // { name: "5" + t("分"), paramsValue: "5min", seconds: 5 * 60 * 1000, index: 11 },
+ // { name: "1" + t("分"), paramsValue: "1min", seconds: 1 * 60 * 1000, index: 12 },
]);
-const timeLabelActive = ref(1);
+const timeLabelActive = ref(12);
const chartType = ref("");
const quotesStore = useQuotesStore();
const userStore = useUserStore();
@@ -582,9 +563,9 @@
onMounted(async () => {
initPage(props.symbolFlag);
handleClickSelectTime({
- paramsValue: "1day",
+ paramsValue: "1",
seconds: 1 * 24 * 60 * 60 * 1000,
- index: 1,
+ index: 12,
});
});
@@ -706,9 +687,9 @@
router.push(`/quotes/detail?symbol=${symbol.value}&tabActive=7&symbolType=A-stocks&type=A-stocks`)
} else if (symbolType === "UK-stocks") {
router.push(`/quotes/usStockDetail?symbol=${symbol.value}&tabActive=9&symbolType=UK-stocks`)
- }else if (symbolType === "DE-stocks") {
+ } else if (symbolType === "DE-stocks") {
router.push(`/quotes/usStockDetail?symbol=${symbol.value}&tabActive=10&symbolType=DE-stocks`)
- }else if (symbolType === "BZ-stocks") {
+ } else if (symbolType === "BZ-stocks") {
router.push(`/quotes/usStockDetail?symbol=${symbol.value}&tabActive=11&symbolType=BZ-stocks`)
} else {
router.push(`/quotes/usStockDetail?symbol=${symbol.value}&tabActive=4&symbolType=HK-stocks`)
@@ -759,8 +740,8 @@
return;
}
if (currentType.value === "open") {
- form.volume = parseFloat(form.total).toFixed(5);
- form.total = ((parseFloat(form.total) / parseFloat(form.price))).toFixed(5)
+ form.volume = parseFloat(form.total).toFixed(5);
+ form.total = ((parseFloat(form.total) / parseFloat(form.price))).toFixed(5)
} else {
form.volume = parseFloat(form.total) / parseFloat(form.price);
form.volume = form.volume.toFixed(5);
@@ -772,7 +753,7 @@
return;
}
if (currentType.value === "open") {
- form.total = form.volume
+ form.total = form.volume
volume = parseFloat(form.volume) * parseFloat(form.price);
} else {
volume = form.volume;
@@ -856,7 +837,7 @@
getOrderList();
if (type === "open") {
//console.log('开仓数据')
- Axios.tradeBuyToken({ type : symbolType}).then((res) => {
+ Axios.tradeBuyToken({ type: symbolType }).then((res) => {
initOpen.volume = res.volume;
initOpen.fee = res.fee;
initOpen.session_token = res.session_token;
@@ -1336,6 +1317,7 @@
display: flex;
flex-direction: column;
width: 210px;
+ // width: 100%;
font-size: 12px;
margin-right: 12px;
--
Gitblit v1.9.3