账单报表

2023-02-10 18:02:59 +08:00
parent 87a1b4ce18
commit 4bb155021c
10 changed files with 165 additions and 253 deletions
--- a/pages/chart/group/index.js
+++ b/pages/chart/group/index.js
@@ -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})
+            }
+        })
    }
 });
--- a/pages/chart/group/index.wxml
+++ b/pages/chart/group/index.wxml
@@ -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>
--- a/pages/chart/index.js
+++ b/pages/chart/index.js
@@ -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})
    }

 });
--- a/pages/chart/index.wxml
+++ b/pages/chart/index.wxml
@@ -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>
--- a/pages/chart/index.wxss
+++ b/pages/chart/index.wxss
@@ -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%;