微信API 账单处理

app.js

@@ -5,10 +5,20 @@ App({
   onLaunch() {
   },
   globalData: {
+    /**
+     * 图标设置
+     */
     INCOME_SETTING: 'INCOME_SETTING',
     EXPEND_SETTING: 'EXPEND_SETTING',
     CASH_SETTING: 'CASH_SETTING',
     OWE_SETTING: 'OWE_SETTING',
+    /**
+     * 账单类型
+     */
+    INCOME: 'INCOME',
+    EXPEND: 'EXPEND',
+    TRANSFER: 'TRANSFER',
+    REPAYMENT: 'REPAYMENT',
     billIcon : [
       {label: '度假', icon: '/image/bill/0.png'},
       {label: '电影', icon: '/image/bill/1.png'},

app.wxss

@@ -36,16 +36,16 @@ page {
 t-cell {
   --td-cell-note-color: orange;
 }
-.t-cell-income {
+.t-cell-INCOME {
   --td-cell-note-color: red;
 }
-.t-cell-expend {
+.t-cell-EXPEND {
   --td-cell-note-color: green;
 }
-.t-cell-transfer {
+.t-cell-TRANSFER {
   --td-cell-note-color: blue;
 }
-.t-cell-repayment {
+.t-cell-REPAYMENT {
   --td-cell-note-color: yellow;
 }
 /* 字体大小 */

pages/bill/add/index.wxml

@@ -1,9 +1,9 @@
 <t-tabs defaultValue="{{0}}" t-class="custom-tabs" theme="card">
     <t-tab-panel label="支出" value="0">
-        <expenses/>
+        <expenses changeType="expend"/>
     </t-tab-panel>
     <t-tab-panel label="收入" value="1">
-        <expenses/>
+        <expenses changeType="income"/>
     </t-tab-panel>
     <t-tab-panel label="转账" value="2">
         <transfer/>

pages/bill/edit/index.js

@@ -1,6 +1,9 @@
 Page({
-    data: {},
+    data: {
+        sid: null
+    },
     onLoad: function (options) {
-
+        let sid = options.id
+        this.setData({sid})
     }
 });

pages/bill/index.js

@@ -1,15 +1,41 @@
+const app = getApp()
 Page({
     data: {
+        sid: null,
         showDeleteConfirm: false,
-        title : "账单名称",
+
-        money : "2000"
+        name : null,
+        money : null,
+        balance : null,
+        date : null,
+        billType: null,
+        moneyName: null,
+        fromAccountName: null,
+        accountName: null,
     },
     onLoad: function (options) {
-
+        let sid = options.id
+        this.setData({sid})
+    },
+    onShow() {
+      app.$api.getBill(this.data.sid).then(res => {
+          if (res.data) {
+              let sid = res.data.id
+              let name = res.data.name
+              let money = res.data.money
+              let balance = res.data.balance
+              let date = res.data.date
+              let billType = res.data.billType
+              let moneyName = res.data.moneyName
+              let fromAccountName = res.data.fromAccountName
+              let accountName = res.data.accountName
+              this.setData({sid,name,money,balance,date,billType,moneyName,fromAccountName,accountName})
+          }
+      })
     },
     editBill() {
         wx.navigateTo({
-            url: './edit/index'
+            url: './edit/index?id=' + this.data.sid
         })
     },
     deleteBill() {
@@ -18,8 +44,12 @@ Page({
         })
     },
     onConfirm (e) {
-        wx.navigateBack();
+        app.$api.deleteBill(this.data.sid).then(res => {
-        this.closeDialog()
+            if (res){
+                wx.navigateBack();
+                this.closeDialog()
+            }
+        })
     },
     closeDialog() {
         this.setData({

pages/bill/index.wxml

@@ -1,23 +1,33 @@
 <view class="space_box view_bg">
     <view class="inline_box font_large">
         <image src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-actionsheet.png"/>
-        {{title}}
+        {{name}}
     </view>
     <view class="{{money > 0 ? 't-color-income' : 't-color-expend'}} font_large">{{money > 0 ? "+" + money : money}}</view>
 </view>
 <view class="padding_box">
     <t-divider dashed/>
 </view>
-<t-cell title="分类" note="收入/薪资收入">
+<t-cell title="分类" note="{{moneyName}}">
     <t-icon name="view-module" slot="left-icon" />
 </t-cell>
-<t-cell title="账户" note="负债账户/信用卡">
+<view wx:if="{{billType == 'TRANSFER' || billType == 'REPAYMENT'}}">
-    <t-icon name="creditcard" slot="left-icon" />
+    <t-cell title="账户" note="{{fromAccountName}}">
-</t-cell>
+        <t-icon name="fromAccount" slot="left-icon" />
-<t-cell title="余额" note="123.43">
+    </t-cell>
-    <t-icon name="root-list" slot="left-icon" />
+    <t-cell title="目标" note="{{accountName}}">
-</t-cell>
+        <t-icon name="account" slot="left-icon" />
-<t-cell title="时间" note="2022/12/32 21:12">
+    </t-cell>
+</view>
+<view wx:if="{{billType == 'INCOME' || billType == 'EXPEND'}}">
+    <t-cell title="账户" note="{{accountName}}">
+        <t-icon name="account" slot="left-icon" />
+    </t-cell>
+    <t-cell title="余额" note="{{balance}}">
+        <t-icon name="root-list" slot="left-icon" />
+    </t-cell>
+</view>
+<t-cell title="时间" note="{{date}}">
     <t-icon name="calendar" slot="left-icon" />
 </t-cell>
 <view class="bottom_box">

pages/bill/types/expenses.js

@@ -1,68 +1,21 @@
 const app = getApp();
 import ActionSheet, { ActionSheetTheme } from '../../../miniprogram_npm/tdesign-miniprogram/action-sheet/index';
 let handler = null;
-const firstGrid = [
+const firstGrid = [];
-    {
+const secondGrid = [];
-        label: '红包',
-        icon: 'star',
-    },
-    {
-        label: '数码',
-        icon: 'star',
-    },
-    {
-        label: '虚拟',
-        icon: 'star',
-    },
-    {
-        label: '游戏',
-        icon: 'star',
-    },
-    {
-        label: '包包',
-        icon: 'star',
-    },
-    {
-        label: '手机',
-        icon: 'refresh',
-    },
-    {
-        label: '话费',
-        icon: 'download',
-    },
-    {
-        label: '技术',
-        icon: 'queue',
-    },
-];
-const secondGrid = [
-    {
-        label: '银行卡',
-        icon: 'star',
-    },
-    {
-        label: '支付宝',
-        icon: 'star',
-    },
-    {
-        label: '微信',
-        icon: 'star',
-    },
-    {
-        label: '信用卡',
-        icon: 'star',
-    }
-];
 Component({
     properties: {
-        /* income & out */
+        billId: {
+            type: String,
+            value: null
+        },
+        /* income & expend */
         changeType: {
             type: String,
             value: 'income'
         },
     },
     data: {
-        price: '10.2',
         priceError: false,
         grid: '',
         outText: '',
@@ -74,6 +27,79 @@ Component({
         // 指定选择区间起始值
         start: '2000-01-01 00:00:00',
         end: '2030-09-09 12:12:12',
+
+        name: null,
+        money: null,
+        billType: null,
+        account: null,
+        moneyType: null,
+        remark: null,
+    },
+    attached(){
+        app.$api.getSettings().then(setting => {
+            if (setting){
+                let expend = setting.data.EXPEND_SETTING;
+                let income = setting.data.INCOME_SETTING;
+                let cash = setting.data.CASH_SETTING;
+                let owe = setting.data.OWE_SETTING;
+                if ('expend' == this.properties.changeType){
+                    expend.forEach(x=>{
+                        firstGrid.fill({
+                            id: x.id,
+                            label: x.name,
+                            icon: x.icon,
+                        });
+                    })
+                }else {
+                    income.forEach(x=>{
+                        firstGrid.fill({
+                            id: x.id,
+                            label: x.name,
+                            icon: x.icon,
+                        });
+                    })
+                }
+                cash.forEach(x=>{
+                    secondGrid.fill({
+                        id: x.id,
+                        label: x.name,
+                        icon: x.icon,
+                    });
+                })
+                owe.forEach(x=>{
+                    secondGrid.fill({
+                        id: x.id,
+                        label: x.name,
+                        icon: x.icon,
+                    });
+                })
+            }
+        });
+        if (this.properties.billId){
+            app.$api.getBill(this.properties.billId).then(res => {
+                if (res){
+                    let name = res.data.name;
+                    let money = res.data.money;
+                    let billType = res.data.billType;
+                    let account = res.data.account;
+                    let moneyType = res.data.moneyType;
+                    let typeText = res.data.moneyName;
+                    let accountText = res.data.accountName;
+                    let remark = res.data.remark;
+                    let date = res.data.date;
+                    let dateText = app.$utils.formatDate(date)
+                    this.setData({
+                        name,money,billType,account,moneyType,typeText,accountText,remark,date,dateText
+                    })
+                }
+            })
+        }else {
+            let billType = 'INCOME'
+            if ('expend' == this.properties.changeType){
+                billType = 'EXPEND'
+            }
+            this.setData({billType})
+        }
     },
     methods: {
         onPriceInput(e) {
@@ -84,6 +110,9 @@ Component({
                     priceError: !isNumber,
                 });
             }
+            let money = e.detail.value;
+            this.setData({money})
+
         },
         handleMultiAction(e) {
             const { grid } = e.currentTarget.dataset;
@@ -95,35 +124,37 @@ Component({
                     theme: ActionSheetTheme.Grid,
                     selector: '#t-action-sheet',
                     context: this,
-                    items: firstGrid.concat(
+                    items: firstGrid
-                        new Array(8).fill({
-                            label: '标题文字',
-                            icon: 'star',
-                        }),
-                    ),
                 });
             }else {
                 handler = ActionSheet.show({
                     theme: ActionSheetTheme.Grid,
                     selector: '#t-action-sheet',
                     context: this,
-                    items: secondGrid.concat(
+                    items: secondGrid
-                        new Array(8).fill({
-                            label: '标题文字',
-                            icon: 'star',
-                        }),
-                    ),
                 });
             }
         },
         onCancel(){
             handler.close();
         },
+        onNameInput(e) {
+            this.setData({ name : e.detail.value})
+        },
+        onRemarkInput(e) {
+            this.setData({ remark : e.detail.value})
+        },
         handleSelected(e) {
             const {grid} = this.data
             this.setData({
                 [`${grid}Text`]: e.detail.selected.label,
             });
+            if (grid == 'type'){
+                this.setData({moneyType:e.detail.selected.id})
+            }
+            if (grid == 'account'){
+                this.setData({account:e.detail.selected.id})
+            }
         },
         showPicker(e) {
             const { mode } = e.currentTarget.dataset;
@@ -150,22 +181,39 @@ Component({
         bYesterday () {
             let preDate = new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * 2);
             this.setData({
+                date : preDate,
                 dateText: app.$utils.formatDate(preDate)
             })
         },
         yesterday() {
             let preDate = new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
             this.setData({
+                date : preDate,
                 dateText: app.$utils.formatDate(preDate)
             })
         },
         today () {
             this.setData({
+                date : new Date(),
                 dateText: app.$utils.formatDate(new Date())
             })
         },
         saveBill () {
-            wx.navigateBack();
+            let param = {
+                id : this.properties.billId,
+                name:this.data.name,
+                money:this.data.money,
+                billType:this.data.billType,
+                account:this.data.account,
+                moneyType:this.data.moneyType,
+                remark:this.data.remark,
+                date:this.data.date
+            }
+            app.$api.editBill(param).then(res => {
+                if (res) {
+                    wx.navigateBack();
+                }
+            })
         }
     }
 });

pages/bill/types/expenses.wxml

@@ -1,3 +1,10 @@
+<t-input
+        label="名称"
+        placeholder="请输入名称"
+        align="right"
+        bindchange="onNameInput"
+        value="{{name}}"
+/>
 <t-input
         label="金额"
         placeholder="0.00"
@@ -5,7 +12,7 @@
         align="right"
         type="number"
         bindchange="onPriceInput"
-        value="{{price}}"
+        value="{{money}}"
         tips="{{priceError ? '请输入正确的价格' : ''}}"
         t-class-tips="tips"
 />
@@ -25,7 +32,7 @@
     <view class="placeholder_line"></view>
     <t-tag size="large" bind:tap="today" variant="light">今天</t-tag>
 </view>
-<t-textarea label="备注" placeholder="请输入该账单说明..." maxlength="200" indicator />
+<t-textarea label="备注" placeholder="请输入该账单说明..." bindchange="onRemarkInput" maxlength="200" indicator />
 <view class="view_button">
     <t-button theme="primary" block bind:tap="saveBill">保存</t-button>
 </view>

pages/bill/types/transfer.js

@@ -1,48 +1,18 @@
 const app = getApp();
 import ActionSheet, { ActionSheetTheme } from '../../../miniprogram_npm/tdesign-miniprogram/action-sheet/index';
 let handler = null;
-const firstGrid = [
+const firstGrid = [];
-    {
+const secondGrid = [];
-        label: '银行卡',
-        icon: 'star',
-    },
-    {
-        label: '支付宝',
-        icon: 'star',
-    },
-    {
-        label: '微信',
-        icon: 'star',
-    },
-    {
-        label: '信用卡',
-        icon: 'star',
-    }
-];
-const secondGrid = [
-    {
-        label: '银行卡',
-        icon: 'star',
-    },
-    {
-        label: '支付宝',
-        icon: 'star',
-    },
-    {
-        label: '微信',
-        icon: 'star',
-    },
-    {
-        label: '信用卡',
-        icon: 'star',
-    }
-];
 Component({
     properties: {
-        /* normal & repayment */
+        billId: {
+            type: String,
+            value: -1
+        },
+        /* transfer & repayment */
         changeType: {
             type: String,
-            value: 'normal'
+            value: 'transfer'
         },
     },
     data: {
@@ -56,7 +26,75 @@ Component({
         dateText: '',
         // 指定选择区间起始值
         start: '2000-01-01 00:00:00',
-        end: '2030-09-09 12:12:12'
+        end: '2030-09-09 12:12:12',
+
+        name: null,
+        money: null,
+        billType: null,
+        fromAccount: null,
+        account: null,
+        moneyType: null,
+        remark: null,
+    },
+    attached(){
+        app.$api.getSettings().then(setting => {
+            if (setting){
+                let cash = setting.data.CASH_SETTING;
+                let owe = setting.data.OWE_SETTING;
+                cash.forEach(x=>{
+                    firstGrid.fill({
+                        id: x.id,
+                        label: x.name,
+                        icon: x.icon,
+                    });
+                })
+                if ('transfer' == this.properties.changeType){
+                    cash.forEach(x=>{
+                        secondGrid.fill({
+                            id: x.id,
+                            label: x.name,
+                            icon: x.icon,
+                        });
+                    })
+                }else {
+                    owe.forEach(x=>{
+                        secondGrid.fill({
+                            id: x.id,
+                            label: x.name,
+                            icon: x.icon,
+                        });
+                    })
+                }
+            }
+        })
+        if (this.properties.billId){
+            app.$api.getBill(this.properties.billId).then(res => {
+                if (res){
+                    let name = res.data.name;
+                    let money = res.data.money;
+                    let billType = res.data.billType;
+                    let fromAccount = res.data.fromAccount;
+                    let account = res.data.account;
+                    let outText = res.data.fromAccountName;
+                    let inText = res.data.accountName;
+                    let moneyType = res.data.moneyType;
+                    let remark = res.data.remark;
+                    let date = res.data.date;
+                    let dateText = app.$utils.formatDate(date)
+                    this.setData({
+                        name,money,billType,fromAccount,account,outText,inText,moneyType,remark,date,dateText
+                    })
+                }
+            })
+        }else {
+            let billType = 'TRANSFER'
+            let moneyType = -1
+            if ('repayment' == this.properties.changeType){
+                billType = 'REPAYMENT'
+                moneyType = -2
+            }
+            this.setData({billType,moneyType})
+        }
     },
     methods: {
         onPriceInput(e) {
@@ -67,6 +105,8 @@ Component({
                     priceError: !isNumber,
                 });
             }
+            let money = e.detail.value;
+            this.setData({money})
         },
         handleMultiAction(e) {
             const { grid } = e.currentTarget.dataset;
@@ -78,35 +118,37 @@ Component({
                     theme: ActionSheetTheme.Grid,
                     selector: '#t-action-sheet',
                     context: this,
-                    items: firstGrid.concat(
+                    items: firstGrid
-                        new Array(8).fill({
-                            label: '标题文字',
-                            icon: 'star',
-                        }),
-                    ),
                 });
             }else {
                 handler = ActionSheet.show({
                     theme: ActionSheetTheme.Grid,
                     selector: '#t-action-sheet',
                     context: this,
-                    items: secondGrid.concat(
+                    items: secondGrid
-                        new Array(8).fill({
-                            label: '标题文字',
-                            icon: 'star',
-                        }),
-                    ),
                 });
             }
         },
         onCancel(){
             handler.close();
         },
+        onNameInput(e) {
+            this.setData({ name : e.detail.value})
+        },
+        onRemarkInput(e) {
+            this.setData({ remark : e.detail.value})
+        },
         handleSelected(e) {
             const {grid} = this.data
             this.setData({
                 [`${grid}Text`]: e.detail.selected.label,
             });
+            if (grid == 'out'){
+                this.setData({fromAccount:e.detail.selected.id})
+            }
+            if (grid == 'in'){
+                this.setData({account:e.detail.selected.id})
+            }
         },
         showPicker(e) {
             const { mode } = e.currentTarget.dataset;
@@ -148,7 +190,22 @@ Component({
             })
         },
         saveBill () {
-            wx.navigateBack();
+            let param = {
+                id : this.properties.billId,
+                name:this.data.name,
+                money:this.data.money,
+                billType:this.data.billType,
+                fromAccount:this.data.fromAccount,
+                account:this.data.account,
+                moneyType:this.data.moneyType,
+                remark:this.data.remark,
+                date:this.data.date
+            }
+            app.$api.editBill(param).then(res => {
+                if (res) {
+                    wx.navigateBack();
+                }
+            })
         }
     }
 });

pages/bill/types/transfer.wxml

@@ -1,3 +1,10 @@
+<t-input
+        label="名称"
+        placeholder="请输入名称"
+        align="right"
+        bindchange="onNameInput"
+        value="{{name}}"
+/>
 <t-input
         label="金额"
         placeholder="0.00"
@@ -5,7 +12,7 @@
         align="right"
         type="number"
         bindchange="onPriceInput"
-        value="{{price}}"
+        value="{{money}}"
         tips="{{priceError ? '请输入正确的价格' : ''}}"
         t-class-tips="tips"
 />
@@ -25,7 +32,7 @@
     <view class="placeholder_line"></view>
     <t-tag size="large" bind:tap="today" variant="light">今天</t-tag>
 </view>
-<t-textarea label="备注" placeholder="请输入该账单说明..." maxlength="200" indicator />
+<t-textarea label="备注" placeholder="请输入该账单说明..." maxlength="200" bindchange="onRemarkInput" indicator />
 <view class="view_button">
     <t-button theme="primary" block bind:tap="saveBill">保存</t-button>
 </view>

pages/index/index.js

@@ -3,23 +3,26 @@ Page({
     data: {
         progress: 89,
         todayList: [
-            {"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
+            {"name":"电脑","type":"INCOME","date":"01-06","accountName":"银行卡","money":"4500.00"},
-            {"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
+            {"name":"狗粮","type":"EXPEND","date":"01-06","accountName":"支付宝","money":"35.00"},
-            {"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
+            {"name":"狗粮","type":"EXPEND","date":"01-06","accountName":"支付宝","money":"35.00"},
-            {"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
+            {"name":"狗粮","type":"EXPEND","date":"01-06","accountName":"支付宝","money":"35.00"},
-            {"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
+            {"name":"狗粮","type":"EXPEND","date":"01-06","accountName":"支付宝","money":"35.00"},
-            {"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
+            {"name":"狗粮","type":"EXPEND","date":"01-06","accountName":"支付宝","money":"35.00"},
-            {"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
+            {"name":"狗粮","type":"EXPEND","date":"01-06","accountName":"支付宝","money":"35.00"},
-            {"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
+            {"name":"狗粮","type":"EXPEND","date":"01-06","accountName":"支付宝","money":"35.00"},
-            {"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
+            {"name":"狗粮","type":"EXPEND","date":"01-06","accountName":"支付宝","money":"35.00"},
-            {"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
+            {"name":"狗粮","type":"EXPEND","date":"01-06","accountName":"支付宝","money":"35.00"},
         ]
     },
     onLoad: function (options) {
     },
     onShow: function () {
-        app.$api.getSetting(1).then(x => {
+        app.$api.listBillsToday().then(x => {
-            console.log(x);
+            if (x){
+                let todayList = x.data
+                this.setData({todayList})
+            }
         })
         if (wx.canIUse('hideHomeButton')) {
             wx.hideHomeButton()

pages/index/index.wxml

@@ -28,10 +28,10 @@
 <view wx:if="{{todayList != null && todayList.length > 0}}">
     <t-cell-group theme="card">
     <t-cell wx:for="{{todayList}}" wx:key="index"
-            title="{{item.title}}"
+            title="{{item.name}}"
-            description="{{item.dateTime}} • {{item.from}}"
+            description="{{item.date}} • {{item.accountName}}"
             align="top"
-            image="/image/bill/5.png"
+            image="{{item.icon}}"
             note="{{item.money}}"
             class="t-cell-{{item.type}}"
             url="{{'/pages/bill/index?id=' + item.id}}"

utils/api.js

@@ -238,17 +238,22 @@ export function fetchGet(url, params, needToken) {
 // 暴露接口
 export default {
 
+  /**
+   * 用户设置
+   * @param params
+   * @returns {Promise<unknown>}
+   */
   loginAccount(params) {
     return fetchPost('/user/login',params,true,false);
   },
   getSetting(params) {
-    return fetchPost('/user/setting/' + params,true,false);
+    return fetchPost('/user/setting/' + params,null,true,false);
   },
   editSetting(params) {
     return fetchPost('/user/settings/edit',params,true,false);
   },
   deleteSetting(params) {
-    return fetchPost('/user/settings/del/' + params,true,false);
+    return fetchPost('/user/settings/del/' + params,null,true,false);
   },
   getSettings() {
     // let result;
@@ -273,4 +278,19 @@ export default {
   getSettingsIncome(){
     return fetchPost('/user/settings/income',null,true,false);
   },
+  /**
+   * 账单处理
+   */
+  listBillsToday() {
+    return fetchPost('/user/bills/today', null,true,false);
+  },
+  editBill(params) {
+    return fetchPost('/user/bill/edit',params,true,false);
+  },
+  getBill(params) {
+    return fetchPost('/user/bill/' + params,null,true,false);
+  },
+  deleteBill(params) {
+    return fetchPost('/user/bill/del/' + params,null,true,false);
+  },
 }