Bit_Wise_World/src/views/index/components/HotCoin.vue

<template>
  <div class="hot-coin">
    <div class="coin-title pf600 fs18 fc121212">热门币种</div>
    <div class="coin-head">
      <div class="name">
        <div class="name-text pf400 fs12 fc666666">交易对</div>
        <div class="list-sort">
          <div class="sort-up">
            <img src="../../../assets/icon/index/Triangle.svg" alt="" />
          </div>
          <div class="sort-bottom">
            <img src="../../../assets/icon/index/Triangle 2.svg" alt="" />
          </div>
        </div>
      </div>
      <div class="name price">
        <div class="name-text pf400 fs12 fc666666">最新价</div>
        <div class="list-sort">
          <div class="sort-up">
            <img src="../../../assets/icon/index/Triangle.svg" alt="" />
          </div>
          <div class="sort-bottom">
            <img src="../../../assets/icon/index/Triangle 2.svg" alt="" />
          </div>
        </div>
      </div>
      <div class="name today">
        <div class="name-text pf400 fs12 fc666666">今日涨跌幅</div>
        <div class="list-sort">
          <div class="sort-up">
            <img src="../../../assets/icon/index/Triangle.svg" alt="" />
          </div>
          <div class="sort-bottom">
            <img src="../../../assets/icon/index/Triangle 2.svg" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="coin-body" >
     <div class="body-item" v-for="(item, index) in coinList" :key="item.id || index">
      <div  class="item-left" @click="router.push({ path: '/marketDetails', query: { id: item.id, type: item.symbol.toLowerCase()} })">
        <div class="coin-img" >
          <img :src="item.logo" alt="" />
        </div>
        <div class="coin-name">
          <div class="upper-name pf500 fs14 fc2C3131">{{ formatSymbol(item.symbol) }}</div>
          <div class="letter-name pf400 fs10 fcA9A9A9">{{ item.name }}</div>
        </div>
        <div class="coin-echars"></div>
        <div class="coin-price">
          <div class="upper-price pf500 fs14 fc2C3131">{{ formatPrice(item.current_price) }}</div>
          <div class="letter-price pf400 fs10 fcA9A9A9">≈ ${{ formatPrice(item.current_price) }}</div>
        </div>
      </div>
      <div  class="item-right pf500 fs12 fcFFFFFF" :class="getChangeColor(item.trend)">{{ formatChange(item.trend) }}</div>
    </div>
    </div>
  </div>
</template>

<script setup>
import { GetCoins } from '@/api/index.js'
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from "vue-router";

const router = useRouter();

const coinList = ref([])
let socket = null
let heartbeatTimer = null
let reconnectTimer = null
let isUnmounted = false

// --- 辅助函数 ---
const formatSymbol = (symbol) => symbol ? symbol.replace('USDT', '') : ''
const formatPrice = (price) => price ? parseFloat(price).toFixed(2) : '0.00'

// 格式化涨跌幅
const formatChange = (val) => {
  if (!val) return '+0.00%'
  const num = parseFloat(val)
  return (num > 0 ? '+' : '') + num.toFixed(2) + '%'
}

// 获取颜色
const getChangeColor = (val) => {
  if (!val) return 'bg-gray'
  return parseFloat(val) >= 0 ? 'bg-green' : 'bg-red'
}

// --- 1. WebSocket 核心逻辑 ---

const initWebSocket = () => {
  if (socket) {
    socket.onclose = null
    socket.close()
    socket = null
  }

  if (coinList.value.length === 0) return

  const symbolsParam = coinList.value
    .map(item => item.symbol.toLowerCase())
    .join('/')

  const query = `?symbol=${symbolsParam}`

  const host = process.env.NODE_ENV === 'production'
    ? 'backend.66linknow.com'
    : 'localhost:8080'
  const wsUrl = `ws://${host}/ws/kline/${query}`

  try {
    socket = new WebSocket(wsUrl)
  } catch (err) {
    reconnect()
    return
  }

  socket.onopen = () => {
    startHeartbeat()
    if (reconnectTimer) clearTimeout(reconnectTimer)
  }

  socket.onmessage = (event) => {
    if (event.data === 'pong' || event.data === 'ping') return
    try {
      const msg = JSON.parse(event.data)
      if (msg.data) {
        updateCoinData(msg.data)
      } else {
        updateCoinData(msg)
      }
    } catch (e) {}
  }

  socket.onerror = (err) => {
    console.error('❌ WS 报错')
  }

  socket.onclose = (e) => {
    if (e.code === 1000) return
    socket = null
    reconnect()
  }
}

