pet-system-fulfiller-app/pages/mine/rewards-all.vue

<template>
    <view class="container">
        <!-- 类型标签 -->
        <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>

        <!-- 按月分组列表 -->
        <scroll-view scroll-y class="main-scroll">
            <view v-for="(group, gIdx) in filteredGroups" :key="gIdx" class="month-group">
                <!-- 月份标题 -->
                <view class="month-header">
                    <text class="month-title">{{ group.month }}月</text>
                    <view class="month-summary">
                        <text class="month-sum-text">已入账¥{{ group.credited.toFixed(2) }}</text>
                        <text class="month-sum-text"> 待入账¥{{ group.pending.toFixed(2) }}</text>
                    </view>
                </view>

                <!-- 记录列 -->
                <view class="record-item" v-for="(item, rIdx) in group.items" :key="rIdx">
                    <view class="ri-icon" :class="item.amount > 0 ? 'ri-reward' : 'ri-penalty'">
                        <text class="ri-icon-text">¥</text>
                    </view>
                    <view class="ri-content">
                        <view class="ri-title-row">
                            <text class="ri-date">{{ item.date }}</text>
                            <text class="ri-title">{{ item.title }}</text>
                        </view>
                        <text class="ri-desc">{{ item.desc }}</text>
                    </view>
                    <view class="ri-right">
                        <text class="ri-amount" :class="item.amount > 0 ? 'positive' : 'negative'">
                            {{ item.amount > 0 ? '+' : '' }}{{ item.amount.toFixed(2) }}
                        </text>
                        <text class="ri-status" :class="item.statusClass">{{ item.status }}</text>
                    </view>
                </view>
            </view>
            <view style="height: 40rpx;"></view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            tabs: ['全部', '奖励', '惩罚'],
            activeTab: 0,
            // 所有完整记录（按月分组）
            allGroups: [
                {
                    month: 9,
                    credited: 30, pending: 0,
                    items: [
                        { date: '09-24', title: '高温补贴', desc: '9月份高温天气补贴', amount: 30, status: '已入账', statusClass: 'credited', type: 'reward' }
                    ]
                },
                {
                    month: 8,
                    credited: 2610, pending: 0,
                    items: [
                        { date: '08-01', title: '单量奖励', desc: '超140单', amount: 560, status: '已入账', statusClass: 'credited', type: 'reward' },
                        { date: '07-01', title: '单量奖励', desc: '超470单', amount: 2050, status: '已入账', statusClass: 'credited', type: 'reward' }
                    ]
                },
                {
                    month: 7,
                    credited: 0, pending: 0,
                    items: [
                        { date: '07-15', title: '超时扣款', desc: '订单#T98211 超时30分钟', amount: -15, status: '已扣款', statusClass: 'deducted', type: 'penalty' },
                        { date: '07-20', title: '客诉扣款', desc: '订单#T98222 餐品遗漏', amount: -50, status: '已扣款', statusClass: 'deducted', type: 'penalty' }
                    ]
                }
            ]
        };
    },
    computed: {
        filteredGroups() {
            if (this.activeTab === 0) return this.allGroups;
            const typeKey = this.activeTab === 1 ? 'reward' : 'penalty';
            return this.allGroups.map(g => ({
                ...g,
                items: g.items.filter(i => i.type === typeKey)
            })).filter(g => g.items.length > 0);
        }
    },
    methods: {
        switchTab(idx) { this.activeTab = idx; }
    }
};
</script>

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

.tab-bar {
    display: flex;
    background-color: #fff;
    padding: 0 30rpx;
}

.tab-item {
    padding: 18rpx 16rpx 0;
    font-size: 28rpx;
    color: #999;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tab-item:first-child { padding-left: 0; }

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

/* 下划线正常流，自然居中 */
.tab-line {
    width: 32rpx;
    height: 3rpx;
    background-color: #FF9800;
    border-radius: 2rpx;
    margin-top: 8rpx;
    align-self: center;
}

.main-scroll { flex: 1; padding: 16rpx 0; }

.month-group {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 0 24rpx;
    margin: 0 30rpx 16rpx;
    overflow: hidden;
}

.month-header {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f5f5f5;
}

.month-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
    margin-right: 12rpx;
}

.month-summary { display: flex; }

.month-sum-text { font-size: 22rpx; color: #999; margin-right: 10rpx; }

.record-item {
    display: flex;
    align-items: center;
    padding: 24rpx 0;
    border-bottom: 1rpx solid #f9f9f9;
}

.ri-icon {
    width: 72rpx;
    height: 72rpx;
    border-radius: 50%;
    background-color: #FFF3E0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
    flex-shrink: 0;
}

.ri-icon.ri-penalty { background-color: #FAFAFA; }

.ri-icon-text {
    font-size: 30rpx;
    color: #FF9800;
    font-weight: bold;
}

.ri-icon.ri-penalty .ri-icon-text { color: #ccc; }

.ri-content { flex: 1; }

.ri-title-row { display: flex; align-items: center; margin-bottom: 6rpx; }
.ri-date { font-size: 26rpx; color: #333; font-weight: bold; margin-right: 10rpx; }
.ri-title { font-size: 26rpx; color: #333; }
.ri-desc { font-size: 24rpx; color: #999; }

.ri-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: 16rpx;
}

.ri-amount { font-size: 30rpx; font-weight: bold; margin-bottom: 4rpx; }
.ri-amount.positive { color: #FF5722; }
.ri-amount.negative { color: #333; }

.ri-status { font-size: 22rpx; }
.ri-status.pending { color: #FF9800; }
.ri-status.credited { color: #999; }
.ri-status.deducted { color: #999; }
</style>