pet-system-fulfiller-app/pages/mine/order-stats.vue

<template>
    <view class="container">
        <!-- 统计banner：圆角浮动卡，左右30rpx边距 -->
        <view class="stats-banner">
            <view class="banner-item">
                <text class="banner-num">2546</text>
                <text class="banner-label">累计接单</text>
            </view>
            <view class="banner-item">
                <text class="banner-num">10</text>
                <text class="banner-label">累计拒单</text>
            </view>
            <view class="banner-item">
                <text class="banner-num">10</text>
                <text class="banner-label">奖励单量</text>
            </view>
            <view class="banner-item">
                <text class="banner-num">10</text>
                <text class="banner-label">惩罚单量</text>
            </view>
            <view class="banner-item">
                <text class="banner-num">158<text class="banner-unit">天</text></text>
                <text class="banner-label">服务时长</text>
            </view>
        </view>

        <!-- 标签页（全宽，无圆角，紧贴屏幕宽度） -->
        <view class="tab-bar">
            <view
                class="tab-item"
                v-for="(tab, idx) in tabs"
                :key="idx"
                :class="{ active: activeTab === idx }"
                @click="switchTab(idx)"
            >
                <text>{{ tab }}</text>
                <view class="tab-line" v-if="activeTab === idx"></view>
            </view>
        </view>

        <!-- 订单列表：每张卡片用margin左右各30rpx，与banner宽度对齐 -->
        <scroll-view scroll-y class="order-scroll">
            <view style="height: 16rpx;"></view>

            <view
                class="order-card"
                v-for="(order, idx) in filteredOrders"
                :key="idx"
            >
                <!-- 卡片头部：类型图标 + 类型名 | 状态 + 时间 -->
                <view class="card-header">
                    <view class="type-badge">
                        <image class="type-icon" :src="order.typeIcon"></image>
                        <text class="type-text">{{ order.typeName }}</text>
                    </view>
                    <text class="status-text" :class="order.status === '完成' ? 'green' : 'red'">
                        {{ order.status === '完成' ? '完成：' : '拒绝：' }}{{ order.finishTime }}
                    </text>
                </view>

                <!-- 服务时间 -->
                <text class="service-time">服务时间：{{ order.serviceTime }}</text>

                <!-- 宠物信息卡（灰底）+ 右侧价格 -->
                <view class="pet-card">
                    <image class="pet-avatar" :src="order.petAvatar" mode="aspectFill"></image>
                    <view class="pet-info">
                        <text class="pet-name">{{ order.petName }}</text>
                        <text class="pet-breed">品种: {{ order.petBreed }}</text>
                    </view>
                    <text class="pet-price">¥{{ order.price }}</text>
                </view>

                <!-- 路线信息 -->
                <view class="route-info">
                    <!-- 接送：取 → 送 -->
                    <template v-if="order.orderType === 1">
                        <view class="route-item">
                            <view class="icon-circle pickup">取</view>
                            <view class="route-connector"></view>
                            <view class="address-box">
                                <text class="addr-title">{{ order.startName }}</text>
                                <text class="addr-desc">{{ order.startAddr }}</text>
                            </view>
                        </view>
                        <view class="route-item">
                            <view class="icon-circle deliver">送</view>
                            <view class="address-box">
                                <text class="addr-title">{{ order.endName }}</text>
                                <text class="addr-desc">{{ order.endAddr }}</text>
                            </view>
                        </view>
                    </template>
                    <!-- 喂遛/洗护：服 -->
                    <template v-else>
                        <view class="route-item">
                            <view class="icon-circle service">服</view>
                            <view class="address-box">
                                <text class="addr-title">{{ order.endName }}</text>
                                <text class="addr-desc">{{ order.endAddr }}</text>
                            </view>
                        </view>
                        <view class="service-note-row" v-if="order.serviceNote">
                            <text class="service-note-text">服务内容：{{ order.serviceNote }}</text>
                        </view>
                    </template>
                </view>
            </view>

            <!-- 空状态 -->
            <view class="empty-state" v-if="filteredOrders.length === 0">
                <text class="empty-text">暂无相关订单</text>
            </view>
            <view style="height: 40rpx;"></view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            tabs: ['全部', '已完成', '已拒绝'],
            activeTab: 0,
            orders: [
                {
                    orderType: 1,
                    typeName: '接送', typeIcon: '/static/icons/car.svg',
                    status: '完成', finishTime: '2026/02/03 14:30', serviceTime: '2026/02/10 10:00',
                    petName: '哈士奇宝宝', petBreed: '哈士奇', petAvatar: '/static/dog.png', price: '20.00',
                    startName: '武汉大学宠物店', startAddr: '武汉市洪山区珞喻路458号',
                    endName: '张** 189****8451', endAddr: '武汉市武昌区新区大道凤凰广场A座', serviceNote: ''
                },
                {
                    orderType: 2,
                    typeName: '喂遛', typeIcon: '/static/icons/walk.svg',
                    status: '完成', finishTime: '2026/02/03 15:00', serviceTime: '2026/02/11 14:00',
                    petName: '金毛', petBreed: '金毛寻回犬', petAvatar: '/static/dog.png', price: '35.00',
                    startName: '', startAddr: '',
                    endName: '王女士 138****1234', endAddr: '武汉市江汉区泛海国际居住区', serviceNote: '需自带牵引绳，遛弯30分钟。'
                },
                {
                    orderType: 3,
                    typeName: '洗护', typeIcon: '/static/icons/wash.svg',
                    status: '拒绝', finishTime: '2026/02/03 09:30', serviceTime: '2026/02/12 09:30',
                    petName: 'Mimi', petBreed: '布偶猫', petAvatar: '/static/dog.png', price: '50.00',
                    startName: '', startAddr: '',
                    endName: '赵先生 159****9876', endAddr: '武汉市汉阳区钟家村', serviceNote: '上门洗澡，剪指甲。'
                }
            ]
        };
    },
    computed: {
        filteredOrders() {
            if (this.activeTab === 0) return this.orders;
            if (this.activeTab === 1) return this.orders.filter(o => o.status === '完成');
            return this.orders.filter(o => o.status === '拒绝');
        }
    },
    methods: {
        switchTab(idx) { this.activeTab = idx; }
    }
};
</script>

