shuhi-app/pages/order/index.vue

<template>
    <view class="order-statistics">
        <u-skeleton :loading="loading" :rows="4" title></u-skeleton>
        <!-- 顶部统计卡片 -->
        <view v-if="!loading">
            <view class="overview-card">
                <view class="overview-grid">
                    <view class="grid-item">
                        <text class="item-label">今日订单</text>
                        <text class="item-value">{{ orderStatData.todayOrderNum || 0 }}</text>
                    </view>
                    <view class="grid-item">
                        <text class="item-label">昨日订单</text>
                        <text class="item-value">{{ orderStatData.yesterdayOrderNum || 0 }}</text>
                    </view>
                    <view class="grid-item">
                        <text class="item-label">本月订单</text>
                        <text class="item-value">{{ formatOrderNum(orderStatData.monthOrderNum) || 0 }}<text
                                class="unit" v-if="orderStatData.monthOrderNum > 10000">万</text></text>
                    </view>
                </view>
            </view>

            <!-- 订单状态网格 -->
            <view class="status-grid">
                <view v-for="(item, index) in statusList" :key="index" class="status-item"
                    @tap="navigateToDetail(item.path)">
                    <view class="status-content">
                        <text class="status-label">{{ item.label }}</text>
                        <view class="status-value-wrap">
                            <text class="status-value">{{
                                orderStatData[item.key] || 0
                                }}</text>
                            <u-icon name="arrow-right" color="#999" size="14"></u-icon>
                        </view>
                    </view>
                </view>
            </view>
            <view class="workorder-section">
                <view class="workorder-card">
                    <view class="workorder-header">
                        <view class="header-left">
                            <view class="dot"></view><text>回收工单</text>
                        </view>
                    </view>
                    <view class="workorder-body">
                        <view @tap="navigateToDetail('/pages/order/recycle/pending')">
                            <text class="workorder-label">待我完成</text>
                            <text class="workorder-value">{{
                                workOrderStat.recycle.myPending || 0
                                }}</text>
                        </view>
                        <view @tap="navigateToDetail('/pages/order/recycle/created')">
                            <text class="workorder-label">我创建的</text>
                            <text class="workorder-value">{{
                                workOrderStat.recycle.myCreated || 0
                                }}</text>
                        </view>
                    </view>
                </view>
                <view class="workorder-card">
                    <view class="workorder-header">
                        <view class="header-left">
                            <view class="dot"></view><text>商城工单</text>
                        </view>
                    </view>
                    <view class="workorder-body">
                        <view @tap="navigateToDetail('/pages/order/mall/pending')">
                            <text class="workorder-label">待我完成</text>
                            <text class="workorder-value">{{
                                workOrderStat.mall.myPending || 0
                                }}</text>
                        </view>
                        <view @tap="navigateToDetail('/pages/order/mall/created')">
                            <text class="workorder-label">我创建的</text>
                            <text class="workorder-value">{{
                                workOrderStat.mall.myCreated || 0
                                }}</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 底部操作项 -->
            <view class="bottom-actions">
                <u-cell-group :border="false">
                    <u-cell title="收货统计" isLink @click="navigateToDetail('/pages/order/stat/receive-stat')"></u-cell>
                    <u-cell title="全部订单" isLink @click="navigateToDetail('/pages/order/stat/all')"
                        :border="false"></u-cell>
                </u-cell-group>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";

// 订单统计数据
const orderStatData = ref({});
const loading = ref(true);

// 订单状态数据
const statusList = computed(() => [
    {
        label: "待初审",
        value: 0,
        key: "waitFirstOrderNum",
        path: "/pages/order/stat/pending-review",
    },
    {
        label: "待拣件",
        value: 0,
        key: "waitOrderNum",
        path: "/pages/order/stat/pending-pick",
    },
    {
        label: "已拣件待签收",
        value: 0,
        key: "waitSignOrderNum",
        path: "/pages/order/stat/pending-sign",
    },
    {
        label: "待确认收货",
        value: 0,
        key: "waitConfirmOrderNum",
        path: "/pages/order/stat/pending-confirm",
    },
    {
        label: "已到货待审核",
        value: 0,
        key: "waitCheckOrderNum",
        path: "/pages/order/stat/pending-audit",
    },
    {
        label: "待付款",
        value: 0,
        key: "waitPayOrderNum",
        path: "/pages/order/stat/pending-payment",
    },
]);

const workOrderStat = ref({
    recycle: { myPending: 0, myCreated: 0 },
    mall: { myPending: 0, myCreated: 0 },
});

