|
|
@@ -1,24 +1,38 @@
|
|
|
<template>
|
|
|
<view class="balance-change">
|
|
|
- <block v-if="!$util.isEmpty(list.data)">
|
|
|
- <view class="balance-table">
|
|
|
- <view v-for="(item, index) in list.data" :key="index" class="balance-item">
|
|
|
- <view class="balance-item-main">
|
|
|
- <view class="balance-item-left">
|
|
|
- <view class="item-date">{{ formatDate(item.addTime) }}</view>
|
|
|
- <view class="item-event">{{ formatText(item.event) }}</view>
|
|
|
- </view>
|
|
|
- <view class="balance-item-right">
|
|
|
- <view class="item-amount" :class="{'income': item.amount.includes('+'), 'expense': item.amount.includes('-')}">{{ item.amount }}</view>
|
|
|
- <view class="item-balance">余额: {{ parseFloat(item.balance) }}</view>
|
|
|
+ <scroll-view
|
|
|
+ scroll-y="true"
|
|
|
+ class="balance-scroll"
|
|
|
+ @scrolltolower="loadMore"
|
|
|
+ :scroll-top="scrollTop"
|
|
|
+ :lower-threshold="50"
|
|
|
+ >
|
|
|
+ <block v-if="!$util.isEmpty(list.data)">
|
|
|
+ <view class="balance-table">
|
|
|
+ <view v-for="(item, index) in list.data" :key="index" class="balance-item">
|
|
|
+ <view class="balance-item-main">
|
|
|
+ <view class="balance-item-left">
|
|
|
+ <view class="item-date">{{ formatDate(item.addTime) }}</view>
|
|
|
+ <view class="item-event">{{ formatText(item.event) }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="balance-item-right">
|
|
|
+ <view class="item-amount" :class="{'income': item.amount.includes('+'), 'expense': item.amount.includes('-')}">{{ item.amount }}</view>
|
|
|
+ <view class="item-balance">余额: {{ parseFloat(item.balance) }}</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </block>
|
|
|
- <block v-else>
|
|
|
- <view class="balance-table">暂无数据</view>
|
|
|
- </block>
|
|
|
+ <view class="loading-more" v-if="list.isLoading">
|
|
|
+ <text class="loading-text">加载中...</text>
|
|
|
+ </view>
|
|
|
+ <view class="no-more" v-if="list.noMore">
|
|
|
+ <text class="no-more-text">没有更多数据了</text>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ <block v-else>
|
|
|
+ <view class="empty-data">暂无数据</view>
|
|
|
+ </block>
|
|
|
+ </scroll-view>
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -35,6 +49,7 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ scrollTop: 0
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -85,7 +100,16 @@ export default {
|
|
|
},
|
|
|
refresh() {
|
|
|
this.resetList()
|
|
|
- this.init()
|
|
|
+ this.scrollTop = 0
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.init()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ loadMore() {
|
|
|
+ if (!this.list.noMore && !this.list.isLoading) {
|
|
|
+ this.list.page++
|
|
|
+ this.init()
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -99,6 +123,12 @@ export default {
|
|
|
max-height: 100vh;
|
|
|
box-sizing: border-box;
|
|
|
flex: 1;
|
|
|
+
|
|
|
+ .balance-scroll {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
.balance-title {
|
|
|
padding: 3upx;
|
|
|
font-size: 10upx;
|
|
|
@@ -109,12 +139,23 @@ export default {
|
|
|
height: 16upx;
|
|
|
line-height: 16upx;
|
|
|
}
|
|
|
+
|
|
|
.empty-data {
|
|
|
text-align: center;
|
|
|
padding: 20upx 0;
|
|
|
color: #999;
|
|
|
font-size: 10upx;
|
|
|
}
|
|
|
+
|
|
|
+ .loading-more, .no-more {
|
|
|
+ text-align: center;
|
|
|
+ padding: 10upx 0;
|
|
|
+
|
|
|
+ .loading-text, .no-more-text {
|
|
|
+ font-size: 8upx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.table-header-container {
|
|
|
position: sticky;
|
|
|
@@ -138,10 +179,9 @@ export default {
|
|
|
overflow: hidden;
|
|
|
background: #fff;
|
|
|
box-shadow: 0 2upx 12upx rgba(0,0,0,0.04);
|
|
|
- margin: 0 0;
|
|
|
+ margin: 0 0 10upx 0;
|
|
|
font-size: 8upx;
|
|
|
box-sizing: border-box;
|
|
|
- flex: 1;
|
|
|
padding: 5upx;
|
|
|
}
|
|
|
|
