xl-mobile/src/pages/walletLog/index.vue

<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.getUserMoneyLog,
    parameter: sumPo,
    uuid: true,
    callback: (data) => {
        Object.assign(vo, data);
    }
});

const init = () => {
    sumPo.type = 0;
    sumPo.datetime = dayjs().format('YYYY-MM');
}
</script>

<template>
    <!--变动记录-->
    <x-nav></x-nav>

    <x-filter
        @init="init"
        @success="initFetchData"
        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.page++"
        scroll-y
        class="h-[calc(100vh-200rpx)]">
        <view class="p-[20rpx]" v-for="item in vo.rows" :key="item.id">
            <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>{{ item.purpose_name }}</view>
                        <x-tag :type="Number(item.money) > 0 ? 'success' : 'info'">{{ item.purpose_type }}</x-tag>
                    </view>
                    <view class="text-[#86909C] test-24r">{{
                            dayjs(item.createtime).format('YYYY-MM-DD HH:mm:ss')
                        }}
                    </view>
                </view>
                <view class="test-36r font-bold HarmonyOS">
                    {{ item.money }}
                </view>
            </view>
        </view>

        <tui-loadmore v-if="loading" text="加载中..."></tui-loadmore>
    </scroll-view>
</template>

<style scoped>

</style>