ui end

2023-01-28 15:25:55 +08:00
parent 3a134326e7
commit 13cf902ce2
9 changed files with 259 additions and 46 deletions
--- a/app.wxss
+++ b/app.wxss
@@ -76,6 +76,12 @@ t-cell {
 .padding_box {
  padding: 0 20rpx;
 }
+.center_box {
+  width: 100%;
+  margin-top: 20rpx;
+  display: flex;
+  justify-content: center;
+}
 .bottom_box {
  width: 100%;
  position: absolute;
--- a/pages/account/detail/index.js
+++ b/pages/account/detail/index.js
@@ -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) {
--- a/pages/account/detail/index.wxml
+++ b/pages/account/detail/index.wxml
@@ -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}}"
        />
--- a/pages/chart/group/index.js
+++ b/pages/chart/group/index.js
@@ -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) {

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