limqsh/quinn-accounts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui end

Browse Source
This commit is contained in:
limqhz
2023-01-28 15:25:55 +08:00
parent 3a134326e7
commit 13cf902ce2
9 changed files with 259 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
pages/account/detail/index.js
View File

@@ -11,15 +11,15 @@ Page({
minDate: new Date().getTime() - 365 * 24 * 60 * 60 * 1000,
maxDate: new Date().getTime(),
incomeList : [
{"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"+4500.00"}
{"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"}
],
payList : [
{"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"-35.00"},
{"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"-35.00"},
{"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"-35.00"},
{"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"-35.00"},
{"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"-35.00"},
{"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"-35.00"}
{"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
{"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
{"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
{"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
{"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
{"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"}
]
},
onLoad: function (options) {

4
pages/account/detail/index.wxml
View File

@@ -25,7 +25,7 @@
description="{{item.dateTime}} • {{item.from}}"
align="top"
image="/image/bill/4.png"
note="{{item.money}}"
note="+{{item.money}}"
class="t-cell-{{item.type}}"
url="{{'/pages/bill/index?id=' + item.id}}"
/>
@@ -37,7 +37,7 @@
description="{{item.dateTime}} • {{item.from}}"
align="top"
image="/image/bill/4.png"
note="{{item.money}}"
note="-{{item.money}}"
class="t-cell-{{item.type}}"
url="{{'/pages/bill/index?id=' + item.id}}"
/>

13
pages/chart/group/index.js
View File

@@ -1,5 +1,16 @@
Page({
data: {},
data: {
typeName: '宠物',
billList: [
{"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
{"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
{"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
{"title":"猫抓板","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
{"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
{"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
{"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
]
},
onLoad: function (options) {
}

23
pages/chart/group/index.wxml
View File

@@ -0,0 +1,23 @@
<view class="main_look">
<view class="look_content">
<view class="pay_look">
<view class="inline_box font_big">{{typeName}}分类总计</view>
</view>
<view class="pay_look">
<text class="center_look font_big">{{ 89310.23 }}</text>
</view>
</view>
</view>
<view wx:if="{{billList != null && billList.length > 0}}">
<t-cell-group theme="card">
<t-cell wx:for="{{billList}}" wx:key="index"
title="{{item.title}}"
description="{{item.dateTime}} • {{item.from}}"
align="top"
image="/image/bill/5.png"
note="{{item.money}}"
class="t-cell-{{item.type}}"
url="{{'/pages/bill/index?id=' + item.id}}"
/>
</t-cell-group>
</view>

19
pages/chart/group/index.wxss
View File

@@ -0,0 +1,19 @@
.main_look {
padding: 0 30rpx;
margin-bottom: 20rpx;
}
.look_content {
display: flex;
flex-direction: column;
justify-content: center;
height: 200rpx;
background-color: #111111;
background-size:100% 100%;
font-weight: bold;
}
.pay_look {
padding: 0 20rpx;
display: flex;
flex-direction: row;
justify-content: center;
}

144
pages/chart/index.js
View File

@@ -38,12 +38,14 @@ function initPieChart(canvas, width, height, dpr) {
};
chart.setOption(option);
chart.on('click', 'series.pie', function(param) {
console.log(param.data)
wx.navigateTo({
url: "./group/index?type=1"
})
});
return chart;
}
function initLineChart(canvas, width, height, dpr) {
function initLineChart1(canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
width: 400,
height: 300,
@@ -73,7 +75,75 @@ function initLineChart(canvas, width, height, dpr) {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
data: ['第一周', '第二周', '第三周', '第四周'],
// show: false
},
yAxis: {
x: 'center',
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
// show: false
},
series: [{
name: '支出',
type: 'line',
smooth: true,
data: [18, 36, 65, 30, 78, 40, 33]
}, {
name: '收入',
type: 'line',
smooth: true,
data: [12, 50, 51, 35, 70, 30, 20]
}, {
name: '转账',
type: 'line',
smooth: true,
data: [10, 30, 31, 50, 40, 20, 10]
}, {
name: '还款',
type: 'line',
smooth: true,
data: [50, 80, 11, 25, 30, 110, 20]
}]
};
chart.setOption(option);
return chart;
}
function initLineChart2(canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
width: 400,
height: 300,
devicePixelRatio: dpr // new
});
canvas.setChart(chart);
var option = {
title: {
text: '的撒打',
left: 'center'
},
legend: {
data: ['支出', '收入', '转账','还款'],
top: 20,
left: 'center',
backgroundColor: 'white',
z: 100
},
grid: {
containLabel: true
},
tooltip: {
show: true,
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
// show: false
},
yAxis: {
@@ -119,14 +189,74 @@ Page({
showDateVisible:false,
showDate:'2022-01',
accountList: [
{"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"id":2,"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"id":2,"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"id":2,"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"id":2,"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"id":2,"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"id":2,"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
],
payTypeList: [
{"title":"数码产品","type":"expend","progress":"80","money":"4500.00"},
{"title":"房贷","type":"expend","progress":"20","money":"35.00"},
{"title":"数码产品","type":"expend","progress":"80","money":"4500.00"},
{"title":"房贷","type":"expend","progress":"20","money":"35.00"},
{"title":"数码产品","type":"expend","progress":"80","money":"4500.00"},
{"title":"房贷","type":"expend","progress":"20","money":"35.00"},
{"title":"数码产品","type":"expend","progress":"80","money":"4500.00"},
{"title":"房贷","type":"expend","progress":"20","money":"35.00"},
{"title":"数码产品","type":"expend","progress":"80","money":"4500.00"},
{"title":"房贷","type":"expend","progress":"20","money":"35.00"},
],
incomeList : [
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
{"id":1,"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"}
],
payList : [
{"id":1,"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
{"id":2,"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
{"id":2,"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
{"id":2,"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
{"id":2,"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
{"id":2,"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
{"id":2,"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
{"id":2,"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
{"id":3,"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
],
ecPie: {
onInit: initPieChart
},
ecLine: {
onInit: initLineChart
ecLine1: {
onInit: initLineChart1
},
ecLine2: {
onInit: initLineChart2
}
},
onLoad: function (options) {

65
pages/chart/index.wxml
View File

@@ -21,6 +21,7 @@
image="/image/bill/4.png"
note="{{item.money}}"
class="t-cell-{{item.type}}"
url="{{'/pages/bill/index?id=' + item.id}}"
/>
</t-cell-group>
</view>
@@ -31,42 +32,64 @@
<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' }}" />
<view class="tabs_crevice"/>
<t-progress label="零食20%" theme="plump" percentage="{{20}}" status="{{81 > 80 ? 'error' : 'success' }}" />
<view class="tabs_crevice"/>
<t-progress label="娱乐10%" theme="plump" percentage="{{10}}" status="{{10 > 80 ? 'error' : 'success' }}" />
<view class="tabs_crevice"/>
<t-progress label="房贷20%" theme="plump" percentage="{{20}}" status="{{20 > 80 ? 'error' : 'success' }}" />
<view class="tabs_crevice"/>
<t-progress label="房租38%" theme="plump" percentage="{{38}}" status="{{38 > 80 ? 'error' : 'success' }}" />
<view wx:if="{{payTypeList != null && payTypeList.length > 0}}">
<t-cell-group theme="card">
<t-cell wx:for="{{payTypeList}}" wx:key="index"
title="{{item.title}}"
description="{{item.progress}}%"
align="top"
image="/image/bill/8.png"
note="{{item.money}}"
class="t-cell-{{item.type}}"
url="{{'/pages/chart/group/index?type=' + item.type}}"
/>
</t-cell-group>
</view>
<view class="placeholder"/>
</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 class="center_box">当月</view>
<ec-canvas id="mychart-dom-line1" canvas-id="mychart-line1" ec="{{ ecLine1 }}"></ec-canvas>
</view>
<view class="chart-box2">
<view class="center_box">近6个月</view>
<ec-canvas id="mychart-dom-line2" canvas-id="mychart-line2" ec="{{ ecLine2 }}"></ec-canvas>
</view>
</t-tab-panel>
<t-tab-panel label="排行" value="3">
<t-tabs defaultValue="{{0}}" t-class="custom-tabs" theme="card">
<t-tab-panel label="支出" value="0">
<view class="tabs_crevice"/>
<view class="padding_box big_progress">
<t-progress label="数码产品45%" theme="plump" percentage="{{45}}" status="error" />
<view class="tabs_crevice"/>
<t-progress label="房租25%" theme="plump" percentage="{{25}}" status="error" />
<view class="tabs_crevice"/>
<t-progress label="干饭10%" theme="plump" percentage="{{15}}" status="error" />
<view wx:if="{{payList != null && payList.length > 0}}">
<t-cell-group theme="card">
<t-cell wx:for="{{payList}}" wx:key="index"
title="{{item.title}}"
description="{{item.dateTime}} • {{item.from}}"
align="top"
image="/image/bill/2.png"
note="{{item.money}}"
class="t-cell-{{item.type}}"
url="{{'/pages/bill/index?id=' + item.id}}"
/>
</t-cell-group>
</view>
</t-tab-panel>
<t-tab-panel label="收入" value="1">
<view class="tabs_crevice"/>
<view class="padding_box big_progress">
<t-progress label="工资收入80%" theme="plump" percentage="{{80}}" status="success" />
<view class="tabs_crevice"/>
<t-progress label="捡钱20%" theme="plump" percentage="{{20}}" status="success" />
<view wx:if="{{incomeList != null && incomeList.length > 0}}">
<t-cell-group theme="card">
<t-cell wx:for="{{incomeList}}" wx:key="index"
title="{{item.title}}"
description="{{item.dateTime}} • {{item.from}}"
align="top"
image="/image/bill/4.png"
note="{{item.money}}"
class="t-cell-{{item.type}}"
url="{{'/pages/bill/index?id=' + item.id}}"
/>
</t-cell-group>
</view>
</t-tab-panel>
</t-tabs>

17
pages/chart/index.wxss
View File

@@ -7,6 +7,15 @@
left: 0;
right: 0;
}
.chart-box2 {
width:100%;
height:500rpx;
position: absolute;
top: 650rpx;
bottom: 0;
left: 0;
right: 0;
}
ec-canvas {
width: 100%;
height: 100%;
@@ -14,11 +23,3 @@ ec-canvas {
.tabs_crevice {
height: 30rpx;
}
.big_progress .t-progress--plump {
height: 100rpx !important;
border-radius: 0 !important;
/*--td-font-size-s: 28rpx;*/
}
.big_progress .t-progress__inner {
--td-radius-round: 0;
}