From b9417fa80146902cfb44a0091869f9189b41509e Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期二, 09 九月 2025 15:07:52 +0800
Subject: [PATCH] feat: 钱包

---
 apps/cMiniApp/src/subpackages/wallet/incomeDetail/InnerPage.vue |  130 ++++++++++++++++++++++++++++++++++++++-----
 1 files changed, 115 insertions(+), 15 deletions(-)

diff --git a/apps/cMiniApp/src/subpackages/wallet/incomeDetail/InnerPage.vue b/apps/cMiniApp/src/subpackages/wallet/incomeDetail/InnerPage.vue
index 1c4f0c5..871315d 100644
--- a/apps/cMiniApp/src/subpackages/wallet/incomeDetail/InnerPage.vue
+++ b/apps/cMiniApp/src/subpackages/wallet/incomeDetail/InnerPage.vue
@@ -1,42 +1,121 @@
 <template>
+  <!-- <ProTabs
+    v-model="queryState.type"
+    name="home-tab"
+    :showPaneContent="false"
+    class="home-tabs"
+    isTransparent
+    title-gutter="12"
+    title-scroll
+  >
+    <ProTabPane :title="`鍏ㄩ儴`" :pane-key="0"></ProTabPane>
+    <ProTabPane :title="`鏀跺叆`" :pane-key="EnumUserWalletTransactionType.Income"></ProTabPane>
+    <ProTabPane :title="`鎻愮幇`" :pane-key="EnumUserWalletTransactionType.Withdraw"></ProTabPane>
+  </ProTabs> -->
   <List>
-    <IncomeDetailListItem :item="'鏀跺叆:锟�600.00'">
+    <IncomeDetailListItem
+      :item="`鏀跺叆锛氾骏${toThousand(sumIncome)} 鎻愮幇锛氾骏${toThousand(sumWithdraw)}`"
+    >
       <template #title>
         <div class="income-detail-time-picker">
-          <ChooseInputWithPicker v-model="form.month" :value-enum="TaskStatusText" />
+          <ChooseInputWithDatePicker
+            v-model="queryState.month"
+            type="year-month"
+            :max-date="nowDate"
+            format="YYYY-MM"
+          />
+          <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.type"
+  >
+    <template #renderItem="{ item }">
+      <IncomeDetailListItem
+        :title="item.title"
+        :funds="item.amount"
+        :item="dayjs(item.createdTime).format('YYYY-MM-DD HH:mm:ss')"
+        :value="`閽卞寘浣欓锛�${toThousand(item.balance)}`"
+        @click="goIncomeDetailInfo(item)"
+      >
+      </IncomeDetailListItem>
+    </template>
+  </InfiniteLoading>
 </template>
 
 <script setup lang="ts">
-import { List, IncomeDetailListItem, ChooseInputWithPicker } from '@12333/components';
-import { TaskStatusText, TaskStatus } from '@/constants';
+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, EnumUserWalletTransactionType } from '@12333/constants';
+import { toThousand } from '@12333/utils';
+import * as userServices from '@12333/services/apiV2/user';
 
 defineOptions({
   name: 'InnerPage',
 });
 
 const userStore = useUserStore();
+const nowDate = dayjs().toDate();
 
-const form = reactive({
-  month: TaskStatus.All,
+const queryState = reactive({
+  month: dayjs().format('YYYY-MM'),
+  type: 0 as any as EnumUserWalletTransactionType,
 });
 
-function goIncomeDetailInfo() {
+const sumIncome = computed(() => {
+  return infiniteLoadingProps.value?.listData?.pages?.[0]?.objectData?.sumIncome ?? 0;
+});
+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.Income,
+    };
+    // 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],
+  }
+);
+
+function goIncomeDetailInfo(row: API.GetPersonalUserTransactionsQueryResultItem) {
   Taro.navigateTo({
-    url: `${RouterPath.incomeDetailInfo}`,
+    url: `${RouterPath.incomeDetailInfo}?id=${row.id}`,
   });
+  // Taro.navigateTo({
+  //   url: `${RouterPath.withdrawDetailInfo}`,
+  // });
 }
 </script>
 
@@ -45,9 +124,12 @@
 
 .incomeDetail-page-wrapper {
   .income-detail-time-picker {
+    position: relative;
+
     .nut-input {
       border-bottom: none;
       padding: 0;
+      width: 100%;
 
       .input-text {
         font-size: 20px;
@@ -59,6 +141,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>

--
Gitblit v1.9.1