You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
3.3 KiB
88 lines
3.3 KiB
<!-- <view class="container"> -->
|
|
<!-- 月份选择器 -->
|
|
<view class="month-picker">
|
|
<picker mode="date" fields="month" value="{{selectedMonth}}" bindchange="onMonthChange">
|
|
<view class="picker-view">
|
|
<text class="iconfont icon-calendar"></text>
|
|
<text>{{selectedMonthText}}</text>
|
|
<text class="iconfont icon-arrow-down"></text>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<!-- 收支概览 -->
|
|
<view class="summary-card">
|
|
<view class="summary-item">
|
|
<text class="summary-label">收入</text>
|
|
<text class="summary-amount income">¥ {{summary.income}}</text>
|
|
</view>
|
|
<view class="summary-item">
|
|
<text class="summary-label">支出</text>
|
|
<text class="summary-amount expense">¥ {{summary.expense}}</text>
|
|
</view>
|
|
<view class="summary-item">
|
|
<text class="summary-label">结余</text>
|
|
<text class="summary-amount balance">¥ {{summary.balance}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 分类统计 -->
|
|
<view class="category-stats">
|
|
<view class="section-header">
|
|
<text class="section-title">分类统计</text>
|
|
<view class="type-tabs">
|
|
<view class="tab {{activeType === 'expense' ? 'active' : ''}}" bindtap="setActiveType" data-type="expense">支出</view>
|
|
<view class="tab {{activeType === 'income' ? 'active' : ''}}" bindtap="setActiveType" data-type="income">收入</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 饼图容器 -->
|
|
<view class="chart-container">
|
|
<canvas canvas-id="pieChart" class="pie-chart"></canvas>
|
|
</view>
|
|
|
|
<!-- 分类详情 -->
|
|
<view class="category-details">
|
|
<view wx:for="{{categoryStats}}" wx:key="categoryId" class="category-detail-item">
|
|
<view class="category-info">
|
|
<view class="category-color" style="background-color: {{item.color}};"></view>
|
|
<text class="category-name">{{item.categoryName}}</text>
|
|
</view>
|
|
<view class="category-amount">
|
|
<text>¥ {{item.amount}}</text>
|
|
<text class="category-percentage">{{item.percentage}}%</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view wx:if="{{categoryStats.length === 0}}" class="no-data">
|
|
<text>本月暂无{{activeType === 'expense' ? '支出' : '收入'}}记录</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 记录列表 -->
|
|
<view class="records-section">
|
|
<view class="section-header">
|
|
<text class="section-title">明细记录</text>
|
|
</view>
|
|
|
|
<view class="records-list">
|
|
<view wx:for="{{monthRecords}}" wx:key="id" class="record-item">
|
|
<view class="record-icon {{item.type === 'income' ? 'income-icon' : 'expense-icon'}}">
|
|
<text class="iconfont icon-{{item.categoryIcon}}"></text>
|
|
</view>
|
|
<view class="record-details">
|
|
<view class="record-title">{{item.categoryName}}</view>
|
|
<view class="record-note">{{item.note || '无备注'}}</view>
|
|
<view class="record-date">{{formatDate(item.date)}}</view>
|
|
</view>
|
|
<view class="record-amount {{item.type === 'income' ? 'income' : 'expense'}}">
|
|
{{item.type === 'income' ? '+' : '-'}}¥ {{item.amount}}
|
|
</view>
|
|
</view>
|
|
|
|
<view wx:if="{{monthRecords.length === 0}}" class="no-records">
|
|
<text>本月暂无记录</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|