| <template> | 
|   <WithdrawMoneyCard | 
|     :money="detail?.amount" | 
|     :title="EnumUserWalletTransactionTypeText[detail.type]" | 
|   ></WithdrawMoneyCard> | 
|   <List> | 
|     <ListItem title="流水号" :show-arrow="false"> | 
|       <template #extra> | 
|         <div class="income-detail-info-value">{{ detail?.code }}</div> | 
|       </template> | 
|     </ListItem> | 
|     <ListItem title="企业名称" :show-arrow="false"> | 
|       <template #extra> | 
|         <div class="income-detail-info-value">{{ detail?.enterpriseName }}</div> | 
|       </template> | 
|     </ListItem> | 
|     <ListItem title="结算日期" :show-arrow="false"> | 
|       <template #extra> | 
|         <div class="income-detail-info-value"> | 
|           {{ dayjs(detail?.settlementTime).format('YYYY-MM-DD') }} | 
|         </div> | 
|       </template> | 
|     </ListItem> | 
|     <ListItem title="结算金额" :show-arrow="false"> | 
|       <template #extra> | 
|         <div class="income-detail-info-value"> | 
|           {{ `${toThousand(detail?.settlementAmount)}元` }} | 
|         </div> | 
|       </template> | 
|     </ListItem> | 
|     <ListItem title="实发金额" :show-arrow="false"> | 
|       <template #extra> | 
|         <div class="income-detail-info-value">{{ `${toThousand(detail?.amount)}元` }}</div> | 
|       </template> | 
|     </ListItem> | 
|   </List> | 
| </template> | 
|   | 
| <script setup lang="ts"> | 
| import { List, ListItem, WithdrawMoneyCard } from '@12333/components'; | 
| import { EnumUserWalletTransactionTypeText } from '@12333/constants'; | 
| import Taro from '@tarojs/taro'; | 
| import dayjs from 'dayjs'; | 
| import { toThousand } from '@12333/utils'; | 
| import { useGetPersonalUserTransaction } from '../hooks'; | 
|   | 
| defineOptions({ | 
|   name: 'InnerPage', | 
| }); | 
|   | 
| const router = Taro.useRouter(); | 
| const id = router.params?.id; | 
|   | 
| const { detail } = useGetPersonalUserTransaction({ | 
|   id: id, | 
| }); | 
| </script> | 
|   | 
| <style lang="scss"> | 
| @import '@/styles/common.scss'; | 
|   | 
| .incomeDetailInfo-page-wrapper { | 
|   .income-detail-info-money { | 
|     display: flex; | 
|     align-items: center; | 
|     justify-content: center; | 
|     flex-direction: column; | 
|     background-color: #ffffff; | 
|     padding: 70px 0; | 
|   | 
|     .income-detail-info-money-value { | 
|       display: flex; | 
|       align-items: center; | 
|       font-weight: 600; | 
|       color: boleGetCssVar('text-color', 'primary'); | 
|   | 
|       .income-detail-info-money-value-unit { | 
|         font-size: 32px; | 
|       } | 
|   | 
|       .income-detail-info-money-value-num { | 
|         font-size: 64px; | 
|       } | 
|     } | 
|   | 
|     .income-detail-info-money-type { | 
|       margin-top: 10px; | 
|       font-weight: 400; | 
|       font-size: 28px; | 
|       color: boleGetCssVar('text-color', 'primary'); | 
|     } | 
|   } | 
| } | 
| </style> |