【新增】MALL: 会员详情增加钱包流水界面

src/views/member/user/detail/index.vue

@@ -7,7 +7,7 @@
           <template #header>
             <div class="card-header">
               <CardTitle title="基本信息" />
-              <el-button type="primary" size="small" text @click="openForm('update')">
+              <el-button size="small" text type="primary" @click="openForm('update')">
                 编辑
               </el-button>
             </div>
@@ -16,7 +16,7 @@
       </el-col>
       <!-- 右上角：账户信息 -->
       <el-col :span="10" class="detail-info-item">
-        <el-card shadow="never" class="h-full">
+        <el-card class="h-full" shadow="never">
           <template #header>
             <CardTitle title="账户信息" />
           </template>
@@ -25,7 +25,7 @@
       </el-col>
       <!-- 下边：账户明细 -->
       <!-- TODO 芋艿：【订单管理】【售后管理】【收藏记录】-->
-      <el-card header="账户明细" style="width: 100%; margin-top: 20px" shadow="never">
+      <el-card header="账户明细" shadow="never" style="width: 100%; margin-top: 20px">
         <template #header>
           <CardTitle title="账户明细" />
         </template>
@@ -39,8 +39,9 @@
           <el-tab-pane label="成长值" lazy>
             <UserExperienceRecordList :user-id="id" />
           </el-tab-pane>
-          <!-- TODO @jason：增加一个余额变化； -->
-          <el-tab-pane label="余额" lazy>余额(WIP)</el-tab-pane>
+          <el-tab-pane label="余额" lazy>
+            <WalletTransactionList :user-id="id" />
+          </el-tab-pane>
           <el-tab-pane label="收货地址" lazy>
             <UserAddressList :user-id="id" />
           </el-tab-pane>
@@ -65,7 +66,7 @@
   <!-- 表单弹窗：添加/修改 -->
   <UserForm ref="formRef" @success="getUserData(id)" />
 </template>
-<script setup lang="ts">
+<script lang="ts" setup>
 import * as UserApi from '@/api/member/user'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import UserForm from '@/views/member/user/UserForm.vue'
@@ -79,6 +80,7 @@ import UserOrderList from './UserOrderList.vue'
 import UserPointList from './UserPointList.vue'
 import UserSignList from './UserSignList.vue'
 import UserFavoriteList from './UserFavoriteList.vue'
+import WalletTransactionList from '@/views/pay/wallet/transaction/WalletTransactionList.vue'
 import { CardTitle } from '@/components/Card/index'
 import { ElMessage } from 'element-plus'
 
@@ -117,7 +119,7 @@ onMounted(() => {
   getUserData(id)
 })
 </script>
-<style scoped lang="css">
+<style lang="css" scoped>
 .detail-info-item:first-child {
   padding-left: 0 !important;
 }

src/views/pay/wallet/transaction/WalletTransactionList.vue

 <template>
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="编号" align="center" prop="id" />
-      <el-table-column label="钱包编号" align="center" prop="walletId" />
-      <el-table-column label="关联业务标题" align="center" prop="title" />
-      <el-table-column label="交易金额" align="center" prop="price">
+    <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
+      <el-table-column align="center" label="编号" prop="id" />
+      <el-table-column align="center" label="钱包编号" prop="walletId" />
+      <el-table-column align="center" label="关联业务标题" prop="title" />
+      <el-table-column align="center" label="交易金额" prop="price">
         <template #default="{ row }"> {{ fenToYuan(row.price) }} 元</template>
       </el-table-column>
-      <el-table-column label="钱包余额" align="center" prop="balance">
+      <el-table-column align="center" label="钱包余额" prop="balance">
         <template #default="{ row }"> {{ fenToYuan(row.balance) }} 元</template>
       </el-table-column>
       <el-table-column
-        label="交易时间"
+        :formatter="dateFormatter"
         align="center"
+        label="交易时间"
         prop="createTime"
-        :formatter="dateFormatter"
         width="180px"
       />
     </el-table>
     <!-- 分页 -->
     <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
       v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
       @pagination="getList"
     />
   </ContentWrap>
@@ -31,12 +31,18 @@
 <script lang="ts" setup>
 import { dateFormatter } from '@/utils/formatTime'
 import * as WalletTransactionApi from '@/api/pay/wallet/transaction'
+import * as WalletApi from '@/api/pay/wallet/balance'
 import { fenToYuan } from '@/utils'
+
 defineOptions({ name: 'WalletTransactionList' })
-const { walletId }: { walletId: number } = defineProps({
+const props = defineProps({
   walletId: {
     type: Number,
     required: false
+  },
+  userId: {
+    type: Number,
+    required: false
   }
 })
 
@@ -52,7 +58,12 @@ const list = ref([]) // 列表的数据
 const getList = async () => {
   loading.value = true
   try {
-    queryParams.walletId = walletId
+    if (props.userId) {
+      const wallet = await WalletApi.getWallet({ userId: props.userId })
+      queryParams.walletId = wallet.id as any
+    } else {
+      queryParams.walletId = props.walletId as any
+    }
     const data = await WalletTransactionApi.getWalletTransactionPage(queryParams)
     list.value = data.list
     total.value = data.total
@@ -65,4 +76,4 @@ onMounted(() => {
   getList()
 })
 </script>
-<style scoped lang="scss"></style>
+<style lang="scss" scoped></style>