bdrp-app/src/pages/history-query.vue

<script setup>
import { onMounted, ref } from 'vue'
definePage({ layout: 'default', auth: true })

const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
const reportList = ref([])
const loading = ref(false)
// 初始加载数据
async function fetchData() {
  loading.value = true
  const { data, error } = await useApiFetch(`query/list?page=${page.value}&page_size=${pageSize.value}`, { silent: true })
    .get()
    .json()
  if (data.value && !error.value) {
    if (data.value.code === 200) {
      total.value = data.value.data.total
      reportList.value = data.value.data.list || []
    }
  }
  loading.value = false
}

// 初始加载
onMounted(() => {
  fetchData()
})

function onPageChange({ value }) {
  page.value = value
  fetchData()
}

function toDetail(item) {
  if (item.query_state !== 'success')
    return
  uni.navigateTo({
    url: `/pages/report-result-webview?order_id=${encodeURIComponent(String(item.order_id || ''))}`,
  })
}

// 状态文字映射
function stateText(state) {
  switch (state) {
    case 'pending':
      return '查询中'
    case 'success':
      return '查询成功'
    case 'failed':
      return '查询失败'
    case 'refunded':
      return '已退款'
    default:
      return '未知状态'
  }
}

// 状态颜色映射
function statusClass(state) {
  switch (state) {
    case 'pending':
      return 'status-pending'
    case 'success':
      return 'status-success'
    case 'failed':
      return 'status-failed'
    case 'refunded':
      return 'status-refunded'
    default:
      return ''
  }
}
</script>

<template>
  <view class="flex flex-col gap-4 p-4">
    <view class="history-scroll">
      <view
        v-for="item in reportList" :key="item.id" class="relative mb-4 cursor-pointer rounded-lg bg-white p-4 shadow-sm"
        @click="toDetail(item)"
      >
        <view class="flex flex-col">
          <view class="mb-1 text-xl text-black">
            {{ item.product_name }}
          </view>
          <view class="text-sm text-[#999999]">
            {{ item.create_time }}
          </view>
        </view>
        <view
          class="absolute right-0 top-0 rounded-bl-lg rounded-tr-lg px-2 py-[1px] text-sm text-white font-medium"
          :class="[statusClass(item.query_state)]"
        >
          {{ stateText(item.query_state) }}
        </view>
      </view>
      <view v-if="loading" class="py-4 text-center text-sm text-gray-400">
        加载中...
      </view>
      <view v-else-if="!reportList.length" class="py-4 text-center text-sm text-gray-400">
        暂无记录
      </view>
    </view>
    <wd-pagination
      v-model="page"
      :total="total"
      :page-size="pageSize"
      show-icon
      show-message
      @change="onPageChange"
    />
  </view>
</template>

<style scoped>
.history-scroll {
    height: calc(100vh - 120px);
}

.status-pending {
    background-color: #1976d2;
    color: white;
}

.status-success {
    background-color: #1FBE5D;
    color: white;
}

.status-failed {
    background-color: #EB3C3C;
    color: white;
}

.status-refunded {
    background-color: #999999;
    color: white;
}
</style>