feat(shop): 更新分销商提现编辑页面并优化列表操作

- 移除分销商用户ID和提现金额的输入框,改为只读显示
- 隐藏来源平台和审核时间的选择器和日期选择器
- 将支付宝姓名、支付宝账号、开户行名称、银行开户名和银行卡号改为只读显示- 在提现列表中增加备注字段显示
- 注释掉来源客户端列- 移除查看详情功能,合并到编辑弹窗中
- 修改审核通过和确认打款的提示文案
- 调整删除操作的ID引用字段
- 引入更新提现状态的API方法
This commit is contained in:
2025-10-24 11:34:10 +08:00
parent e1f401808a
commit 089973ed33
2 changed files with 132 additions and 156 deletions

View File

@@ -22,76 +22,83 @@
<span style="color: #1890ff; font-weight: 600;">基本信息</span>
</a-divider>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="分销商用户ID" name="userId">
<a-input-number
:min="1"
placeholder="请输入分销商用户ID"
v-model:value="form.userId"
style="width: 100%"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="提现金额" name="money">
<a-input-number
:min="0"
:precision="2"
placeholder="请输入提现金额"
v-model:value="form.money"
style="width: 100%"
>
<template #addonAfter></template>
</a-input-number>
</a-form-item>
</a-col>
</a-row>
<!-- <a-row :gutter="16">-->
<!-- <a-col :span="12">-->
<!-- <a-form-item label="分销商用户ID" name="userId">-->
<!-- {{ form.userId }}-->
<!-- <a-input-number-->
<!-- :min="1"-->
<!-- placeholder="请输入分销商用户ID"-->
<!-- v-model:value="form.userId"-->
<!-- style="width: 100%"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- </a-col>-->
<!-- <a-col :span="12">-->
<!-- <a-form-item label="提现金额" name="money">-->
<!-- {{ form.money }}-->
<!-- <a-input-number-->
<!-- :min="0"-->
<!-- :precision="2"-->
<!-- placeholder="请输入提现金额"-->
<!-- v-model:value="form.money"-->
<!-- style="width: 100%"-->
<!-- >-->
<!-- <template #addonAfter></template>-->
<!-- </a-input-number>-->
<!-- </a-form-item>-->
<!-- </a-col>-->
<!-- </a-row>-->
<a-row :gutter="16">
<!-- <a-col :span="12">-->
<!-- <a-form-item label="来源平台" name="platform">-->
<!-- <a-select v-model:value="form.platform" placeholder="请选择来源平台">-->
<!-- <a-select-option value="APP">-->
<!-- <div class="platform-option">-->
<!-- <a-tag color="blue">APP</a-tag>-->
<!-- <span>移动应用</span>-->
<!-- </div>-->
<!-- </a-select-option>-->
<!-- <a-select-option value="H5">-->
<!-- <div class="platform-option">-->
<!-- <a-tag color="green">H5</a-tag>-->
<!-- <span>手机网页</span>-->
<!-- </div>-->
<!-- </a-select-option>-->
<!-- <a-select-option value="小程序">-->
<!-- <div class="platform-option">-->
<!-- <a-tag color="orange">小程序</a-tag>-->
<!-- <span>微信小程序</span>-->
<!-- </div>-->
<!-- </a-select-option>-->
<!-- <a-select-option value="PC">-->
<!-- <div class="platform-option">-->
<!-- <a-tag color="purple">PC</a-tag>-->
<!-- <span>电脑网页</span>-->
<!-- </div>-->
<!-- </a-select-option>-->
<!-- </a-select>-->
<!-- </a-form-item>-->
<!-- </a-col>-->
<!-- <a-col :span="12">-->
<!-- <a-form-item label="打款方式" name="payType">-->
<!-- <a-radio-group v-model:value="form.payType" @change="onPayTypeChange">-->
<!-- <a-radio :value="10">-->
<!-- <a-tag color="success">微信</a-tag>-->
<!-- </a-radio>-->
<!-- <a-radio :value="20">-->
<!-- <a-tag color="processing">支付宝</a-tag>-->
<!-- </a-radio>-->
<!-- <a-radio :value="30">-->
<!-- <a-tag color="warning">银行卡</a-tag>-->
<!-- </a-radio>-->
<!-- </a-radio-group>-->
<!-- </a-form-item>-->
<!-- </a-col>-->
<a-col :span="12">
<a-form-item label="来源平台" name="platform">
<a-select v-model:value="form.platform" placeholder="请选择来源平台">
<a-select-option value="APP">
<div class="platform-option">
<a-tag color="blue">APP</a-tag>
<span>移动应用</span>
</div>
</a-select-option>
<a-select-option value="H5">
<div class="platform-option">
<a-tag color="green">H5</a-tag>
<span>手机网页</span>
</div>
</a-select-option>
<a-select-option value="小程序">
<div class="platform-option">
<a-tag color="orange">小程序</a-tag>
<span>微信小程序</span>
</div>
</a-select-option>
<a-select-option value="PC">
<div class="platform-option">
<a-tag color="purple">PC</a-tag>
<span>电脑网页</span>
</div>
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="打款方式" name="payType">
<a-radio-group v-model:value="form.payType" @change="onPayTypeChange">
<a-radio :value="10">
<a-tag color="success">微信</a-tag>
</a-radio>
<a-radio :value="20">
<a-tag color="processing">支付宝</a-tag>
</a-radio>
<a-radio :value="30">
<a-tag color="warning">银行卡</a-tag>
</a-radio>
</a-radio-group>
<a-form-item label="备注" name="comments">
<div class="text-red-500">{{ form.comments }}</div>
</a-form-item>
</a-col>
</a-row>
@@ -138,6 +145,7 @@
<a-form-item label="支付宝姓名" name="alipayName">
<a-input
placeholder="请输入支付宝实名姓名"
disabled
v-model:value="form.alipayName"
/>
</a-form-item>
@@ -146,6 +154,7 @@
<a-form-item label="支付宝账号" name="alipayAccount">
<a-input
placeholder="请输入支付宝账号"
disabled
v-model:value="form.alipayAccount"
/>
</a-form-item>
@@ -165,28 +174,26 @@
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="开户行名称" name="bankName">
<a-input
placeholder="请输入开户行名称"
v-model:value="form.bankName"
/>
{{ form.bankName }}
<!-- <a-input-->
<!-- placeholder="请输入开户行名称"-->
<!-- disabled-->
<!-- v-model:value="form.bankName"-->
<!-- />-->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="银行开户名" name="bankAccount">
<a-input
placeholder="请输入银行开户名"
v-model:value="form.bankAccount"
/>
{{ form.bankAccount }}
<!-- <a-input-->
<!-- placeholder="请输入银行开户名"-->
<!-- disabled-->
<!-- v-model:value="form.bankAccount"-->
<!-- />-->
</a-form-item>
<a-form-item label="银行卡号" name="bankCard">
{{ form.bankCard }}
</a-form-item>
</a-col>
</a-row>
<a-form-item label="银行卡号" name="bankCard">
<a-input
placeholder="请输入银行卡号"
v-model:value="form.bankCard"
style="width: 400px"
/>
</a-form-item>
</div>
<!-- 审核信息 -->
@@ -225,16 +232,16 @@
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="审核时间" name="auditTime" v-if="form.applyStatus && form.applyStatus !== 10">
<a-date-picker
v-model:value="form.auditTime"
show-time
placeholder="请选择审核时间"
style="width: 100%"
/>
</a-form-item>
</a-col>
<!-- <a-col :span="12">-->
<!-- <a-form-item label="审核时间" name="auditTime" v-if="form.applyStatus && form.applyStatus !== 10">-->
<!-- <a-date-picker-->
<!-- v-model:value="form.auditTime"-->
<!-- show-time-->
<!-- placeholder="请选择审核时间"-->
<!-- style="width: 100%"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- </a-col>-->
</a-row>
<a-form-item label="驳回原因" name="rejectReason" v-if="form.applyStatus === 30">
@@ -313,6 +320,7 @@
auditTime: undefined,
rejectReason: '',
platform: '',
comments: '',
tenantId: undefined,
createTime: undefined,
updateTime: undefined

