update

src/pages/incomeLog/index.vue

@@ -1,11 +1,128 @@
 <script setup>
+import {reactive, ref} from 'vue';
+import XNav from "../../components/XNav.vue";
+import SETTING from "../../static/icons/setting.png";
+import useTableQuery from "../../hooks/useTableQuery.js";
+import Api from "../../api/index.js";
+import dropDown from "../../static/icons/drop-down.svg";
+import XDateTime from "../../components/XDateTime.vue";
+import XTag from "../../components/XTag.vue";
+import dayjs from "dayjs";
+import XConfirmModal from "../../components/XConfirmModal.vue";
 
+const showModal = ref(false);
+const po = 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: po,
+    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>
+
+    <view class="!flex justify-around bg-[#fff] h-[100rpx]">
+        <view :class="['top-filter transition-[500ms] !flex items-center', po.type === 0 ? 'top-filter-cur' : '']"
+              @click="po.type=0">
+            个人收益
+        </view>
+        <view :class="['top-filter transition-[500ms] !flex items-center', po.type === 1 ? 'top-filter-cur' : '']"
+              @click="po.type=1">
+            团队收益
+        </view>
+        <view>
+            <view class="top-filter transition-[500ms] !flex items-center gap-[20rpx] h-full" @click="showModal=true">
+                <image class="!w-[22rpx] !h-[22rpx]" :src="SETTING"></image>
+                活动收益
+            </view>
+            <x-confirm-modal
+                width="500rpx"
+                title="拉新奖励"
+                info="邀请新用户并完成首个任务，可以获得拉新奖励"
+                :cancel="false"
+                confirmText="知道了"
+                v-model:show="showModal">
+            </x-confirm-modal>
+        </view>
+    </view>
+
+    <scroll-view
+        scroll-y
+        @refresherpulling="initFetchData()"
+        @scrolltolower="pagination.current++"
+        class="h-[calc(100vh-200rpx)]">
+        <view class="!flex flex-col gap-[20rpx] p-[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 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>
+        </view>
+    </scroll-view>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+.top-filter-cur {
+    color: var(--primary-color);
+    position: relative;
 
+    &::after {
+        content: '';
+        display: block;
+        height: 4rpx;
+        background-color: var(--primary-color);
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+    }
+}
 </style>