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

<template>
    <ele-page>
        <!-- Stats Header -->
        <div class="stats-container">
            <el-row :gutter="15">
                <el-col :span="4">
                    <el-card
                        shadow="never"
                        class="stat-card bg-gray-50"
                        :body-style="{ padding: '10px' }"
                    >
                        <div class="stat-title">退款处理时长</div>
                        <div class="stat-value">6.35h</div>
                    </el-card>
                </el-col>
                <el-col :span="4">
                    <el-card
                        shadow="never"
                        class="stat-card bg-gray-50"
                        :body-style="{ padding: '10px' }"
                    >
                        <div class="stat-title">待平台处理</div>
                        <div class="stat-value">10</div>
                    </el-card>
                </el-col>
                <el-col :span="4">
                    <el-card
                        shadow="never"
                        class="stat-card bg-gray-50"
                        :body-style="{ padding: '10px' }"
                    >
                        <div class="stat-title">退款待处理</div>
                        <div class="stat-value">10</div>
                    </el-card>
                </el-col>
                <el-col :span="4">
                    <el-card
                        shadow="never"
                        class="stat-card bg-gray-50"
                        :body-style="{ padding: '10px' }"
                    >
                        <div class="stat-title">待平台收货</div>
                        <div class="stat-value">10</div>
                    </el-card>
                </el-col>
                <el-col :span="4">
                    <el-card
                        shadow="never"
                        class="stat-card bg-gray-50"
                        :body-style="{ padding: '10px' }"
                    >
                        <div class="stat-title">24小时内即将追期</div>
                        <div class="stat-value">10</div>
                    </el-card>
                </el-col>
                <el-col :span="4">
                    <el-card
                        shadow="never"
                        class="stat-card bg-gray-50"
                        :body-style="{ padding: '10px' }"
                    >
                        <div class="stat-title">待买家处理</div>
                        <div class="stat-value">10</div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <!-- Search -->
        <page-search @search="handleSearch" />

        <ele-card :body-style="{ padding: '10px' }" class="mt-4">
            <!-- Tabs -->
            <el-tabs v-model="activeTab" @tab-click="handleTabClick">
                <el-tab-pane label="全部" name="" />
                <el-tab-pane label="进行中订单" name="0" />
                <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-tabs>

            <!-- Table Header -->
            <div class="mt-2">
                <refund-table-header
                    v-model:checkAll="checkAll"
                    :is-indeterminate="isIndeterminate"
                    @change="handleCheckAllChange"
                />
            </div>

            <!-- List -->
            <div class="refund-list" v-loading="loading">
                <div
                    v-if="list.length === 0"
                    class="empty-text text-center py-10 text-gray-400"
                    >暂无数据</div
                >
                <refund-item
                    v-for="(item, index) in list"
                    :key="index"
                    :item="item"
                    @push-sms="handlePushSms"
                    @send-packet="handleSendPacket"
                    @view-detail="handleViewDetail"
                    @confirm-refund="handleConfirmRefund"
                />
            </div>

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

        <!-- Dialogs -->
        <push-sms-dialog ref="pushSmsDialogRef" @success="fetchData" />
        <refund-detail-dialog ref="refundDetailDialogRef" />
        <confirm-refund-dialog
            ref="confirmRefundDialogRef"
            @success="fetchData"
        />
    </ele-page>
</template>

<script setup>
    import { ref, reactive, onMounted } from 'vue';
    import { EleMessage } from 'ele-admin-plus/es';
    import request from '@/utils/request';
    import PageSearch from './components/page-search.vue';
    import RefundTableHeader from './components/refund-table-header.vue';
    import RefundItem from './components/refund-item.vue';
    import PushSmsDialog from './components/push-sms-dialog.vue';
    import RefundDetailDialog from './components/refund-detail-dialog.vue';
    import ConfirmRefundDialog from './components/confirm-refund-dialog.vue';

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

    const checkAll = ref(false);
    const isIndeterminate = ref(false);

    const list = ref([]);

    const pushSmsDialogRef = ref(null);
    const refundDetailDialogRef = ref(null);
    const confirmRefundDialogRef = ref(null);

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

        request
            .get('/shop/shopOrder/refundPagelist', { params })
            .then((res) => {
                if (res.data.code !== 200) {
                    EleMessage.error(res.data.msg);
                    return;
                }
                const data = res.data;
                list.value = data.rows || [];
                total.value = data.total || 0;
                // Reset check status
                checkAll.value = false;
                isIndeterminate.value = false;
            })
            .catch((e) => {
                console.error(e);
                EleMessage.error('获取退款列表失败');
            })
            .finally(() => {
                loading.value = false;
            });
    };

    const handleSearch = (where) => {
        pageParams.pageNum = 1;
        searchParams.value = where;
        fetchData();
    };

    const handleTabClick = ({ props }) => {
        console.log(props);
        activeTab.value = props.name;
        pageParams.pageNum = 1;
        fetchData();
    };

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

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

    const handleCheckAllChange = (val) => {
        list.value.forEach((item) => (item.checked = val));
        isIndeterminate.value = false;
    };

    const handlePushSms = (item) => {
        pushSmsDialogRef.value?.handleOpen(item);
    };

    const handleSendPacket = (item) => {
        EleMessage.warning('发红包功能暂未实现');
    };

    const handleViewDetail = (item) => {
        refundDetailDialogRef.value?.handleOpen(item);
    };

    const handleConfirmRefund = (item) => {
        if (confirmRefundDialogRef.value) {
            confirmRefundDialogRef.value.open(
                item.refundOrderId,
                item.refundMoney
            );
        }
    };

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

<style scoped lang="scss">
    .stat-card {
        text-align: center;
        border: none;

        .stat-title {
            font-size: 13px;
            color: #606266;
            font-weight: bold;
        }

        .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: #303133;
        }
    }
</style>