feat：【PAY 支付】示例转账单，改成示例提现单，理解成本更低

YunaiV · YunaiV · commit 79e9bea6bef9 · 2025-05-08T13:09:25.000+08:00
diff --git a/src/api/pay/transfer/index.ts b/src/api/pay/transfer/index.ts
@@ -18,7 +18,7 @@ export const createTransfer = async (data: TransferVO) => {
 }
 
 // 查询转账单列表
-export const getTransferPage = async (params) => {
+export const getTransferPage = async (params: PageParam) => {
   return await request.get({ url: `/pay/transfer/page`, params })
 }
 
diff --git a/src/utils/dict.ts b/src/utils/dict.ts
@@ -159,7 +159,6 @@ export enum DICT_TYPE {
   PAY_NOTIFY_STATUS = 'pay_notify_status', // 商户支付回调状态
   PAY_NOTIFY_TYPE = 'pay_notify_type', // 商户支付回调状态
   PAY_TRANSFER_STATUS = 'pay_transfer_status', // 转账订单状态
-  PAY_TRANSFER_TYPE = 'pay_transfer_type', // 转账订单状态
 
   // ========== MP 模块 ==========
   MP_AUTO_REPLY_REQUEST_MATCH = 'mp_auto_reply_request_match', // 自动回复请求匹配类型
diff --git a/src/views/pay/demo/withdraw/DemoWithdrawForm.vue b/src/views/pay/demo/withdraw/DemoWithdrawForm.vue
@@ -7,36 +7,31 @@
       label-width="120px"
       v-loading="formLoading"
     >
-      <el-form-item label="转账类型" prop="type">
+      <el-form-item label="提现标题" prop="subject">
+        <el-input v-model="formData.subject" placeholder="请输入提现标题" />
+      </el-form-item>
+      <el-form-item label="提现类型" prop="type">
         <el-radio-group v-model="formData.type">
-          <el-radio
-            v-for="dict in getIntDictOptions(DICT_TYPE.PAY_TRANSFER_TYPE)"
-            :key="dict.value"
-            :value="dict.value"
-            :disabled="dict.value === 2 || dict.value === 3 || dict.value === 4"
-          >
-            {{ dict.label }}
-          </el-radio>
+          <el-radio :value="1">支付宝</el-radio>
+          <el-radio :value="2">微信支付</el-radio>
+          <el-radio :value="3">钱包</el-radio>
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="转账金额(元)" prop="price">
+      <el-form-item label="提现金额" prop="price">
         <el-input-number
           v-model="formData.price"
           :min="0"
           :precision="2"
           :step="0.01"
-          placeholder="请输入转账金额"
+          placeholder="请输入提现金额"
           style="width: 200px"
         />
       </el-form-item>
       <el-form-item label="收款人姓名" prop="userName">
         <el-input v-model="formData.userName" placeholder="请输入收款人姓名" />
       </el-form-item>
-      <el-form-item v-show="formData.type === 1" label="支付宝登录账号" prop="alipayLogonId">
-        <el-input v-model="formData.alipayLogonId" placeholder="请输入支付宝登录账号" />
-      </el-form-item>
-      <el-form-item v-show="formData.type === 2" label="微信 openid" prop="openid">
-        <el-input v-model="formData.openid" placeholder="请输入微信 openid" />
+      <el-form-item label="收款人账号" prop="userAccount">
+        <el-input v-model="formData.userAccount" placeholder="请输入收款人账号" />
       </el-form-item>
     </el-form>
     <template #footer>
@@ -46,7 +41,7 @@
   </Dialog>
 </template>
 <script setup lang="ts">
-import * as DemoTransferApi from '@/api/pay/demo/transfer'
+import * as DemoWithdrawApi from '@/api/pay/demo/withdraw'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { yuanToFen } from '@/utils'
 const { t } = useI18n() // 国际化
@@ -56,17 +51,19 @@ const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const formData = ref({
-  id: undefined,
-  price: undefined,
-  type: undefined,
-  userName: undefined,
-  alipayLogonId: undefined,
-  openid: undefined
+const formData = ref<DemoWithdrawApi.PayDemoWithdrawVO>({
+  subject: '',
+  price: 0,
+  type: 1,
+  userName: '',
+  userAccount: ''
 })
 const formRules = reactive({
-  price: [{ required: true, message: '转账金额不能为空', trigger: 'blur' }],
-  type: [{ required: true, message: '转账类型不能为空', trigger: 'change' }]
+  subject: [{ required: true, message: '提现标题不能为空', trigger: 'blur' }],
+  price: [{ required: true, message: '提现金额不能为空', trigger: 'blur' }],
+  type: [{ required: true, message: '提现类型不能为空', trigger: 'change' }],
+  userName: [{ required: true, message: '收款人姓名不能为空', trigger: 'blur' }],
+  userAccount: [{ required: true, message: '收款人账号不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 
@@ -97,7 +94,7 @@ const submitForm = async () => {
     const data = { ...formData.value }
     data.price = yuanToFen(data.price)
     if (formType.value === 'create') {
-      await DemoTransferApi.createDemoTransfer(data)
+      await DemoWithdrawApi.createDemoWithdraw(data)
       message.success(t('common.createSuccess'))
     }
     dialogVisible.value = false
@@ -111,11 +108,11 @@ const submitForm = async () => {
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
-    id: undefined,
-    price: undefined,
-    userName: undefined,
-    alipayLogonId: undefined,
-    openid: undefined
+    subject: '',
+    price: 0,
+    type: 1,
+    userName: '',
+    userAccount: ''
   }
   formRef.value?.resetFields()
 }
diff --git a/src/views/pay/demo/withdraw/index.vue b/src/views/pay/demo/withdraw/index.vue
@@ -11,8 +11,8 @@
       <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" plain @click="openForm('create')"
-          ><Icon icon="ep:plus" />创建业务转账单
+        <el-button type="primary" plain @click="openForm('create')">
+          <Icon icon="ep:plus" />创建示例提现单
         </el-button>
       </el-form-item>
     </el-form>
@@ -21,53 +21,42 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true">
-      <el-table-column label="订单编号" align="center" prop="id" />
-      <el-table-column label="转账类型" align="center" prop="type" width="120">
+      <el-table-column label="提现单编号" align="center" prop="id" width="100" />
+      <el-table-column label="提现标题" align="center" prop="subject" min-width="120" />
+      <el-table-column label="提现类型" align="center" prop="type" min-width="90">
         <template #default="scope">
-          <dict-tag :type="DICT_TYPE.PAY_TRANSFER_TYPE" :value="scope.row.type" />
+          <el-tag v-if="scope.row.type === 1">支付宝</el-tag>
+          <el-tag v-else-if="scope.row.type === 2">微信支付</el-tag>
+          <el-tag v-else-if="scope.row.type === 3">钱包</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="转账金额" align="center" prop="price">
+      <el-table-column label="提现金额" align="center" prop="price" width="120">
         <template #default="scope">
           <span>￥{{ (scope.row.price / 100.0).toFixed(2) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="收款人姓名" align="center" prop="userName" width="120" />
-      <el-table-column label="支付宝登录账号" align="center" prop="alipayLogonId" width="180" />
-      <el-table-column label="微信 openid" align="center" prop="openid" width="120" />
-      <el-table-column label="转账状态" align="center" prop="transferStatus">
+      <el-table-column label="收款人姓名" align="center" prop="userName" min-width="150" />
+      <el-table-column label="收款人账号" align="center" prop="userAccount" min-width="250" />
+      <el-table-column label="提现状态" align="center" prop="status" width="100">
         <template #default="scope">
-          <dict-tag :type="DICT_TYPE.PAY_TRANSFER_STATUS" :value="scope.row.transferStatus" />
+          <el-tag v-if="scope.row.status === 0" type="warning">等待转账</el-tag>
+          <el-tag v-else-if="scope.row.status === 10" type="success">转账成功</el-tag>
+          <el-tag v-else-if="scope.row.status === 20" type="danger">转账失败</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="转账单号" align="center" prop="payTransferId" min-width="120" />
+      <el-table-column label="支付渠道" align="center" prop="transferChannelCode" min-width="180">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE" :value="scope.row.transferChannelCode" />
         </template>
       </el-table-column>
-      <el-table-column label="转账单号" align="center" prop="payTransferId" />
-      <el-table-column label="支付渠道" align="center" prop="payChannelCode" />
       <el-table-column
         label="转账时间"
         align="center"
         prop="transferTime"
         :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column
-        label="操作"
-        align="center"
-        class-name="small-padding fixed-width"
-        width="100"
-        fixed="right"
-      >
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="handleTransfer(scope.row)"
-            v-if="scope.row.transferStatus === 0"
-            v-hasPermi="['pay:transfer:create']"
-          >
-            发起转账
-          </el-button>
-        </template>
-      </el-table-column>
     </el-table>
     <!-- 分页 -->
     <Pagination
@@ -79,19 +68,14 @@
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改 -->
-  <DemoTransferForm ref="demoFormRef" @success="getList" />
-  <CreatePayTransfer ref="payTransferRef" @success="getList" />
+  <DemoWithdrawForm ref="demoFormRef" @success="getList" />
 </template>
 
 <script setup lang="ts">
 import { dateFormatter } from '@/utils/formatTime'
-import * as DemoTransferApi from '@/api/pay/demo/transfer'
-import * as PayTransferApi from '@/api/pay/transfer'
-import DemoTransferForm from './DemoTransferForm.vue'
-import CreatePayTransfer from '../../transfer/CreatePayTransfer.vue'
+import * as DemoWithdrawApi from '@/api/pay/demo/withdraw'
+import DemoWithdrawForm from './DemoWithdrawForm.vue'
 import { DICT_TYPE } from '@/utils/dict'
-const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
 
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
@@ -102,22 +86,11 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 
-let payTransfer = {
-  appId: undefined,
-  merchantTransferId: undefined,
-  type: undefined,
-  price: undefined,
-  subject: undefined,
-  userName: undefined,
-  alipayLogonId: undefined,
-  openid: undefined
-} as PayTransferApi.TransferVO // 传递给转账订单的数据
-
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
-    const data = await DemoTransferApi.getDemoTransferPage(queryParams)
+    const data = await DemoWithdrawApi.getDemoWithdrawPage(queryParams)
     list.value = data.list
     total.value = data.total
   } finally {
@@ -137,21 +110,12 @@ const resetQuery = () => {
   handleQuery()
 }
 
-/** 创建业务转账单操作 */
+/** 创建示例提现单操作 */
 const demoFormRef = ref()
-const payTransferRef = ref()
 const openForm = (type: string) => {
   demoFormRef.value.open(type)
 }
 
-/** 发起转账操作 */
-const handleTransfer = (row: any) => {
-  payTransfer = { ...row }
-  payTransfer.merchantTransferId = row.id.toString()
-  payTransfer.subject = '示例转账'
-  payTransferRef.value.showPayTransfer(payTransfer)
-}
-
 /** 初始化 **/
 onMounted(() => {
   getList()
diff --git a/src/views/pay/transfer/CreatePayTransfer.vue b/src/views/pay/transfer/CreatePayTransfer.vue

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ export const createTransfer = async (data: TransferVO) => {`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`// 查询转账单列表`
`21`		`-export const getTransferPage = async (params) => {`
	`21`	`+export const getTransferPage = async (params: PageParam) => {`
`22`	`22`	return await request.get({ url: `/pay/transfer/page`, params })
`23`	`23`	`}`
`24`	`24`