feat：【PAY 支付】提现示例，拆分 create 和 transfer 两个状态，更符合实际场景

Author: YunaiV

src/api/pay/demo/transfer/index.ts

@@ -0,0 +1,30 @@
+import request from '@/config/axios'
+
+export interface PayDemoWithdrawVO {
+  id?: number
+  subject: string
+  price: number
+  userName: string
+  userAccount: string
+  type: number
+  status?: number
+  payTransferId?: number
+  transferChannelCode?: string
+  transferTime?: Date
+  transferErrorMsg?: string
+}
+
+// 查询示例提现单列表
+export const getDemoWithdrawPage = (params: PageParam) => {
+  return request.get({ url: '/pay/demo-withdraw/page', params })
+}
+
+// 创建示例提现单
+export const createDemoWithdraw = (data: PayDemoWithdrawVO) => {
+  return request.post({ url: '/pay/demo-withdraw/create', data })
+}
+
+// 发起提现单转账
+export const transferDemoWithdraw = (id: number) => {
+  return request.post({ url: '/pay/demo-withdraw/transfer', params: { id } })
+}

src/api/pay/demo/withdraw/index.ts

@@ -1,5 +1,6 @@
 import request from '@/config/axios'
 
+// TODO @芋艿：调整字段
 export interface TransferVO {
   appId: number
   channelCode: string
@@ -12,11 +13,6 @@ export interface TransferVO {
   openid: string
 }
 
-// 新增转账单
-export const createTransfer = async (data: TransferVO) => {
-  return await request.post({ url: `/pay/transfer/create`, data })
-}
-
 // 查询转账单列表
 export const getTransferPage = async (params: PageParam) => {
   return await request.get({ url: `/pay/transfer/page`, params })

src/api/pay/transfer/index.ts

@@ -13,26 +13,26 @@
       <el-form-item label="提现类型" prop="type">
         <el-radio-group v-model="formData.type">
           <el-radio :value="1">支付宝</el-radio>
-          <el-radio :value="2">微信支付</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-input-number
           v-model="formData.price"
-          :min="0"
+          :min="0.01"
           :precision="2"
           :step="0.01"
           placeholder="请输入提现金额"
           style="width: 200px"
         />
       </el-form-item>
+      <el-form-item label="收款人账号" prop="userAccount">
+        <el-input v-model="formData.userAccount" :placeholder="getAccountPlaceholder()" />
+      </el-form-item>
       <el-form-item label="收款人姓名" prop="userName">
         <el-input v-model="formData.userName" placeholder="请输入收款人姓名" />
       </el-form-item>
-      <el-form-item label="收款人账号" prop="userAccount">
-        <el-input v-model="formData.userAccount" placeholder="请输入收款人账号" />
-      </el-form-item>
     </el-form>
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
@@ -41,8 +41,7 @@
   </Dialog>
 </template>
 <script setup lang="ts">
-import * as DemoWithdrawApi from '@/api/pay/demo/withdraw'
-import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import * as DemoWithdrawApi from '@/api/pay/demo/withdraw/index'
 import { yuanToFen } from '@/utils'
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -62,8 +61,7 @@ const formRules = reactive({
   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' }]
+  userAccount: [{ required: true, message: '收款人账号不能为空', trigger: 'blur' }],
 })
 const formRef = ref() // 表单 Ref
 
@@ -116,4 +114,16 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
+
+/** 根据提现类型获取账号输入框的占位符文本 */
+const getAccountPlaceholder = () => {
+  if (formData.value.type === 1) {
+    return '请输入支付宝账号'
+  } else if (formData.value.type === 2) {
+    return '请输入微信 openid'
+  } else if (formData.value.type === 3) {
+    return '请输入钱包编号'
+  }
+  return '请输入收款人账号'
+}
 </script>

src/views/pay/demo/withdraw/DemoWithdrawForm.vue

@@ -21,13 +21,33 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true">
+      <el-table-column label="操作" align="center" width="100">
+        <template #default="scope">
+          <el-button
+            v-if="scope.row.status === 0"
+            type="primary"
+            link
+            @click="handleTransfer(scope.row.id)"
+          >
+            发起转账
+          </el-button>
+          <el-button
+            v-if="scope.row.status === 20"
+            type="warning"
+            link
+            @click="handleTransfer(scope.row.id)"
+          >
+            重新转账
+          </el-button>
+        </template>
+      </el-table-column>
       <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">
           <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>
+          <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" width="120">
@@ -45,7 +65,7 @@
         </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">
+      <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>
@@ -57,6 +77,12 @@
         :formatter="dateFormatter"
         width="180px"
       />
+      <el-table-column
+        label="转账失败原因"
+        align="center"
+        prop="transferErrorMsg"
+        min-width="200"
+      />
     </el-table>
     <!-- 分页 -->
     <Pagination
@@ -73,10 +99,12 @@
 
 <script setup lang="ts">
 import { dateFormatter } from '@/utils/formatTime'
-import * as DemoWithdrawApi from '@/api/pay/demo/withdraw'
+import * as DemoWithdrawApi from '@/api/pay/demo/withdraw/index'
 import DemoWithdrawForm from './DemoWithdrawForm.vue'
 import { DICT_TYPE } from '@/utils/dict'
+import { useMessage } from '@/hooks/web/useMessage'
 
+const message = useMessage()
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
@@ -116,6 +144,22 @@ const openForm = (type: string) => {
   demoFormRef.value.open(type)
 }
 
+/** 处理转账操作 */
+const handleTransfer = async (id: number) => {
+  try {
+    // 转账操作的二次确认
+    await message.confirm('确认要执行转账操作吗?')
+    // 发起转账
+    loading.value = true
+    const payTransferId = await DemoWithdrawApi.transferDemoWithdraw(id)
+    message.success('转账提交成功，转账单号：' + payTransferId)
+    // 刷新列表
+    await getList()
+  } finally {
+    loading.value = false
+  }
+}
+
 /** 初始化 **/
 onMounted(() => {
   getList()