二、C端小程序电费扣款记录

pages/meterBalanceRecord/index.js

@@ -1,4 +1,8 @@
 import dayjs from "../../utils/dayjs"
+import { getDayCalcList } from "../../service/calc"
+import { alertError } from "../../utils/index";
+import request from "../../utils/request"
+const { OK } = request
 
 // pages/meterBalanceRecord/index.js
 Page({
@@ -9,6 +13,9 @@ Page({
   data: {
     time: "",
     timeStamp: undefined,
+    list: [],
+    page: 1,
+    size: 999,
   },
 
   /**
@@ -16,11 +23,13 @@ Page({
    */
   onLoad(options) {
     const { id } = options
-    console.log("id---", id)
+    const that = this;
     this.setData({
       id,
       time: dayjs().format("YYYY-MM"),
       timeStamp: Date.now()
+    }, () => {
+      that.getList()
     })
   },
   clickTime() {
@@ -28,13 +37,35 @@ Page({
       timeVisible: true
     })
   },
+  async getList() {
+    const { id, time, page, size } = this.data;
+    const { code, message, data } = await getDayCalcList({ 
+      page, 
+      size, 
+      startTime: dayjs(time).subtract(1, 'month').endOf('month').format("YYYY-MM-DD"), 
+      endTime: dayjs(time).endOf('month').format("YYYY-MM-DD"),
+      codeId: id,
+    })
+    if (code !== OK) {
+      alertError(message)
+      return
+    }
+    this.setData({
+      list: data?.map(item => {
+        item.day = dayjs(item.endTime).format("DD日")
+        return item;
+      })
+    })
+  },
   onTimeConfirm(e) {
-    console.log('e', e)
     const { time } = e.detail;
+    const that = this;
     this.setData({
       time,
       timeStamp: new Date(time).getTime(),
       timeVisible: false,
+    }, () => {
+      that.getList()
     })
   },
   onTimeCancel() {

pages/meterBalanceRecord/index.json

@@ -2,7 +2,11 @@
   "usingComponents": {
     "navigator": "/components/navigator/index",
     "timePicker": "/components/timePicker/index",
-    "van-icon": "@vant/weapp/icon/index"
+    "van-icon": "@vant/weapp/icon/index",
+    "van-tag": "@vant/weapp/tag/index",
+    "van-row": "@vant/weapp/row/index",
+    "empty": "/components/empty/index",
+    "van-col": "@vant/weapp/col/index"
   },
   "navigationStyle": "custom"
 }

pages/meterBalanceRecord/index.wxml

@@ -9,6 +9,50 @@
             <van-icon name="arrow-down" />
         </view>
     </view>
+
+    <view class="customTable" wx:if="{{list.length}}">
+        <view class="customTableTile">
+            <van-row>
+                <van-col span="4">
+                    <view style="text-align: center;"> 日期 </view>
+                </van-col>
+                <van-col span="6">
+                    <view style="text-align: center;"> 充值金额 </view>
+                </van-col>
+                <van-col span="6">
+                    <view style="text-align: center;"> 电费 </view>
+                </van-col>
+                <van-col span="8">
+                    <view style="text-align: center;"> 电表余额 </view>
+                </van-col>
+            </van-row>
+        </view>
+        <view class="customTableContent" wx:for="{{list}}" wx:key="id">
+            <view class="tableRow">
+                <van-row>
+                    <van-col span="4">
+                        <view style="text-align: center;"> {{ item.day }} </view>
+                    </van-col>
+                    <van-col span="6">
+                        <view style="text-align: center;" wx:if="{{item.type === 1 || item.type === 7}}"> {{ item.topFee }} </view>
+                        <view style="text-align: center;" wx:elif="{{item.type === 5 || item.type === 6 || item.type === 8}}"> -{{ item.topFee }} </view>
+                        <view style="text-align: center;" wx:else> 0 </view>
+                    </van-col>
+                    <van-col span="6">
+                        <view style="text-align: center;" wx:if="{{item.type == 1 || item.type === 5 || item.type === 6 || item.type === 7 || item.type === 8}}">
+                            0
+                        </view>
+                        <view style="text-align: center;" wx:else> {{item.money}} </view>
+                    </van-col>
+                    <van-col span="8">
+                        <view style="text-align: center;"> {{item.balance}} </view>
+                    </van-col>
+                </van-row>
+            </view>
+            
+        </view>
+    </view>
+    <empty bind:refresh="getList" wx:else />
 </view>
 
 

pages/meterBalanceRecord/index.wxss

@@ -23,4 +23,64 @@
   
   .timeText {
     flex: 1;
-  }
+  }
+
+  .table {
+    width: 890rpx;
+    
+}
+
+.classWrapper {
+    width: 100vw;
+    overflow-x: auto;
+}
+
+.thead {
+    display: flex;
+    flex-wrap: nowrap;
+    border-bottom: 1rpx solid #EEEEEE;
+}
+
+.thead  .th {
+    padding: 20rpx;
+    white-space: nowrap;
+    text-align: center;
+    box-sizing: border-box;
+
+}
+
+.tbody {
+    width: 890rpx;
+}
+
+.tbody .tr {
+    padding: 20rpx;
+    border-bottom: 1rpx solid #EEEEEE;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+}
+
+.tbody .th {
+    word-break: break-all;
+    text-align: center;
+}
+
+.customTable {
+    margin: 20rpx 0;
+    padding-bottom: 30rpx;
+}
+
+.customTableTile {
+    background-color: var(--light-green);
+    padding: 16rpx;
+    box-sizing: border-box;
+    font-weight: 700;
+}
+
+.tableRow {
+    padding: 16rpx;
+    border: 1rpx solid #ccc;
+    border-top: 0rpx;
+    font-size: 32rpx;
+}

service/calc.js

@@ -0,0 +1,9 @@
+import apis from '../utils/request';
+import { replaceSpecialIcon } from '../utils/index'
+const { GET, POST, PUT, DELETE } = apis
+
+// 获取电表列表
+export const getDayCalcList = async function({ page, size, startTime, endTime, codeId }) {
+    const park = wx.getStorageSync('park')
+    return await GET(`/accounting/getEveryDayAccountingList?park=${park?.id}&page=${page}&size=${size}&startTime=${startTime}&endTime=${endTime}&codeId=${codeId}`);
+}