feat: 财务管理

wupengfei

5 天以前 7e8d737c550cbcbe45fe88ccf95e0ef646a2fd73

 apps/bMiniApp/src/subpackages/mine/mineFinanceManage/InnerPage.vue

@@ -1,50 +1,97 @@
<template>
  <List>
    <IncomeDetailListItem :item="'收入:￥600.00'">
    <IncomeDetailListItem :item="`支出：￥${toThousand(sumWithdraw)} `">
      <template #title>
        <div class="mineFinanceManage-detail-time-picker">
        <div class="income-detail-time-picker">
          <ChooseInputWithDatePicker
            v-model="form.month"
            v-model="queryState.month"
            type="year-month"
            :max-date="nowDate"
          ></ChooseInputWithDatePicker>
            format="YYYY-MM"
          />
          <IconFont name="triangle-down" class="income-detail-time-picker-icon"></IconFont>
        </div>
      </template>
    </IncomeDetailListItem>
  </List>
  <InfiniteLoading
    scrollViewClassName="common-infinite-scroll-list home-list"
    v-bind="infiniteLoadingProps"
    :key="queryState.type"
  >
    <template #renderItem="{ item }">
    <IncomeDetailListItem
      :title="'收入-宁波人力无忧'"
      :item="'2024.12.20 13:30:30'"
      :value="'+300.00'"
        :title="item.title"
        :funds="item.amount"
        :item="dayjs(item.createdTime).format('YYYY-MM-DD HH:mm:ss')"
        :value="`钱包余额：${toThousand(item.balance)}`"
    >
    </IncomeDetailListItem>
  </List>
    </template>
  </InfiniteLoading>
</template>

<script setup lang="ts">
import { List, IncomeDetailListItem, ChooseInputWithDatePicker } from '@12333/components';
import { useUserStore } from '@/stores/modules/user';
import Taro from '@tarojs/taro';
import dayjs from 'dayjs';
import { toThousand } from '@12333/utils';
import * as userServices from '@12333/services/apiV2/user';
import { useInfiniteLoading } from '@12333/hooks';
import { EnumUserWalletTransactionType, EnumPagedListOrder } from '@12333/constants';

defineOptions({
  name: 'InnerPage',
});

const userStore = useUserStore();
const nowDate = dayjs().toDate();
const form = reactive({
  month: '2024-12',

const queryState = reactive({
  month: dayjs().format('YYYY-MM'),
  type: 0 as any as EnumUserWalletTransactionType,
});

const sumWithdraw = computed(() => {
  return infiniteLoadingProps.value?.listData?.pages?.[0]?.objectData?.sumWithdraw ?? 0;
});

const { infiniteLoadingProps } = useInfiniteLoading(
  ({ pageParam }) => {
    let params: API.GetPersonalUserTransactionsQuery = {
      pageModel: {
        rows: 20,
        page: pageParam,
        orderInput: [{ property: 'id', order: EnumPagedListOrder.Desc }],
      },
      type: EnumUserWalletTransactionType.Withdraw,
    };
    // if (Number(queryState.type)) {
    //   params.type = queryState.type;
    // }
    if (queryState.month) {
      params.createdTimeStart = dayjs(queryState.month).startOf('month').format('YYYY-MM-DD');
      params.createdTimeEnd = dayjs(queryState.month).endOf('month').format('YYYY-MM-DD');
    }
    return userServices.getPersonalUserTransactions(params, {
      showLoading: false,
    });
  },
  {
    queryKey: ['userServices/getPersonalUserTransactions', queryState],
  }
);
</script>

<style lang="scss">
@import '@/styles/common.scss';

.mineFinanceManage-page-wrapper {
  .mineFinanceManage-detail-time-picker {
  .income-detail-time-picker {
    position: relative;

    .nut-input {
      border-bottom: none;
      padding: 0;
      width: 100%;

      .input-text {
        font-size: 20px;
@@ -56,6 +103,24 @@
        display: none;
      }
    }

    .income-detail-time-picker-icon {
      position: absolute;
      top: 12px;
      left: 220px;
    }
  }

  .common-infinite-scroll-list {
    background-color: #ffffff;
  }

  .pro-list {
    background: transparent;
  }

  .nut-input {
    background: transparent;
  }
}
</style>