1

李凌

2025-09-15 facd3463f9b965df159cd45781bc99452ae2b9f9

1

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


 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() }}&nbsp;&nbsp;{{ $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;
  }

 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

 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>