magic_node_web/src/views/transaction-record/index.vue

<template>
  <div class="page-view" ref="scrollContainerRef" @scroll="handleScroll">
    <div class="page-content">
      <div class="nav-bar">
        <div class="title-section" @click="onGoBack">
          <button class="back-btn">
            <img src="@/assets/images/common/back.svg" alt="back" class="w-full h-full" />
          </button>
          <span class="page-title">{{ $t("转账记录") }}</span>
        </div>
      </div>

      <div class="records-container">
        <page-loading v-if="isLoading" />
        <template v-else>
          <div v-for="(record, index) in list" :key="index" class="transfer-item">
            <div class="item-content">
              <div class="item-left">
                <img :src="record.icon" class="coin-icon" />
                <div class="transfer-info">
                  <div class="transfer-type">{{ record.symbol }} {{ record.directionName }}</div>
                  <div class="transfer-time">{{ formateTimestamp(record.createdAt) }}</div>
                </div>
              </div>
              <div class="item-right">
                <div class="amount-info">
                  <div class="amount" :class="record.direction">
                    {{ record.direction === 2 ? "-" : "+" }}{{ record.amount }} {{ record.symbol }}
                  </div>
                  <div class="status-badge" :class="getStatusText(record.status)">
                    {{ record.stateName }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <no-data v-if="list.length === 0" />
        </template>
        <loading-more :show="isLoadingMore" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import NoData from "@/components/NoData/index.vue";
import { useRouter } from "vue-router";
import { requestGetAssetBill } from "@/api";
import PageLoading from "@/components/PageLoading/index.vue";
import LoadingMore from "@/components/LoadingMore/index.vue";
import { formateTimestamp } from "@/utils/utils";
import useLoadPageList from "@/hooks/useLoadPageList";

const router = useRouter();
const scrollContainerRef = ref<HTMLDivElement>(null);

const { list, isLoading, isLoadingMore, handleScroll, getList } = useLoadPageList<AssetBill>(
  requestGetAssetBill,
  scrollContainerRef,
  {},
  15
);

const getStatusText = (status: number) => {
  const statusMap = {
    0: "pending",
    1: "pending",
    2: "success",
    3: "failed",
    4: "failed",
    5: "failed"
  };
  return statusMap[status as keyof typeof statusMap] || status;
};

const onGoBack = () => {
  router.replace({ name: "finance" });
};

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.page-view {
  height: 100%;
  overflow: auto;

  .page-content {
    position: relative;
    padding: 8px 16px;
    min-height: 200px;
    padding-bottom: 50px;
  }
}

.nav-bar {
  position: relative;
  width: 100%;
  margin-bottom: 16px;

  .title-section {
    display: flex;
    align-items: center;
    gap: 5px;

    .back-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      background: none;
      border: none;
      color: #ffffff;
      cursor: pointer;

      .back-icon {
        width: 16px;
        height: 16px;
      }
    }

    .page-title {
      font-size: 14px;
      font-weight: 500;
      color: #929296;
    }
  }
}

.records-container {
  width: 100%;

  .transfer-item {
    width: 100%;

    .item-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 0;
      height: 74px;

      .item-left {
        display: flex;
        align-items: center;
        flex: 1;

        .coin-icon {
          width: 36px;
          height: 36px;
          margin-right: 12px;
          display: flex;
          align-items: center;
          justify-content: center;

          .icon {
            font-size: 36px;
          }
        }

        .transfer-info {
          display: flex;
          flex-direction: column;
          gap: 2px;

          .transfer-type {
            font-size: 16px;
            line-height: 24px;
            color: #ffffff;
          }

          .transfer-time {
            font-size: 12px;
            line-height: 16px;
            color: #929296;
          }
        }
      }

      .item-right {
        display: flex;
        align-items: center;
        gap: 12px;

        .amount-info {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 6px;

          .amount {
            font-size: 16px;
            line-height: 24px;
            text-align: right;
            color: #fff;
          }

          .status-badge {
            padding: 3px 5px;
            border-radius: 2px;
            font-size: 12px;
            line-height: 14px;
            text-align: center;

            &.pending {
              background: rgba(255, 110, 0, 0.12);
              color: #ff6e00;
            }

            &.success {
              background: rgba(74, 230, 153, 0.12);
              color: #14ae69;
            }

            &.failed {
              background: rgba(233, 39, 0, 0.12);
              color: #e92700;
            }
          }
        }

        .more-icon {
          width: 24px;
          height: 24px;
          color: rgba(255, 255, 255, 0.6);
          cursor: pointer;

          svg {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>