// 格式化订单数量（超过万的显示为X.XX万）
const formatOrderNum = (num) => {
    if (!num) return 0;
    if (num >= 10000) {
        return (num / 10000).toFixed(2);
    }
    return num;
};

// 获取订单统计数据
const getOrderStatData = async () => {
    try {
        const res = await uni.$u.http.get("/app/ordersignstat/getPdaOrderStat");
        if (res.code === 200) {
            orderStatData.value = res.data || {};
        }
    } catch (e) { }
};

const getWorkOrderStat = async () => {
    try {
        const [recycleRes, mallRes] = await Promise.all([
            uni.$u.http.get("/app/workorder/stat", { params: { type: "recycle" } }),
            uni.$u.http.get("/app/workorder/stat", { params: { type: "mall" } }),
        ]);
        if (recycleRes.code === 200 && recycleRes.data) {
            workOrderStat.value.recycle.myPending = recycleRes.data.myPending || 0;
            workOrderStat.value.recycle.myCreated = recycleRes.data.myCreated || 0;
        }
        if (mallRes.code === 200 && mallRes.data) {
            workOrderStat.value.mall.myPending = mallRes.data.myPending || 0;
            workOrderStat.value.mall.myCreated = mallRes.data.myCreated || 0;
        }
    } catch (e) { }
};

// 页面跳转
const navigateToDetail = (path) => {
    uni.navigateTo({
        url: path,
    });
};

// 页面加载时获取数据
onMounted(async () => {
    loading.value = true;
    await Promise.all([getOrderStatData(), getWorkOrderStat()]);
    loading.value = false;
});
</script>

<style>
page {
    background: #f5f6fa;
}
</style>
<style lang="scss" scoped>
.order-statistics {
    padding: 26rpx;

    .overview-card {
        background: linear-gradient(135deg, #22ac38 0%, #41c957 100%);
        border-radius: 16rpx;
        padding: 32rpx 24rpx;
        margin-bottom: 20rpx;
        box-shadow: 0 12rpx 24rpx rgba(34, 172, 56, 0.15);

        .overview-grid {
            display: flex;
            justify-content: space-between;

            .grid-item {
                flex: 1;
                text-align: center;
                position: relative;

                &:not(:last-child)::after {
                    content: "";
                    position: absolute;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    height: 60%;
                    width: 2rpx;
                    background: rgba(255, 255, 255, 0.35);
                }

                .item-label {
                    font-size: 30rpx;
                    color: #ffffffcc;
                    margin-bottom: 12rpx;
                    display: block;
                }

                .item-value {
                    font-size: 48rpx;
                    color: #ffffff;
                    font-weight: 500;

                    .unit {
                        font-size: 26rpx;
                        margin-left: 4rpx;
                        color: #ffffffcc;
                    }
                }
            }
        }
    }

    :deep(.u-cell) {
        .u-cell__body {
            padding: 15px;
        }
    }

    .status-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20rpx;
        margin-bottom: 20rpx;

        .status-item {
            background: #ffffff;
            border-radius: 16rpx;
            padding: 26rpx 14rpx;
            box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.04);
            border: 1rpx solid #f0f2f5;

            .status-content {
                .status-label {
                    font-size: 30rpx;
                    color: #333333;
                    margin-bottom: 16rpx;
                    display: block;
                }

                .status-value-wrap {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .status-value {
                        font-size: 46rpx;
                        color: #333333;
                        font-weight: 500;
                    }
                }
            }

            &:active {
                opacity: 0.8;
            }
        }
    }

    .bottom-actions {
        background: #ffffff;
        border-radius: 16rpx;
        overflow: hidden;
        box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.04);
    }

    .workorder-section {
        display: grid;
        grid-template-columns: 1fr;
    }

    .workorder-card {
        background: #ffffff;
        border-radius: 16rpx;
        padding: 26rpx;
        margin-bottom: 20rpx;
        box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.04);
    }

    .workorder-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 32rpx;
        color: #22ac38;
        margin-bottom: 16rpx;
    }

    .header-left {
        display: flex;
        align-items: center;
    }

    .dot {
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        background: #22ac38;
        margin-right: 12rpx;
    }

    .workorder-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12rpx;
        align-items: center;
    }

    .workorder-label {
        font-size: 28rpx;
        color: #666666;
        text-align: center;
    }

    .workorder-value {
        font-size: 44rpx;
        color: #333333;
        font-weight: 500;
        text-align: center;
        margin-left: 20rpx;
    }
}
</style>