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 label="等待买家付款" name="1" />
                <el-tab-pane label="等待卖家发货" name="2" />
                <el-tab-pane label="等待买家确认收货" name="3" />
                <el-tab-pane label="交易成功" name="4" />
                <el-tab-pane label="退款成功" name="5" />
                <el-tab-pane label="退款中" name="6" />
                <el-tab-pane label="订单取消" name="7" />
                <el-tab-pane label="预警订单/催发货" name="warning" />
            </el-tabs>

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

            <!-- Order List -->
            <div class="order-list" v-loading="loading">
                <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 } 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';

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

const list = ref([
    {
        orderId: '4066879393210936038',
        createTime: '2024-10-04 12:01:09',
        payChannel: '微信支付',
        source: '微信',
        flag: true,
        isUrge: false,
        checked: false,
        buyer: {
            avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
            name: '用户44541',
            phone: '1894984dsaddq'
        },
        payment: {
            total: 2.9,
            shipping: 0
        },
        logistics: {
            company: '韵达快递',
            no: '46382090456249',
            status: '已发货'
        },
        status: '退款成功',
        buyerNote: '',
        products: [
            {
                image: 'https://img14.360buyimg.com/n0/jfs/t1/157997/3/36676/122176/65e975a0F98822998/5023348143493720.jpg',
                title: '毛泽东思想和中国特色社会主义理论体系概论（2023年版）',
                isbn: '9787040599012',
                condition: '中等',
                price: 2.9,
                qty: 1,
                discount: 1,
                recycleStatus: '正在回收',
                refundStatus: '退款成功'
            }
        ]
    },
    {
        orderId: '4066879393210936039',
        createTime: '2024-10-04 12:06:09',
        payChannel: '微信支付',
        source: '微信',
        flag: false,
        isUrge: true,
        checked: false,
        buyer: {
            avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
            name: '用户44541',
            phone: '1894984dsaddq'
        },
        payment: {
            total: 5.8,
            shipping: 0
        },
        logistics: {
            company: '韵达快递',
            no: '46382090456248',
            status: '已发货'
        },
        status: '等待买家确认收货',
        buyerNote: '您好，请确保书籍正版，且无破损、不缺页。请不要随书夹带任何票据，有问题留言不要打电话。请尽快发货，谢谢啦~',
        products: [
            {
                image: 'https://img14.360buyimg.com/n0/jfs/t1/157997/3/36676/122176/65e975a0F98822998/5023348143493720.jpg',
                title: '毛泽东思想和中国特色社会主义理论体系概论（2023年版）',
                isbn: '9787040599012',
                condition: '中等',
                price: 2.9,
                qty: 1,
                discount: 1,
                recycleStatus: '正在回收',
                refundStatus: ''
            },
            {
                image: 'https://img14.360buyimg.com/n0/jfs/t1/157997/3/36676/122176/65e975a0F98822998/5023348143493720.jpg',
                title: '毛泽东思想和中国特色社会主义理论体系概论（2023年版）',
                isbn: '9787040599012',
                condition: '中等',
                price: 2.9,
                qty: 2,
                discount: 1,
                recycleStatus: '正在回收',
                refundStatus: '退款取消'
            }
        ]
    }
]);

const detailRef = ref(null);
const smsRef = ref(null);
const refundRef = ref(null);
const packageRef = ref(null);

const handleSearch = (params) => {
    console.log('Search:', params);
    // Mock reload
    loading.value = true;
    setTimeout(() => { loading.value = false; }, 500);
};

const handleTabClick = (tab) => {
    console.log('Tab:', tab.props.name);
    handleSearch({});
};

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

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

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

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

const openRefund = (row) => {
    refundRef.value?.handleOpen(row);
};
</script>

<style lang="scss" scoped>
.pagination-wrapper {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
}
</style>