From bfd94e08a36b4449c842b6310b65d66b6b0bcd3c Mon Sep 17 00:00:00 2001 From: wupengfei <834520024@qq.com> Date: 星期二, 09 九月 2025 14:47:27 +0800 Subject: [PATCH] feat: 钱包 --- apps/cMiniApp/src/subpackages/wallet/incomeDetail/InnerPage.vue | 124 ++++++++++++++++++++++++++++++++++++----- 1 files changed, 109 insertions(+), 15 deletions(-) diff --git a/apps/cMiniApp/src/subpackages/wallet/incomeDetail/InnerPage.vue b/apps/cMiniApp/src/subpackages/wallet/incomeDetail/InnerPage.vue index b33d8d1..c123918 100644 --- a/apps/cMiniApp/src/subpackages/wallet/incomeDetail/InnerPage.vue +++ b/apps/cMiniApp/src/subpackages/wallet/incomeDetail/InnerPage.vue @@ -1,32 +1,67 @@ <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"> <ChooseInputWithDatePicker - v-model="form.month" + v-model="queryState.month" type="year-month" - format="YYYY骞碝鏈�" :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.type" + > + <template #renderItem="{ item }"> + <IncomeDetailListItem + :title="item.title" + :funds="item.amount" + :item="item.createdTime" + :value="`閽卞寘浣欓锛�${item.balance}`" + @click="goIncomeDetailInfo(item)" + > + </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, EnumUserWalletTransactionType } from '@12333/constants'; +import { toThousand } from '@12333/utils'; +import * as userServices from '@12333/services/apiV2/user'; defineOptions({ name: 'InnerPage', @@ -34,14 +69,52 @@ const userStore = useUserStore(); const nowDate = dayjs().toDate(); -const form = reactive({ - month: dayjs().format('YYYY骞碝鏈�'), + +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> @@ -50,9 +123,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 +140,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