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.
114 lines
4.0 KiB
114 lines
4.0 KiB
<!-- 时间维度切换 -->
|
|
<view class="time-filter">
|
|
<view class="time-btns">
|
|
<button
|
|
class="time-btn {{currentTimeType === 'year' ? 'time-btn-active' : ''}}"
|
|
bindtap="changeTimeType"
|
|
data-type="year"
|
|
>
|
|
按年
|
|
</button>
|
|
<button
|
|
class="time-btn {{currentTimeType === 'month' ? 'time-btn-active' : ''}}"
|
|
bindtap="changeTimeType"
|
|
data-type="month"
|
|
>
|
|
按月
|
|
</button>
|
|
</view>
|
|
</view>
|
|
<!-- 月份选择器 -->
|
|
<!-- <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="current-period">
|
|
<view class="period-container">
|
|
<button class="period-btn" bindtap="prevPeriod">
|
|
<image src="/images/left-arrow.png" class="arrow-icon"></image>
|
|
</button>
|
|
<view class="period-text">{{currentPeriodText}}</view>
|
|
<button class="period-btn" bindtap="nextPeriod">
|
|
<image src="/images/right-arrow.png" class="arrow-icon"></image>
|
|
</button>
|
|
</view>
|
|
</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>
|
|
|
|
<!-- 分类统计 -->
|
|
<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 === 'in' ? 'income-icon' : 'expense-icon'}}">
|
|
<text class="iconfont icon-{{item.categoryIcon}}"></text>
|
|
</view>
|
|
<view class="record-details">
|
|
<view class="record-title">{{item.classificationName}}</view>
|
|
<view class="record-note">{{item.remark || '无备注'}}</view>
|
|
<view class="record-date">{{item.useDate}}</view>
|
|
</view>
|
|
<view class="record-amount {{item.type === 'in' ? 'income' : 'expense'}}">
|
|
{{item.type === 'in' ? '+' : '-'}}¥ {{item.money}}
|
|
</view>
|
|
</view>
|
|
|
|
<view wx:if="{{monthRecords.length === 0}}" class="no-records">
|
|
<text>本月暂无记录</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|