pet-system-fulfiller-app/pages/mine/wallet/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="wallet-card">
            <!-- 背景装饰圆 -->
            <view class="bg-circle big"></view>
            <view class="bg-circle small"></view>

            <view class="card-content">
                <view class="card-top">
                    <view class="app-info">
                        <image class="app-logo" src="/static/icons/wallet_white.svg" mode="aspectFit"></image>
                        <text class="app-name">履约者APP</text>
                    </view>
                    <view class="bill-btn" @click="navToBill">
                        <text>账单</text>
                    </view>
                </view>

                <view class="balance-container">
                    <view class="balance-main">
                        <text class="balance-label">账户余额 (元)</text>
                        <text class="balance-num">{{ balance }}</text>
                    </view>
                    <view class="balance-pending">
                        <text class="pending-label">待入账 (元)</text>
                        <text class="pending-num">{{ pendingBalance }}</text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 最近记录区域 -->
        <view class="record-container">
            <view class="record-header">
                <text class="header-title">最近账户余额变动记录</text>
                <view class="header-more" @click="navToBill">
                    <text>查看全部</text>
                    <image class="more-icon" src="/static/icons/arrow_right_gray.svg"></image>
                </view>
            </view>

            <!-- 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="record-list">
                <view class="list-item" v-for="(item, index) in displayList" :key="index">
                    <view class="item-left">
                        <text class="item-title">{{ item.title }}</text>
                        <text class="item-desc">{{ item.desc }}</text>
                        <text class="item-time">{{ item.time }}</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>
    </view>
</template>

<script>
import { getBalanceOnApp, pageBalanceOnApp } from '@/api/fulfiller/log';

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

const bizTypeMap = fulfillerEnum.FlfBalanceBizType;
const actionTypeMap = fulfillerEnum.FlfActionType;

export default {
    data() {
        return {
            balance: '0.00',
            pendingBalance: '0.00',
            currentTab: 0,
            list: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            loading: false
        }
    },
    computed: {
        displayList() {
            if (this.currentTab === 0) return this.list;
            if (this.currentTab === 1) return this.list.filter(item => item.type === 'income');
            if (this.currentTab === 2) return this.list.filter(item => item.type === 'expense');
            return [];
        }
    },
    onShow() {
        this.fetchData();
        this.fetchList(true);
    },
    onReachBottom() {
        this.fetchList();
    },
    methods: {
        async fetchData() {
            try {
                const res = await getBalanceOnApp();
                if (res.code === 200 && res.data) {
                    this.balance = (res.data.balance / 100).toFixed(2);
                    this.pendingBalance = (res.data.pendingBalance / 100).toFixed(2);
                }
            } catch (error) {
                console.error('获取余额数据失败', error);
            }
        },
        async fetchList(reset = false) {
            if (reset) {
                this.pageNum = 1;
                this.list = [];
                this.total = 0;
            }
            if (this.loading) return;
            if (!reset && this.list.length >= this.total && this.total !== 0) return;

            this.loading = true;
            try {
                const res = await pageBalanceOnApp({
                    pageNum: this.pageNum,
                    pageSize: this.pageSize
                });
                if (res.code === 200) {
                    this.total = res.total || 0;
                    const rows = res.rows || [];
                    const mappedRows = rows.map(item => {
                        // type 枚举：add 增加, reduce 减少
                        const isAdd = item.type === 'add';
                        const uiType = isAdd ? 'income' : 'expense';
                        const title = bizTypeMap[item.bizType] || item.bizType || '其他';

                        // 金额处理：分转元
                        let amountStr = (Math.abs(item.amount) / 100).toFixed(2);
                        if (!isAdd) {
                            amountStr = '-' + amountStr;
                        }

                        return {
                            ...item,
                            title: title,
                            desc: item.reason || '',
                            time: item.createTime || '',
                            amount: amountStr,
                            type: uiType, // 'income' or 'expense' for template class
                            tag: title
                        };
                    });
                    this.list = this.list.concat(mappedRows);
                    this.pageNum++;
                }
            } catch (error) {
                console.error('获取列表数据失败', error);
            } finally {
                this.loading = false;
            }
        },
        navBack() {
            uni.navigateBack();
        },
        navToBill() {
            uni.navigateTo({
                url: '/pages/mine/wallet/bill/index'
            });
        },
        switchTab(index) {
            this.currentTab = index;
        }
    }
}
</script>

<style>
/* 基础容器 */
.container {
    background-color: #F8F9FA;
    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;
    font-weight: bold;
    color: #333;
}

.nav-right {
    width: 60rpx;
}

