metaforce-scan/src/components/table/mobile/bkTable.vue

<template>
  <div class="rounded-[10px] bg-black-19191A pb-[20px] rounded-b-[10px]">
    <mobile-card
      v-for="(item, index) in currentData"
      :key="index"
      :card-data="item"
      @click="routerLink(item?.hash)"
    />
    <!--       :link="routerLink(item?.hash)" -->
    <div
      class="bk-pagination-m flex flex-row items-center justify-center pt-[32px]"
    >
      <el-pagination
        small
        :pager-count="5"
        :page-size="invariable.pageSize"
        layout="prev, pager, next"
        v-model:current-page="currentPage"
        :total="paginationState.totalPage"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watchEffect } from 'vue'
import MobileCard from '@src/components/table/mBase/mobileCard.vue'
import { getfindBlockList } from '@src/api/BlockController'
import { timeConvert } from '@src/utils/string'
import { bkTableCollocate } from '../constant'
import { useRouter } from 'vue-router'

const props = defineProps({
  isBlockWs: Boolean as any,
})

const invariable = {
  ...bkTableCollocate,
  pageSize: 5, // 每一页的数量
}

const paginationState = reactive({
  totalPage: 0, // 总页数
})

const router = useRouter()

let currentPage = ref(1) // 当前页
let currentData = ref() // 当前页的数据
let loading = ref(true) // 骨架屏加载
let ws = ref<WebSocket>() // websocket

// 请求数据
const initBlock = async (page: number) => {
  const params = {
    pageNum: page,
    pageSize: invariable.pageSize,
  }
  const res = await getfindBlockList(params)
  // 数据请求结束 更新总页数
  paginationState.totalPage =
    Math.floor(res.data.total / invariable.pageSize + 1) * invariable.pageSize
  // 更新当前数据
  currentData.value = res.data.rows.map((item: any) => ({
    ...item,
    timestamp: timeConvert(item?.timestamp),
  }))
  // 骨架屏隐藏
  loading.value = false
}

// 初始化websocket连接
const initWebSocket = () => {
  ws.value = new WebSocket('ws://wallet-chaindata-api.weirui0755.com/websocket')
  ws.value.addEventListener('open', () => {
    ws.value?.send(JSON.stringify({ type: 'add_block' }))
  })

  ws.value.onmessage = (e: any) => {
    try {
      const res = JSON.parse(e.data)
      const item = {
        ...res.value[0],
        timestamp: timeConvert(res.value[0]?.timestamp),
      }
      currentData.value = [item, ...currentData.value]
      currentData.value.length = 5
    } catch (error) {}
  }

  ws.value.onclose = () => {
    console.log('ws 已关闭')
  }
}

// 监听分页更新 -> 请求数据
watchEffect(() => {
  // 如果屏幕尺寸大于1440px 则不执行
  if (window.screen.width > 1440) {
    return
  }
  loading.value = true
  initBlock(currentPage.value)
  if (props?.isBlockWs && currentPage.value == 1) {
    console.log('start ws')
    initWebSocket()
  } else {
    console.log('close ws')
    ws.value?.close()
  }
})
// 路由跳转
const routerLink = (id: string | number) => router.push(`/blocks/${id}`)
</script>

<style lang="scss">
.bk-pagination-m {
  .el-pagination {
    .btn-prev,
    .btn-next {
      background: #19191a;
    }
    .el-pager {
      .number,
      .btn-quickprev,
      .btn-quicknext {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 24px;
        width: auto;
        margin: 0px 4px;
        box-sizing: border-box;
        background: #19191a;
        border: 1px solid #ffffff;
        border-radius: 5px;
        color: #ffffff;
      }
      .is-active {
        background: #8659ff;
        border: 1px solid #8659ff;
      }
    }
    .el-pagination__jump {
      color: #ffffff;
    }
    .el-input__wrapper {
      background: #19191a;
      .el-input__inner {
        color: #ffffff;
      }
    }
    .el-input__wrapper.is-focus {
      box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
        inset;
    }
  }
}
</style>