ss_dc_wechat_mini_program/pages/xfjl/index.vue

<template>
    <view class="xfjl-page">
       
        <!-- 搜索按钮区域 -->
        <view class="search-container right">
            
            <ss-search-button
                text="充值"
                pre-icon="icon-jiahao"
                @click="handleAddRecord"
            />
        </view>

        

        <!-- 消费记录列表区域 -->
        <view class="record-list">
            <!-- 使用卡片组件展示消费记录 -->
            <ss-card 
                v-for="record in records" 
                :key="record.id" 
                @click="handleCardClick(record)"
            >
                <view class="record-item">
                    <view class="record-header">
                        <text class="amount" :class="record.type">{{ record.amount > 0 ? '+' : '' }}¥ {{ record.amount }}</text>
                        <text class="balance">【余额: {{ record.balance }}】</text>
                    </view>
                    <view class="record-info">
                        <view class="time">{{ record.time }}</view>
                        <view class="location">{{ record.location }}</view>
                        <view class="order-no">{{ record.orderNo }}</view>
                    </view>
                </view>
            </ss-card>
        </view>
    </view>
</template>

<script setup>
import SsSearchButton from '@/components/SsSearchButton/index.vue'
import Icon from '@/components/icon/index.vue'
import SsCard from '@/components/SsCard/index.vue'

const handleAddRecord = () => {
    console.log('点击了新增消费记录')
    uni.showToast({
        title: '新增消费记录',
        icon: 'none'
    })
}

const handleExport = () => {
    console.log('点击了导出记录')
    uni.showToast({
        title: '导出记录功能',
        icon: 'none'
    })
}

// 模拟数据
const records = [
    {
        id: 'XFJ-001-20250612122200001',
        type: 'expense', // expense: 支出, income: 收入
        amount: -10,
        balance: 120,
        time: '2025年6月12日 12:22',
        location: '第一饭堂001消费机',
        orderNo: 'XFJ-001-20250612122200001'
    },
    {
        id: 'XFJ-001-20250612122200002',
        type: 'income',
        amount: 100,
        balance: 120,
        time: '2025年6月12日 12:22',
        location: '充值',
        orderNo: 'XFJ-001-20250612122200001'
    },
    {
        id: 'XFJ-001-20250612122200003',
        type: 'expense',
        amount: -15,
        balance: 20,
        time: '2025年6月12日 11:35',
        location: '第二饭堂002消费机',
        orderNo: 'XFJ-001-20250612113500001'
    }
]

const handleCardClick = (record) => {
    console.log('点击了记录:', record)
    uni.showToast({
        title: `点击了${record.type === 'expense' ? '支出' : '充值'}记录`,
        icon: 'none'
    })
}
</script>

<style lang="scss" scoped>
.xfjl-page {
    padding: 20rpx;
    background-color: #f5f5f5;
    min-height: 100vh;
}

.page-header {
    text-align: center;
    margin-bottom: 40rpx;
}

.page-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
}

.search-container {
    display: flex;
    margin: 1rem 0;
    gap: 0.5rem;
  
    &.right {
        justify-content: flex-end;
    }
}

.record-list {
    margin-top: 40rpx;

    .record-item {
        .record-header {
            display: flex;
            align-items: center;
            justify-content:flex-start;
            gap: 20rpx;
            margin-bottom: 20rpx;

            .amount {
                font-size: 36rpx;
                font-weight: bold;
                
                &.expense {
                    color: #ff4d4f;
                }
                
                &.income {
                    color: #52c41a;
                }
            }

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

        .record-info {
            font-size: 24rpx;
            color: #666;
            
            .time {
                margin-bottom: 8rpx;
            }
            
            .location {
                margin-bottom: 8rpx;
            }
            
            .order-no {
                color: #999;
                font-size: 22rpx;
            }
        }
    }
}
</style>