book-hi/pages-mine/pages/wallet.vue

<template>
    <view class="wallet-page">
        <!-- 余额卡片 -->
        <view class="balance-card">
            <view class="card-header">
                <text>我的余额</text>
                <view class="detail-link" @click="goToDetail">
                    提现明细
                    <u-icon name="arrow-right" color="#FFFFFF" size="26" top="4rpx"></u-icon>
                </view>
            </view>

            <view class="amount flex-c">
                <text class="number">¥ 30.00</text>
            </view>

            <view class="balance-info  flex-c">
                (可用余额¥20.00 提现中¥10.00)
            </view>

            <view class="flex-c">
                <view class="withdraw-btn" @click="handleWithdraw">
                    提现
                </view>
            </view>
        </view>

        <!-- 余额明细列表 -->
        <view class="detail-section">
            <view class="section-header">
                <text>余额明细</text>
                <view class="filter" @click="toggleFilter">
                    分类
                    <u-icon name="arrow-down" color="#333" size="26"></u-icon>
                </view>
            </view>

            <view class="detail-list">
                <view class="detail-item" v-for="(item, index) in detailList" :key="index">
                    <view class="item-left">
                        <text class="title">{{ item.title }}</text>
                        <text class="time">{{ item.time }}</text>
                    </view>
                    <view class="item-right">
                        <text :class="['amount', item.amount > 0 ? 'income' : 'expense']">
                            {{ item.amount > 0 ? '+' : '-' }}{{ Math.abs(item.amount).toFixed(2) }}
                        </text>
                        <text class="status">{{ item.status }}</text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 分类选择弹窗 -->
        <category-popup :show.sync="showCategoryPopup" @confirm="onCategoryConfirm"></category-popup>
    </view>
</template>

<script>
import CategoryPopup from '../components/category-popup.vue'
export default {
    components: {
        CategoryPopup
    },
    data() {
        return {
            showCategoryPopup: false,
            detailList: [{
                title: '微信提现',
                time: '2021.2.25 10:48:32',
                amount: -36.00,
                status: '提现中'
            },
            {
                title: '微信提现',
                time: '2021.2.25 10:48:32',
                amount: -36.00,
                status: '提现完成'
            },
            {
                title: '微信提现',
                time: '2021.2.25 10:48:32',
                amount: -36.00,
                status: '提现完成'
            },
            {
                title: '合伙人收入',
                time: '2021.2.25 10:48:32',
                amount: 100.00,
                status: ''
            }
            ]
        }
    },
    methods: {
        onCategoryConfirm(selectedCategories) {
            console.log('选中的分类：', selectedCategories)
            // 这里处理分类筛选逻辑
        },
        goToDetail() {
            uni.navigateTo({
                url: '/pages-mine/pages/withdraw-detail'
            })
        },
        handleWithdraw() {
            uni.navigateTo({
                url: '/pages-mine/pages/withdraw'
            })
        },
        toggleFilter() {
            // 实现筛选功能
            this.showCategoryPopup = !this.showCategoryPopup
        }
    }
}
</script>

<style lang="scss" scoped>
.wallet-page {
    min-height: 100vh;
    background: #F5F5F5;
    padding: 10rpx 30rpx;
    box-sizing: border-box;

    .balance-card {
        background: #38C148;
        border-radius: 20rpx;
        padding: 30rpx 40rpx;
        color: #FFFFFF;

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 28rpx;

            .detail-link {
                display: flex;
                align-items: center;
                opacity: 0.9;
            }
        }

        .amount {
            margin: 40rpx 0 20rpx;

            .symbol {
                font-size: 40rpx;
                margin-right: 8rpx;
            }

            .number {
                font-size: 80rpx;
                font-weight: 500;
            }
        }

        .balance-info {
            font-size: 26rpx;
            opacity: 0.9;
        }

        .withdraw-btn {
            margin-top: 40rpx;
            height: 60rpx;
            line-height: 60rpx;
            text-align: center;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 14rpx;
            font-size: 28rpx;
            width: 200rpx;
        }
    }

    .detail-section {
        background: #FFFFFF;
        border-radius: 20rpx;
        margin-top: 20rpx;
        padding: 0 30rpx;

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100rpx;
            font-size: 30rpx;
            color: #333;
            border-bottom: 1px solid #EEEEEE;

            .filter {
                display: flex;
                align-items: center;
                color: #666;
                font-size: 28rpx;
                margin-right: 8rpx;
            }
        }

        .detail-list {
            .detail-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 30rpx 0;
                border-bottom: 1px solid #EEEEEE;

                &:last-child {
                    border-bottom: none;
                }

                .item-left {
                    .title {
                        font-size: 28rpx;
                        color: #333;
                        margin-bottom: 10rpx;
                        display: block;
                    }

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

                .item-right {
                    text-align: right;

                    .amount {
                        display: block;
                        font-size: 32rpx;
                        margin-bottom: 10rpx;
                        font-weight: 500;

                        &.income {
                            color: #FF5B5B;
                        }

                        &.expense {
                            color: #38C148;
                        }
                    }

                    .status {
                        font-size: 24rpx;
                        color: #999;
                    }
                }
            }
        }
    }
}
</style>