1

李凌

2025-09-15 facd3463f9b965df159cd45781bc99452ae2b9f9

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