pet-system-fulfiller-app/pages/mine/wallet/bill/index.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="filter-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>

                <!-- 日期选择器 -->
                <view class="date-picker-wrap">
                    <picker mode="date" fields="month" :value="currentDate" @change="onDateChange">
                        <view class="date-picker">
                            <text class="date-text">{{ year }}年{{ `${month}`.padStart(2, '0') }}月</text>
                            <text class="arrow-down">﹀</text>
                        </view>
                    </picker>
                </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>
import { listBalanceOnApp } from '@/api/fulfiller/log';

import fulfillerEnum from '@/enums/fulfiller.json';

const bizTypeMap = fulfillerEnum.FlfBalanceBizType;

export default {
    data() {
        const d = new Date();
        return {
            currentTab: 0,
            year: d.getFullYear(),
            month: d.getMonth() + 1,
            groups: []
        }
    },
    computed: {
        currentDate() {
            return `${this.year}-${String(this.month).padStart(2, '0')}`;
        },
        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);
        }
    },
    onShow() {
        this.fetchData();
    },
    methods: {
        async fetchData() {
            try {
                const res = await listBalanceOnApp({
                    year: this.year,
                    month: this.month
                });
                if (res.code === 200) {
                    const list = res.data || [];
                    let incomeTotal = 0;
                    let expenseTotal = 0;

                    const items = list.map(item => {
                        const isAdd = item.type === 'add';
                        const uiType = isAdd ? 'income' : 'expense';
                        const title = bizTypeMap[item.bizType] || item.bizType || '其他';
                        let amountVal = Math.abs(item.amount) / 100;
                        
                        if (isAdd) {
                            incomeTotal += amountVal;
                        } else {
                            expenseTotal += amountVal;
                        }

                        let amountStr = amountVal.toFixed(2);
                        if (!isAdd) amountStr = '-' + amountStr;

                        // 取时间 HH:mm
                        let timeStr = item.createTime || '';
                        if (timeStr.length >= 16) {
                            timeStr = timeStr.substring(5, 16); 
                        }

                        return {
                            ...item,
                            title: title,
                            desc: item.reason || '',
                            time: timeStr,
                            amount: amountStr,
                            type: uiType,
                            tag: title
                        };
                    });

                    this.groups = [
                        {
                            month: `${this.month}月 ${this.year}`,
                            income: incomeTotal.toFixed(2),
                            expense: expenseTotal.toFixed(2),
                            items: items
                        }
                    ];
                }
            } catch (error) {
                console.error('获取账单记录失败', error);
                uni.showToast({ title: error.message || error.msg || '请求失败', icon: 'none' });
            }
        },
        onDateChange(e) {
            const val = e.detail.value; // "YYYY-MM"
            const [y, m] = val.split('-');
            this.year = parseInt(y, 10);
            this.month = parseInt(m, 10);
            this.fetchData();
        },
        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;
}

/* 筛选区域 */
.filter-area {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    margin-bottom: 20rpx;
}

/* Tabs */
.tabs-row {
    display: flex;
    padding-top: 20rpx;
    padding-bottom: 2rpx;
    gap: 40rpx;
}

.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;
}

/* 日期选择器 */
.date-picker-wrap {
    display: flex;
    align-items: center;
}

.date-picker {
    background-color: #F5F7FA;
    padding: 8rpx 20rpx;
    border-radius: 30rpx;
    display: flex;
    align-items: center;
}

.date-text {
    font-size: 26rpx;
    color: #333;
    margin-right: 8rpx;
}

.arrow-down {
    font-size: 24rpx;
    color: #999;
}

/* 列表容器 */
.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>