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="all" />
                <el-tab-pane label="进行中的订单" name="processing" />
                <el-tab-pane label="待商家处理" name="merchant_pending" />
                <el-tab-pane label="待商家收货" name="merchant_receiving" />
                <el-tab-pane label="待买家发货" name="buyer_shipping" />
                <el-tab-pane label="已拒绝退款" name="rejected" />
                <el-tab-pane label="退款成功" name="success" />
                <el-tab-pane label="退款取消" name="cancelled" />
            </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">
                <refund-item
                    v-for="(item, index) in list"
                    :key="index"
                    :item="item"
                    @push-sms="handlePushSms"
                    @send-packet="handleSendPacket"
                />
            </div>

            <!-- Pagination -->
            <div class="pagination-wrapper mt-4 flex justify-end">
                <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 -->
        <push-sms-dialog ref="pushSmsDialogRef" @success="handleSearch" />
    </ele-page>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { EleMessage } from 'ele-admin-plus/es';
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';

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

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

const list = ref([
    {
        checked: false,
        orderId: '4066879393210936038',
        refundId: '4066879393210936038',
        applyTime: '2024-10-04 12:01:09',
        product: {
            image: 'https://img14.360buyimg.com/n0/jfs/t1/157997/3/36676/122176/65e975a0F98822998/5023348143493720.jpg',
            title: '毛泽东思想和中国特色社会主义理论体系概论（2023年版）',
            isbn: '9787040599012',
            condition: '中等',
            code: 'wk-725154',
            qty: 1,
            price: 2.9
        },
        refundAmount: 2.9,
        buyer: {
            avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
            name: '书嗨4654645'
        },
        refundReason: '不喜欢，效果不好',
        logistics: {
            merchantShipped: true,
            buyerReturned: true
        },
        status: '退款成功'
    },
    {
        checked: false,
        orderId: '4066879393210936038',
        refundId: '4066879393210936038',
        applyTime: '2024-10-04 12:01:09',
        product: {
            image: 'https://img14.360buyimg.com/n0/jfs/t1/157997/3/36676/122176/65e975a0F98822998/5023348143493720.jpg',
            title: '毛泽东思想和中国特色社会主义理论体系概论（2023年版）',
            isbn: '9787040599012',
            condition: '中等',
            code: 'wk-725154',
            qty: 1,
            price: 2.9
        },
        refundAmount: 2.9,
        buyer: {
            avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
            name: '书嗨4654645'
        },
        refundReason: '不喜欢，效果不好',
        logistics: {
            merchantShipped: true,
            buyerReturned: true
        },
        status: '同意退款'
    }
]);

const pushSmsDialogRef = ref(null);

const handleSearch = (where) => {
    loading.value = true;
    setTimeout(() => {
        loading.value = false;
        EleMessage.success('查询成功');
    }, 500);
};

const handleTabClick = (tab) => {
    handleSearch();
};

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

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

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('发红包功能暂未实现');
};
</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>