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">2575.00</text>
                    </view>
                    <view class="balance-pending">
                        <text class="pending-label">待入账 (元)</text>
                        <text class="pending-num">580.00</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>
export default {
    data() {
        return {
            currentTab: 0,
            list: [
                {
                    title: '订单服务费用',
                    desc: '订单 T1002839 完成结算',
                    time: '2026-02-03 14:30',
                    amount: '20.00',
                    type: 'income',
                    tag: '订单'
                },
                {
                    title: '奖励费用',
                    desc: '早高峰冲单奖励',
                    time: '2026-02-03 10:00',
                    amount: '15.00',
                    type: 'income',
                    tag: '奖励'
                },
                {
                    title: '惩罚金额',
                    desc: '超时送达扣款',
                    time: '2026-02-02 18:20',
                    amount: '-10.00',
                    type: 'expense',
                    tag: '惩罚'
                },
                {
                    title: '后台转账',
                    desc: '2026年1月工资发放',
                    time: '2026-02-01 09:00',
                    amount: '3500.00',
                    type: 'income',
                    tag: '工资'
                }
            ]
        }
    },
    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 [];
        }
    },
    methods: {
        navBack() {
            uni.navigateBack();
        },
        navToBill() {
            uni.navigateTo({
                url: '/pages/mine/wallet/bill'
            });
        },
        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>