// --- 2. 更新数据 (核心适配) ---
const updateCoinData = (ticker) => {
  // WS 推送格式: { s: "XRPUSDT", c: "2.18", P: "9.01" }

  if (!ticker || !ticker.s) return

  const targetCoin = coinList.value.find(item =>
    item.symbol.toUpperCase() === ticker.s.toUpperCase()
  )

  if (targetCoin) {
    // 【修改点4】: WebSocket 更新时，赋值给新的字段名
    // c = current price -> 赋值给 current_price
    if (ticker.c) targetCoin.current_price = ticker.c

    // P = percentage change -> 赋值给 trend
    if (ticker.P) {targetCoin.trend = ticker.P; targetCoin.p = ticker.P}
  }
}

// --- 3. 自动重连 ---
const reconnect = () => {
  if (isUnmounted) return
  if (reconnectTimer) return
  reconnectTimer = setTimeout(() => {
    reconnectTimer = null
    initWebSocket()
  }, 3000)
}

// --- 4. 心跳保活 ---
const startHeartbeat = () => {
  if (heartbeatTimer) clearInterval(heartbeatTimer)
  heartbeatTimer = setInterval(() => {
    if (socket && socket.readyState === WebSocket.OPEN) {
      socket.send('ping')
    }
  }, 10000)
}

// --- 生命周期 ---

onMounted(async () => {
  try {
    const res = await GetCoins()
    // 注意：确保 res 已经是数组，或者取 res.data
    coinList.value = Array.isArray(res) ? res : (res.data || [])

    if (coinList.value.length > 0) {
      initWebSocket()
    }
  } catch (error) {
    console.error('API 失败:', error)
  }
})

onUnmounted(() => {
  isUnmounted = true
  if (heartbeatTimer) clearInterval(heartbeatTimer)
  if (reconnectTimer) clearTimeout(reconnectTimer)
  if (socket) {
    socket.onclose = null
    socket.close()
    socket = null
  }
})
</script>

<style lang="less" scoped>
/* 样式保持不变，省略以节省空间 */
  .hot-coin {
    margin-top: 20px;
    width: 346px;
    height: 333px;
    .coin-title {
      height: 24px;
      line-height: 24px;
    }

    .coin-head {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      margin-top: 6px;
      width: 100%;
      height: 24px;

      .name {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        height: 24px;

        .list-sort {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          margin-left: 4px;
          width: 8px;
          height: 16px;

          .sort-up,
          .sort-bottom {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            width: 8px;
            height: 8px;

            img {
              width: 8px;
              height: 4px;
            }
          }
        }
      }

      .price {
        margin-left: 128px;
      }

      .today {
        margin-left: 47px;
      }
    }

    .coin-body {
      margin-top: 9px;
      width: 100%;

      .body-item {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-top: 23.5px;
        width: 100%;
        height: 38px;

        &:nth-child(1) {
          margin-top: 0;
        }

        .item-left {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          width: 276px;
          height: 100%;

          .coin-img {
            width: 32px;
            height: 32px;

            img {
              width: 32px;
              height: 32px;
            }
          }

          .coin-name {
            margin-left: 10px;
            width: 85px;
            height: 34px;

            .upper-name {
              height: 20px;
              line-height: 20px;
            }

            .letter-name {
              height: 14px;
              line-height: 14px;
            }
          }

          .coin-echars {
            width: 60px;
            height: 35px;
          }

          .coin-price {
            margin-left: 13px;
            width: 75px;
            height: 38px;

            .upper-price {
              height: 20px;
              line-height: 20px;
              text-align: right;
            }

            .letter-price {
              height: 16px;
              line-height: 16px;
              text-align: right;
            }
          }
        }

        .item-right {
          margin-left: 8px;
          width: 61px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          background: #45b26b;
          border-radius: 5px;
        }
      }
    }
  }

/* 颜色配置 */
.bg-green { background-color: #2EBD85!important; }
.bg-red { background-color: #F6465D!important; }
.bg-gray { background-color: #C0C0C0; }
</style>