126 lines
3.3 KiB
Vue
126 lines
3.3 KiB
Vue
<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) {
|
|
router.push({ path: '/report', query: { orderId: item.order_id } });
|
|
}
|
|
|
|
// 状态文字映射
|
|
function stateText(state) {
|
|
switch (state) {
|
|
case 'pending':
|
|
return '查询中'
|
|
case 'success':
|
|
return '查询成功'
|
|
case 'failed':
|
|
return '查询失败'
|
|
default:
|
|
return '未知状态'
|
|
}
|
|
}
|
|
|
|
// 状态颜色映射
|
|
function statusClass(state) {
|
|
switch (state) {
|
|
case 'pending':
|
|
return 'status-pending'
|
|
case 'success':
|
|
return 'status-success'
|
|
case 'failed':
|
|
return 'status-failed'
|
|
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"><van-cell
|
|
v-for="item in reportList" :key="item.id" @click="toDetail(item)" class="card mb-4">
|
|
<div class=" text-gray-600 flex flex-col gap-2">
|
|
<div class="flex items-center justify-between">
|
|
<div>状态:</div>
|
|
<div class="rounded-xl px-2 py-1" :class="[statusClass(item.query_state)]">
|
|
{{ stateText(item.query_state) }}
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<div>报告类型</div>
|
|
<div>{{ item.product_name }}</div>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<div>查询时间:</div>
|
|
<div>{{ item.create_time }}</div>
|
|
</div>
|
|
</div>
|
|
</van-cell>
|
|
</van-list>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.status-pending {
|
|
background-color: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
|
|
.status-success {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
}
|
|
|
|
.status-failed {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
</style>
|