1

李凌

2025-09-15 facd3463f9b965df159cd45781bc99452ae2b9f9

 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
    },
  }
}