zhengyiming
2 天以前 b626d79c65da6f5e269fdc2af9c71dcd1823bac1
apps/cMiniApp/src/subpackages/wallet/incomeDetail/InnerPage.vue
@@ -1,32 +1,66 @@
<template>
  <ProTabs
    v-model="queryState.status"
    name="home-tab"
    :showPaneContent="false"
    class="home-tabs"
    isTransparent
    title-gutter="12"
    title-scroll
  >
    <ProTabPane :title="`全部`" :pane-key="0"></ProTabPane>
    <ProTabPane :title="`收入`" :pane-key="1"></ProTabPane>
    <ProTabPane :title="`提现`" :pane-key="2"></ProTabPane>
  </ProTabs>
  <List>
    <IncomeDetailListItem :item="'收入:¥600.00'">
    <IncomeDetailListItem :item="`收入:¥${toThousand(100)} 提现:¥${toThousand(200)}`">
      <template #title>
        <div class="income-detail-time-picker">
          <ChooseInputWithDatePicker
            v-model="form.month"
            v-model="queryState.month"
            type="year-month"
            format="YYYY年M月"
            :max-date="nowDate"
          />
          <IconFont name="triangle-down" class="income-detail-time-picker-icon"></IconFont>
        </div>
      </template>
    </IncomeDetailListItem>
    <IncomeDetailListItem
      :title="'收入-宁波人力无忧'"
      :item="'2024.12.20 13:30:30'"
      :value="'+300.00'"
      @click="goIncomeDetailInfo()"
    >
    </IncomeDetailListItem>
  </List>
  <InfiniteLoading
    scrollViewClassName="common-infinite-scroll-list home-list"
    v-bind="infiniteLoadingProps"
    :key="queryState.status"
  >
    <template #renderItem="{ item }">
      <IncomeDetailListItem
        :title="'收入-宁波人力无忧'"
        :funds="'+300.00'"
        :item="'2024.12.20 13:30:30'"
        :value="'钱包余额:300.00'"
        @click="goIncomeDetailInfo()"
      >
      </IncomeDetailListItem>
    </template>
  </InfiniteLoading>
</template>
<script setup lang="ts">
import { List, IncomeDetailListItem, ChooseInputWithDatePicker } from '@12333/components';
import {
  List,
  IncomeDetailListItem,
  ChooseInputWithDatePicker,
  ProTabs,
  ProTabPane,
} from '@12333/components';
import { useUserStore } from '@/stores/modules/user';
import { IconFont } from '@nutui/icons-vue-taro';
import Taro from '@tarojs/taro';
import dayjs from 'dayjs';
import { useInfiniteLoading } from '@12333/hooks';
import { EnumPagedListOrder } from '@12333/constants';
import { toThousand } from '@12333/utils';
import * as taskServices from '@12333/services/apiV2/task';
defineOptions({
  name: 'InnerPage',
@@ -34,14 +68,40 @@
const userStore = useUserStore();
const nowDate = dayjs().toDate();
const form = reactive({
const queryState = reactive({
  month: dayjs().format('YYYY年M月'),
  status: 0,
});
function goIncomeDetailInfo() {
const { infiniteLoadingProps } = useInfiniteLoading(
  ({ pageParam }) => {
    let params: API.GetPersonalApplyTaskInfosQuery = {
      pageModel: {
        rows: 20,
        page: pageParam,
        orderInput: [{ property: 'id', order: EnumPagedListOrder.Desc }],
      },
    };
    if (Number(queryState.status)) {
      params.status = queryState.status;
    }
    return taskServices.getPersonalApplyTaskInfos(params, {
      showLoading: false,
    });
  },
  {
    queryKey: ['taskServices/getPersonalApplyTaskInfos', queryState],
  }
);
function goIncomeDetailInfo(row?) {
  Taro.navigateTo({
    url: `${RouterPath.incomeDetailInfo}`,
  });
  // Taro.navigateTo({
  //   url: `${RouterPath.withdrawDetailInfo}`,
  // });
}
</script>
@@ -50,9 +110,12 @@
.incomeDetail-page-wrapper {
  .income-detail-time-picker {
    position: relative;
    .nut-input {
      border-bottom: none;
      padding: 0;
      width: 100%;
      .input-text {
        font-size: 20px;
@@ -64,6 +127,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>