lanan-app/pages/my/classificationInfo.vue

<template>
	<view class="statistics-container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<text class="back-icon" @click="goBack">←</text>
			<view class="title-tabs">
				<text :class="['tab-item', activeTab === 'order' ? 'active' : '']" @click="switchTab('order')">
					工单统计
				</text>
				<text :class="['tab-item', activeTab === 'category' ? 'active' : '']" @click="switchTab('category')">
					分类统计
				</text>
			</view>
			<text class="filter-btn" @click="openFilter">筛选 ⏷</text>
		</view>

		<!-- 分类统计 -->
		<view v-if="activeTab === 'category'">
			<!-- 二级Tab -->
			<view class="sub-tabs">
				<text v-for="(tab, index) in subTabs" :key="index"
					:class="['sub-tab-item', activeSubTab === tab.value ? 'active' : '']"
					@click="switchSubTab(tab.value)">
					{{ tab.label }}
				</text>
			</view>

			<!-- 列表部分 -->
			<view v-if="activeSubTab === 'driver'" class="list-container">
				<view class="table-header">
					<text class="col-rank">排名</text>
					<text class="col-driver">司机</text>
					<text class="col-num">救援数量(辆)</text>
					<text class="col-distance">公里数(km)</text>
					<text class="col-money">金额(万)</text>
				</view>
				<view class="table-row" v-for="(item, index) in driverList" :key="index">
					<text class="col-rank">{{ index + 1 }}</text>
					<view class="col-driver">
						<image :src="item.avatar" class="avatar" />
						<text>{{ item.name }}</text>
					</view>
					<text class="col-num">{{ item.count }}</text>
					<text class="col-distance">{{ item.distance }}</text>
					<text class="col-money">{{ item.money }}</text>
				</view>
			</view>

			<view v-if="activeSubTab === 'vehicle'" class="list-container">
				<text>救援车辆列表（待实现）</text>
			</view>

			<view v-if="activeSubTab === 'dispatch'" class="list-container">
				<text>调度列表（待实现）</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "StatisticsInfo",
		data() {
			return {
				activeTab: "category", // 默认进入分类统计
				activeSubTab: "driver", // 默认进入救援司机
				subTabs: [{
						label: "救援司机",
						value: "driver"
					},
					{
						label: "救援车辆",
						value: "vehicle"
					},
					{
						label: "调度",
						value: "dispatch"
					},
				],
				driverList: [{
						name: "张三三",
						count: 43,
						distance: 4342.1,
						money: 42.12,
						avatar: "/static/avatar1.png",
					},
					{
						name: "何米有",
						count: 23,
						distance: 1342.5,
						money: 12.35,
						avatar: "/static/avatar2.png",
					},
					{
						name: "晨虹剑",
						count: 11,
						distance: 980.3,
						money: 11.21,
						avatar: "/static/avatar3.png",
					},
				],
			};
		},
		methods: {
			switchTab(tab) {
				this.activeTab = tab;
			},
			switchSubTab(tab) {
				this.activeSubTab = tab;
			},
			goBack() {
				uni.navigateBack();
			},
			openFilter() {
				uni.showToast({
					title: "筛选功能待实现",
					icon: "none",
				});
			},
		},
	};
</script>

<style scoped>
	.statistics-container {
		background: #f6f8fc;
		min-height: 100vh;
	}

	/* 顶部导航 */
	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: linear-gradient(180deg, #3a8dff, #579dff);
		color: #fff;
		padding: 10px 16px;
		height: 56px;
		box-sizing: border-box;
	}

	.back-icon {
		font-size: 20px;
		font-weight: bold;
	}

	.title-tabs {
		display: flex;
		flex: 1;
		justify-content: center;
	}

	.tab-item {
		font-size: 16px;
		margin: 0 15px;
		padding-bottom: 4px;
		opacity: 0.8;
	}

	.tab-item.active {
		font-weight: bold;
		border-bottom: 3px solid #fff;
		opacity: 1;
	}

	.filter-btn {
		font-size: 14px;
	}

	/* 二级Tab */
	.sub-tabs {
		display: flex;
		background: #fff;
		padding: 10px 0;
		justify-content: space-around;
		border-bottom: 1px solid #eee;
	}

	.sub-tab-item {
		font-size: 15px;
		color: #666;
		padding: 4px 10px;
	}

	.sub-tab-item.active {
		font-weight: bold;
		color: #3a8dff;
		border-bottom: 2px solid #3a8dff;
	}

	/* 表格样式 */
	.list-container {
		margin: 10px;
	}

	.table-header,
	.table-row {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 8px;
		padding: 10px;
		margin-bottom: 6px;
	}

	.table-header {
		font-weight: bold;
		background: #f0f3f8;
	}

	.col-rank {
		width: 40px;
		text-align: center;
	}

	.col-driver {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 28px;
		height: 28px;
		border-radius: 50%;
		margin-right: 6px;
	}

	.col-num,
	.col-distance,
	.col-money {
		width: 80px;
		text-align: center;
	}
</style>