update

src/pages/withdrawalLog/index.vue

@@ -1,11 +1,98 @@
 <script setup>
+import ZFBICON from '../../static/icons/ZFBICON.png';
+import dropDown from '../../static/icons/drop-down.svg';
+import XNav from "../../components/XNav.vue";
+import XTag from "../../components/XTag.vue";
+import useTableQuery from "../../hooks/useTableQuery.js";
+import Api from "../../api/index.js";
+import {reactive} from "vue";
+import XDateTime from "../../components/XDateTime.vue";
+import dayjs from "dayjs";
 
+const po = reactive({
+    datetime: dayjs().format('YYYY-MM'),
+});
+const vo = reactive({
+    page: '',
+    rows: [],
+    total: 0,
+});
+const {loading, pagination, initFetchData} = useTableQuery({
+    api: Api.system.getData,
+    watchParameter: true,
+    parameter: po,
+    callback: (data) => {
+        if (data.current === 1) {
+            vo.rows.length = 0;
+        }
+        vo.page = data.page;
+        vo.total = data.total;
+        vo.rows = [...vo.rows, ...data.rows];
+    }
+});
 </script>
 
 <template>
     <!--提现记录-->
+    <x-nav></x-nav>
+
+    <scroll-view
+        scroll-y
+        @refresherpulling="initFetchData()"
+        @scrolltolower="pagination.current++"
+        class="p-[20rpx] h-[calc(100vh-100rpx)]">
+        <view class="!flex flex-col gap-[20rpx]">
+            <view class="bg-[var(--primary-color)] p-[32rpx] rounded-[12rpx] !flex items-center">
+                <view class="!flex-grow text-[#fff]">
+                    <view class="test-36r font-bold">246.23</view>
+                    <view class="test-24r">该月提现收益</view>
+                </view>
+                <view class="!flex-grow text-[#fff]">
+                    <view class="test-36r font-bold">246.23</view>
+                    <view class="test-24r">该月提现收益</view>
+                </view>
+                <view class="flex-shrink-0">
+                    <x-date-time v-model:model-value="po.datetime" fields="month">
+                        <view
+                            class="rounded-full bg-[#E8F3FF] text-[var(--primary-color)] px-[32rpx] py-[8rpx] !flex items-center gap-[14rpx]">
+                            {{ po.datetime }}
+                            <image class="!w-[18rpx]" mode="widthFix" :src="dropDown"></image>
+                        </view>
+                    </x-date-time>
+                </view>
+            </view>
+
+            <view class="p-[20rpx] bg-[#fff] rounded-[8rpx] card" v-for="v in vo.rows">
+                <view class="!flex">
+                    <image class="!size-[80rpx]" mode="aspectFill" :src="ZFBICON"></image>
+                    <view class="!ml-[60rpx] !flex gap-[60rpx]">
+                        <view>
+                            <view class="test-32r font-bold">100.00</view>
+                            <view class="text-[#86909C] test-24r">提现金额</view>
+                        </view>
+                        <view>
+                            <view class="test-32r font-bold">94.00</view>
+                            <view class="text-[#86909C] test-24r">到账金额</view>
+                        </view>
+                    </view>
+                    <view class="!ml-auto">
+                        <x-tag>正在提现</x-tag>
+                    </view>
+                </view>
+                <view
+                    class="!mt-[20rpx] py-[10rpx] px-[20rpx] test-24r !flex justify-between items-center bg-[#F2F3F5] rounded-[8rpx]">
+                    <view>提现时间：2024-08-06 12:22</view>
+                    <view>手续费：6%</view>
+                </view>
+            </view>
+
+            <tui-loadmore v-if="loading" text="加载中..."></tui-loadmore>
+        </view>
+    </scroll-view>
 </template>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.card {
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
+}
 </style>