update

src/pages/walletLog/index.vue

@@ -1,7 +1,103 @@
-<script setup></script>
+<script setup>
+import XNav from "../../components/XNav.vue";
+import filer from "../../static/icons/filer-balck.png";
+import {reactive, ref} from "vue";
+import XFilter from "../../components/XFilter.vue";
+import XRadioGroup from "../../components/XRadioGroup.vue";
+import XFilterItem from "../../components/XFilterItem.vue";
+import XRadio from "../../components/XRadio.vue";
+import XDateTime from "../../components/XDateTime.vue";
+import dayjs from "dayjs";
+import XTag from "../../components/XTag.vue";
+import useTableQuery from "../../hooks/useTableQuery.js";
+import Api from "../../api/index.js";
+
+const showFilter = ref(false);
+const sumPo = reactive({
+    type: 0,
+    datetime: dayjs().format('YYYY-MM'),
+});
+const vo = reactive({
+    page: '',
+    rows: [],
+    total: 0,
+});
+const {loading, pagination, initFetchData} = useTableQuery({
+    api: Api.system.getData,
+    parameter: sumPo,
+    watchParameter: true,
+    callback: (data) => {
+        vo.page = data.page;
+        vo.total = data.total;
+        if (data.current === 1) {
+            vo.rows.length = 0;
+        }
+        vo.rows = [...vo.rows, ...data.rows];
+    }
+});
+</script>
 
 <template>
     <!--变动记录-->
+    <x-nav></x-nav>
+
+    <x-filter
+        v-model:model="sumPo"
+        v-model:visible="showFilter">
+        <x-filter-item label="账单类型">
+            <x-radio-group v-model:model-value="sumPo.type">
+                <view class="!grid grid-cols-3 gap-[24rpx]">
+                    <x-radio :value="0">全部</x-radio>
+                    <x-radio :value="1">收入</x-radio>
+                    <x-radio :value="2">支出</x-radio>
+                </view>
+            </x-radio-group>
+        </x-filter-item>
+        <x-filter-item label="时间选择">
+            <x-radio-group v-model:model-value="sumPo.type">
+                <view class="!grid grid-cols-3 gap-[24rpx]">
+                    <x-date-time v-model:model-value="sumPo.datetime" fields="month"></x-date-time>
+                </view>
+            </x-radio-group>
+        </x-filter-item>
+    </x-filter>
+
+    <view class="py-[28rpx] !flex justify-evenly bg-[#fff] h-[100rpx]">
+        <view class="top-filter top-filter-cur text-[var(--primary-color)]">{{
+                ['全部', '收入', '支出'][sumPo.type]
+            }}
+        </view>
+        <view class="w-[4rpx] bg-[#E5E6EB]"></view>
+        <view class="top-filter top-filter-cur text-[var(--primary-color)]">{{ sumPo.datetime }}</view>
+        <view class="w-[4rpx] bg-[#E5E6EB]"></view>
+        <view class="top-filter" @click="showFilter=true">
+            <image class="!w-[22rpx] !h-[22rpx]" :src="filer"></image>
+            筛选
+        </view>
+    </view>
+
+    <scroll-view
+        @refresherpulling="initFetchData()"
+        @scrolltolower="pagination.current++"
+        scroll-y
+        class="h-[calc(100vh-200rpx)]">
+        <view class="p-[20rpx]" v-for="item in vo.rows">
+            <view class="p-[20rpx] rounded-[12rpx] bg-[#fff] !flex justify-between items-center">
+                <view class="!flex flex-col gap-[24rpx]">
+                    <view class="!flex items-center gap-[16rpx]">
+                        <view>提现退回</view>
+                        <x-tag type="success">收入</x-tag>
+                    </view>
+                    <view class="text-[#86909C] test-24r">{{ dayjs().format('YYYY-MM-DD HH:mm:ss') }}</view>
+                </view>
+                <view class="test-36r font-bold HarmonyOS">
+                    +95.88
+                </view>
+            </view>
+        </view>
+
+        <tui-loadmore v-if="loading" text="加载中..."></tui-loadmore>
+    </scroll-view>
 </template>
 
 <style scoped>