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">1361</text>
				</view>
				<view class="grid-item">
					<text class="item-label">昨日订单</text>
					<text class="item-value">1361</text>
				</view>
				<view class="grid-item">
					<text class="item-label">本月订单</text>
					<text class="item-value">2.77<text class="unit">万</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">{{ item.value }}</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/statistics/receive')"></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 PageScroll from '@/components/pageScroll/index.vue'
	import {
		ref
	} from 'vue'

	// 订单状态数据
	const statusList = ref([{
			label: '待初审',
			value: '1361',
			path: '/pages/order/stat/pending-review'
		},
		{
			label: '待拣件',
			value: '1361',
			path: '/pages/order/stat/pending-pick'
		},
		{
			label: '已拣件待签收',
			value: '1361',
			path: '/pages/order/stat/pending-sign'
		},
		{
			label: '待确认收货',
			value: '1361',
			path: '/pages/order/stat/pending-confirm'
		},
		{
			label: '已到货待审核',
			value: '1361',
			path: '/pages/order/stat/pending-audit'
		},
		{
			label: '待付款',
			value: '1361',
			path: '/pages/order/stat/pending-payment'
		}
	])

	// 页面跳转
	const navigateToDetail = (path) => {
		uni.redirectTo({
			url: path
		})
	}
</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>