Commit 7905e573 by licheng

chore: 删除pay模块

parent 273eaffe
import request from '@/config/axios'
export interface AppVO {
id: number
appKey: string
name: string
status: number
remark: string
payNotifyUrl: string
refundNotifyUrl: string
transferNotifyUrl: string
merchantId: number
merchantName: string
createTime: Date
}
export interface AppPageReqVO extends PageParam {
name?: string
status?: number
remark?: string
payNotifyUrl?: string
refundNotifyUrl?: string
transferNotifyUrl?: string
merchantName?: string
createTime?: Date[]
}
export interface AppUpdateStatusReqVO {
id: number
status: number
}
// 查询列表支付应用
export const getAppPage = (params: AppPageReqVO) => {
return request.get({ url: '/pay/app/page', params })
}
// 查询详情支付应用
export const getApp = (id: number) => {
return request.get({ url: '/pay/app/get?id=' + id })
}
// 新增支付应用
export const createApp = (data: AppVO) => {
return request.post({ url: '/pay/app/create', data })
}
// 修改支付应用
export const updateApp = (data: AppVO) => {
return request.put({ url: '/pay/app/update', data })
}
// 支付应用信息状态修改
export const changeAppStatus = (data: AppUpdateStatusReqVO) => {
return request.put({ url: '/pay/app/update-status', data: data })
}
// 删除支付应用
export const deleteApp = (id: number) => {
return request.delete({ url: '/pay/app/delete?id=' + id })
}
// 获得支付应用列表
export const getAppList = () => {
return request.get({
url: '/pay/app/list'
})
}
import request from '@/config/axios'
export interface ChannelVO {
id: number
code: string
config: string
status: number
remark: string
feeRate: number
appId: number
createTime: Date
}
// 查询列表支付渠道
export const getChannelPage = (params: PageParam) => {
return request.get({ url: '/pay/channel/page', params })
}
// 查询详情支付渠道
export const getChannel = (appId: string, code: string) => {
const params = {
appId: appId,
code: code
}
return request.get({ url: '/pay/channel/get', params: params })
}
// 新增支付渠道
export const createChannel = (data: ChannelVO) => {
return request.post({ url: '/pay/channel/create', data })
}
// 修改支付渠道
export const updateChannel = (data: ChannelVO) => {
return request.put({ url: '/pay/channel/update', data })
}
// 删除支付渠道
export const deleteChannel = (id: number) => {
return request.delete({ url: '/pay/channel/delete?id=' + id })
}
// 导出支付渠道
export const exportChannel = (params) => {
return request.download({ url: '/pay/channel/export-excel', params })
}
import request from '@/config/axios'
export interface DemoOrderVO {
spuId: number
createTime: Date
}
// 创建示例订单
export function createDemoOrder(data: DemoOrderVO) {
return request.post({
url: '/pay/demo-order/create',
data: data
})
}
// 获得示例订单分页
export function getDemoOrderPage(query: PageParam) {
return request.get({
url: '/pay/demo-order/page',
params: query
})
}
// 退款示例订单
export function refundDemoOrder(id: number) {
return request.put({
url: '/pay/demo-order/refund?id=' + id
})
}
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 } })
}
import request from '@/config/axios'
// 获得支付通知明细
export const getNotifyTaskDetail = (id) => {
return request.get({
url: '/pay/notify/get-detail?id=' + id
})
}
// 获得支付通知分页
export const getNotifyTaskPage = (query) => {
return request.get({
url: '/pay/notify/page',
params: query
})
}
import request from '@/config/axios'
export interface OrderVO {
id: number
merchantId: number
appId: number
channelId: number
channelCode: string
merchantOrderId: string
subject: string
body: string
notifyUrl: string
notifyStatus: number
amount: number
channelFeeRate: number
channelFeeAmount: number
status: number
userIp: string
expireTime: Date
successTime: Date
notifyTime: Date
successExtensionId: number
refundStatus: number
refundTimes: number
refundAmount: number
channelUserId: string
channelOrderNo: string
createTime: Date
}
export interface OrderPageReqVO extends PageParam {
merchantId?: number
appId?: number
channelId?: number
channelCode?: string
merchantOrderId?: string
subject?: string
body?: string
notifyUrl?: string
notifyStatus?: number
amount?: number
channelFeeRate?: number
channelFeeAmount?: number
status?: number
expireTime?: Date[]
successTime?: Date[]
notifyTime?: Date[]
successExtensionId?: number
refundStatus?: number
refundTimes?: number
channelUserId?: string
channelOrderNo?: string
createTime?: Date[]
}
export interface OrderExportReqVO {
merchantId?: number
appId?: number
channelId?: number
channelCode?: string
merchantOrderId?: string
subject?: string
body?: string
notifyUrl?: string
notifyStatus?: number
amount?: number
channelFeeRate?: number
channelFeeAmount?: number
status?: number
expireTime?: Date[]
successTime?: Date[]
notifyTime?: Date[]
successExtensionId?: number
refundStatus?: number
refundTimes?: number
channelUserId?: string
channelOrderNo?: string
createTime?: Date[]
}
// 查询列表支付订单
export const getOrderPage = async (params: OrderPageReqVO) => {
return await request.get({ url: '/pay/order/page', params })
}
// 查询详情支付订单
export const getOrder = async (id: number, sync?: boolean) => {
return await request.get({
url: '/pay/order/get',
params: {
id,
sync
}
})
}
// 获得支付订单的明细
export const getOrderDetail = async (id: number) => {
return await request.get({ url: '/pay/order/get-detail?id=' + id })
}
// 提交支付订单
export const submitOrder = async (data: any) => {
return await request.post({ url: '/pay/order/submit', data })
}
// 导出支付订单
export const exportOrder = async (params: OrderExportReqVO) => {
return await request.download({ url: '/pay/order/export-excel', params })
}
import request from '@/config/axios'
export interface RefundVO {
id: number
merchantId: number
appId: number
channelId: number
channelCode: string
orderId: string
tradeNo: string
merchantOrderId: string
merchantRefundNo: string
notifyUrl: string
notifyStatus: number
status: number
type: number
payAmount: number
refundAmount: number
reason: string
userIp: string
channelOrderNo: string
channelRefundNo: string
channelErrorCode: string
channelErrorMsg: string
channelExtras: string
expireTime: Date
successTime: Date
notifyTime: Date
createTime: Date
}
export interface RefundPageReqVO extends PageParam {
merchantId?: number
appId?: number
channelId?: number
channelCode?: string
orderId?: string
tradeNo?: string
merchantOrderId?: string
merchantRefundNo?: string
notifyUrl?: string
notifyStatus?: number
status?: number
type?: number
payAmount?: number
refundAmount?: number
reason?: string
userIp?: string
channelOrderNo?: string
channelRefundNo?: string
channelErrorCode?: string
channelErrorMsg?: string
channelExtras?: string
expireTime?: Date[]
successTime?: Date[]
notifyTime?: Date[]
createTime?: Date[]
}
export interface PayRefundExportReqVO {
merchantId?: number
appId?: number
channelId?: number
channelCode?: string
orderId?: string
tradeNo?: string
merchantOrderId?: string
merchantRefundNo?: string
notifyUrl?: string
notifyStatus?: number
status?: number
type?: number
payAmount?: number
refundAmount?: number
reason?: string
userIp?: string
channelOrderNo?: string
channelRefundNo?: string
channelErrorCode?: string
channelErrorMsg?: string
channelExtras?: string
expireTime?: Date[]
successTime?: Date[]
notifyTime?: Date[]
createTime?: Date[]
}
// 查询列表退款订单
export const getRefundPage = (params: RefundPageReqVO) => {
return request.get({ url: '/pay/refund/page', params })
}
// 查询详情退款订单
export const getRefund = (id: number) => {
return request.get({ url: '/pay/refund/get?id=' + id })
}
// 新增退款订单
export const createRefund = (data: RefundVO) => {
return request.post({ url: '/pay/refund/create', data })
}
// 修改退款订单
export const updateRefund = (data: RefundVO) => {
return request.put({ url: '/pay/refund/update', data })
}
// 删除退款订单
export const deleteRefund = (id: number) => {
return request.delete({ url: '/pay/refund/delete?id=' + id })
}
// 导出退款订单
export const exportRefund = (params: PayRefundExportReqVO) => {
return request.download({ url: '/pay/refund/export-excel', params })
}
import request from '@/config/axios'
// 查询转账单列表
export const getTransferPage = async (params: PageParam) => {
return await request.get({ url: `/pay/transfer/page`, params })
}
// 查询转账单详情
export const getTransfer = async (id: number) => {
return await request.get({ url: '/pay/transfer/get?id=' + id })
}
// 导出转账单
export const exportTransfer = async (params: PageParam) => {
return await request.download({ url: '/pay/transfer/export-excel', params })
}
import request from '@/config/axios'
/** 用户钱包查询参数 */
export interface PayWalletUserReqVO {
userId: number
}
/** 钱包 VO */
export interface WalletVO {
id: number
userId: number
userType: number
balance: number
totalExpense: number
totalRecharge: number
freezePrice: number
}
/** 查询用户钱包详情 */
export const getWallet = async (params: PayWalletUserReqVO) => {
return await request.get<WalletVO>({ url: `/pay/wallet/get`, params })
}
/** 查询会员钱包列表 */
export const getWalletPage = async (params: any) => {
return await request.get({ url: `/pay/wallet/page`, params })
}
/** 修改会员钱包余额 */
export const updateWalletBalance = async (data: any) => {
return await request.put({ url: `/pay/wallet/update-balance`, data })
}
import request from '@/config/axios'
export interface WalletRechargePackageVO {
id: number
name: string
payPrice: number
bonusPrice: number
status: number
}
// 查询套餐充值列表
export const getWalletRechargePackagePage = async (params) => {
return await request.get({ url: '/pay/wallet-recharge-package/page', params })
}
// 查询套餐充值详情
export const getWalletRechargePackage = async (id: number) => {
return await request.get({ url: '/pay/wallet-recharge-package/get?id=' + id })
}
// 新增套餐充值
export const createWalletRechargePackage = async (data: WalletRechargePackageVO) => {
return await request.post({ url: '/pay/wallet-recharge-package/create', data })
}
// 修改套餐充值
export const updateWalletRechargePackage = async (data: WalletRechargePackageVO) => {
return await request.put({ url: '/pay/wallet-recharge-package/update', data })
}
// 删除套餐充值
export const deleteWalletRechargePackage = async (id: number) => {
return await request.delete({ url: '/pay/wallet-recharge-package/delete?id=' + id })
}
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 })
}
...@@ -68,7 +68,7 @@ const remainingRouter: AppRouteRecordRaw[] = [ ...@@ -68,7 +68,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
children: [ children: [
{ {
path: 'index', path: 'index',
component: () => import('@/views/Home/Index2.vue'), component: () => import('@/views/Home/Index.vue'),
name: 'Index', name: 'Index',
meta: { meta: {
title: t('router.home'), title: t('router.home'),
...@@ -457,24 +457,6 @@ const remainingRouter: AppRouteRecordRaw[] = [ ...@@ -457,24 +457,6 @@ const remainingRouter: AppRouteRecordRaw[] = [
] ]
}, },
{ {
path: '/pay',
component: Layout,
name: 'pay',
meta: { hidden: true },
children: [
{
path: 'cashier',
name: 'PayCashier',
meta: {
title: '收银台',
noCache: true,
hidden: true
},
component: () => import('@/views/pay/cashier/index.vue')
}
]
},
{
path: '/diy', path: '/diy',
name: 'DiyCenter', name: 'DiyCenter',
meta: { hidden: true }, meta: { hidden: true },
......
<template>
<Dialog v-model="dialogVisible" :title="dialogTitle">
<el-form
ref="formRef"
v-loading="formLoading"
:model="formData"
:rules="formRules"
label-width="160px"
>
<el-form-item label="应用名" prop="name">
<el-input v-model="formData.name" placeholder="请输入应用名" />
</el-form-item>
<el-form-item label="应用标识" prop="appKey">
<el-input v-model="formData.appKey" placeholder="请输入应用标识" />
</el-form-item>
<el-form-item label="开启状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:value="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="支付结果的回调地址" prop="orderNotifyUrl">
<el-input v-model="formData.orderNotifyUrl" placeholder="请输入支付结果的回调地址" />
</el-form-item>
<el-form-item label="退款结果的回调地址" prop="refundNotifyUrl">
<el-input v-model="formData.refundNotifyUrl" placeholder="请输入退款结果的回调地址" />
</el-form-item>
<el-form-item label="转账结果的回调地址" prop="transferNotifyUrl">
<el-input v-model="formData.transferNotifyUrl" placeholder="请输入转账结果的回调地址" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as AppApi from '@/api/pay/app'
import { CommonStatusEnum } from '@/utils/constants'
defineOptions({ name: 'PayAppForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
const formType = ref('') // 表单的类型:create - 新增;update - 修改
const formData = ref({
id: undefined,
name: undefined,
appKey: undefined,
status: CommonStatusEnum.ENABLE,
remark: undefined,
orderNotifyUrl: undefined,
refundNotifyUrl: undefined,
transferNotifyUrl: undefined
})
const formRules = reactive({
name: [{ required: true, message: '应用名不能为空', trigger: 'blur' }],
appKey: [{ required: true, message: '应用标识不能为空', trigger: 'blur' }],
status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }],
orderNotifyUrl: [{ required: true, message: '支付结果的回调地址不能为空', trigger: 'blur' }],
refundNotifyUrl: [{ required: true, message: '退款结果的回调地址不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时,设置数据
if (id) {
formLoading.value = true
try {
formData.value = await AppApi.getApp(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as AppApi.AppVO
if (formType.value === 'create') {
await AppApi.createApp(data)
message.success(t('common.createSuccess'))
} else {
await AppApi.updateApp(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
name: undefined,
status: CommonStatusEnum.ENABLE,
remark: undefined,
orderNotifyUrl: undefined,
refundNotifyUrl: undefined,
transferNotifyUrl: undefined,
appKey: undefined
}
formRef.value?.resetFields()
}
</script>
<template>
<div>
<Dialog v-model="dialogVisible" :title="dialogTitle" width="800px">
<el-form
ref="formRef"
v-loading="formLoading"
:model="formData"
:rules="formRules"
label-width="100px"
>
<el-form-item label="渠道状态" label-width="180px" prop="status">
<el-radio-group v-model="formData.status">
<el-radio
v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="parseInt(dict.value)"
:value="parseInt(dict.value)"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" label-width="180px" prop="remark">
<el-input v-model="formData.remark" :style="{ width: '100%' }" />
</el-form-item>
</el-form>
<template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</div>
</template>
<script lang="ts" setup>
import { CommonStatusEnum } from '@/utils/constants'
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
import * as ChannelApi from '@/api/pay/channel'
defineOptions({ name: 'MockChannelForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
const formData = ref<any>({
appId: '',
code: '',
status: undefined,
feeRate: 0,
remark: '',
config: {
name: 'mock-conf'
}
})
const formRules = {
status: [{ required: true, message: '渠道状态不能为空', trigger: 'blur' }]
}
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (appId, code) => {
dialogVisible.value = true
formLoading.value = true
resetForm(appId, code)
// 加载数据
try {
const data = await ChannelApi.getChannel(appId, code)
if (data && data.id) {
formData.value = data
formData.value.config = JSON.parse(data.config)
}
dialogTitle.value = !formData.value.id ? '创建支付渠道' : '编辑支付渠道'
} finally {
formLoading.value = false
}
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
const data = { ...formData.value } as unknown as ChannelApi.ChannelVO
data.config = JSON.stringify(formData.value.config)
if (!data.id) {
await ChannelApi.createChannel(data)
message.success(t('common.createSuccess'))
} else {
await ChannelApi.updateChannel(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = (appId, code) => {
formData.value = {
appId: appId,
code: code,
status: CommonStatusEnum.ENABLE,
remark: '',
feeRate: 0,
config: {
name: 'mock-conf'
}
}
formRef.value?.resetFields()
}
</script>
<template>
<div>
<Dialog v-model="dialogVisible" :title="dialogTitle" width="800px">
<el-form
ref="formRef"
v-loading="formLoading"
:model="formData"
:rules="formRules"
label-width="100px"
>
<el-form-item label="渠道状态" label-width="180px" prop="status">
<el-radio-group v-model="formData.status">
<el-radio
v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="parseInt(dict.value)"
:value="parseInt(dict.value)"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" label-width="180px" prop="remark">
<el-input v-model="formData.remark" :style="{ width: '100%' }" />
</el-form-item>
</el-form>
<template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</div>
</template>
<script lang="ts" setup>
import { CommonStatusEnum } from '@/utils/constants'
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
import * as ChannelApi from '@/api/pay/channel'
defineOptions({ name: 'WalletChannelForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
const formData = ref<any>({
appId: '',
code: '',
status: undefined,
feeRate: 0,
remark: '',
config: {
name: 'mock-conf'
}
})
const formRules = {
status: [{ required: true, message: '渠道状态不能为空', trigger: 'blur' }]
}
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (appId, code) => {
dialogVisible.value = true
formLoading.value = true
resetForm(appId, code)
// 加载数据
try {
const data = await ChannelApi.getChannel(appId, code)
if (data && data.id) {
formData.value = data
formData.value.config = JSON.parse(data.config)
}
dialogTitle.value = !formData.value.id ? '创建支付渠道' : '编辑支付渠道'
} finally {
formLoading.value = false
}
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
const data = { ...formData.value } as unknown as ChannelApi.ChannelVO
data.config = JSON.stringify(formData.value.config)
if (!data.id) {
await ChannelApi.createChannel(data)
message.success(t('common.createSuccess'))
} else {
await ChannelApi.updateChannel(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = (appId, code) => {
formData.value = {
appId: appId,
code: code,
status: CommonStatusEnum.ENABLE,
remark: '',
feeRate: 0,
config: {
name: 'mock-conf'
}
}
formRef.value?.resetFields()
}
</script>
<template>
<doc-alert title="支付宝支付接入" url="https://doc.iocoder.cn/pay/alipay-pay-demo/" />
<doc-alert title="支付宝、微信退款接入" url="https://doc.iocoder.cn/pay/refund-demo/" />
<doc-alert title="微信公众号支付接入" url="https://doc.iocoder.cn/pay/wx-pub-pay-demo/" />
<doc-alert title="微信小程序支付接入" url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/" />
<!-- 操作工具栏 -->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain @click="openForm"><Icon icon="ep:plus" />发起订单</el-button>
</el-col>
</el-row>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list">
<el-table-column label="订单编号" align="center" prop="id" />
<el-table-column label="用户编号" align="center" prop="userId" />
<el-table-column label="商品名字" align="center" prop="spuName" />
<el-table-column label="支付价格" align="center" prop="price">
<template #default="scope">
<span>{{ (scope.row.price / 100.0).toFixed(2) }}</span>
</template>
</el-table-column>
<el-table-column label="退款金额" align="center" prop="refundPrice">
<template #default="scope">
<span>{{ (scope.row.refundPrice / 100.0).toFixed(2) }}</span>
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column label="支付单号" align="center" prop="payOrderId" />
<el-table-column label="是否支付" align="center" prop="payStatus">
<template #default="scope">
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.payStatus" />
</template>
</el-table-column>
<el-table-column
label="支付时间"
align="center"
prop="payTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column label="退款时间" align="center" prop="refundTime" width="180">
<template #default="scope">
<span v-if="scope.row.refundTime">{{ formatDate(scope.row.refundTime) }}</span>
<span v-else-if="scope.row.payRefundId">退款中,等待退款结果</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" @click="handlePay(scope.row)" v-if="!scope.row.payStatus">
前往支付
</el-button>
<el-button
link
type="danger"
@click="handleRefund(scope.row)"
v-if="scope.row.payStatus && !scope.row.payRefundId"
>
发起退款
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 对话框(添加 / 修改) -->
<Dialog title="发起订单" v-model="dialogVisible" width="500px">
<el-form
ref="formRef"
v-loading="formLoading"
:model="formData"
:rules="formRules"
label-width="80px"
>
<el-form-item label="商品" prop="spuId">
<el-select
v-model="formData.spuId"
placeholder="请输入下单商品"
clearable
style="width: 380px"
>
<el-option v-for="item in spus" :key="item.id" :label="item.name" :value="item.id">
<span style="float: left">{{ item.name }}</span>
<span style="float: right; font-size: 13px; color: #8492a6">
¥{{ (item.price / 100.0).toFixed(2) }}
</span>
</el-option>
</el-select>
</el-form-item>
</el-form>
<template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script lang="ts" setup name="PayDemoOrder">
import * as PayDemoApi from '@/api/pay/demo/order'
import { dateFormatter, formatDate } from '@/utils/formatTime'
import { DICT_TYPE } from '@/utils/dict'
const { t } = useI18n() // 国际化
const router = useRouter() // 路由对象
const message = useMessage() // 消息弹窗
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
// 查询条件
const queryParams = reactive({
pageNo: 1,
pageSize: 10
})
const formRef = ref()
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await PayDemoApi.getDemoOrderPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 支付按钮操作 */
const handlePay = (row: any) => {
router.push({
name: 'PayCashier',
query: {
id: row.payOrderId,
returnUrl: encodeURIComponent('/pay/demo/order?id=' + row.id)
}
})
}
/** 退款按钮操作 */
const handleRefund = async (row: any) => {
const id = row.id
try {
await message.confirm('是否确认退款编号为"' + id + '"的示例订单?')
await PayDemoApi.refundDemoOrder(id)
await getList()
message.success('发起退款成功!')
} catch {}
}
// ========== 弹窗 ==========
// 商品数组
const spus = ref([
{
id: 1,
name: '华为手机',
price: 1
},
{
id: 2,
name: '小米电视',
price: 10
},
{
id: 3,
name: '苹果手表',
price: 100
},
{
id: 4,
name: '华硕笔记本',
price: 1000
},
{
id: 5,
name: '蔚来汽车',
price: 200000
}
])
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中
const formData = ref<any>({}) // 表单数据
const formRules = {
spuId: [{ required: true, message: '商品编号不能为空', trigger: 'blur' }]
}
/** 表单重置 */
const reset = () => {
formData.value = {
spuId: undefined
}
formRef.value?.resetFields()
}
/** 新增按钮操作 */
const openForm = () => {
reset()
dialogVisible.value = true
}
/** 提交按钮 */
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
await PayDemoApi.createDemoOrder(formData.value)
message.success(t('common.createSuccess'))
dialogVisible.value = false
} finally {
formLoading.value = false
getList()
}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible" width="800px">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="120px"
v-loading="formLoading"
>
<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 :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-input-number
v-model="formData.price"
: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>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import * as DemoWithdrawApi from '@/api/pay/demo/withdraw/index'
import { yuanToFen } from '@/utils'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
const formType = ref('') // 表单的类型:create - 新增;update - 修改
const formData = ref<DemoWithdrawApi.PayDemoWithdrawVO>({
subject: '',
price: 0,
type: 1,
userName: '',
userAccount: ''
})
const formRules = reactive({
subject: [{ required: true, message: '提现标题不能为空', trigger: 'blur' }],
price: [{ required: true, message: '提现金额不能为空', trigger: 'blur' }],
type: [{ required: true, message: '提现类型不能为空', trigger: 'change' }],
userAccount: [{ required: true, message: '收款人账号不能为空', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (type: string) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
}
/** 关闭弹窗 */
const close = async () => {
dialogVisible.value = false
resetForm()
}
defineExpose({ open, close }) // 提供 open, close 方法,用于打开, 关闭弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
const data = { ...formData.value }
data.price = yuanToFen(data.price)
if (formType.value === 'create') {
await DemoWithdrawApi.createDemoWithdraw(data)
message.success(t('common.createSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
subject: '',
price: 0,
type: 1,
userName: '',
userAccount: ''
}
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>
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<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>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<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 && !scope.row.payTransferId"
type="primary"
link
@click="handleTransfer(scope.row.id)"
>
发起转账
</el-button>
<el-button
v-else-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>
</template>
</el-table-column>
<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" 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">
<el-tag v-if="scope.row.status === 0 && !scope.row.payTransferId" type="warning">
等待转账
</el-tag>
<el-tag v-else-if="scope.row.status === 0 && scope.row.payTransferId" type="info">
转账中
</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="transferTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column
label="转账失败原因"
align="center"
prop="transferErrorMsg"
min-width="200"
/>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗:添加/修改 -->
<DemoWithdrawForm ref="demoFormRef" @success="getList" />
</template>
<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import * as DemoWithdrawApi from '@/api/pay/demo/withdraw'
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([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10
})
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await DemoWithdrawApi.getDemoWithdrawPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 创建示例提现单操作 */
const demoFormRef = ref()
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()
})
</script>
<template>
<Dialog v-model="dialogVisible" title="通知详情" width="50%">
<el-descriptions :column="2">
<el-descriptions-item label="通知状态" :span="2">
<dict-tag :type="DICT_TYPE.PAY_NOTIFY_STATUS" :value="detailData.status" />
</el-descriptions-item>
<el-descriptions-item label="商户订单编号" :span="2">
<el-tag>{{ detailData.merchantOrderId }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="商户退款编号" :span="2" v-if="detailData.merchantRefundId">
<el-tag>{{ detailData.merchantRefundId }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="商户转账编号" :span="2" v-if="detailData.merchantTransferId">
<el-tag>{{ detailData.merchantTransferId }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="应用编号">{{ detailData.appId }}</el-descriptions-item>
<el-descriptions-item label="应用名称">{{ detailData.appName }}</el-descriptions-item>
<el-descriptions-item label="关联编号">{{ detailData.dataId }}</el-descriptions-item>
<el-descriptions-item label="通知类型">
<dict-tag :type="DICT_TYPE.PAY_NOTIFY_TYPE" :value="detailData.type" />
</el-descriptions-item>
<el-descriptions-item label="通知次数">{{ detailData.notifyTimes }}</el-descriptions-item>
<el-descriptions-item label="最大通知次数">
{{ detailData.maxNotifyTimes }}
</el-descriptions-item>
<el-descriptions-item label="最后通知时间">
{{ formatDate(detailData.lastExecuteTime) }}
</el-descriptions-item>
<el-descriptions-item label="下次通知时间">
{{ formatDate(detailData.nextNotifyTime) }}
</el-descriptions-item>
<el-descriptions-item label="创建时间">
{{ formatDate(detailData.createTime) }}
</el-descriptions-item>
<el-descriptions-item label="更新时间">
{{ formatDate(detailData.updateTime) }}
</el-descriptions-item>
</el-descriptions>
<!-- 分割线 -->
<el-divider />
<el-descriptions :column="1" direction="vertical" border>
<el-descriptions-item label="回调日志">
<el-table :data="detailData.logs">
<el-table-column label="日志编号" align="center" prop="id" />
<el-table-column label="通知状态" align="center" prop="status">
<template #default="scope">
<dict-tag :type="DICT_TYPE.PAY_NOTIFY_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column label="通知次数" align="center" prop="notifyTimes" />
<el-table-column label="通知时间" align="center" prop="lastExecuteTime" width="180">
<template #default="scope">
<span>{{ formatDate(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="响应结果" align="center" prop="response" />
</el-table>
</el-descriptions-item>
</el-descriptions>
</Dialog>
</template>
<script lang="ts" setup>
import { DICT_TYPE } from '@/utils/dict'
import * as PayNotifyApi from '@/api/pay/notify'
import { formatDate } from '@/utils/formatTime'
defineOptions({ name: 'PayNotifyDetail' })
const dialogVisible = ref(false) // 弹窗的是否展示
const detailLoading = ref(false) // 表单的加载中
const detailData = ref({})
/** 打开弹窗 */
const open = async (id: number) => {
dialogVisible.value = true
// 设置数据
detailLoading.value = true
try {
detailData.value = await PayNotifyApi.getNotifyTaskDetail(id)
} finally {
detailLoading.value = false
}
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
</script>
<template>
<doc-alert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
<!-- 搜索工作栏 -->
<ContentWrap>
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="100px"
>
<el-form-item label="应用编号" prop="appId">
<el-select
v-model="queryParams.appId"
placeholder="请选择应用信息"
clearable
filterable
class="!w-240px"
>
<el-option v-for="item in appList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="通知类型" prop="type">
<el-select
v-model="queryParams.type"
placeholder="请选择通知类型"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.PAY_NOTIFY_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="关联编号" prop="dataId">
<el-input
v-model="queryParams.dataId"
placeholder="请输入关联编号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="通知状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="请选择通知状态"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.PAY_NOTIFY_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="商户订单编号" prop="merchantOrderId">
<el-input
v-model="queryParams.merchantOrderId"
placeholder="请输入商户订单编号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="商户退款编号" prop="merchantRefundId">
<el-input
v-model="queryParams.merchantRefundId"
placeholder="请输入商户退款编号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="商户转账编号" prop="merchantTransferId">
<el-input
v-model="queryParams.merchantTransferId"
placeholder="请输入商户转账编号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
style="width: 240px"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<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-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list">
<el-table-column label="任务编号" align="center" prop="id" />
<el-table-column label="应用编号" align="center" prop="appName" />
<el-table-column label="商户单信息" align="center" prop="merchant">
<template #default="scope">
<div v-if="scope.row.merchantOrderId">
<div>商户订单编号:{{ scope.row.merchantOrderId }}</div>
</div>
<div v-if="scope.row.merchantRefundId">
<div>商户退款编号:{{ scope.row.merchantRefundId }}</div>
</div>
<div v-if="scope.row.merchantTransferId">
<div>商户转账编号:{{ scope.row.merchantTransferId }}</div>
</div>
</template>
</el-table-column>
<el-table-column label="通知类型" align="center" prop="type">
<template #default="scope">
<dict-tag :type="DICT_TYPE.PAY_NOTIFY_TYPE" :value="scope.row.type" />
</template>
</el-table-column>
<el-table-column label="关联编号" align="center" prop="dataId" />
<el-table-column label="通知状态" align="center" prop="status">
<template #default="scope">
<dict-tag :type="DICT_TYPE.PAY_NOTIFY_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column
label="最后通知时间"
align="center"
prop="lastExecuteTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column
label="下次通知时间"
align="center"
prop="nextNotifyTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column label="通知次数" align="center" prop="notifyTimes">
<template #default="scope">
<el-tag size="small" type="success">
{{ scope.row.notifyTimes }} / {{ scope.row.maxNotifyTimes }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button
link
type="primary"
@click="openDetail(scope.row.id)"
v-hasPermi="['pay:notify:query']"
>
查看详情
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗:预览 -->
<NotifyDetail ref="detailRef" />
</template>
<script lang="ts" setup>
import * as PayNotifyApi from '@/api/pay/notify'
import * as PayAppApi from '@/api/pay/app'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import NotifyDetail from './NotifyDetail.vue'
defineOptions({ name: 'PayNotify' })
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref() // 列表的数据
const queryParams = ref({
pageNo: 1,
pageSize: 10,
appId: null,
type: null,
dataId: null,
status: null,
merchantOrderId: null,
merchantRefundId: null,
merchantTransferId: null,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
const appList = ref([]) // 支付应用列表集合
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNo = 1
getList()
}
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await PayNotifyApi.getNotifyTaskPage(queryParams.value)
list.value = data.list
total.value = data.total
loading.value = false
} finally {
loading.value = false
}
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields()
handleQuery()
}
/** 详情按钮操作 */
const detailRef = ref()
const openDetail = (id: number) => {
detailRef.value.open(id)
}
/** 初始化 **/
onMounted(async () => {
await getList()
// 获得筛选项
appList.value = await PayAppApi.getAppList()
})
</script>
<template>
<Dialog v-model="dialogVisible" title="订单详情" width="700px">
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="商户单号">
<el-tag size="small">{{ detailData.merchantOrderId }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="支付单号">
<el-tag type="warning" size="small" v-if="detailData.no">{{ detailData.no }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="应用编号">{{ detailData.appId }}</el-descriptions-item>
<el-descriptions-item label="应用名称">{{ detailData.appName }}</el-descriptions-item>
<el-descriptions-item label="支付状态">
<dict-tag :type="DICT_TYPE.PAY_ORDER_STATUS" :value="detailData.status" size="small" />
</el-descriptions-item>
<el-descriptions-item label="支付金额">
<el-tag type="success" size="small">{{ (detailData.price / 100.0).toFixed(2) }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="手续费">
<el-tag type="warning" size="small">
{{ (detailData.channelFeePrice / 100.0).toFixed(2) }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="手续费比例">
{{ (detailData.channelFeeRate / 100.0).toFixed(2) }}%
</el-descriptions-item>
<el-descriptions-item label="支付时间">
{{ formatDate(detailData.successTime) }}
</el-descriptions-item>
<el-descriptions-item label="失效时间">
{{ formatDate(detailData.expireTime) }}
</el-descriptions-item>
<el-descriptions-item label="创建时间">
{{ formatDate(detailData.createTime) }}
</el-descriptions-item>
<el-descriptions-item label="更新时间">
{{ formatDate(detailData.updateTime) }}
</el-descriptions-item>
</el-descriptions>
<!-- 分割线 -->
<el-divider />
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="商品标题">{{ detailData.subject }}</el-descriptions-item>
<el-descriptions-item label="商品描述">{{ detailData.body }}</el-descriptions-item>
<el-descriptions-item label="支付渠道">
<dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE" :value="detailData.channelCode" />
</el-descriptions-item>
<el-descriptions-item label="支付 IP">{{ detailData.userIp }}</el-descriptions-item>
<el-descriptions-item label="渠道单号">
<el-tag size="mini" type="success" v-if="detailData.channelOrderNo">
{{ detailData.channelOrderNo }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="渠道用户">{{ detailData.channelUserId }}</el-descriptions-item>
<el-descriptions-item label="退款金额">
<el-tag size="mini" type="danger">
{{ (detailData.refundPrice / 100.0).toFixed(2) }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="通知 URL">{{ detailData.notifyUrl }}</el-descriptions-item>
</el-descriptions>
<!-- 分割线 -->
<el-divider />
<el-descriptions :column="1" label-class-name="desc-label" direction="vertical" border>
<el-descriptions-item label="支付通道异步回调内容">
<el-text style="white-space: pre-wrap; word-break: break-word">
{{ detailData.extension.channelNotifyData }}
</el-text>
</el-descriptions-item>
</el-descriptions>
</Dialog>
</template>
<script lang="ts" setup>
import { DICT_TYPE } from '@/utils/dict'
import * as OrderApi from '@/api/pay/order'
import { formatDate } from '@/utils/formatTime'
defineOptions({ name: 'PayOrderDetail' })
const dialogVisible = ref(false) // 弹窗的是否展示
const detailLoading = ref(false) // 表单的加载中
const detailData = ref({
extension: {}
})
/** 打开弹窗 */
const open = async (id: number) => {
dialogVisible.value = true
// 设置数据
detailLoading.value = true
try {
detailData.value = await OrderApi.getOrderDetail(id)
if (!detailData.value.extension) {
detailData.value.extension = {}
}
} finally {
detailLoading.value = false
}
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
</script>
<style>
.tag-purple {
color: #722ed1;
background: #f9f0ff;
border-color: #d3adf7;
}
.tag-pink {
color: #eb2f96;
background: #fff0f6;
border-color: #ffadd2;
}
</style>
<template>
<doc-alert title="支付宝支付接入" url="https://doc.iocoder.cn/pay/alipay-pay-demo/" />
<doc-alert title="微信公众号支付接入" url="https://doc.iocoder.cn/pay/wx-pub-pay-demo/" />
<doc-alert title="微信小程序支付接入" url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/" />
<ContentWrap>
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="100px"
>
<el-form-item label="应用编号" prop="appId">
<el-select
clearable
v-model="queryParams.appId"
placeholder="请选择应用信息"
class="!w-240px"
>
<el-option v-for="item in appList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="支付渠道" prop="channelCode">
<el-select
v-model="queryParams.channelCode"
placeholder="请选择支付渠道"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.PAY_CHANNEL_CODE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="商户单号" prop="merchantOrderId">
<el-input
v-model="queryParams.merchantOrderId"
placeholder="请输入商户单号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="支付单号" prop="no">
<el-input
v-model="queryParams.no"
placeholder="请输入支付单号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="渠道单号" prop="channelOrderNo">
<el-input
v-model="queryParams.channelOrderNo"
placeholder="请输入渠道单号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="支付状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="请选择支付状态"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.PAY_ORDER_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<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="success"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['pay:order:export']"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list">
<el-table-column label="编号" align="center" prop="id" width="80" />
<el-table-column
label="创建时间"
align="center"
prop="createTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column label="支付金额" align="center" prop="price" width="100">
<template #default="scope">{{ parseFloat(scope.row.price / 100).toFixed(2) }} </template>
</el-table-column>
<el-table-column label="退款金额" align="center" prop="refundPrice" width="100">
<template #default="scope">
{{ parseFloat(scope.row.refundPrice / 100).toFixed(2) }}
</template>
</el-table-column>
<el-table-column label="手续金额" align="center" prop="channelFeePrice" width="100">
<template #default="scope">
{{ parseFloat(scope.row.channelFeePrice / 100).toFixed(2) }}
</template>
</el-table-column>
<el-table-column label="订单号" align="left" width="300">
<template #default="scope">
<p class="order-font">
<el-tag size="small"> 商户</el-tag> {{ scope.row.merchantOrderId }}
</p>
<p class="order-font" v-if="scope.row.no">
<el-tag size="small" type="warning">支付</el-tag> {{ scope.row.no }}
</p>
<p class="order-font" v-if="scope.row.channelOrderNo">
<el-tag size="small" type="success">渠道</el-tag> {{ scope.row.channelOrderNo }}
</p>
</template>
</el-table-column>
<el-table-column label="支付状态" align="center" prop="status">
<template #default="scope">
<dict-tag :type="DICT_TYPE.PAY_ORDER_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column label="支付渠道" align="center" prop="channelCode" width="140">
<template #default="scope">
<dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE" :value="scope.row.channelCode" />
</template>
</el-table-column>
<el-table-column
label="支付时间"
align="center"
prop="successTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column label="支付应用" align="center" prop="appName" width="100" />
<el-table-column label="商品标题" align="center" prop="subject" width="180" />
<el-table-column label="操作" align="center" fixed="right">
<template #default="scope">
<el-button
type="primary"
link
@click="openDetail(scope.row.id)"
v-hasPermi="['pay:order:query']"
>
详情
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗:预览 -->
<OrderDetail ref="detailRef" @success="getList" />
</template>
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import * as OrderApi from '@/api/pay/order'
import OrderDetail from './OrderDetail.vue'
import download from '@/utils/download'
import { getAppList } from '@/api/pay/app'
defineOptions({ name: 'PayOrder' })
const message = useMessage() // 消息弹窗
const loading = ref(false) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
appId: null,
channelCode: null,
merchantOrderId: null,
channelOrderNo: null,
no: null,
status: null,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出等待
const appList = ref([]) // 支付应用列表集合
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await OrderApi.getOrderPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await OrderApi.exportOrder(queryParams)
download.excel(data, '支付订单.xls')
} catch {
} finally {
exportLoading.value = false
}
}
/** 预览详情 */
const detailRef = ref()
const openDetail = (id: number) => {
detailRef.value.open(id)
}
/** 初始化 **/
onMounted(async () => {
await getList()
appList.value = await getAppList()
})
</script>
<style>
.order-font {
padding: 2px 0;
font-size: 12px;
}
</style>
<template>
<Dialog v-model="dialogVisible" title="详情" width="700px">
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="商户退款单号">
<el-tag size="small">{{ refundDetail.merchantRefundId }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="渠道退款单号">
<el-tag type="success" size="small" v-if="refundDetail.channelRefundNo">{{
refundDetail.channelRefundNo
}}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="商户支付单号">
<el-tag size="small">{{ refundDetail.merchantOrderId }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="渠道支付单号">
<el-tag type="success" size="small">{{ refundDetail.channelOrderNo }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="应用编号">{{ refundDetail.appId }}</el-descriptions-item>
<el-descriptions-item label="应用名称">{{ refundDetail.appName }}</el-descriptions-item>
<el-descriptions-item label="支付金额">
<el-tag type="success" size="small">
{{ (refundDetail.payPrice / 100.0).toFixed(2) }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="退款金额">
<el-tag size="mini" type="danger">
{{ (refundDetail.refundPrice / 100.0).toFixed(2) }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="退款状态">
<dict-tag :type="DICT_TYPE.PAY_REFUND_STATUS" :value="refundDetail.status" />
</el-descriptions-item>
<el-descriptions-item label="退款时间">
{{ formatDate(refundDetail.successTime) }}
</el-descriptions-item>
<el-descriptions-item label="创建时间">
{{ formatDate(refundDetail.createTime) }}
</el-descriptions-item>
<el-descriptions-item label="更新时间">
{{ formatDate(refundDetail.updateTime) }}
</el-descriptions-item>
</el-descriptions>
<!-- 分割线 -->
<el-divider />
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="退款渠道">
<dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE" :value="refundDetail.channelCode" />
</el-descriptions-item>
<el-descriptions-item label="退款原因">{{ refundDetail.reason }}</el-descriptions-item>
<el-descriptions-item label="退款 IP">{{ refundDetail.userIp }}</el-descriptions-item>
<el-descriptions-item label="通知 URL">{{ refundDetail.notifyUrl }}</el-descriptions-item>
</el-descriptions>
<!-- 分割线 -->
<el-divider />
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="渠道错误码">
{{ refundDetail.channelErrorCode }}
</el-descriptions-item>
<el-descriptions-item label="渠道错误码描述">
{{ refundDetail.channelErrorMsg }}
</el-descriptions-item>
</el-descriptions>
<el-descriptions :column="1" label-class-name="desc-label" direction="vertical" border>
<el-descriptions-item label="支付通道异步回调内容">
<el-text style="white-space: pre-wrap; word-break: break-word">
{{ refundDetail.channelNotifyData }}
</el-text>
</el-descriptions-item>
</el-descriptions>
</Dialog>
</template>
<script lang="ts" setup>
import { DICT_TYPE } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import * as RefundApi from '@/api/pay/refund'
defineOptions({ name: 'PayRefundDetail' })
const dialogVisible = ref(false) // 弹窗的是否展示
const detailLoading = ref(false) // 表单的加载中
const refundDetail = ref({})
/** 打开弹窗 */
const open = async (id: number) => {
dialogVisible.value = true
// 设置数据
detailLoading.value = true
try {
refundDetail.value = await RefundApi.getRefund(id)
} finally {
detailLoading.value = false
}
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
</script>
<template>
<doc-alert title="支付宝、微信退款接入" url="https://doc.iocoder.cn/pay/refund-demo/" />
<!-- 搜索工作栏 -->
<ContentWrap>
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="120px"
>
<el-form-item label="应用编号" prop="appId">
<el-select
v-model="queryParams.appId"
clearable
placeholder="请选择应用信息"
class="!w-240px"
>
<el-option v-for="item in appList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="退款渠道" prop="channelCode">
<el-select
v-model="queryParams.channelCode"
placeholder="请选择退款渠道"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.PAY_CHANNEL_CODE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="商户支付单号" prop="merchantOrderId">
<el-input
v-model="queryParams.merchantOrderId"
placeholder="请输入商户支付单号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="商户退款单号" prop="merchantRefundId">
<el-input
v-model="queryParams.merchantRefundId"
placeholder="请输入商户退款单号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="渠道支付单号" prop="channelOrderNo">
<el-input
v-model="queryParams.channelOrderNo"
placeholder="请输入渠道支付单号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="渠道退款单号" prop="channelRefundNo">
<el-input
v-model="queryParams.channelRefundNo"
placeholder="请输入渠道退款单号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="退款状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="请选择退款状态"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.PAY_REFUND_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<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="success"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['system:tenant:export']"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list">
<el-table-column label="编号" align="center" prop="id" />
<el-table-column
label="创建时间"
align="center"
prop="createTime"
width="170"
:formatter="dateFormatter"
/>
<el-table-column label="支付金额" align="center" prop="payPrice" width="100">
<template #default="scope">
{{ parseFloat(scope.row.payPrice / 100).toFixed(2) }}
</template>
</el-table-column>
<el-table-column label="退款金额" align="center" prop="refundPrice" width="100">
<template #default="scope">
{{ parseFloat(scope.row.refundPrice / 100).toFixed(2) }}
</template>
</el-table-column>
<el-table-column label="退款订单号" align="left" width="300">
<template #default="scope">
<p class="order-font">
<el-tag size="small">商户</el-tag> {{ scope.row.merchantRefundId }}
</p>
<p class="order-font">
<el-tag size="small" type="warning">退款</el-tag> {{ scope.row.no }}
</p>
<p class="order-font" v-if="scope.row.channelRefundNo">
<el-tag size="small" type="success">渠道</el-tag> {{ scope.row.channelRefundNo }}
</p>
</template>
</el-table-column>
<el-table-column label="支付订单号" align="left" width="300">
<template #default="scope">
<p class="order-font">
<el-tag size="small">商户</el-tag> {{ scope.row.merchantOrderId }}
</p>
<p class="order-font">
<el-tag size="small" type="success">渠道</el-tag> {{ scope.row.channelOrderNo }}
</p>
</template>
</el-table-column>
<el-table-column label="退款状态" align="center" prop="status" width="100">
<template #default="scope">
<dict-tag :type="DICT_TYPE.PAY_REFUND_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column label="退款渠道" align="center" width="140">
<template #default="scope">
<dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE" :value="scope.row.channelCode" />
</template>
</el-table-column>
<el-table-column
label="成功时间"
align="center"
prop="successTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column label="支付应用" align="center" prop="successTime" width="100">
<template #default="scope">
<span>{{ scope.row.appName }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" fixed="right">
<template #default="scope">
<el-button
type="primary"
link
@click="openDetail(scope.row.id)"
v-hasPermi="['pay:order:query']"
>
详情
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗:预览 -->
<RefundDetail ref="detailRef" @success="getList" />
</template>
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import * as RefundApi from '@/api/pay/refund'
import * as AppApi from '@/api/pay/app'
import RefundDetail from './RefundDetail.vue'
import download from '@/utils/download'
defineOptions({ name: 'PayRefund' })
const message = useMessage() // 消息弹窗
const loading = ref(false) // 列表遮罩层
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
merchantId: undefined,
appId: undefined,
channelCode: undefined,
merchantOrderId: undefined,
merchantRefundId: undefined,
status: undefined,
payPrice: undefined,
refundPrice: undefined,
channelOrderNo: undefined,
channelRefundNo: undefined,
createTime: [],
successTime: []
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出等待
const appList = ref([]) // 支付应用列表集合
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await RefundApi.getRefundPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields()
handleQuery()
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await RefundApi.exportRefund(queryParams)
download.excel(data, '支付订单.xls')
} catch {
} finally {
exportLoading.value = false
}
}
/** 预览详情 */
const detailRef = ref()
const openDetail = (id: number) => {
detailRef.value.open(id)
}
/** 初始化 **/
onMounted(async () => {
await getList()
appList.value = await AppApi.getAppList()
})
</script>
<style>
.order-font {
padding: 2px 0;
font-size: 12px;
}
</style>
<template>
<Dialog v-model="dialogVisible" title="转账单详情" width="700px">
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="商户单号">
<el-tag size="small">{{ detailData.merchantTransferId }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="转账单号">
<el-tag type="warning" size="small" v-if="detailData.no">{{ detailData.no }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="应用编号">{{ detailData.appId }}</el-descriptions-item>
<el-descriptions-item label="转账状态">
<dict-tag :type="DICT_TYPE.PAY_TRANSFER_STATUS" :value="detailData.status" size="small" />
</el-descriptions-item>
<el-descriptions-item label="转账金额">
<el-tag type="success" size="small">{{ (detailData.price / 100.0).toFixed(2) }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="转账时间">
{{ formatDate(detailData.successTime) }}
</el-descriptions-item>
<el-descriptions-item label="创建时间">
{{ formatDate(detailData.createTime) }}
</el-descriptions-item>
</el-descriptions>
<!-- 分割线 -->
<el-divider />
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="收款人姓名">{{ detailData.userName }}</el-descriptions-item>
<el-descriptions-item label="收款人账号">{{ detailData.userAccount }}</el-descriptions-item>
<el-descriptions-item label="支付渠道">
<dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE" :value="detailData.channelCode" />
</el-descriptions-item>
<el-descriptions-item label="支付 IP">{{ detailData.userIp }}</el-descriptions-item>
<el-descriptions-item label="渠道单号">
<el-tag size="mini" type="success" v-if="detailData.channelTransferNo">
{{ detailData.channelTransferNo }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="通知 URL">{{ detailData.notifyUrl }}</el-descriptions-item>
</el-descriptions>
<el-divider />
<el-descriptions :column="1" label-class-name="desc-label" direction="vertical" border>
<el-descriptions-item label="转账渠道通知内容">
<el-text style="white-space: pre-wrap; word-break: break-word">
{{ detailData.channelNotifyData }}
</el-text>
</el-descriptions-item>
</el-descriptions>
<el-divider />
<div style="text-align: right">
<el-button @click="dialogVisible = false">取 消</el-button>
</div>
</Dialog>
</template>
<script lang="ts" setup>
import { DICT_TYPE } from '@/utils/dict'
import * as TransferApi from '@/api/pay/transfer'
import { formatDate } from '@/utils/formatTime'
defineOptions({ name: 'PayTransferDetail' })
const dialogVisible = ref(false) // 弹窗的是否展示
const detailLoading = ref(false) // 表单的加载中
const detailData = ref({})
/** 打开弹窗 */
const open = async (id: number) => {
dialogVisible.value = true
// 设置数据
detailLoading.value = true
try {
detailData.value = await TransferApi.getTransfer(id)
} finally {
detailLoading.value = false
}
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
</script>
<style scoped></style>
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="100px"
>
<el-form-item label="转账单号" prop="no">
<el-input
v-model="queryParams.no"
placeholder="请输入转账单号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="转账渠道" prop="channelCode">
<el-select
v-model="queryParams.channelCode"
placeholder="请选择支付渠道"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.PAY_CHANNEL_CODE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="商户单号" prop="merchantTransferId">
<el-input
v-model="queryParams.merchantTransferId"
placeholder="请输入商户单号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="类型" prop="type">
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable class="!w-240px">
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.PAY_TRANSFER_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="转账状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="请选择转账状态"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.PAY_TRANSFER_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="收款人姓名" prop="userName">
<el-input
v-model="queryParams.userName"
placeholder="请输入收款人姓名"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="收款人账号" prop="accountNo">
<el-input
v-model="queryParams.accountNo"
placeholder="请输入收款人账号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="渠道单号" prop="channelTransferNo">
<el-input
v-model="queryParams.channelTransferNo"
placeholder="渠道单号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<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="success"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['pay:transfer:export']"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<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="createTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="支付应用" align="center" prop="appName" min-width="100" />
<el-table-column label="转账金额" align="center" prop="price">
<template #default="scope">
<span>{{ (scope.row.price / 100.0).toFixed(2) }}</span>
</template>
</el-table-column>
<el-table-column label="转账状态" align="center" prop="status" width="120">
<template #default="scope">
<dict-tag :type="DICT_TYPE.PAY_TRANSFER_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column label="订单号" align="left" width="300">
<template #default="scope">
<p class="transfer-font">
<el-tag size="small"> 商户</el-tag>
{{ scope.row.merchantTransferId }}
</p>
<p class="transfer-font" v-if="scope.row.no">
<el-tag size="small" type="warning">转账</el-tag>
{{ scope.row.no }}
</p>
<p class="transfer-font" v-if="scope.row.channelTransferNo">
<el-tag size="small" type="success">渠道</el-tag>
{{ scope.row.channelTransferNo }}
</p>
</template>
</el-table-column>
<el-table-column label="收款人姓名" align="center" prop="userName" width="120" />
<el-table-column label="收款账号" align="left" prop="userAccount" width="200" />
<el-table-column label="转账标题" align="center" prop="subject" width="120" />
<el-table-column label="转账渠道" align="center" prop="channelCode">
<template #default="scope">
<dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE" :value="scope.row.channelCode" />
</template>
</el-table-column>
<el-table-column
label="转账成功时间"
align="center"
prop="successTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="操作" align="center" fixed="right">
<template #default="scope">
<el-button link type="primary" @click="openDetail(scope.row.id)"> 详情 </el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
<TransferDetail ref="detailRef" />
</ContentWrap>
</template>
<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import * as TransferApi from '@/api/pay/transfer'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import TransferDetail from './TransferDetail.vue'
import download from '@/utils/download'
defineOptions({ name: 'PayTransfer' })
const message = useMessage() // 消息弹窗
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
no: null,
appId: null,
channelId: null,
channelCode: null,
merchantTransferId: null,
type: null,
status: null,
successTime: [],
price: null,
subject: null,
userName: null,
userAccount: null,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await TransferApi.getTransferPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await TransferApi.exportTransfer(queryParams)
download.excel(data, '转账单.xls')
} catch {
} finally {
exportLoading.value = false
}
}
/** 添加/修改操作 */
const detailRef = ref()
const openDetail = (id: number) => {
detailRef.value.open(id)
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
<style scoped>
.transfer-font {
padding: 2px 0;
font-size: 12px;
}
</style>
<template>
<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 WalletTransactionList from '../transaction/WalletTransactionList.vue'
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
const walletId = ref(0)
/** 打开弹窗 */
const open = async (theWalletId: number) => {
dialogVisible.value = true
dialogTitle.value = '钱包余额明细'
walletId.value = theWalletId
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
</script>
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="用户编号" prop="userId">
<el-input
v-model="queryParams.userId"
placeholder="请输入用户编号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="用户类型" prop="userType">
<el-select
v-model="queryParams.userType"
placeholder="请选择用户类型"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.USER_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<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-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<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="userId" />
<el-table-column label="用户类型" align="center" prop="userType">
<template #default="scope">
<dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType" />
</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="totalExpense">
<template #default="{ row }"> {{ fenToYuan(row.totalExpense) }}</template>
</el-table-column>
<el-table-column label="累计充值" align="center" prop="totalRecharge">
<template #default="{ row }"> {{ fenToYuan(row.totalRecharge) }}</template>
</el-table-column>
<el-table-column label="冻结金额" align="center" prop="freezePrice">
<template #default="{ row }"> {{ fenToYuan(row.freezePrice) }}</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button link type="primary" @click="openForm(scope.row.id)">详情</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 弹窗 -->
<WalletForm ref="formRef" />
</template>
<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { fenToYuan } from '@/utils'
import * as WalletApi from '@/api/pay/wallet/balance'
import WalletForm from './WalletForm.vue'
defineOptions({ name: 'WalletBalance' })
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
userId: null,
userType: null,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await WalletApi.getWalletPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (id?: number) => {
formRef.value.open(id)
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="150px"
v-loading="formLoading"
>
<el-form-item label="套餐名" prop="name">
<el-input v-model="formData.name" placeholder="请输入套餐名" />
</el-form-item>
<el-form-item label="支付金额(元)" prop="payPrice">
<el-input-number v-model="formData.payPrice" :min="0" :precision="2" :step="0.01" />
</el-form-item>
<el-form-item label="赠送金额(元)" prop="bonusPrice">
<el-input-number v-model="formData.bonusPrice" :min="0" :precision="2" :step="0.01" />
</el-form-item>
<el-form-item label="开启状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:value="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import * as WalletRechargePackageApi from '@/api/pay/wallet/rechargePackage'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { fenToYuan, yuanToFen } from '@/utils'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
const formType = ref('') // 表单的类型:create - 新增;update - 修改
const formData = ref({
id: undefined,
name: undefined,
payPrice: undefined,
bonusPrice: undefined,
status: undefined
})
const formRules = reactive({
name: [{ required: true, message: '套餐名不能为空', trigger: 'blur' }],
payPrice: [{ required: true, message: '支付金额不能为空', trigger: 'blur' }],
bonusPrice: [{ required: true, message: '赠送金额不能为空', trigger: 'blur' }],
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时,设置数据
if (id) {
formLoading.value = true
try {
formData.value = await WalletRechargePackageApi.getWalletRechargePackage(id)
formData.value.payPrice = fenToYuan(formData.value.payPrice)
formData.value.bonusPrice = fenToYuan(formData.value.bonusPrice)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
const data = { ...formData.value }
data.payPrice = yuanToFen(data.payPrice)
data.bonusPrice = yuanToFen(data.bonusPrice)
if (formType.value === 'create') {
await WalletRechargePackageApi.createWalletRechargePackage(data)
message.success(t('common.createSuccess'))
} else {
await WalletRechargePackageApi.updateWalletRechargePackage(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
name: undefined,
payPrice: undefined,
bonusPrice: undefined,
status: undefined
}
formRef.value?.resetFields()
}
</script>
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="套餐名" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入套餐名"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<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')"
v-hasPermi="['pay:wallet-recharge-package:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<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="name" />
<el-table-column label="支付金额" align="center" prop="payPrice">
<template #default="{ row }"> {{ fenToYuan(row.payPrice) }}</template>
</el-table-column>
<el-table-column label="赠送金额" align="center" prop="bonusPrice">
<template #default="{ row }"> {{ fenToYuan(row.bonusPrice) }}</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="status">
<template #default="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['pay:wallet-recharge-package:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['pay:wallet-recharge-package:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗:添加/修改 -->
<WalletRechargePackageForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as WalletRechargePackageApi from '@/api/pay/wallet/rechargePackage'
import WalletRechargePackageForm from './WalletRechargePackageForm.vue'
import { fenToYuan } from '@/utils'
defineOptions({ name: 'WalletRechargePackage' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: null,
payPrice: null,
bonusPrice: null,
status: null,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await WalletRechargePackageApi.getWalletRechargePackagePage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await WalletRechargePackageApi.deleteWalletRechargePackage(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
<template>
<ContentWrap>
<el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
<el-table-column align="center" label="编号" prop="id" />
<el-table-column align="center" label="钱包编号" prop="walletId" />
<el-table-column align="center" label="关联业务标题" prop="title" />
<el-table-column align="center" label="交易金额" prop="price">
<template #default="{ row }"> {{ fenToYuan(row.price) }}</template>
</el-table-column>
<el-table-column align="center" label="钱包余额" prop="balance">
<template #default="{ row }"> {{ fenToYuan(row.balance) }}</template>
</el-table-column>
<el-table-column
:formatter="dateFormatter"
align="center"
label="交易时间"
prop="createTime"
width="180px"
/>
</el-table>
<!-- 分页 -->
<Pagination
v-model:limit="queryParams.pageSize"
v-model:page="queryParams.pageNo"
:total="total"
@pagination="getList"
/>
</ContentWrap>
</template>
<script lang="ts" setup>
import { dateFormatter } from '@/utils/formatTime'
import * as WalletTransactionApi from '@/api/pay/wallet/transaction'
import * as WalletApi from '@/api/pay/wallet/balance'
import { fenToYuan } from '@/utils'
defineOptions({ name: 'WalletTransactionList' })
const props = defineProps({
walletId: {
type: Number,
required: false
},
userId: {
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 {
if (props.userId) {
const wallet = await WalletApi.getWallet({ userId: props.userId })
queryParams.walletId = wallet.id as any
} else {
queryParams.walletId = props.walletId as any
}
const data = await WalletTransactionApi.getWalletTransactionPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
<style lang="scss" scoped></style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment