111 lines
3.8 KiB
Vue
111 lines
3.8 KiB
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>
|