钱包 - 钱包余额流水

src/api/pay/wallet/transaction/index.ts

+import request from '@/config/axios'
+
+export interface WalletTransactionVO {
+  id: number
+  walletId: number
+  title: string
+  price: number
+  balance: number
+}
+
+// 查询会员钱包流水列表
+export const getWalletTransactionPage = async (params) => {
+  return await request.get({ url: `/pay/wallet-transaction/page`, params })
+}

src/views/pay/wallet/balance/WalletForm.vue

 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
-    <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="100px"
-      v-loading="formLoading"
-    >
-      <el-form-item label="用户编号" prop="userId">
-        <el-input v-model="formData.userId" placeholder="请输入用户编号" />
-      </el-form-item>
-      <el-form-item label="用户类型" prop="userType">
-        <el-select v-model="formData.userType" placeholder="请选择用户类型">
-          <el-option label="请选择字典生成" value="" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="余额，单位分" prop="balance">
-        <el-input v-model="formData.balance" placeholder="请输入余额，单位分" />
-      </el-form-item>
-      <el-form-item label="累计支出，单位分" prop="totalExpense">
-        <el-input v-model="formData.totalExpense" placeholder="请输入累计支出，单位分" />
-      </el-form-item>
-      <el-form-item label="累计充值，单位分" prop="totalRecharge">
-        <el-input v-model="formData.totalRecharge" placeholder="请输入累计充值，单位分" />
-      </el-form-item>
-      <el-form-item label="冻结金额，单位分" prop="freezePrice">
-        <el-input v-model="formData.freezePrice" placeholder="请输入冻结金额，单位分" />
-      </el-form-item>
-    </el-form>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="800">
+    <WalletTransactionList :wallet-id="walletId" />
     <template #footer>
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
 </template>
 <script setup lang="ts">
-import * as WalletApi from '@/api/pay/wallet/balance'
-
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
-
+import WalletTransactionList from '../transaction/WalletTransactionList.vue'
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const formData = ref({
-  id: undefined,
-  userId: undefined,
-  userType: undefined,
-  balance: undefined,
-  totalExpense: undefined,
-  totalRecharge: undefined,
-  freezePrice: undefined
-})
-const formRules = reactive({
-  userId: [{ required: true, message: '用户编号不能为空', trigger: 'blur' }],
-  userType: [{ required: true, message: '用户类型不能为空', trigger: 'change' }],
-  balance: [{ required: true, message: '余额，单位分不能为空', trigger: 'blur' }],
-  totalExpense: [{ required: true, message: '累计支出，单位分不能为空', trigger: 'blur' }],
-  totalRecharge: [{ required: true, message: '累计充值，单位分不能为空', trigger: 'blur' }],
-  freezePrice: [{ required: true, message: '冻结金额，单位分不能为空', trigger: 'blur' }]
-})
-const formRef = ref() // 表单 Ref
-
+const walletId = ref(0)
 /** 打开弹窗 */
-const open = async (type: string, id?: number) => {
+const open = async (theWalletId: number) => {
   dialogVisible.value = true
-  dialogTitle.value = t('action.' + type)
-  formType.value = type
-  resetForm()
-  // 修改时，设置数据
-  if (id) {
-    formLoading.value = true
-    try {
-      formData.value = await WalletApi.getWallet(id)
-    } finally {
-      formLoading.value = false
-    }
-  }
+  dialogTitle.value = '钱包余额明细'
+  walletId.value = theWalletId
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: undefined,
-    userId: undefined,
-    userType: undefined,
-    balance: undefined,
-    totalExpense: undefined,
-    totalRecharge: undefined,
-    freezePrice: undefined
-  }
-  formRef.value?.resetFields()
-}
 </script>

src/views/pay/wallet/balance/index.vue

@@ -46,9 +46,6 @@
       <el-form-item>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button type="primary" @click="openForm('create')" v-hasPermi="['pay:wallet:create']">
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
-        </el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
@@ -84,14 +81,7 @@
       />
       <el-table-column label="操作" align="center">
         <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['pay:wallet:update']"
-          >
-            编辑
-          </el-button>
+          <el-button link type="primary" @click="openForm(scope.row.id)">详情</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -104,8 +94,8 @@
     />
   </ContentWrap>
 
-  <!-- 表单弹窗：添加/修改 -->
-  <WalletForm ref="formRef" @success="getList" />
+  <!-- 弹窗 -->
+  <WalletForm ref="formRef" />
 </template>
 
 <script setup lang="ts">
@@ -163,8 +153,8 @@ const resetQuery = () => {
 
 /** 添加/修改操作 */
 const formRef = ref()
-const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
+const openForm = (id?: number) => {
+  formRef.value.open(id)
 }
 
 /** 初始化 **/

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">
+        <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: 'WalletTransactionList' })
+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>