From facd3463f9b965df159cd45781bc99452ae2b9f9 Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Mon, 15 Sep 2025 17:59:49 +0800
Subject: [PATCH] 1
---
src/components/Transform/contract-header/index.vue | 63 +++++++++++++++++++++++++++++++
src/views/cryptos/TrendDetails/index.vue | 1
src/views/cryptos/Trade/index.vue | 46 +++++++++++++++++++----
src/views/trade/index.vue | 2 -
4 files changed, 101 insertions(+), 11 deletions(-)
diff --git a/src/components/Transform/contract-header/index.vue b/src/components/Transform/contract-header/index.vue
index 5dfcb05..2c33e67 100644
--- a/src/components/Transform/contract-header/index.vue
+++ b/src/components/Transform/contract-header/index.vue
@@ -22,6 +22,13 @@
@click="jump" />
</div> -->
</div>
+
+ <!-- k line-->
+ <div class="mt-35 h-482-px">
+ <kline-charts :update-key="updateKey" :update-data="quote" :isChangeLine="isChangeLine" :symbol="symbol"
+ v-if="symbol" @updataLine="isChangeLine = false" :isNight="isNight" :isChange="isChange" />
+ </div>
+
<div class="flex justify-between pt-34">
<button class="tabBtn w-368 h-74 lh-74 border-none rounded"
:class="selectIndex == 1 ? 'select-active' : 'no-select'" @click="changeTab(1)">
@@ -83,10 +90,12 @@
import { Popup } from "vant";
import { mapGetters } from "vuex";
import { _getHomeList } from "@/service/home.api";
+import KlineCharts from '@/components/Transform/kline-charts/index.vue'
import { THEME } from '@/config/theme'
import { setStorage } from '@/utils/utis'
import { debounce } from '@/utils/index'
import { HOST_URL } from '@/config'
+import { WS_URL } from '@/config';
export default {
name: "contractHeader",
props: {
@@ -121,11 +130,19 @@
},
components: {
[Popup.name]: Popup,
+ KlineCharts
},
computed: {
...mapGetters({ coinList: 'home/coinList' }),
title() {
return [this.$t('永续'), this.$t('交割')][this.selectIndex - 1]
+ }
+ },
+ watch: {
+ symbol(newVal, oldVal) {
+ if (newVal !== oldVal) {
+ this.onUpdate(newVal)
+ }
}
},
data() {
@@ -144,6 +161,16 @@
queryType: 'cryptos',
popupSearch: '',
HOST_URL,
+ updateKey: 1,
+ quote: {},
+ isChangeLine: false,
+ isNight: true,
+ isChange: true, //是否有切换黑夜白天模式
+ sockets: {
+ quote: null,
+ deals: null,
+ askBid: null
+ },
}
},
created() {
@@ -213,6 +240,42 @@
// console.log("e", this.popupSearch);
// this.list = this.copyList.filter(item => item.name.includes(this.popupSearch.toUpperCase()))
// })
+
+ onUpdate(symbol) { // 更新
+ console.log(symbol)
+ this.fetchData()
+ },
+ startQuoteScoket() {
+ this.sockets.quote = new WebSocket(`${WS_URL}/1/${this.symbol}`)
+ this.sockets.quote.onmessage = (evt) => {
+ const { data } = evt
+ const { code, data: _data } = JSON.parse(data)
+ if (code / 1 === 0) {
+ this.quote = _data[0]
+ this.updateKey++
+ }
+ }
+ },
+ fetchData() {
+ this.closeSocket()
+ _getHomeList(this.symbol).then(data => {
+ // console.log(data[0])
+ this.quote = data[0]
+ this.$nextTick(() => {
+ if (!this.sockets.quote && this.symbol) {
+ this.startQuoteScoket()
+ }
+ })
+ })
+ },
+ closeSocket() {
+ this.sockets.quote && this.sockets.quote.close()
+ this.sockets.deals && this.sockets.deals.close()
+ this.sockets.askBid && this.sockets.askBid.close()
+ this.sockets.quote = null
+ this.sockets.deals = null
+ this.sockets.askBid = null
+ },
}
}
diff --git a/src/views/cryptos/Trade/index.vue b/src/views/cryptos/Trade/index.vue
index 8d97938..86f45e2 100644
--- a/src/views/cryptos/Trade/index.vue
+++ b/src/views/cryptos/Trade/index.vue
@@ -15,6 +15,12 @@
<trade-head :isReturn="true" :backFunc="() => $router.push('/')" :symbolName="symbolName" :symbol="symbol"
:price="price" :range="range" :isTrade="true" @update-coin="onUpdate" @data="quote = $event" />
+ <!-- k line-->
+ <div class="mt-35 h-482-px">
+ <kline-charts :update-key="updateKey" :update-data="quote" :isChangeLine="isChangeLine" :symbol="symbol"
+ v-if="symbol" @updataLine="isChangeLine = false" :isNight="isNight" :isChange="isChange" />
+ </div>
+
<div class="trade-buy-sell flex justify-between px-30 py-30">
<trade-order-area :symbol="symbol" :symbolName="symbolName" :init-open="initOpen" :init-close="initClose"
:price="price" @ordered="onOrdered" />
@@ -63,8 +69,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">
@@ -126,7 +132,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>
@@ -221,7 +227,7 @@
futrueHistroy: [], // 交割历史
socket: null, // 行情
sockets: {
- quotes: null, // 行情
+ quote: null, // 行情
deep: null /// 深度
},
curTab: '', // 当前委托还是持有仓位
@@ -268,7 +274,10 @@
symbolName: '',
updateKey: 1,
currency: {},
- timer3: null
+ timer3: null,
+ isChangeLine: false,
+ isNight: true,
+ isChange: true, //是否有切换黑夜白天模式
}
},
async created() {
@@ -319,7 +328,27 @@
_getHomeList(val).then((res) => {
this.symbolName = res[0].name
this.coinPrice = res[0].close
+
+ // 获取k线数据
+ this.quote = res[0]
+ this.symbolData = res[0].symbol_data
+ this.$nextTick(() => {
+ if (!this.sockets.quote && this.symbol) {
+ this.startQuoteScoket()
+ }
+ })
})
+ },
+ startQuoteScoket() {
+ this.sockets.quote = new WebSocket(`${WS_URL}/1/${this.symbol}`)
+ this.sockets.quote.onmessage = (evt) => {
+ const { data } = evt
+ const { code, data: _data } = JSON.parse(data)
+ if (code / 1 === 0) {
+ this.quote = _data[0]
+ this.updateKey++
+ }
+ }
},
tabClick(type) {
this.tabType = type;
@@ -403,7 +432,7 @@
init(symbol) { // 初始化页面
this.symbol = symbol
if (!this.socket) {
- this.startQuoteSocket()
+ // this.startQuoteSocket()
}
this.initParam(symbol) // 'open'
this.clearTimer()
@@ -542,6 +571,7 @@
@import "@/assets/init.scss";
#cryptos {
+
// background-color: $mainbgWhiteColor;
:v-deep(.px-4) {
padding-left: 30px !important;
@@ -553,11 +583,11 @@
padding-bottom: 30px !important;
}
- .diviLine{
+ .diviLine {
background: $main2_background;
}
- .border-b-color{
+ .border-b-color {
border-bottom-color: $inp_b;
padding-bottom: 5px;
}
diff --git a/src/views/cryptos/TrendDetails/index.vue b/src/views/cryptos/TrendDetails/index.vue
index 603a23f..a3f1e50 100644
--- a/src/views/cryptos/TrendDetails/index.vue
+++ b/src/views/cryptos/TrendDetails/index.vue
@@ -402,7 +402,6 @@
}
},
startAskBidSocket() { // 委托
-
this.sockets.askBid = new WebSocket(`${WS_URL}/3/${this.symbol}`)
this.sockets.askBid.onmessage = (evt) => {
const { data } = evt
diff --git a/src/views/trade/index.vue b/src/views/trade/index.vue
index 3b2d662..7b415d6 100644
--- a/src/views/trade/index.vue
+++ b/src/views/trade/index.vue
@@ -9,12 +9,10 @@
</van-tabs>
<div class="gift"><img src="@/assets/imgs/home/gift.png" alt=""></div>
</div> -->
-
<ContractHeader :symbol="symbol" :range="range" :selectIndex="selectIndex" :symbolName="symbolName"
:balance="userInfo.balance" @tab="onTopTab" @update-coin="onUpdate">
</ContractHeader>
<!-- <Head :symbolObj="symbolObj"></Head> -->
-
<div :key="symbol" class="pb-108 no_touch">
<p class="status-info" v-if="chartData.market && chartData.market.status">
<span>{{ chartData.market.status && $t(chartData.market.status) }},</span>
--
Gitblit v1.9.3