shuhi-ui/src/views/mallOrder/all/index.vue

<template>
    <ele-page flex-table>
        <page-search @search="handleSearch" />

        <ele-card :body-style="{ padding: '10px' }">
            <!-- Tabs -->
            <el-tabs v-model="activeTab" @tab-click="handleTabClick">
                <el-tab-pane label="全部订单状态" name="all" />
                <el-tab-pane v-for="item in shop_order_status" :key="item.dictValue" :label="item.dictLabel" :name="item.dictValue" />
            </el-tabs>

            <!-- Custom Table Header -->
            <order-table-header />

            <!-- Order List -->
            <div class="order-list" v-loading="loading">
                <div v-if="list.length === 0" class="empty-text">暂无数据</div>
                <order-item v-for="order in list" :key="order.orderId" :order="order" @view-detail="openDetail"
                    @push-sms="openSms" @refund="openRefund" />
            </div>

            <!-- Pagination -->
            <div class="pagination-wrapper">
                <el-pagination v-model:current-page="pageParams.page" v-model:page-size="pageParams.limit"
                    :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                    @current-change="handlePageChange" />
            </div>
        </ele-card>

        <!-- Dialogs -->
        <order-detail ref="detailRef" />
        <push-sms-dialog ref="smsRef" />
        <refund-dialog ref="refundRef" />
        <add-package-dialog ref="packageRef" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive, onMounted } from 'vue';
    import PageSearch from './components/page-search.vue';
    import OrderDetail from './components/order-detail.vue';
    import PushSmsDialog from './components/push-sms-dialog.vue';
    import RefundDialog from './components/refund-dialog.vue';
    import AddPackageDialog from './components/add-package-dialog.vue';
    import OrderTableHeader from './components/order-table-header.vue';
    import OrderItem from './components/order-item.vue';
    import request from '@/utils/request';
    import { useDictData } from '@/utils/use-dict-data';

    defineOptions({ name: 'MallOrderAll' });

    const activeTab = ref('all');
    const loading = ref(false);
    const total = ref(0);
    const pageParams = reactive({
        page: 1,
        limit: 10
    });
    const searchParams = ref({});

    const [shop_order_status] = useDictData(['shop_order_status']);

    const list = ref([]);
    const detailRef = ref(null);
    const smsRef = ref(null);
    const refundRef = ref(null);

    const fetchData = () => {
        loading.value = true;
        const params = {
            ...pageParams,
            ...searchParams.value
        };

        // Handle Tab Filter
        if (activeTab.value !== 'all') {
            params.status = activeTab.value;
        }

        request.get('/shop/shopOrder/pagelist', { params })
            .then(res => {
                const data = res.data; // Adjust based on response structure
                total.value = data.total || 0;
                list.value = data.rows || [];
            })
            .finally(() => {
                loading.value = false;
            });
    };

    const handleSearch = (data) => {
        pageParams.page = 1;
        searchParams.value = data;
        fetchData();
    };

    const handleTabClick = (tab) => {
        activeTab.value = tab.props.name;
        pageParams.page = 1;
        fetchData();
    };

    const handleSizeChange = (val) => {
        pageParams.limit = val;
        fetchData();
    };

    const handlePageChange = (val) => {
        pageParams.page = val;
        fetchData();
    };

    const openDetail = (row) => {
        detailRef.value?.handleOpen(row);
    };

    const openSms = (row) => {
        smsRef.value?.open(row);
    };

    const openRefund = (row) => {
        refundRef.value?.open(row);
    };

    onMounted(() => {
        fetchData();
    });
</script>

<style scoped>
    .order-list {
        min-height: 200px;
    }

    .empty-text {
        text-align: center;
        padding: 40px;
        color: #909399;
    }

    .pagination-wrapper {
        margin-top: 16px;
        display: flex;
        justify-content: flex-end;
    }
</style>