141 lines
3.1 KiB
Vue
141 lines
3.1 KiB
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}`)
|
||
|
|
.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>
|