f

src/views/HistoryQuery.vue

@@ -0,0 +1,128 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+const router = useRouter()
+const page = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+const reportList = ref([])
+const num = ref(0)
+const max = ref(60)
+const loading = ref(false)
+const finished = ref(false)
+// 初始加载数据
+async function fetchData() {
+    loading.value = true
+    const { data, error } = await useApiFetch(`query/list?page=${page.value}&page_size=${pageSize.value}`)
+        .get()
+        .json()
+    if (data.value && !error.value) {
+        if (data.value.code === 200) {
+            total.value = data.value.data.total
+            if (data.value.data.list && data.value.data.list.length > 0) {
+                reportList.value.push(...data.value.data.list)
+                page.value += 1
+            }
+            if (reportList.value.length >= total.value) {
+                finished.value = true
+            }
+        }
+    }
+    loading.value = false
+
+}
+
+// 初始加载
+onMounted(() => {
+    fetchData()
+})
+
+// 下拉触底加载更多
+const onLoad = () => {
+    if (!finished.value) {
+        console.log("finished", finished.value)
+        if (num.value >= max.value) {
+            finished.value = true
+        } else {
+            fetchData()
+        }
+    }
+}
+
+function toDetail(item) {
+    if (item.query_state != "success") return
+    router.push({ path: '/report', query: { orderId: 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>
+    <div class="flex flex-col gap-4 p-4">
+        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+            <div v-for="item in reportList" :key="item.id" @click="toDetail(item)"
+                class="bg-white rounded-lg shadow-sm p-4 mb-4 relative cursor-pointer">
+                <div class="flex flex-col">
+                    <div class="text-xl text-black mb-1">{{ item.product_name }}</div>
+                    <div class="text-sm text-[#999999]">{{ item.create_time }}</div>
+                </div>
+                <div class="absolute top-0 right-0 rounded-bl-lg rounded-tr-lg px-2 py-[1px] text-white text-sm font-medium"
+                    :class="[statusClass(item.query_state)]">
+                    {{ stateText(item.query_state) }}
+                </div>
+            </div>
+        </van-list>
+
+    </div>
+</template>
+
+<style scoped>
+.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>