From 6b754cd28c45741a24e7f7193b894e3e386e4af8 Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Sat, 20 Sep 2025 18:25:51 +0800
Subject: [PATCH] 1
---
src/components/Transform/history-item/index.vue | 13 ++-
src/components/Transform/list-quotation/index.vue | 4
src/components/Transform/trade-order-area/index.vue | 91 ++++++++++++----------
src/views/cryptos/AccountChange/index.vue | 4
src/utils/utis.js | 9 ++
src/views/cryptos/Trade/index.vue | 23 +++--
src/components/Transform/kline-charts/index.vue | 55 +++++++------
src/views/quotes/List.vue | 1
8 files changed, 109 insertions(+), 91 deletions(-)
diff --git a/src/components/Transform/history-item/index.vue b/src/components/Transform/history-item/index.vue
index fa55dde..18a67ef 100644
--- a/src/components/Transform/history-item/index.vue
+++ b/src/components/Transform/history-item/index.vue
@@ -6,8 +6,8 @@
handleWordType(entrust.order_price_type) }}</span>
<span :class="entrust.offset == 'open' ? 'text-green' : 'text-red'"> / </span>
<span :class="entrust.offset == 'open' ? 'text-green' : 'text-red'">{{ handleWordOffset(entrust.offset)
- }}</span>
- <span>{{ entrust.name }}</span>
+ }}</span>
+ <span>{{ strToArr(entrust.name, '/')[0] }}</span>
</div>
<div class="text" @click.stop="goDetail(entrust.order_no)">
<span v-if="state == 'submitted'" @click.stop="cancelSingle(entrust.order_no)">{{ $t('撤单') }}</span>
@@ -19,7 +19,8 @@
<div class="flex info">
<div class="data-item ">
<div class="title">{{ $t('时间') }}</div>
- <div class="text">{{ entrust.create_time ? entrust.create_time.substring(5, entrust.create_time.length) :
+ <div class="text">{{ entrust.create_time ? entrust.create_time.substring(5, entrust.create_time.length)
+ :
'--' }}</div>
</div>
<div class="data-item right-text">
@@ -44,7 +45,7 @@
<div class="text">{{ entrust.price }}</div>
</div>
<div class="data-item right-text">
- <div class="title">{{ $t('成交量') }}（{{ entrust.symbol }}）</div>
+ <div class="title">{{ $t('成交量') }}（{{ strToArr(entrust.name, '/')[0] }}）</div>
<div class="text">{{ (entrust.volume / entrust.price).toFixed(6) }}</div>
</div>
</div>
@@ -53,6 +54,7 @@
<script>
import { Circle } from 'vant'
+import { strToArr } from '@/utils/utis.js'
export default {
name: 'history-item', // 订单委托项
components: {
@@ -86,6 +88,7 @@
watch: {
},
methods: {
+ strToArr,
handleWordType(type) {
return type === 'limit' ? this.$t('限价') : this.$t('市价');
},
@@ -101,7 +104,7 @@
}
}
</script>
-<style lang="scss" scoped>
+<style lang="scss" scoped>
.history-item {
border-bottom: 1px solid $inp-b;
diff --git a/src/components/Transform/kline-charts/index.vue b/src/components/Transform/kline-charts/index.vue
index 4a289ac..8fa0716 100644
--- a/src/components/Transform/kline-charts/index.vue
+++ b/src/components/Transform/kline-charts/index.vue
@@ -9,12 +9,12 @@
</template>
<template v-else>
<template v-if="isNight">
- <li v-for="item in timeList" :key="item.id" class="mr-10" :class="{ 'text-white': item.id === timeValue.id }"
- @click="choiceTime(item)">{{ item.text }}</li>
+ <li v-for="item in timeList" :key="item.id" class="mr-10"
+ :class="{ 'text-white': item.id === timeValue.id }" @click="choiceTime(item)">{{ item.text }}</li>
</template>
<template v-if="!isNight">
- <li v-for="item in timeList" :key="item.id" class="mr-10" :class="{ 'text-black': item.id === timeValue.id }"
- @click="choiceTime(item)">{{ item.text }}</li>
+ <li v-for="item in timeList" :key="item.id" class="mr-10"
+ :class="{ 'text-black': item.id === timeValue.id }" @click="choiceTime(item)">{{ item.text }}</li>
</template>
</template>
</ul>
@@ -51,6 +51,7 @@
let chart = null
import { _getKline } from "@/service/trade.api";
import config from './config'
+import { clearAllTimers } from '@/utils/utis.js'
import { Loading } from 'vant';
export default {
name: 'KlineCharts',
@@ -127,6 +128,7 @@
this.initData()
},
beforeUnmount() {
+ this.clearTimer()
dispose('kline')
},
watch: {
@@ -135,7 +137,6 @@
this.fetchData()
},
updateKey() { // 更新charts
-
const dataList = chart.getDataList()
if (dataList.length > 0) {
const lastData = dataList[dataList.length - 1]
@@ -174,7 +175,7 @@
this.fetchData()
},
fetchData(time) { // 获取数据
- this.chartLoading = true
+ // this.chartLoading = true
_getKline(this.symbol, this.timeValue.time || '1min').then(data => {
this.chartLoading = false
data.map(item => {
@@ -189,27 +190,27 @@
chart.setPriceVolumePrecision(length, 2)
this.setChartType()
chart.applyNewData(data);
- this.$emit('updataLine', false)
+ this.$emit('updataLine', false) // 关闭计时器
})
// TODO:轮询，删掉上面那段，添加到定时器中
- // this.timer = setInterval(() => {
- // _getKline(this.symbol, this.timeValue.time || time).then(data => {
- // this.chartLoading = false
- // data.map(item => {
- // item.timestamp = item.ts
- // })
- // let str = data[0] ? data[0].close.toString() : ''
- // let length = 2
- // if (str.indexOf('.') != -1) {
- // length = str.split('.')[1].length
- // }
- // //let length = data[0] ? data[0].close.toString().split('.')[1].length : 4
- // chart.setPriceVolumePrecision(length, 2)
- // this.setChartType()
- // chart.applyNewData(data);
- // this.$emit('updataLine', false)
- // })
- // }, 1000);
+ this.timer = setInterval(() => {
+ _getKline(this.symbol, this.timeValue.time || time).then(data => {
+ this.chartLoading = false
+ data.map(item => {
+ item.timestamp = item.ts
+ })
+ let str = data[0] ? data[0].close.toString() : ''
+ let length = 2
+ if (str.indexOf('.') != -1) {
+ length = str.split('.')[1].length
+ }
+ //let length = data[0] ? data[0].close.toString().split('.')[1].length : 4
+ chart.setPriceVolumePrecision(length, 2)
+ this.setChartType()
+ chart.applyNewData(data);
+ this.$emit('updataLine', false)
+ })
+ }, 30000);
},
setChartType() {
let type = 'area'
@@ -236,6 +237,7 @@
clearTimer() {
clearInterval(this.timer)
this.timer = null
+ clearAllTimers()
},
},
deactivated() {
@@ -248,5 +250,4 @@
// #kline {
// // min-height: 828px;
// height: 1200px;
-// }
-</style>
+// }</style>
diff --git a/src/components/Transform/list-quotation/index.vue b/src/components/Transform/list-quotation/index.vue
index 3ff3217..a31897b 100644
--- a/src/components/Transform/list-quotation/index.vue
+++ b/src/components/Transform/list-quotation/index.vue
@@ -44,7 +44,7 @@
<p class="font-24 text-grey">{{ currency.currency_symbol }}
{{ item.close && item.symbol_data.toUpperCase() == 'SHIB' ? (item.close * currency.rate).toFixed(8) :
(item.close *
- currency.rate).toFixed(2) || '--' }}</p>
+ currency.rate).toFixed(6)/1 || '--' }}</p>
</li>
<li class="right flex items-center justify-end">
<p class="w-153 font-31 h-71 bg-green text-white border-0 text-center btn" v-if="item.change_ratio > 0">
@@ -77,7 +77,7 @@
<p class="textColor font-32 font-600">{{ item.close }}</p>
<p class="font-24 text-grey">{{ currency.currency_symbol }} {{ item.close &&
item.symbol_data.toUpperCase() == 'SHIB' ? (item.close * currency.rate).toFixed(8) : (item.close *
- currency.rate).toFixed(2) || '--' }}</p>
+ currency.rate).toFixed(6) / 1 || '--' }}</p>
</li>
<li class="right flex items-center justify-end text-right">
<div v-if="active == 3" class="textColor w-182 font-700 font-24">
diff --git a/src/components/Transform/trade-order-area/index.vue b/src/components/Transform/trade-order-area/index.vue
index 0b1966c..a4fa017 100644
--- a/src/components/Transform/trade-order-area/index.vue
+++ b/src/components/Transform/trade-order-area/index.vue
@@ -31,51 +31,54 @@
<div class="flex justify-center items-center h-66 buy-item">{{ $t('停牌中,禁止交易') }}</div>
</template> -->
<!-- <template v-else> -->
- <div class="flex total-list">
- <div class="total-div" :class="[!isTotal ? 'active-bg' : '']" @click="checkIsTotal(false)">
- {{ $t('数量') }}
- </div>
- <div class="total-div" :class="[isTotal ? 'active-bg' : '']" @click="checkIsTotal(true)">
- {{ $t('总额') }}
- </div>
+ <div class="flex total-list">
+ <div class="total-div" :class="[!isTotal ? 'active-bg' : '']" @click="checkIsTotal(false)">
+ {{ $t('数量') }}
</div>
- <div v-if="!isTotal" class="h-70 lh-70 inputBackground mb-36 flex justify-center px-16">
- <input :placeholder="$t('数量')" class=" w-full h-70 border-none textColor font-28" v-model="form.volume"
- @input="onInput" />
- <span class="textColor font-28">{{ symbol.toLocaleUpperCase() }}</span>
+ <div class="total-div" :class="[isTotal ? 'active-bg' : '']" @click="checkIsTotal(true)">
+ {{ $t('总额') }}
</div>
- <div v-if="isTotal" class="h-70 lh-70 inputBackground mb-36 flex justify-center px-16">
- <input :placeholder="$t('总额')" class=" w-full h-70 border-none textColor font-28" v-model="form.total"
- @input="onInputTotal" />
- <span class="textColor font-28">{{ 'USDT' }}</span>
+ </div>
+ <div v-if="!isTotal" class="h-70 lh-70 inputBackground mb-36 flex justify-center px-16">
+ <input :placeholder="$t('数量')" class=" w-full h-70 border-none textColor font-28" v-model="form.volume"
+ @input="onInput" />
+ <span class="textColor font-28">{{ strToArr(symbolName.toLocaleUpperCase(), '/')[0] }}</span>
+ </div>
+ <div v-if="isTotal" class="h-70 lh-70 inputBackground mb-36 flex justify-center px-16">
+ <input :placeholder="$t('总额')" class=" w-full h-70 border-none textColor font-28" v-model="form.total"
+ @input="onInputTotal" />
+ <span class="textColor font-28">{{ 'USDT' }}</span>
+ </div>
+ <div class="font-24 w-full flex justify-between items-center textColor1">
+ <!-- <span class="flex-1 text-left">0%</span> -->
+ <span class="flex-1 tab-item" :class="[percentageVal == 25 ? 'select-active' : '']"
+ @click="exchangeVal(25)">25%</span>
+ <span class="flex-1 tab-item" :class="[percentageVal == 50 ? 'select-active' : '']"
+ @click="exchangeVal(50)">50%</span>
+ <span class="flex-1 tab-item" :class="[percentageVal == 75 ? 'select-active' : '']"
+ @click="exchangeVal(75)">75%</span>
+ <span class="flex-1 tab-item" :class="[percentageVal == 100 ? 'select-active' : '']"
+ @click="exchangeVal(100)">100%</span>
+ </div>
+ <div class="flex justify-between items-center mt-40">
+ <div class="flex flex-col font-24">
+ <p class="text-grey" v-if="this.currentType === 'open'">{{ $t('可用') }}<span class="textColor ml-8">
+ {{ initOpen.volume }} USDT</span>
+ </p>
+ <p class="text-grey" v-else>{{ $t('可卖') }}
+ <span class="textColor ml-8">
+ {{ initClose.volume }} {{ strToArr(symbolName.toLocaleUpperCase(), '/')[0] }}
+ </span>
+ </p>
</div>
- <div class="font-24 w-full flex justify-between items-center textColor1">
- <!-- <span class="flex-1 text-left">0%</span> -->
- <span class="flex-1 tab-item" :class="[percentageVal == 25 ? 'select-active' : '']"
- @click="exchangeVal(25)">25%</span>
- <span class="flex-1 tab-item" :class="[percentageVal == 50 ? 'select-active' : '']"
- @click="exchangeVal(50)">50%</span>
- <span class="flex-1 tab-item" :class="[percentageVal == 75 ? 'select-active' : '']"
- @click="exchangeVal(75)">75%</span>
- <span class="flex-1 tab-item" :class="[percentageVal == 100 ? 'select-active' : '']"
- @click="exchangeVal(100)">100%</span>
- </div>
- <div class="flex justify-between items-center mt-40">
- <div class="flex flex-col font-24">
- <p class="text-grey" v-if="this.currentType === 'open'">{{ $t('可用') }}<span class="textColor ml-8">
- {{ initOpen.volume }} USDT</span>
- </p>
- <p class="text-grey" v-else>{{ $t('可卖') }}<span class="textColor ml-8">{{ initClose.volume }} {{
- symbol.toLocaleUpperCase() }}</span></p>
- </div>
- <van-icon name="add-o" @click="$router.push('/cryptos/exchangePage')" class="font-30 add-icon" />
- <!-- <img @click="$router.push('/exchange/exchangePage')" src="@/assets/image/public/switch.png" class="w-24 h-24" /> -->
- </div>
- <div style="border-radius: 3.5rem;"
- class="w-full h-90 lh-90 flex justify-center text-white text-center rounded buyandSell mt-70"
- :class="currentType === 'open' ? 'bg-green' : 'bg-red'" @click="order()">
- {{ currentType == 'open' ? $t('买入') : $t('卖出') }}
- </div>
+ <van-icon name="add-o" @click="$router.push('/cryptos/exchangePage')" class="font-30 add-icon" />
+ <!-- <img @click="$router.push('/exchange/exchangePage')" src="@/assets/image/public/switch.png" class="w-24 h-24" /> -->
+ </div>
+ <div style="border-radius: 3.5rem;"
+ class="w-full h-90 lh-90 flex justify-center text-white text-center rounded buyandSell mt-70"
+ :class="currentType === 'open' ? 'bg-green' : 'bg-red'" @click="order()">
+ {{ currentType == 'open' ? $t('买入') : $t('卖出') }}
+ </div>
<!-- </template> -->
</div>
</template>
@@ -86,6 +89,7 @@
import 'vue-slider-component/theme/default.css'
import { _getBalance } from "@/service/user.api.js";
import TradeApi from "@/service/trading.js";
+import { strToArr } from '@/utils/utis'
import { mapGetters } from "vuex";
// import PopupConfirmOrder from '@/components/popup-confirm-order'
export default {
@@ -100,7 +104,7 @@
type: String,
default: ''
},
- symbol: {
+ symbolName: {
type: String,
default: ''
},
@@ -189,6 +193,7 @@
this.form.order_price_type = 'opponent'
},
methods: {
+ strToArr,
checkIsTotal(val) {
this.isTotal = val
this.percentageVal = 0
diff --git a/src/utils/utis.js b/src/utils/utis.js
index cd7ade8..f3055f3 100644
--- a/src/utils/utis.js
+++ b/src/utils/utis.js
@@ -271,4 +271,11 @@
if (typeof str !== 'string') return [];
return str.split(separator);
}
-
+// 清除所有定时器
+export const clearAllTimers = () => {
+ let highestTimeoutId = setTimeout(() => {}, 0);
+ for (let i = 0; i <= highestTimeoutId; i++) {
+ clearTimeout(i);
+ clearInterval(i);
+ }
+}
diff --git a/src/views/cryptos/AccountChange/index.vue b/src/views/cryptos/AccountChange/index.vue
index 3624b69..1994435 100644
--- a/src/views/cryptos/AccountChange/index.vue
+++ b/src/views/cryptos/AccountChange/index.vue
@@ -19,8 +19,8 @@
</div>
</div>
<div>
- <div class="font-32 text-right" :class="item.amount > 0 ? 'text-green' : 'text-red'">{{
- item.amount }} {{ (item.wallet_type || '').toUpperCase() }}</div>
+ <div class="font-32 text-right" :class="item.amount > 0 ? 'text-green' : 'text-red'">
+ {{ item.amount }} {{ (item.wallet_type || '').toUpperCase() }}</div>
<!-- <div class="text-grey font-28 mt-14">{{ item.createTimeStr }}</div> -->
<div class="text-grey font-28 mt-6 text-right">{{ item.amountAfter }}</div>
</div>
diff --git a/src/views/cryptos/Trade/index.vue b/src/views/cryptos/Trade/index.vue
index 656348a..6b046b8 100644
--- a/src/views/cryptos/Trade/index.vue
+++ b/src/views/cryptos/Trade/index.vue
@@ -63,8 +63,8 @@
@cancelOrder="cancelOrder" />
</div>
<div class="py-20 px-20" v-else-if="tabType == '2'">
- <history-item unit="USDT" v-for="item in entrustList" :key="item.order_no" :coinPrice="coinPrice" :entrust="item"
- :state="item.state" @cancelOrder="cancelOrder" />
+ <history-item unit="USDT" v-for="item in entrustList" :key="item.order_no" :coinPrice="coinPrice"
+ :entrust="item" :state="item.state" @cancelOrder="cancelOrder" />
</div>
<div class="py-20 px-20" v-else>
<div class="mb-20">
@@ -76,7 +76,7 @@
:src="item.symbol ? `${HOST_URL}/symbol/${item.symbol_data}.png` : handleImage('../../../assets/loading-default.png')"
class="w-52 h-52 rounded-full mr-16" />
<p class="flex flex-col">
- <strong class="font-28 textColor mb-6">{{ item.symbol.toUpperCase() }}</strong>
+ <strong class="font-28 textColor mb-6">{{ strToArr(item.full_name.toUpperCase(), '/')[0] }}</strong>
<span class="font-20 text-grey">{{ item.full_name }}</span>
</p>
</div>
@@ -98,7 +98,7 @@
:src="item.symbol ? `${HOST_URL}/symbol/${item.symbol_data}.png` : handleImage('../../../assets/loading-default.png')"
class="w-52 h-52 rounded-full mr-16" />
<p class="flex flex-col">
- <strong class="font-28 textColor mb-6">{{ item.symbol.toUpperCase() }}</strong>
+ <strong class="font-28 textColor mb-6">{{ strToArr(item.full_name.toUpperCase(), '/')[0] }}</strong>
<span class="font-20 text-grey">{{ item.full_name }}</span>
</p>
</div>
@@ -126,7 +126,7 @@
<k-line-charts :update-key="updateKey" :update-data="quote" :symbol="symbol" v-if="symbol && showCharts"
:showBottom="false" />
</div> -->
-
+
<!-- <div class="fixed-box">
<div class="flex justify-between items-center px-30 py-20" @click.stop="handleClickShowKlineChart()">
<span class="font-30 textColor2">{{ symbol.toUpperCase() }} {{ $t('k线图表') }}</span>
@@ -152,6 +152,7 @@
import KLineCharts from '@/components/Transform/kline-charts/index.vue'
import historyItem from '@/components/Transform/history-item/index.vue'
import fxKline from '@/components/fx-kline/index.vue'
+import { strToArr } from '@/utils/utis'
import Axios from '@/service/trading'
import { _getHomeList } from '@/service/home.api'
@@ -277,11 +278,12 @@
this.getExchangeRate()
},
methods: {
+ strToArr,
handleImage,
...mapActions('home', [SET_COIN_LIST]),
onUpdate(symbol) { // 更新
- console.log("symbol",symbol);
-
+ console.log("symbol", symbol);
+
this.symbol = symbol
this.closeSocket()
this.init(symbol)
@@ -398,7 +400,7 @@
}, 2000)
}
}
- else{
+ else {
showFailToast(this.$t('请先登录'))
}
},
@@ -545,6 +547,7 @@
#cryptos {
background-color: $mainbgWhiteColor;
+
:v-deep(.px-4) {
padding-left: 30px !important;
padding-right: 30px !important;
@@ -555,11 +558,11 @@
padding-bottom: 30px !important;
}
- .diviLine{
+ .diviLine {
background: $mainbgWhiteColor;
}
- .border-b-color{
+ .border-b-color {
border-bottom-color: $inp_b;
padding-bottom: 5px;
}
diff --git a/src/views/quotes/List.vue b/src/views/quotes/List.vue
index 5fc9e0c..55bed5d 100644
--- a/src/views/quotes/List.vue
+++ b/src/views/quotes/List.vue
@@ -15,7 +15,6 @@
import Head from './components/head.vue'
const store = useStore();
-console.log("aaaaaaaaaaa");
//#region 行情数据----------------------------------------
let qList = ref([])
--
Gitblit v1.9.3