Files
quinn-accounts/pages/chart/index.wxml
2023-01-09 10:20:17 +08:00

87 lines
4.0 KiB
Plaintext

<view class="padding_box">
<t-divider content="{{showDate}}" data-mode="showDate" bind:tap="showPicker"/>
</view>
<t-tabs defaultValue="{{0}}" t-class="custom-tabs" theme="card">
<t-tab-panel label="总览" value="0" class="tab_content">
<view class="space_box font_big">
<text class="t-color-expend">支出\n {{1203.00}}</text>
<text class="t-color-income">收入\n {{1203.00}}</text>
<text class="t-color-transfer">转账\n {{1203.00}}</text>
<text class="t-color-repayment">还款\n {{1203.00}}</text>
</view>
<view class="padding_box">
<t-divider dashed content="账单明细"/>
<view wx:if="{{accountList != null && accountList.length > 0}}">
<t-cell wx:for="{{accountList}}" wx:key="index"
title="{{item.title}}"
description="{{item.dateTime}} • {{item.from}}"
align="top"
image="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png"
note="{{item.money}}"
class="t-cell-{{item.type}}"
/>
</view>
<view wx:else class="empty-view" >
<t-empty icon="chart-bubble" description="今日还未记账" />
</view>
</view>
</t-tab-panel>
<t-tab-panel label="支出分类" value="1">
<view class="chart-box">
<ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ecPie }}"></ec-canvas>
<view class="padding_box">
<t-progress label="数码产品55%" theme="plump" percentage="{{55}}" status="{{55 > 80 ? 'error' : 'success' }}" />
<t-divider/>
<t-progress label="零食20%" theme="plump" percentage="{{20}}" status="{{81 > 80 ? 'error' : 'success' }}" />
<t-divider/>
<t-progress label="娱乐10%" theme="plump" percentage="{{10}}" status="{{10 > 80 ? 'error' : 'success' }}" />
<t-divider/>
<t-progress label="房贷20%" theme="plump" percentage="{{20}}" status="{{20 > 80 ? 'error' : 'success' }}" />
<t-divider/>
<t-progress label="房租38%" theme="plump" percentage="{{38}}" status="{{38 > 80 ? 'error' : 'success' }}" />
<t-divider/>
</view>
</view>
</t-tab-panel>
<t-tab-panel label="趋势" value="2">
<view class="chart-box">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ecLine }}"></ec-canvas>
</view>
</t-tab-panel>
<t-tab-panel label="排行" value="3">
<t-divider/>
<t-tabs defaultValue="{{0}}" t-class="custom-tabs" theme="card">
<t-tab-panel label="支出" value="0">
<t-divider/>
<view class="test">
<t-progress label="数码产品45%" theme="plump" percentage="{{45}}" status="error" />
<t-progress label="房租25%" theme="plump" percentage="{{25}}" status="error" />
<t-progress label="干饭10%" theme="plump" percentage="{{15}}" status="error" />
</view>
</t-tab-panel>
<t-tab-panel label="收入" value="1">
<t-divider/>
<view class="test">
<t-progress label="工资收入80%" theme="plump" percentage="{{80}}" status="success" />
<t-progress label="捡钱20%" theme="plump" percentage="{{20}}" status="success" />
</view>
</t-tab-panel>
</t-tabs>
</t-tab-panel>
</t-tabs>
<view class="placeholder"/>
<foot-tab value="label_2"/>
<!-- 年月 -->
<t-date-time-picker
title="选择日期"
visible="{{showDateVisible}}"
mode="month"
value="{{showDate}}"
format="YYYY-MM"
bindchange="onConfirm"
bindpick="onColumnChange"
bindcancel="hidePicker"
start="{{start}}"
end="{{end}}"
/>