初始版本

business_uniapp/src/packages/pages/balance/components/statement.vue

@@ -0,0 +1,77 @@
+<template>
+    <view>
+        <z-paging :use-page-scroll="true" ref="paging" v-model="listData" @query="queryList">
+            <view class="flex items-center pt-[40rpx] pb-[28rpx]">
+                <view class="block"></view>
+                <view class="text-xl font-medium ml-2">账户流水</view>
+            </view>
+            <view class="mt-4">
+                <view
+                    v-for="(item, index) in listData"
+                    :key="index"
+                    class="bg-white px-[20rpx] py-[40rpx] mb-3 rounded-lg flex items-center"
+                >
+                    <u-image :src="cashOutIcon" width="80rpx" height="80rpx"></u-image>
+                    <view class="ml-3 flex flex-col justify-between">
+                        <view class="font-medium text-xl">{{ item.change_type_desc }}</view>
+                        <view class="text-xs text-muted mt-2">{{ item.create_time }}</view>
+                    </view>
+                    <view class="font-bold text-2xl ml-auto">
+						<text :class="item.action == 1 ? 'text-primary' : 'text-[#E86016]'">
+						    {{ item.action == 1 ? '+' : '-' }}{{ item.change_amount }}
+						</text>
+                    </view>
+                </view>
+            </view>
+        </z-paging>
+    </view>
+</template>
+
+<script lang="ts" setup>
+import { userMoneyList } from '@/api/account'
+import { ref, shallowRef, watch } from 'vue'
+import cashOutIcon from '@/packages/static/images/cashOutIcon.png'
+import { onReachBottom } from '@dcloudio/uni-app'
+import { WithdrawEnum } from '@/enums/withdraw'
+
+const props = defineProps<{
+    scrollTop: number
+}>()
+
+const paging = shallowRef()
+const listData = ref<any>([])
+
+const queryList = async (page_no: number, page_size: number) => {
+    try {
+        const res = await userMoneyList({ 
+			page_no,
+			page_size,
+			type: WithdrawEnum.COMMISSION
+		})
+        console.log(res.lists)
+
+        paging.value.complete(res.lists)
+    } catch (e) {
+        console.log('报错=>', e)
+        //TODO handle the exception
+        paging.value.complete(false)
+    }
+}
+
+watch(() => props.scrollTop, (v) => {
+    paging.value?.updatePageScrollTop(v)
+})
+
+// 底部刷新
+onReachBottom(() => {
+    paging.value?.doLoadMore()
+})
+</script>
+
+<style lang="scss" scoped>
+.block {
+    width: 8rpx;
+    height: 32rpx;
+    background-color: #0b66ef;
+}
+</style>