From 687c96bb0e2626019b87511f2dbe2a5d071f8dd9 Mon Sep 17 00:00:00 2001
From: GoldenZqqqq <1361001127@qq.com>
Date: Sun, 18 Aug 2024 21:42:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=9A=E5=91=98=E8=AF=A6=E6=83=85-?=
 =?UTF-8?q?=E4=BD=99=E9=A2=9Dtab=E9=A1=B5=E9=9D=A2=E5=88=9D=E5=A7=8B?=
 =?UTF-8?q?=E5=8C=96=EF=BC=9B=E5=B0=86=E6=9F=A5=E8=AF=A2=E4=BC=9A=E5=91=98?=
 =?UTF-8?q?=E8=B4=A6=E6=88=B7=E4=BF=A1=E6=81=AF=E6=8E=A5=E5=8F=A3=E8=B0=83?=
 =?UTF-8?q?=E7=94=A8=E9=80=BB=E8=BE=91=E6=8A=BD=E5=8F=96=E5=88=B0=E7=88=B6?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=96=B9=E4=BE=BF=E4=BD=99=E9=A2=9D?=
 =?UTF-8?q?tab=E9=A1=B5=E9=9D=A2=E4=BD=BF=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../member/user/detail/UserAccountInfo.vue    | 26 +------
 .../member/user/detail/UserBalanceList.vue    | 68 +++++++++++++++++++
 src/views/member/user/detail/index.vue        | 26 ++++++-
 3 files changed, 93 insertions(+), 27 deletions(-)
 create mode 100644 src/views/member/user/detail/UserBalanceList.vue

diff --git a/src/views/member/user/detail/UserAccountInfo.vue b/src/views/member/user/detail/UserAccountInfo.vue
index 56a6ab63..7b7d6622 100644
--- a/src/views/member/user/detail/UserAccountInfo.vue
+++ b/src/views/member/user/detail/UserAccountInfo.vue
@@ -50,31 +50,7 @@ import * as UserApi from '@/api/member/user'
 import * as WalletApi from '@/api/pay/wallet/balance'
 import { UserTypeEnum } from '@/utils/constants'
 import { fenToYuan } from '@/utils'
-
-const props = defineProps<{ user: UserApi.UserVO }>() // 用户信息
-const WALLET_INIT_DATA = {
-  balance: 0,
-  totalExpense: 0,
-  totalRecharge: 0
-} as WalletApi.WalletVO // 钱包初始化数据
-const wallet = ref<WalletApi.WalletVO>(WALLET_INIT_DATA) // 钱包信息
-
-/** 查询用户钱包信息 */
-const getUserWallet = async () => {
-  if (!props.user.id) {
-    wallet.value = WALLET_INIT_DATA
-    return
-  }
-  const params = { userId: props.user.id }
-  wallet.value = (await WalletApi.getWallet(params)) || WALLET_INIT_DATA
-}
-
-/** 监听用户编号变化 */
-watch(
-  () => props.user.id,
-  () => getUserWallet(),
-  { immediate: true }
-)
+const props = defineProps<{ user: UserApi.UserVO; wallet: WalletApi.WalletVO }>() // 用户信息
 </script>
 <style scoped lang="scss">
 .cell-item {
diff --git a/src/views/member/user/detail/UserBalanceList.vue b/src/views/member/user/detail/UserBalanceList.vue
new file mode 100644
index 00000000..6c2c5cf2
--- /dev/null
+++ b/src/views/member/user/detail/UserBalanceList.vue
@@ -0,0 +1,68 @@
+<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">
+        <template #default="{ row }"> {{ fenToYuan(row.price) }} 元</template>
+      </el-table-column>
+      <el-table-column label="钱包余额" align="center" prop="balance">
+        <template #default="{ row }"> {{ fenToYuan(row.balance) }} 元</template>
+      </el-table-column>
+      <el-table-column
+        label="交易时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+</template>
+
+<script lang="ts" setup>
+import { dateFormatter } from '@/utils/formatTime'
+import * as WalletTransactionApi from '@/api/pay/wallet/transaction'
+import { fenToYuan } from '@/utils'
+defineOptions({ name: 'UserBalanceList' })
+const { walletId }: { walletId: number } = defineProps({
+  walletId: {
+    type: Number,
+    required: false
+  }
+})
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  walletId: null
+})
+const list = ref([]) // 列表的数据
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    queryParams.walletId = walletId
+    const data = await WalletTransactionApi.getWalletTransactionPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
+<style scoped lang="scss"></style>
diff --git a/src/views/member/user/detail/index.vue b/src/views/member/user/detail/index.vue
index 52862c3c..c87c1253 100644
--- a/src/views/member/user/detail/index.vue
+++ b/src/views/member/user/detail/index.vue
@@ -20,7 +20,7 @@
           <template #header>
             <CardTitle title="账户信息" />
           </template>
-          <UserAccountInfo :user="user" />
+          <UserAccountInfo :user="user" :wallet="wallet"/>
         </el-card>
       </el-col>
       <!-- 下边：账户明细 -->
@@ -40,7 +40,9 @@
             <UserExperienceRecordList :user-id="id" />
           </el-tab-pane>
           <!-- TODO @jason：增加一个余额变化； -->
-          <el-tab-pane label="余额" lazy>余额(WIP)</el-tab-pane>
+          <el-tab-pane label="余额" lazy>
+            <UserBalanceList :wallet-id="wallet.id" />
+          </el-tab-pane>
           <el-tab-pane label="收货地址" lazy>
             <UserAddressList :user-id="id" />
           </el-tab-pane>
@@ -68,6 +70,7 @@
   <UserForm ref="formRef" @success="getUserData(id)" />
 </template>
 <script setup lang="ts">
+import * as WalletApi from '@/api/pay/wallet/balance'
 import * as UserApi from '@/api/member/user'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import UserForm from '@/views/member/user/UserForm.vue'
@@ -111,6 +114,24 @@ const { currentRoute } = useRouter() // 路由
 const { delView } = useTagsViewStore() // 视图操作
 const route = useRoute()
 const id = Number(route.params.id)
+/* 用户钱包相关信息 */
+const WALLET_INIT_DATA = {
+  balance: 0,
+  totalExpense: 0,
+  totalRecharge: 0
+} as WalletApi.WalletVO // 钱包初始化数据
+const wallet = ref<WalletApi.WalletVO>(WALLET_INIT_DATA) // 钱包信息
+
+/** 查询用户钱包信息 */
+const getUserWallet = async () => {
+  if (!id) {
+    wallet.value = WALLET_INIT_DATA
+    return
+  }
+  const params = { userId: id }
+  wallet.value = (await WalletApi.getWallet(params)) || WALLET_INIT_DATA
+}
+
 onMounted(() => {
   if (!id) {
     ElMessage.warning('参数错误，会员编号不能为空！')
@@ -118,6 +139,7 @@ onMounted(() => {
     return
   }
   getUserData(id)
+  getUserWallet()
 })
 </script>
 <style scoped lang="css">