shuhi-app/pages/order/index.vue

<template>
    <view class="order-statistics">
        <!-- 顶部统计卡片 -->
        <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="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>
</template>

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

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

// 订单状态数据
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",
    },
]);

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

// 获取订单统计数据
const getOrderStatData = async () => {
    uni.showLoading({
        title: "加载中...",
    });

    uni.$u.http
        .get("/app/ordersignstat/getPdaOrderStat")
        .then((res) => {
            if (res.code === 200) {
                orderStatData.value = res.data;
            }
        })
        .finally(() => {
            uni.hideLoading();
        });
};

// 页面跳转
const navigateToDetail = (path) => {
    if(path!='/pages/order/stat/receive-stat'){
        return;
    }
    uni.navigateTo({
        url: path,
    });
};

// 页面加载时获取数据
onMounted(() => {
    getOrderStatData();
});
</script>

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

    .overview-card {
        background: #ffffff;
        border-radius: 16rpx;
        padding: 30rpx 20rpx;
        margin-bottom: 20rpx;

        .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: #eeeeee;
                }

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

                .item-value {
                    font-size: 44rpx;
                    color: #333333;
                    font-weight: 500;

                    .unit {
                        font-size: 24rpx;
                        margin-left: 4rpx;
                    }
                }
            }
        }
    }

    :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: 24rpx 12rpx;

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

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

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

            &:active {
                opacity: 0.8;
            }
        }
    }

    .bottom-actions {
        background: #ffffff;
        border-radius: 16rpx;
        overflow: hidden;
    }
}
</style>