pet-system-merchant-app/pages/my/fee/statistics/index.vue

<template>
	<view class="fee-statistics-page">
		<NavBar title="费用统计" bgColor="#ffffff" color="#000"></NavBar>
		<!-- 顶部背景 -->
		<view class="header-bg">
			<view class="total-title">总服务费 (元)</view>
			<view class="total-amount">500.00</view>
			<view class="date-picker-wrap">
				<picker mode="date" fields="day" @change="onDateChange">
					<view class="date-range">
						<text>2026/02/25 - 2026/03/27</text>
						<uni-icons type="bottom" size="14" color="#fff"></uni-icons>
					</view>
				</picker>
			</view>
		</view>

		<!-- 统计卡片 -->
		<view class="stats-card">
			<view class="stats-item">
				<text class="stats-value">3</text>
				<text class="stats-label">单数</text>
			</view>
			<view class="stats-divider"></view>
			<view class="stats-item">
				<text class="stats-value">280.00</text>
				<text class="stats-label">最高单笔</text>
			</view>
			<view class="stats-divider"></view>
			<view class="stats-item">
				<text class="stats-value">166.67</text>
				<text class="stats-label">平均单笔</text>
			</view>
		</view>

		<!-- 订单明细 -->
		<view class="detail-section">
			<view class="section-header">
				<view class="header-line"></view>
				<text class="header-text">订单明细</text>
			</view>

			<view class="detail-list">
				<view class="detail-item" v-for="(item, index) in orderDetails" :key="index">
					<view class="detail-info">
						<view class="detail-title">{{ item.title }}</view>
						<view class="detail-time">{{ item.time }}</view>
					</view>
					<view class="detail-amount-wrap">
						<view class="detail-amount">+{{ item.amount }}</view>
						<view class="detail-no">{{ item.orderNo }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import NavBar from '@/components/nav-bar/index.vue'

const orderDetails = ref([
	{ title: '宠物寄养(1天)', time: '2026-03-19 09:00', amount: '100.00', orderNo: 'ORD20260319011' },
	{ title: '狗狗全套美容', time: '2026-03-17 10:30', amount: '280.00', orderNo: 'ORD20260317022' },
	{ title: '猫咪洗澡护肤', time: '2026-03-15 14:00', amount: '120.00', orderNo: 'ORD20260315001' }
])

const onDateChange = (e) => {
	console.log('date change', e.detail.value)
}
</script>

<style lang="scss" scoped>
.fee-statistics-page {
	min-height: 100vh;
	background-color: #f8f9fb;
}

.header-bg {
	background: linear-gradient(180deg, #ff7b00 0%, #ff9500 100%);
	padding: 60rpx 40rpx 140rpx;
	text-align: center;
	color: #fff;
}

.total-title {
	font-size: 28rpx;
	opacity: 0.9;
	margin-bottom: 20rpx;
}

.total-amount {
	font-size: 80rpx;
	font-weight: 900;
	margin-bottom: 40rpx;
}

.date-picker-wrap {
	display: inline-block;
}

.date-range {
	background: rgba(255, 255, 255, 0.2);
	padding: 12rpx 32rpx;
	border-radius: 40rpx;
	font-size: 24rpx;
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.stats-card {
	background: #fff;
	margin: -80rpx 32rpx 40rpx;
	padding: 40rpx 0;
	border-radius: 32rpx;
	display: flex;
	align-items: center;
	box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.05);
	position: relative;
	z-index: 2;
}

.stats-item {
	flex: 1;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

.stats-value {
	font-size: 36rpx;
	font-weight: 800;
	color: #1a1a1a;
}

.stats-label {
	font-size: 22rpx;
	color: #999;
}

.stats-divider {
	width: 2rpx;
	height: 60rpx;
	background: #f0f0f0;
}

.detail-section {
	padding: 0 32rpx;
}

.section-header {
	display: flex;
	align-items: center;
	gap: 12rpx;
	margin-bottom: 24rpx;
}

.header-line {
	width: 8rpx;
	height: 32rpx;
	background: #ff7b00;
	border-radius: 4rpx;
}

.header-text {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.detail-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.detail-item {
	background: #fff;
	padding: 32rpx;
	border-radius: 24rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.detail-info {
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

.detail-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
}

.detail-time {
	font-size: 24rpx;
	color: #999;
}

.detail-amount-wrap {
	text-align: right;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.detail-amount {
	font-size: 32rpx;
	font-weight: bold;
	color: #ff5252;
}

.detail-no {
	font-size: 22rpx;
	color: #ccc;
}
</style>