141 lines
3.1 KiB
Vue
141 lines
3.1 KiB
Vue
<script setup>
|
||
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
|
||
import { queryList } from '@/api/apis'
|
||
|
||
const page = ref(1)
|
||
const pageSize = ref(10)
|
||
const total = ref(0)
|
||
const reportList = ref([])
|
||
const loadingState = ref('loading')
|
||
const num = ref(0)
|
||
const max = ref(60)
|
||
|
||
// 初始加载数据
|
||
function fetchData() {
|
||
queryList({ page: page.value, page_size: pageSize.value }).then((res) => {
|
||
if (res.code === 200) {
|
||
total.value = res.data.total
|
||
if (res.data.list && res.data.list.length > 0) {
|
||
reportList.value.push(...res.data.list)
|
||
page.value += 1
|
||
}
|
||
if (reportList.value.length >= total.value) {
|
||
loadingState.value = 'finished'
|
||
}
|
||
else {
|
||
loadingState.value = 'loading'
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// 初始加载
|
||
onLoad(() => {
|
||
fetchData()
|
||
})
|
||
|
||
// 下拉触底加载更多
|
||
onReachBottom(() => {
|
||
if (loadingState.value !== 'finished') {
|
||
if (num.value >= max.value) {
|
||
loadingState.value = 'finished'
|
||
}
|
||
else {
|
||
fetchData()
|
||
}
|
||
}
|
||
})
|
||
function toDetail(item) {
|
||
// if (item.query_state !== 'success')
|
||
// return
|
||
uni.navigateTo({
|
||
url: `/pages/report?order_id=${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>
|
||
<wd-notice-bar
|
||
text="为保证用户的隐私以及数据安全，您的报告生成30天之后将自动清除，请及时保存您的报告。" prefix="warn-bold" color="#007aff"
|
||
background-color="#f8f8f8"
|
||
/>
|
||
<view class="flex flex-col gap-4 p-4">
|
||
<view v-for="item in reportList" :key="item.id" class="card flex flex-col gap-2" @click="toDetail(item)">
|
||
<view class="flex items-center justify-between">
|
||
<view class="">
|
||
状态:
|
||
</view>
|
||
<view class="rounded-xl px-2 py-1" :class="[statusClass(item.query_state)]">
|
||
{{ stateText(item.query_state) }}
|
||
</view>
|
||
</view>
|
||
<view class="flex items-center justify-between">
|
||
<view class="">
|
||
报告类型
|
||
</view>
|
||
<view>
|
||
{{ item.product_name }}
|
||
</view>
|
||
</view>
|
||
<view class="flex items-center justify-between">
|
||
<view class="">
|
||
查询时间:
|
||
</view>
|
||
<view>
|
||
{{ item.create_time }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 加载更多 -->
|
||
<wd-loadmore :state="loadingState" @reload="fetchData" />
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.status-pending {
|
||
@apply bg-yellow-100 text-yellow-600;
|
||
}
|
||
|
||
.status-success {
|
||
@apply bg-green-100 text-green-600;
|
||
}
|
||
|
||
.status-failed {
|
||
@apply bg-red-100 text-red-600;
|
||
}
|
||
</style>
|
||
|
||
<route lang="json">
|
||
{
|
||
"layout": "page",
|
||
"title": "历史报告"
|
||
}
|
||
</route>
|