账单报表

This commit is contained in:
limqhz
2023-02-10 18:02:59 +08:00
parent 87a1b4ce18
commit 4bb155021c
10 changed files with 165 additions and 253 deletions

View File

@@ -20,16 +20,16 @@ page {
--td-dialog-title-color: none;
}
/* 记账类型颜色 */
.t-color-income {
.t-color-INCOME {
color: red;
}
.t-color-expend {
.t-color-EXPEND {
color: green;
}
.t-color-transfer {
color: blue;
.t-color-TRANSFER {
color: orange;
}
.t-color-repayment {
.t-color-REPAYMENT {
color: yellow;
}
/* 记账类型颜色 */
@@ -43,7 +43,7 @@ t-cell {
--td-cell-note-color: green;
}
.t-cell-TRANSFER {
--td-cell-note-color: blue;
--td-cell-note-color: orange;
}
.t-cell-REPAYMENT {
--td-cell-note-color: yellow;
@@ -78,7 +78,7 @@ t-cell {
}
.center_box {
width: 100%;
margin-top: 20rpx;
margin-top: 10rpx;
display: flex;
justify-content: center;
}

View File

@@ -11,8 +11,8 @@
</view>
</view>
<view class="space_box_no_padding font_big">
<text class="t-color-expend">支出{{expendBalance}}</text>
<text class="t-color-income">收入{{incomeBalance}}</text>
<text class="t-color-EXPEND">支出{{expendBalance}}</text>
<text class="t-color-INCOME">收入{{incomeBalance}}</text>
</view>
<view class="padding_box">
<t-divider content="{{dateRangeText}}" bind:tap="handleCalendar"/>

View File

@@ -3,7 +3,7 @@
<image src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-actionsheet.png"/>
账单金额
</view>
<view class="{{money > 0 ? 't-color-income' : 't-color-expend'}} font_large">{{money > 0 ? "+" + money : money}}</view>
<view class="{{'t-color-' + billType}} font_large">{{money}}</view>
</view>
<view class="padding_box">
<t-divider dashed/>

View File

@@ -1,17 +1,23 @@
const app = getApp()
Page({
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"},
]
expendID: -1,
rangeDate: app.$utils.formatDateMonth(new Date()),
sumMoney: 0,
billList: []
},
onLoad: function (options) {
let expendID = options.expendId
let rangeDate = options.rangeDate
this.setData({expendID,rangeDate})
},
onShow() {
app.$api.listBillGroupDetail({expendId:this.data.expendID,rangeDate:this.data.rangeDate}).then(res =>{
if (res.data){
let sumMoney = res.data.sumMoney
let billList = res.data.billList
this.setData({sumMoney,billList})
}
})
}
});

View File

@@ -1,22 +1,22 @@
<view class="main_look">
<view class="look_content">
<view class="pay_look">
<view class="inline_box font_big">{{typeName}}分类总计</view>
<view class="inline_box font_big">分类总计</view>
</view>
<view class="pay_look">
<text class="center_look font_big">{{ 89310.23 }}</text>
<text class="center_look font_big">{{ sumMoney }}</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}}"
title="{{item.moneyName}}"
description="{{item.date}} • {{item.accountName}}"
align="top"
image="/image/bill/5.png"
image="{{item.moneyIcon}}"
note="{{item.money}}"
class="t-cell-{{item.type}}"
class="t-cell-{{item.billType}}"
url="{{'/pages/bill/index?id=' + item.id}}"
/>
</t-cell-group>

View File

@@ -1,5 +1,11 @@
import * as echarts from '../../ec-canvas/echarts';
let pieData = [];
let line1Data = [];
let line2Data = [];
function initPieChart(canvas, width, height, dpr) {
if (pieData.length <= 0){
return;
}
const chart = echarts.init(canvas, null, {
width: 400,
height: 250,
@@ -17,29 +23,14 @@ function initPieChart(canvas, width, height, dpr) {
type: 'pie',
center: ['50%', '50%'],
radius: ['0%', '70%'],
data: [{
value: 55,
name: '数码产品',
id: 1
}, {
value: 20,
name: '零食'
}, {
value: 10,
name: '娱乐'
}, {
value: 20,
name: '房贷'
}, {
value: 38,
name: '房租'
}]
data: pieData
}]
};
chart.setOption(option);
chart.on('click', 'series.pie', function(param) {
console.log(param);
wx.navigateTo({
url: "./group/index?type=1"
url: "./group/index?expendId=" + param.data.sId + '&rangeDate=' + param.data.sDate
})
});
return chart;
@@ -52,12 +43,7 @@ function initLineChart1(canvas, width, height, dpr) {
devicePixelRatio: dpr // new
});
canvas.setChart(chart);
var option = {
title: {
text: '的撒打',
left: 'center'
},
legend: {
data: ['支出', '收入', '转账','还款'],
top: 20,
@@ -75,8 +61,7 @@ function initLineChart1(canvas, width, height, dpr) {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['第一周', '第二周', '第三周', '第四周'],
// show: false
show: false
},
yAxis: {
x: 'center',
@@ -86,13 +71,12 @@ function initLineChart1(canvas, width, height, dpr) {
type: 'dashed'
}
}
// show: false
},
series: [{
name: '支出',
type: 'line',
smooth: true,
data: [18, 36, 65, 30, 78, 40, 33]
data: [18, 36, 65, 30, 78, 40, 33,123,123,12,23,123,123,123,123,213,23,21,12,31,3,12,32,31,3,31,5,4324,1,74,123,43]
}, {
name: '收入',
type: 'line',
@@ -120,12 +104,7 @@ function initLineChart2(canvas, width, height, dpr) {
devicePixelRatio: dpr // new
});
canvas.setChart(chart);
var option = {
title: {
text: '的撒打',
left: 'center'
},
legend: {
data: ['支出', '收入', '转账','还款'],
top: 20,
@@ -143,8 +122,7 @@ function initLineChart2(canvas, width, height, dpr) {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
// show: false
show: false
},
yAxis: {
x: 'center',
@@ -194,53 +172,9 @@ Page({
sumIncome: 0,
sumTransfer: 0,
sumRepayment: 0,
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"},
],
payTypeList: [],
incomeList : [],
payList : [],
ecPie: {
onInit: initPieChart
},
@@ -251,6 +185,12 @@ Page({
onInit: initLineChart2
}
},
onLoad: function (options) {
if (options.rangeDate){
let showDate = options.rangeDate
this.setData({showDate})
}
},
onShow: function () {
this.updateView();
if (wx.canIUse('hideHomeButton')) {
@@ -268,6 +208,35 @@ Page({
this.setData({accountList,sumExpend,sumIncome,sumTransfer,sumRepayment})
}
})
app.$api.listExpendOrderBills({'rangeDate':this.data.showDate}).then(res => {
if (res){
let payList = res.data
this.setData({payList})
}
})
app.$api.listIncomeOrderBills({'rangeDate':this.data.showDate}).then(res => {
if (res){
let incomeList = res.data
this.setData({incomeList})
}
})
app.$api.listBillGroup({'rangeDate':this.data.showDate}).then(res => {
if (res){
let payTypeList = res.data
pieData = [];
if (payTypeList){
payTypeList.forEach(x => {
pieData = pieData.concat({
sId: x.expendId,
sDate: this.data.showDate,
value: x.progress,
name: x.moneyName
});
})
}
this.setData({payTypeList})
}
})
},
showPicker(e) {
const { mode } = e.currentTarget.dataset;
@@ -289,8 +258,9 @@ Page({
[mode]: value
// [`${mode}Text`]: value,
});
this.updateView()
// this.updateView()
this.hidePicker()
wx.redirectTo({url:"./index?rangeDate=" + this.data.showDate})
}
});

View File

@@ -4,10 +4,10 @@
<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 {{sumExpend}}</text>
<text class="t-color-income">收入\n {{sumIncome}}</text>
<text class="t-color-transfer">转账\n {{sumTransfer}}</text>
<text class="t-color-repayment">还款\n {{sumRepayment}}</text>
<text class="t-color-EXPEND">支出\n {{sumExpend}}</text>
<text class="t-color-INCOME">收入\n {{sumIncome}}</text>
<text class="t-color-TRANSFER">转账\n {{sumTransfer}}</text>
<text class="t-color-REPAYMENT">还款\n {{sumRepayment}}</text>
</view>
<view class="padding_box">
<t-divider dashed content="账单明细"/>
@@ -35,13 +35,12 @@
<view wx:if="{{payTypeList != null && payTypeList.length > 0}}">
<t-cell-group theme="card">
<t-cell wx:for="{{payTypeList}}" wx:key="index"
title="{{item.title}}"
title="{{item.moneyName}}"
description="{{item.progress}}%"
align="top"
image="/image/bill/8.png"
image="{{item.moneyIcon}}"
note="{{item.money}}"
class="t-cell-{{item.type}}"
url="{{'/pages/chart/group/index?type=' + item.type}}"
url="{{'/pages/chart/group/index?expendId=' + item.expendId + '&rangeDate=' + showDate}}"
/>
</t-cell-group>
</view>
@@ -50,12 +49,13 @@
</t-tab-panel>
<t-tab-panel label="趋势" value="2">
<view class="chart-box">
<view class="center_box">月</view>
<view class="chart_title">月</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>
<view class="chart-title2">近6月</view>
<ec-canvas id="mychart-dom-line2" canvas-id="mychart-line2" ec="{{ ecLine2 }}"></ec-canvas>
<view class="chart-chart-bottom"></view>
</view>
</t-tab-panel>
<t-tab-panel label="排行" value="3">
@@ -65,12 +65,12 @@
<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}}"
title="{{item.moneyName}}"
description="{{item.date}} • {{item.accountName}}"
align="top"
image="/image/bill/2.png"
image="{{item.moneyIcon}}"
note="{{item.money}}"
class="t-cell-{{item.type}}"
class="t-cell-{{item.billType}}"
url="{{'/pages/bill/index?id=' + item.id}}"
/>
</t-cell-group>
@@ -81,12 +81,12 @@
<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}}"
title="{{item.moneyName}}"
description="{{item.date}} • {{item.accountName}}"
align="top"
image="/image/bill/4.png"
image="{{item.moneyIcon}}"
note="{{item.money}}"
class="t-cell-{{item.type}}"
class="t-cell-{{item.billType}}"
url="{{'/pages/bill/index?id=' + item.id}}"
/>
</t-cell-group>

View File

@@ -2,20 +2,29 @@
width:100%;
height:500rpx;
position: absolute;
top: 100rpx;
top: 78rpx;
bottom: 0;
left: 0;
left: -20rpx;
right: 0;
}
.chart-box2 {
width:100%;
height:500rpx;
position: absolute;
top: 650rpx;
bottom: 0;
left: 0;
top: 498rpx;
left: -20rpx;
right: 0;
}
.chart_title{
margin-top: 18rpx;
margin-left: 20rpx;
color: orange;
}
.chart-title2{
margin-top: 50rpx;
margin-left: 20rpx;
color: orange;
}
ec-canvas {
width: 100%;
height: 100%;

View File

@@ -28,8 +28,8 @@ Component({
data: {
list: [
{ value: 'label_1', icon: 'home', ariaLabel: '首页' },
{ value: 'label_2', icon: 'app', ariaLabel: '统计' },
{ value: 'label_3', icon: 'chat', ariaLabel: '资产' },
{ value: 'label_2', icon: 'chart', ariaLabel: '统计' },
{ value: 'label_3', icon: 'creditcard', ariaLabel: '资产' },
{ value: 'label_4', icon: 'user', ariaLabel: '我的' },
],
},
@@ -60,21 +60,7 @@ Component({
})
}
},
checkLogin(){
// let userInfo = wx.getStorageSync('userInfo');
// let token = wx.getStorageSync('userToken');
// if (userInfo && token){
// return true;
// }else {
// return false;
// }
},
onChange(event) {
// if (!this.checkLogin()){
// wx.redirectTo({url:"/pages/login/index"});
// }
this.setIconData(event.detail.value);
},
}

