first commit

src/pages/history-query.vue

@@ -0,0 +1,140 @@
+<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>