pet-system-fulfiller-app/pages/mine/wallet/bill.vue

<template>
    <view class="container">
        <!-- 导航栏 -->
        <view class="nav-bar">
            <view class="nav-left" @click="navBack">
                <image class="back-icon" src="/static/icons/chevron_right_dark.svg"></image>
            </view>
            <text class="nav-title">账单明细</text>
            <view class="nav-right"></view>
        </view>

        <!-- 内容区域 -->
        <view class="content-area">
            <!-- Tabs -->
            <view class="tabs-row">
                <view class="tab-item" :class="{ active: currentTab === 0 }" @click="switchTab(0)">
                    <text>全部</text>
                    <view class="tab-line" v-if="currentTab === 0"></view>
                </view>
                <view class="tab-item" :class="{ active: currentTab === 1 }" @click="switchTab(1)">
                    <text>收入</text>
                    <view class="tab-line" v-if="currentTab === 1"></view>
                </view>
                <view class="tab-item" :class="{ active: currentTab === 2 }" @click="switchTab(2)">
                    <text>支出</text>
                    <view class="tab-line" v-if="currentTab === 2"></view>
                </view>
            </view>

            <!-- 账单列表 -->
            <scroll-view scroll-y class="bill-list">
                <view v-for="(group, gIndex) in displayGroups" :key="gIndex" class="month-group">
                    <!-- 月份头 -->
                    <view class="group-header">
                        <text class="month-title">{{ group.month }}</text>
                        <text class="month-summary">收入 ¥{{ group.income }} 支出 ¥{{ group.expense }}</text>
                    </view>
                    
                    <!-- 列表项 -->
                    <view class="list-item" v-for="(item, index) in group.items" :key="index">
                        <!-- 图标 -->
                        <view class="item-icon-box" :class="item.type">
                            <text class="item-icon-symbol">{{ item.type === 'income' ? '+' : '-' }}</text>
                        </view>
                        
                        <!-- 中间内容 -->
                        <view class="item-center">
                            <text class="item-title">{{ item.title }}</text>
                            <text class="item-desc">{{ item.time }} {{ item.desc }}</text>
                        </view>

                        <!-- 右侧数据 -->
                        <view class="item-right">
                            <text class="item-amount" :class="{ income: item.type === 'income', expense: item.type === 'expense' }">
                                {{ item.type === 'income' ? '+' : '' }}{{ item.amount }}
                            </text>
                            <view class="item-tag">
                                <text>{{ item.tag }}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="list-padding-bottom"></view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            currentTab: 0,
            // 模拟数据结构
            groups: [
                {
                    month: '2月 2026',
                    income: '35.00',
                    expense: '10.00',
                    items: [
                        {
                            title: '订单服务费用',
                            desc: '订单完成',
                            time: '02-03 14:30',
                            amount: '20.00',
                            type: 'income',
                            tag: '订单'
                        },
                        {
                            title: '奖励费用',
                            desc: '早高峰奖励', // shortened to match ui better
                            time: '02-03 10:00',
                            amount: '15.00',
                            type: 'income',
                            tag: '奖励'
                        },
                        {
                            title: '惩罚金额',
                            desc: '超时送达',
                            time: '02-02 18:20',
                            amount: '-10.00',
                            type: 'expense',
                            tag: '惩罚'
                        }
                    ]
                },
                {
                    month: '1月 2026',
                    income: '3500.00',
                    expense: '100.00',
                    items: [
                        {
                            title: '后台转账',
                            desc: '1月工资发放',
                            time: '01-31 09:00',
                            amount: '3500.00',
                            type: 'income',
                            tag: '工资'
                        },
                        {
                            title: '装备扣款',
                            desc: '装备费用',
                            time: '01-15 10:00',
                            amount: '-100.00',
                            type: 'expense',
                            tag: '扣款'
                        }
                    ]
                }
            ]
        }
    },
    computed: {
        displayGroups() {
            if (this.currentTab === 0) return this.groups;
            
            return this.groups.map(group => {
                const filteredItems = group.items.filter(item => {
                    const type = this.currentTab === 1 ? 'income' : 'expense';
                    return item.type === type;
                });
                return {
                    ...group,
                    items: filteredItems
                };
            }).filter(group => group.items.length > 0);
        }
    },
    methods: {
        navBack() {
            uni.navigateBack();
        },
        switchTab(index) {
            this.currentTab = index;
        }
    }
}
</script>

