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 +++++++++++++++++++++++++++++++
1 files changed, 63 insertions(+), 0 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
+ },
}
}
--
Gitblit v1.9.3