127 lines
3.3 KiB
Vue
127 lines
3.3 KiB
Vue
<template>
|
||
<z-paging
|
||
ref="paging"
|
||
v-model="dataList"
|
||
safe-area-inset-bottom
|
||
@query="queryList"
|
||
>
|
||
<template #top>
|
||
<TopNavBar>
|
||
<template #title>
|
||
<Tabs
|
||
:tabs="tabList"
|
||
:defaultActive="currentTabIndex"
|
||
@change="handleTabChange"
|
||
/>
|
||
</template>
|
||
</TopNavBar>
|
||
</template>
|
||
|
||
<template #empty>
|
||
<CustomEmpty statusText="您暂无订单" />
|
||
</template>
|
||
|
||
<template #refresher="{ refresherStatus }">
|
||
<CustomRefresher :status="refresherStatus" />
|
||
</template>
|
||
|
||
<template #loadingMoreNoMore>
|
||
<CustomNoMore />
|
||
</template>
|
||
|
||
<OrderCard
|
||
v-for="(item, index) in dataList"
|
||
:key="item.id || index"
|
||
:orderData="item"
|
||
@click="handleOrderClick"
|
||
@call="handleOrderCall"
|
||
@complete="handleOrderComplete"
|
||
/>
|
||
</z-paging>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted } from "vue";
|
||
import TopNavBar from "./components/TopNavBar/index.vue";
|
||
import Tabs from "./components/Tabs/index.vue";
|
||
import OrderCard from "./components/OrderCard/index.vue";
|
||
import CustomEmpty from "./components/CustomEmpty/index.vue";
|
||
import CustomRefresher from "./components/CustomRefresher/index.vue";
|
||
import CustomNoMore from "./components/CustomNoMore/index.vue";
|
||
import { userOrderList, userWorkOrderList } from "@/request/api/OrderApi";
|
||
|
||
// Tab配置
|
||
const tabList = ref([
|
||
{ label: "全部订单", value: "all" },
|
||
{ label: "服务工单", value: "service" },
|
||
]);
|
||
|
||
// 当前状态
|
||
const currentTabIndex = ref(0);
|
||
const dataList = ref([]);
|
||
const paging = ref(null);
|
||
|
||
const queryList = async (pageNum, pageSize) => {
|
||
try {
|
||
let apiCall;
|
||
// 根据当前Tab选择不同的API
|
||
if (currentTabIndex.value === 0) {
|
||
// 全部订单
|
||
apiCall = userOrderList({ pageNum, pageSize });
|
||
} else {
|
||
// 服务工单
|
||
apiCall = userWorkOrderList({ pageNum, pageSize });
|
||
}
|
||
|
||
const res = await apiCall;
|
||
console.log("API响应:", res);
|
||
|
||
if (res && res.data && res.data.records) {
|
||
const records = res.data.records;
|
||
const hasMore = pageNum < res.data.pages; // 判断是否还有更多数据
|
||
|
||
// 完成数据加载，第二个参数表示是否还有更多数据
|
||
paging.value.complete(records, !hasMore);
|
||
console.log("数据加载完成", records.length, "条记录，hasMore:", hasMore);
|
||
} else {
|
||
// 没有数据
|
||
paging.value.complete([], true);
|
||
}
|
||
} catch (error) {
|
||
console.error("查询列表失败:", error);
|
||
// 加载失败
|
||
paging.value.complete(false);
|
||
}
|
||
};
|
||
|
||
// Tab切换处理
|
||
const handleTabChange = ({ index }) => {
|
||
console.log("Tab切换到:", index);
|
||
currentTabIndex.value = index;
|
||
// 清空当前数据并重新加载
|
||
dataList.value = [];
|
||
paging.value.reload();
|
||
};
|
||
|
||
// 处理订单点击
|
||
const handleOrderClick = (orderData) => {
|
||
console.log("订单点击:", orderData);
|
||
// 这里可以添加订单详情跳转逻辑
|
||
};
|
||
|
||
// 处理订单呼叫
|
||
const handleOrderCall = (orderData) => {
|
||
console.log("订单呼叫:", orderData);
|
||
// 这里可以添加呼叫逻辑
|
||
};
|
||
|
||
// 处理订单完成
|
||
const handleOrderComplete = (orderData) => {
|
||
console.log("订单完成:", orderData);
|
||
// 这里可以添加订单完成逻辑
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import "./styles/list.scss";
|
||
</style> |