<style>
page { background-color: #F7F8FA; }
.container { min-height: 100vh; background-color: #F7F8FA; padding: 20rpx 0 0; }

/* ===== 统计banner：圆角浮动卡，左右30rpx边距 ===== */
.stats-banner {
    background: linear-gradient(135deg, #FF9800 0%, #FF5722 100%);
    padding: 28rpx 16rpx;
    display: flex;
    justify-content: space-around;
    margin: 0 30rpx 20rpx;
    border-radius: 20rpx;
    box-shadow: 0 6rpx 20rpx rgba(255, 87, 34, 0.25);
}

.banner-item { display: flex; flex-direction: column; align-items: center; }
.banner-num { font-size: 34rpx; font-weight: bold; color: #fff; margin-bottom: 4rpx; }
.banner-unit { font-size: 22rpx; font-weight: normal; }
.banner-label { font-size: 20rpx; color: rgba(255,255,255,0.85); }

/* ===== 标签页：全宽平铺，无圆角，无side margin ===== */
.tab-bar {
    background-color: #fff;
    display: flex;
    padding: 0 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    margin-bottom: 0;
}

.tab-item {
    padding: 20rpx 24rpx;
    font-size: 28rpx;
    color: #999;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tab-item.active { color: #FF9800; font-weight: bold; }

.tab-line {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 36rpx;
    height: 4rpx;
    background-color: #FF9800;
    border-radius: 2rpx;
}

/* ===== 订单列表：scroll-view 全宽，每张card用margin左右30rpx ===== */
.order-scroll { width: 100%; }

/* 关键：order-card 用 margin: 0 30rpx 实现与banner对齐 */
.order-card {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    margin: 0 30rpx 16rpx;   /* ← 与banner的 margin: 0 30rpx 完全一致 */
    box-sizing: border-box;
}

/* 卡片头部 */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10rpx;
}

.type-badge { display: flex; align-items: center; }

/* 订单类型图标：与my-orders列表一致，直接使用带色彩的SVG图标 */
.type-icon {
    width: 44rpx;
    height: 44rpx;
    margin-right: 12rpx;
}

.type-text { font-size: 30rpx; font-weight: bold; color: #333; }

.status-text { font-size: 24rpx; }
.status-text.green { color: #4CAF50; }
.status-text.red { color: #F44336; }

/* 服务时间 */
.service-time {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 16rpx;
    display: block;
}

/* 宠物信息卡（灰底背景，右侧显示价格） */
.pet-card {
    background-color: #F7F8FA;
    border-radius: 10rpx;
    padding: 16rpx 20rpx;
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;
}

.pet-avatar { width: 70rpx; height: 70rpx; border-radius: 50%; margin-right: 16rpx; flex-shrink: 0; }

.pet-info { flex: 1; display: flex; flex-direction: column; }
.pet-name { font-size: 28rpx; font-weight: bold; color: #333; margin-bottom: 4rpx; }
.pet-breed { font-size: 24rpx; color: #999; }

/* 价格在宠物卡右侧 */
.pet-price { font-size: 34rpx; font-weight: bold; color: #FF5722; flex-shrink: 0; }

/* 路线信息 */
.route-info { display: flex; flex-direction: column; }

.route-item {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding-bottom: 8rpx;
}

.icon-circle {
    width: 44rpx;
    height: 44rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22rpx;
    font-weight: bold;
    color: #fff;
    flex-shrink: 0;
    margin-right: 16rpx;
    margin-top: 2rpx;
}

.icon-circle.pickup { background: linear-gradient(135deg, #FF9800, #FF6D00); }
.icon-circle.deliver { background: linear-gradient(135deg, #4CAF50, #2E7D32); }
.icon-circle.service { background: linear-gradient(135deg, #4CAF50, #1B5E20); }

/* 取→送之间的虚线连接 */
.route-connector {
    position: absolute;
    left: 21rpx;
    top: 46rpx;
    width: 2rpx;
    height: 30rpx;
    background-color: #e0e0e0;
}

.address-box { flex: 1; padding-bottom: 14rpx; }
.addr-title { font-size: 26rpx; color: #333; display: block; margin-bottom: 4rpx; }
.addr-desc { font-size: 24rpx; color: #999; display: block; }

/* 服务内容说明（喂遛/洗护） */
.service-note-row { padding: 4rpx 0 0 60rpx; }
.service-note-text { font-size: 24rpx; color: #999; }

/* 空状态 */
.empty-state { text-align: center; padding: 80rpx 0; }
.empty-text { font-size: 28rpx; color: #ccc; }
</style>