View File

@@ -27,12 +27,7 @@
<a-tag v-if="record.applyStatus === 40" color="green">已打款</a-tag>
</template>
<template v-if="column.key === 'action'">
<a-space>
<a @click="viewDetail(record)" class="ele-text-info">
<EyeOutlined /> 详情
</a>
<template v-if="record.applyStatus === 10">
<a-divider type="vertical" />
<a @click="approveWithdraw(record)" class="ele-text-success">
<CheckOutlined /> 通过
</a>
@@ -42,12 +37,11 @@
</a>
</template>
<template v-if="record.applyStatus === 20">
<a-divider type="vertical" />
<a @click="confirmPayment(record)" class="ele-text-success">
<DollarOutlined /> 确认打款
</a>
</template>
<a-divider type="vertical" />
<a-divider v-if="record.applyStatus !== 40" type="vertical" />
<a @click="openEdit(record)" class="ele-text-primary">
<EditOutlined /> 编辑
</a>
@@ -61,7 +55,6 @@
<DeleteOutlined /> 删除
</a>
</a-popconfirm>
</a-space>
</template>
</template>
</ele-pro-table>
@@ -77,7 +70,6 @@
import { message, Modal } from 'ant-design-vue';
import {
ExclamationCircleOutlined,
EyeOutlined,
CheckOutlined,
CloseOutlined,
DollarOutlined,
@@ -93,7 +85,12 @@
import Search from './components/search.vue';
import {getPageTitle} from '@/utils/common';
import ShopDealerWithdrawEdit from './components/shopDealerWithdrawEdit.vue';
import { pageShopDealerWithdraw, removeShopDealerWithdraw, removeBatchShopDealerWithdraw } from '@/api/shop/shopDealerWithdraw';
import {
pageShopDealerWithdraw,
removeShopDealerWithdraw,
removeBatchShopDealerWithdraw,
updateShopDealerWithdraw
} from '@/api/shop/shopDealerWithdraw';
import type { ShopDealerWithdraw, ShopDealerWithdrawParam } from '@/api/shop/shopDealerWithdraw/model';
// 表格实例
@@ -228,18 +225,23 @@
// width: 100,
// customRender: ({ text }) => text || '-'
// },
{
title: '备注',
dataIndex: 'comments',
key: 'comments',
},
{
title: '驳回原因',
dataIndex: 'rejectReason',
key: 'rejectReason',
align: 'center',
},
{
title: '来源客户端',
dataIndex: 'platform',
key: 'platform',
align: 'center',
},
// {
// title: '来源客户端',
// dataIndex: 'platform',
// key: 'platform',
// align: 'center',
// },
{
title: '创建时间',
dataIndex: 'createTime',
@@ -266,53 +268,11 @@
tableRef?.value?.reload({ where: where });
};
/* 查看详情 */
const viewDetail = (row: ShopDealerWithdraw) => {
Modal.info({
title: '提现申请详情',
width: 600,
content: createVNode('div', { style: 'max-height: 400px; overflow-y: auto;' }, [
createVNode('div', { class: 'detail-item' }, [
createVNode('strong', null, '申请信息'),
createVNode('p', null, `申请ID: ${row.id || '-'}`),
createVNode('p', null, `用户ID: ${row.userId || '-'}`),
createVNode('p', null, `提现金额: ¥${parseFloat(row.money || '0').toFixed(2)}`),
createVNode('p', null, `来源平台: ${row.platform || '-'}`),
]),
createVNode('div', { class: 'detail-item', style: 'margin-top: 16px;' }, [
createVNode('strong', null, '收款信息'),
createVNode('p', null, `打款方式: ${row.payType === 10 ? '微信' : row.payType === 20 ? '支付宝' : row.payType === 30 ? '银行卡' : '未知'}`),
...(row.payType === 20 ? [
createVNode('p', null, `支付宝姓名: ${row.alipayName || '-'}`),
createVNode('p', null, `支付宝账号: ${row.alipayAccount || '-'}`)
] : []),
...(row.payType === 30 ? [
createVNode('p', null, `开户行: ${row.bankName || '-'}`),
createVNode('p', null, `开户名: ${row.bankAccount || '-'}`),
createVNode('p', null, `银行卡号: ${row.bankCard || '-'}`)
] : [])
]),
createVNode('div', { class: 'detail-item', style: 'margin-top: 16px;' }, [
createVNode('strong', null, '审核信息'),
createVNode('p', null, `申请状态: ${row.applyStatus === 10 ? '待审核' : row.applyStatus === 20 ? '审核通过' : row.applyStatus === 30 ? '已驳回' : row.applyStatus === 40 ? '已打款' : '未知'}`),
createVNode('p', null, `审核时间: ${row.auditTime ? toDateString(new Date(row.auditTime), 'yyyy-MM-dd HH:mm:ss') : '-'}`),
createVNode('p', null, `驳回原因: ${row.rejectReason || '-'}`),
]),
createVNode('div', { class: 'detail-item', style: 'margin-top: 16px;' }, [
createVNode('strong', null, '其他信息'),
createVNode('p', null, `创建时间: ${row.createTime ? toDateString(row.createTime, 'yyyy-MM-dd HH:mm:ss') : '-'}`),
createVNode('p', null, `更新时间: ${row.updateTime ? toDateString(row.updateTime, 'yyyy-MM-dd HH:mm:ss') : '-'}`),
])
]),
okText: '关闭'
});
};
/* 审核通过 */
const approveWithdraw = (row: ShopDealerWithdraw) => {
Modal.confirm({
title: '审核通过确认',
content: `确定要通过用户 ${row.userId} 的提现申请吗?提现金额:¥${parseFloat(row.money || '0').toFixed(2)}`,
content: `已核对信息进行核对,正确无误!`,
icon: createVNode(CheckOutlined),
okText: '确认通过',
okType: 'primary',
@@ -322,6 +282,10 @@
// 这里需要调用审核通过的API
setTimeout(() => {
hide();
updateShopDealerWithdraw({
id: row.id,
applyStatus: 20
});
message.success('审核通过成功');
reload();
}, 1000);
@@ -369,7 +333,7 @@
const confirmPayment = (row: ShopDealerWithdraw) => {
Modal.confirm({
title: '确认打款',
content: `确定已向用户 ${row.userId} 打款 ¥${parseFloat(row.money || '0').toFixed(2)}?此操作不可撤销`,
content: `确定已向用户${row.bankAccount}完成打款?此操作不可撤销`,
icon: createVNode(DollarOutlined),
okText: '确认打款',
okType: 'primary',
@@ -377,6 +341,10 @@
onOk: () => {
const hide = message.loading('正在确认打款...', 0);
setTimeout(() => {
updateShopDealerWithdraw({
id: row.id,
applyStatus: 40
})
hide();
message.success('打款确认成功');
reload();
@@ -399,7 +367,7 @@
/* 删除单个 */
const remove = (row: ShopDealerWithdraw) => {
const hide = message.loading('请求中..', 0);
removeShopDealerWithdraw(row.shopDealerWithdrawId)
removeShopDealerWithdraw(row.id)
.then((msg) => {
hide();
message.success(msg);
@@ -424,7 +392,7 @@
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeBatchShopDealerWithdraw(selection.value.map((d) => d.shopDealerWithdrawId))
removeBatchShopDealerWithdraw(selection.value.map((d) => d.id))
.then((msg) => {
hide();
message.success(msg);