<style>
/* 基础容器 */
.container {
    background-color: #F5F7FA;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 导航栏 */
.nav-bar {
    background-color: #fff;
    padding-top: var(--status-bar-height);
    padding-left: 30rpx;
    padding-right: 30rpx;
    height: 88rpx; 
    box-sizing: content-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-left {
    height: 100%;
    display: flex;
    align-items: center;
    width: 60rpx;
}

.back-icon {
    width: 40rpx;
    height: 40rpx;
    transform: rotate(180deg);
}

.nav-title {
    font-size: 28rpx; /* 14pt (Strictly enforced) */
    font-weight: bold;
    color: #333;
}

.nav-right {
    width: 60rpx;
}

/* 内容区域 */
.content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Tabs */
.tabs-row {
    background-color: #fff;
    display: flex;
    justify-content: space-around; /* Match Figure 1 spacing */
    padding-top: 20rpx;
    padding-bottom: 2rpx;
    margin-bottom: 20rpx;
}

.tab-item {
    padding-bottom: 16rpx;
    font-size: 28rpx;
    color: #666;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100rpx;
}

.tab-item.active {
    font-weight: bold;
    color: #FF6B00; /* Orange text for active */
}

.tab-line {
    width: 40rpx; /* Little wider line */
    height: 4rpx;
    background-color: #FF6B00;
    border-radius: 4rpx;
    position: absolute;
    bottom: 0;
}

/* 列表容器 */
.bill-list {
    flex: 1;
    padding: 0 20rpx;
    box-sizing: border-box;
}

/* 月份卡片 */
.month-group {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 0 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.02);
}

.group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 10rpx;
    /* No border bottom for header in card view usually, or light one */
    border-bottom: 1rpx solid #f9f9f9; 
}

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

.month-summary {
    font-size: 24rpx;
    color: #999;
}

/* 列表项 */
.list-item {
    display: flex;
    align-items: center;
    padding: 30rpx 10rpx;
    border-bottom: 1rpx solid #f9f9f9;
}

.list-item:last-child {
    border-bottom: none;
}

/* 左侧图标 */
.item-icon-box {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20rpx;
    flex-shrink: 0;
}

.item-icon-box.income {
    background-color: #EEF9F2; /* Light Green */
}

.item-icon-box.expense {
    background-color: #FFF0F0; /* Light Red */
}

.item-icon-symbol {
    font-size: 40rpx;
    font-weight: 300;
    line-height: 1;
    margin-top: -4rpx; /* Visual center adjustment */
}

.item-icon-box.income .item-icon-symbol {
    color: #4CAF50;
}

.item-icon-box.expense .item-icon-symbol {
    color: #FF4D4F;
}

/* 中间内容 */
.item-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 80rpx;
}

.item-title {
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
}

.item-desc {
    font-size: 22rpx;
    color: #999;
    margin-top: 8rpx;
}

/* 右侧数据 */
.item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-around;
    height: 80rpx;
    margin-left: 10rpx;
}

.item-amount {
    font-size: 30rpx;
    font-weight: bold;
}

.item-amount.income {
    color: #4CAF50;
}

.item-amount.expense {
    color: #333;
}

.item-tag {
    display: inline-flex;
    justify-content: flex-end;
    margin-top: 6rpx;
}

.item-tag text {
    background-color: #FFFFFF;
    border: 1rpx solid #eee;
    padding: 2rpx 8rpx;
    border-radius: 6rpx;
    font-size: 20rpx;
    color: #999;
}

.list-padding-bottom {
    height: 40rpx;
}
</style>