View File

@@ -51,42 +51,23 @@ export function fetchPost(url, params, needToken, multiple) {
console.log(res);
if (response.statusCode == 200) {
if (res.err_code == 0) {
// wx.hideLoading();
wx.hideLoading();
resolve(res);
} else {
if (res.err_code == 10003 || res.err_code == 10006 || res.err_code == 20006) {
// wx.removeStorageSync('accessToken');
// wx.redirectTo({
// url: '/pages/login/index',
// })
isUnLogin();
reject(res);
return;
} else if (res.err_code == 20005) {
wx.removeStorageSync('accessToken');
wx.removeStorageSync('history');
wx.hideLoading();
wx.showToast({
title: res.err_msg,
icon: 'none',
duration: 2000
})
reject(res);
} else {
wx.hideLoading();
wx.showToast({
title: res.err_msg,
icon: 'none',
duration: 2000
})
reject(res);
}
wx.hideLoading();
wx.showToast({
title: res.data.err_msg,
icon: 'none',
duration: 2000
})
reject(res);
}
} else {
wx.hideLoading();
wx.showToast({
title: '网络错误',
title: '服务器异常',
icon: 'none',
duration: 4000
})
reject(response);
}
@@ -97,6 +78,7 @@ export function fetchPost(url, params, needToken, multiple) {
wx.showToast({
title: '网络错误',
icon: 'none',
duration: 4000
})
reject(response);
},
@@ -119,35 +101,13 @@ export function fetchPost(url, params, needToken, multiple) {
wx.hideLoading();
resolve(res.data);
} else {
if (res.data.err_code == 10003 || res.data.err_code == 10006 || res.data.err_code == 20006) {
// wx.removeStorageSync('accessToken');
// wx.redirectTo({
// url: '/pages/login/index',
// })
reject(res);
return;
} else if (res.data.err_code == 30022) {
reject(res);
} else if (res.data.err_code == 20005) {
wx.removeStorageSync('accessToken');
wx.removeStorageSync('history');
wx.hideLoading();
wx.showToast({
title: res.data.err_msg,
icon: 'none',
duration: 2000
})
reject(res);
} else {
wx.hideLoading();
wx.showToast({
title: res.data.err_msg,
icon: 'none',
duration: 2000
})
reject(res);
}
wx.hideLoading();
wx.showToast({
title: res.data.err_msg,
icon: 'none',
duration: 4000
})
reject(res);
}
},
fail: function(res) {
@@ -155,7 +115,7 @@ export function fetchPost(url, params, needToken, multiple) {
wx.showToast({
title: '网络错误',
icon: 'none',
duration: 2000
duration: 4000
})
reject(res);
@@ -187,37 +147,15 @@ export function fetchGet(url, params, needToken) {
wx.hideLoading();
resolve(res.data);
} else {
if (res.data.err_code == 10003 || res.data.err_code == 10006 || res.data.err_code == 20006) {
// isUnLogin();
reject(res);
return;
} else if (res.data.err_code == 20005) {
wx.removeStorageSync('accessToken');
wx.removeStorageSync('history');
wx.hideLoading();
wx.showToast({
title: res.data.err_msg,
icon: 'none',
duration: 2000
})
reject(res);
} else {
wx.hideLoading();
wx.showToast({
title: res.data.err_msg,
icon: 'none',
duration: 2000
})
reject(res);
}
reject(res);
}
} else {
wx.hideLoading();
reject(res)
wx.showToast({
title: '网络错误',
title: '服务器异常',
icon: 'none',
duration: 2000
duration: 4000
})
}
},
@@ -227,7 +165,7 @@ export function fetchGet(url, params, needToken) {
wx.showToast({
title: '网络错误',
icon: 'none',
duration: 2000
duration: 4000
})
},
})
@@ -255,19 +193,6 @@ export default {
return fetchPost('/user/settings/del/' + params,null,true,false);
},
getSettings() {
// let result;
// if (type == 'INCOME_SETTING'){
// result = wx.getStorageSync('INCOME_SETTING');
// }
// if (type == 'EXPEND_SETTING'){
// result = wx.getStorageSync('INCOME_SETTING');
// }
// if (type == 'ACCOUNT_SETTING'){
// result = wx.getStorageSync('INCOME_SETTING');
// }
// if (result){
// return result;
// }
return fetchPost('/user/settings', null, true, false);
},
@@ -286,12 +211,6 @@ export default {
listBillsToday() {
return fetchPost('/user/bills/today', null,true,false);
},
listBillByAMonth(params){
return fetchPost('/user/bills/month' ,params,true,false);
},
listBillByAccount(params){
return fetchPost('/user/bills/account' ,params,true,false);
},
editBill(params) {
return fetchPost('/user/bill/edit',params,true,false);
},
@@ -312,5 +231,27 @@ export default {
},
editBudget(params){
return fetchPost('/user/budget/edit',params,true,false);
}
},
/**
* 账单统计
*/
listBillByAMonth(params){
return fetchPost('/user/bills/month' ,params,true,false);
},
listExpendOrderBills(params){
return fetchPost('/user/bills/expend/order' ,params,true,false);
},
listIncomeOrderBills(params){
return fetchPost('/user/bills/income/order' ,params,true,false);
},
listBillByAccount(params){
return fetchPost('/user/bills/account' ,params,true,false);
},
listBillGroup(params){
return fetchPost('/user/bills/group/list' ,params,true,false);
},
listBillGroupDetail(params){
return fetchPost('/user/bills/group/detail' ,params,true,false);
},
}