init

fuintUniapp/pages/wallet/balance/log.vue

@@ -0,0 +1,128 @@
+<template>
+  <view class="container">
+    <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ use: false }" :up="upOption"
+      @up="upCallback">
+      <view class="log-list">
+        <view v-for="(item, index) in list.content" :key="index" class="log-item">
+          <view class="item-left flex-box">
+            <view class="rec-status">
+              <text>{{ item.description ? item.description : '' }}</text>
+              <text v-if="!item.description">{{ item.amount > 0 ? '增加金额' : '减少金额' }}</text>
+            </view>
+            <view class="rec-time">
+              <text>{{ item.createTime | timeFormat('yyyy-mm-dd hh:MM') }}</text>
+            </view>
+          </view>
+          <view class="item-right">
+            <text>{{ item.amount > 0 ? '+' : '' }}{{ item.amount }}元</text>
+          </view>
+        </view>
+      </view>
+    </mescroll-body>
+  </view>
+</template>
+
+<script>
+  import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
+  import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
+  import * as LogApi from '@/api/balance'
+  import { getEmptyPaginateObj, getMoreListData } from '@/utils/app'
+
+  const pageSize = 20
+
+  export default {
+    components: {
+      MescrollBody
+    },
+    mixins: [MescrollMixin],
+    data() {
+      return {
+        // 余额账单明细列表
+        list: getEmptyPaginateObj(),
+        // 上拉加载配置
+        upOption: {
+          // 首次自动执行
+          auto: true,
+          // 每页数据的数量; 默认20
+          page: { size: pageSize },
+          // 数量要大于12条才显示无更多数据
+          noMoreSize: 20,
+          // 空布局
+          empty: {
+            tip: '亲，暂无账单明细.'
+          }
+        }
+      }
+    },
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {},
+
+    methods: {
+
+      /**
+       * 上拉加载的回调 (页面初始化时也会执行一次)
+       * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
+       * @param {Object} page
+       */
+      upCallback(page) {
+        const app = this
+        // 设置列表数据
+        app.getLogList(page.num)
+          .then(list => {
+            const curPageLen = list.content.length
+            const totalSize = list.totalElements
+            app.mescroll.endBySize(curPageLen, totalSize)
+          })
+          .catch(() => app.mescroll.endErr())
+      },
+
+      // 获取余额账单明细列表
+      getLogList(pageNo = 1) {
+        const app = this
+        return new Promise((resolve, reject) => {
+          LogApi.list({ page: pageNo })
+            .then(result => {
+              // 合并新数据
+              const newList = result.data.data
+              app.list.content = getMoreListData(newList, app.list, pageNo)
+              resolve(newList)
+            })
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  page,
+  .container {
+    background: #fff;
+  }
+
+  .log-list {
+    padding: 0 30rpx;
+  }
+
+  .log-item {
+    font-size: 28rpx;
+    padding: 20rpx 20rpx;
+    line-height: 1.8;
+    border-bottom: 1rpx solid rgb(238, 238, 238);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .item-right {
+      color: #000;
+      font-weight: bold;
+  }
+  .rec-status {
+    color: #333;
+    .rec-time {
+      color: rgb(160, 160, 160);
+      font-size: 26rpx;
+    }
+  }
+</style>