/* 钱包卡片 */
.wallet-card {
    margin: 20rpx 30rpx 0;
    /* 增加高度以优化内部间距 (原220rpx -> 300rpx) */
    height: 300rpx;
    background: linear-gradient(135deg, #FF6B00 0%, #FF8F00 100%);
    border-radius: 20rpx;
    position: relative;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 4rpx 16rpx rgba(255, 107, 0, 0.15);
}

.bg-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.bg-circle.big {
    width: 400rpx;
    height: 400rpx;
    right: -100rpx;
    bottom: -150rpx;
}

.bg-circle.small {
    width: 200rpx;
    height: 200rpx;
    right: 80rpx;
    bottom: 40rpx;
}

.card-content {
    position: relative;
    z-index: 1;
    padding: 30rpx;
    /* 增加内边距 */
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
}

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-info {
    display: flex;
    align-items: center;
}

.app-logo {
    width: 28rpx;
    /* 图标调小 */
    height: 28rpx;
    background-color: transparent;
    /* SVG不需要背景色 */
    margin-right: 10rpx;
    border-radius: 0;
}

.app-name {
    font-size: 26rpx;
    /* 调小：13pt */
    font-weight: 500;
}

.bill-btn {
    font-size: 26rpx;
    /* 13pt */
    opacity: 0.9;
}

.bill-btn text {
    font-size: 26rpx;
    /* 调小：13pt */
    opacity: 0.95;
}

.balance-container {
    margin-top: auto;
    /* Push to bottom */
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 10rpx;
    /* Align with bottom padding visual */
}

.balance-main {
    display: flex;
    flex-direction: column;
}

.balance-label {
    font-size: 24rpx;
    /* 12pt */
    opacity: 0.9;
    margin-bottom: 4rpx;
}

.balance-num {
    font-size: 48rpx;
    /* 调整适中，不至于太小也不太大 */
    font-weight: bold;
    line-height: 1.1;
}

.balance-pending {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: 10rpx;
}

.pending-label {
    font-size: 24rpx;
    /* 12pt */
    opacity: 0.9;
    margin-bottom: 4rpx;
}

.pending-num {
    font-size: 28rpx;
    /* 14pt */
    font-weight: bold;
}

/* 记录区域 */
.record-container {
    flex: 1;
    background-color: #fff;
    margin: 24rpx 24rpx 0;
    /* 调整边距 */
    border-radius: 20rpx 20rpx 0 0;
    padding: 30rpx 24rpx;
}

.record-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
}

.header-title {
    font-size: 28rpx;
    /* 14pt */
    font-weight: bold;
    color: #333;
}

.header-more {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    /* 12pt */
    color: #999;
}

.more-icon {
    width: 24rpx;
    height: 24rpx;
    margin-left: 6rpx;
    /* Ensure icon color is visible - svgs are usually static. display:block just in case */
    display: block;
}

/* Tabs */
.tabs-row {
    display: flex;
    border-bottom: 1rpx solid #f5f5f5;
    margin-bottom: 10rpx;
}

.tab-item {
    margin-right: 40rpx;
    padding-bottom: 12rpx;
    font-size: 28rpx;
    /* 14pt */
    color: #666;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

.tab-line {
    width: 28rpx;
    height: 4rpx;
    background-color: #FF6B00;
    border-radius: 4rpx;
    position: absolute;
    bottom: 0;
}

/* 列表 */
.list-item {
    display: flex;
    justify-content: space-between;
    padding: 24rpx 0;
    border-bottom: 1rpx solid #f9f9f9;
}

.item-left {
    display: flex;
    flex-direction: column;
}

.item-title {
    font-size: 28rpx;
    /* 14pt (Green Box) */
    color: #333;
    margin-bottom: 8rpx;
    font-weight: 500;
}

.item-desc {
    font-size: 26rpx;
    /* 13pt (Red Box) */
    color: #999;
    margin-bottom: 6rpx;
}

.item-time {
    font-size: 24rpx;
    /* 12pt */
    color: #ccc;
}

.item-right {
    display: flex;
    flex-direction: column;
    /* align-items: flex-end; 保持右对齐 */
    text-align: right;
}

.item-amount {
    font-size: 28rpx;
    /* 14pt */
    font-weight: bold;
    margin-bottom: 8rpx;
}

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

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

.item-tag {
    display: inline-flex;
    justify-content: flex-end;
}

.item-tag text {
    background-color: #F5F5F5;
    padding: 4rpx 12rpx;
    border-radius: 6rpx;
    font-size: 22rpx;
    /* 11pt */
    color: #999;
}
</style>