mfx/tkNewAdmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化

Browse Source
This commit is contained in:
没复习
2025-07-01 21:08:51 +08:00
commit 57aa9e21ed
1649 changed files with 242230 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
src/views/pay/app/components/AppForm.vue Normal file
View File

@@ -0,0 +1,138 @@
<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>

351
src/views/pay/app/components/channel/AlipayChannelForm.vue Normal file
View File

@@ -0,0 +1,351 @@
<template>
<div>
<Dialog v-model="dialogVisible" :title="dialogTitle" width="830px" @closed="close">
<el-form
ref="formRef"
v-loading="formLoading"
:model="formData"
:rules="formRules"
label-width="100px"
>
<el-form-item label="渠道费率" label-width="180px" prop="feeRate">
<el-input v-model="formData.feeRate" clearable placeholder="请输入渠道费率">
<template #append>%</template>
</el-input>
</el-form-item>
<el-form-item label="开放平台 APPID" label-width="180px" prop="config.appId">
<el-input v-model="formData.config.appId" clearable placeholder="请输入开放平台 APPID" />
</el-form-item>
<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="config.serverUrl">
<el-radio-group v-model="formData.config.serverUrl">
<el-radio value="https://openapi.alipay.com/gateway.do">线上环境</el-radio>
<el-radio value="https://openapi-sandbox.dl.alipaydev.com/gateway.do">
沙箱环境
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="算法类型" label-width="180px" prop="config.signType">
<el-radio-group v-model="formData.config.signType">
<el-radio key="RSA2" value="RSA2">RSA2</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="公钥类型" label-width="180px" prop="config.mode">
<el-radio-group v-model="formData.config.mode">
<el-radio key="公钥模式" :value="1">公钥模式</el-radio>
<el-radio key="证书模式" :value="2">证书模式</el-radio>
</el-radio-group>
</el-form-item>
<div v-if="formData.config.mode === 1">
<el-form-item label="应用私钥" label-width="180px" prop="config.privateKey">
<el-input
v-model="formData.config.privateKey"
:autosize="{ minRows: 8, maxRows: 8 }"
:style="{ width: '100%' }"
clearable
placeholder="请输入应用私钥"
type="textarea"
/>
</el-form-item>
<el-form-item label="支付宝公钥" label-width="180px" prop="config.alipayPublicKey">
<el-input
v-model="formData.config.alipayPublicKey"
:autosize="{ minRows: 8, maxRows: 8 }"
:style="{ width: '100%' }"
clearable
placeholder="请输入支付宝公钥"
type="textarea"
/>
</el-form-item>
</div>
<div v-if="formData.config.mode === 2">
<el-form-item label="应用私钥" label-width="180px" prop="config.privateKey">
<el-input
v-model="formData.config.privateKey"
:autosize="{ minRows: 8, maxRows: 8 }"
:style="{ width: '100%' }"
clearable
placeholder="请输入应用私钥"
type="textarea"
/>
</el-form-item>
<el-form-item label="商户公钥应用证书" label-width="180px" prop="config.appCertContent">
<el-input
v-model="formData.config.appCertContent"
:autosize="{ minRows: 8, maxRows: 8 }"
:style="{ width: '100%' }"
placeholder="请上传商户公钥应用证书"
readonly
type="textarea"
/>
</el-form-item>
<el-form-item label="" label-width="180px">
<el-upload
ref="privateKeyContentFile"
:accept="fileAccept"
:before-upload="fileBeforeUpload"
:http-request="appCertUpload"
:limit="1"
action=""
>
<el-button type="primary">
<Icon class="mr-5px" icon="ep:upload" />
点击上传
</el-button>
</el-upload>
</el-form-item>
<el-form-item
label="支付宝公钥证书"
label-width="180px"
prop="config.alipayPublicCertContent"
>
<el-input
v-model="formData.config.alipayPublicCertContent"
:autosize="{ minRows: 8, maxRows: 8 }"
:style="{ width: '100%' }"
placeholder="请上传支付宝公钥证书"
readonly
type="textarea"
/>
</el-form-item>
<el-form-item label="" label-width="180px">
<el-upload
ref="privateCertContentFile"
:accept="fileAccept"
:before-upload="fileBeforeUpload"
:http-request="alipayPublicCertUpload"
:limit="1"
action=""
>
<el-button type="primary">
<Icon class="mr-5px" icon="ep:upload" />
点击上传
</el-button>
</el-upload>
</el-form-item>
<el-form-item label="根证书" label-width="180px" prop="config.rootCertContent">
<el-input
v-model="formData.config.rootCertContent"
:autosize="{ minRows: 8, maxRows: 8 }"
:style="{ width: '100%' }"
placeholder="请上传根证书"
readonly
type="textarea"
/>
</el-form-item>
<el-form-item label="" label-width="180px">
<el-upload
ref="privateCertContentFile"
:accept="fileAccept"
:before-upload="fileBeforeUpload"
:http-request="rootCertUpload"
:limit="1"
action=""
>
<el-button type="primary">
<Icon class="mr-5px" icon="ep:upload" />
点击上传
</el-button>
</el-upload>
</el-form-item>
</div>
<el-form-item label="接口内容加密方式" label-width="180px" prop="config.encryptType">
<el-radio-group v-model="formData.config.encryptType">
<el-radio key="NONE" label="">无加密</el-radio>
<el-radio key="AES" label="AES">AES</el-radio>
</el-radio-group>
</el-form-item>
<div v-if="formData.config.encryptType === 'AES'">
<el-form-item label="接口内容加密密钥" label-width="180px" prop="config.encryptKey">
<el-input
v-model="formData.config.encryptKey"
clearable
placeholder="请输入接口内容加密密钥"
/>
</el-form-item>
</div>
<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: 'AlipayChannelForm' })
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: undefined,
remark: '',
config: {
appId: '',
serverUrl: null,
signType: '',
mode: null,
privateKey: '',
alipayPublicKey: '',
appCertContent: '',
alipayPublicCertContent: '',
rootCertContent: '',
encryptType: '',
encryptKey: ''
}
})
const formRules = {
feeRate: [{ required: true, message: '请输入渠道费率', trigger: 'blur' }],
status: [{ required: true, message: '渠道状态不能为空', trigger: 'blur' }],
'config.appId': [{ required: true, message: '请输入开放平台上创建的应用的 ID', trigger: 'blur' }],
'config.serverUrl': [{ required: true, message: '请传入网关地址', trigger: 'blur' }],
'config.signType': [{ required: true, message: '请传入签名算法类型', trigger: 'blur' }],
'config.mode': [{ required: true, message: '公钥类型不能为空', trigger: 'blur' }],
'config.privateKey': [{ required: true, message: '请输入商户私钥', trigger: 'blur' }],
'config.alipayPublicKey': [
{ required: true, message: '请输入支付宝公钥字符串', trigger: 'blur' }
],
'config.appCertContent': [{ required: true, message: '请上传商户公钥应用证书', trigger: 'blur' }],
'config.alipayPublicCertContent': [
{ required: true, message: '请上传支付宝公钥证书', trigger: 'blur' }
],
'config.rootCertContent': [{ required: true, message: '请上传指定根证书', trigger: 'blur' }],
'config.encryptKey': [{ required: true, message: '请输入接口内容加密密钥', trigger: 'blur' }]
}
const fileAccept = '.crt'
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: null,
config: {
appId: '',
serverUrl: null,
signType: 'RSA2',
mode: null,
privateKey: '',
alipayPublicKey: '',
appCertContent: '',
alipayPublicCertContent: '',
rootCertContent: '',
encryptType: '',
encryptKey: ''
}
}
formRef.value?.resetFields()
}
const fileBeforeUpload = (file) => {
let format = '.' + file.name.split('.')[1]
if (format !== fileAccept) {
message.error(`请上传指定格式"${fileAccept}"文件`)
return false
}
let isRightSize = file.size / 1024 / 1024 < 2
if (!isRightSize) {
message.error('文件大小超过 2MB')
}
return isRightSize
}
const appCertUpload = (event) => {
const readFile = new FileReader()
readFile.onload = (e: any) => {
formData.value.config.appCertContent = e.target.result
}
readFile.readAsText(event.file)
}
const alipayPublicCertUpload = (event) => {
const readFile = new FileReader()
readFile.onload = (e: any) => {
formData.value.config.alipayPublicCertContent = e.target.result
}
readFile.readAsText(event.file)
}
const rootCertUpload = (event) => {
const readFile = new FileReader()
readFile.onload = (e: any) => {
formData.value.config.rootCertContent = e.target.result
}
readFile.readAsText(event.file)
}
</script>

122
src/views/pay/app/components/channel/MockChannelForm.vue Normal file
View File

@@ -0,0 +1,122 @@
<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>

122
src/views/pay/app/components/channel/WalletChannelForm.vue Normal file
View File

@@ -0,0 +1,122 @@
<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>

381
src/views/pay/app/components/channel/WeixinChannelForm.vue Normal file
View File

@@ -0,0 +1,381 @@
<template>
<div>
<Dialog v-model="dialogVisible" :title="dialogTitle" width="800px">
<el-form
ref="formRef"
v-loading="formLoading"
:model="formData"
:rules="formRules"
label-width="120px"
>
<el-form-item label="渠道费率" label-width="180px" prop="feeRate">
<el-input
v-model="formData.feeRate"
:style="{ width: '100%' }"
clearable
placeholder="请输入渠道费率"
>
<template #append>%</template>
</el-input>
</el-form-item>
<el-form-item label="微信 APPID" label-width="180px" prop="config.appId">
<el-input
v-model="formData.config.appId"
:style="{ width: '100%' }"
clearable
placeholder="请输入微信 APPID"
/>
</el-form-item>
<el-form-item label-width="180px">
<a
href="https://pay.weixin.qq.com/index.php/extend/merchant_appid/mapay_platform/account_manage"
target="_blank"
>
前往微信商户平台查看 APPID
</a>
</el-form-item>
<el-form-item label="商户号" label-width="180px" prop="config.mchId">
<el-input v-model="formData.config.mchId" :style="{ width: '100%' }" />
</el-form-item>
<el-form-item label-width="180px">
<a href="https://pay.weixin.qq.com/index.php/extend/pay_setting" target="_blank">
前往微信商户平台查看商户号
</a>
</el-form-item>
<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="API 版本" label-width="180px" prop="config.apiVersion">
<el-radio-group v-model="formData.config.apiVersion">
<el-radio value="v2">v2</el-radio>
<el-radio value="v3">v3</el-radio>
</el-radio-group>
</el-form-item>
<div v-if="formData.config.apiVersion === 'v2'">
<el-form-item label="商户密钥" label-width="180px" prop="config.mchKey">
<el-input v-model="formData.config.mchKey" clearable placeholder="请输入商户密钥" />
</el-form-item>
<el-form-item
label="apiclient_cert.p12 证书"
label-width="180px"
prop="config.keyContent"
>
<el-input
v-model="formData.config.keyContent"
:autosize="{ minRows: 2, maxRows: 4 }"
:style="{ width: '100%' }"
placeholder="请上传 apiclient_cert.p12 证书"
readonly
type="textarea"
:rows="2"
/>
</el-form-item>
<el-form-item label="" label-width="180px">
<el-upload
:before-upload="p12FileBeforeUpload"
:http-request="keyContentUpload"
:limit="1"
accept=".p12"
action=""
>
<el-button type="primary">
<Icon class="mr-5px" icon="ep:upload" />
点击上传
</el-button>
</el-upload>
</el-form-item>
</div>
<div v-if="formData.config.apiVersion === 'v3'">
<el-form-item label="API V3 密钥" label-width="180px" prop="config.apiV3Key">
<el-input
v-model="formData.config.apiV3Key"
clearable
placeholder="请输入 API V3 密钥"
/>
</el-form-item>
<el-form-item
label="apiclient_key.pem 证书"
label-width="180px"
prop="config.privateKeyContent"
>
<el-input
v-model="formData.config.privateKeyContent"
:autosize="{ minRows: 2, maxRows: 4 }"
:style="{ width: '100%' }"
placeholder="请上传 apiclient_key.pem 证书"
readonly
type="textarea"
:rows="2"
/>
</el-form-item>
<el-form-item label="" label-width="180px" prop="privateKeyContentFile">
<el-upload
ref="privateKeyContentFile"
:before-upload="pemFileBeforeUpload"
:http-request="privateKeyContentUpload"
:limit="1"
accept=".pem"
action=""
>
<el-button type="primary">
<Icon class="mr-5px" icon="ep:upload" />
点击上传
</el-button>
</el-upload>
</el-form-item>
<el-form-item label="证书序列号" label-width="180px" prop="config.certSerialNo">
<el-input
v-model="formData.config.certSerialNo"
clearable
placeholder="请输入证书序列号"
/>
</el-form-item>
<el-form-item label-width="180px">
<a
href="https://pay.weixin.qq.com/index.php/core/cert/api_cert#/api-cert-manage"
target="_blank"
>
前往微信商户平台查看证书序列号
</a>
</el-form-item>
<el-form-item label="public_key.pem 证书" label-width="180px" prop="config.publicKeyContent">
<el-input
v-model="formData.config.publicKeyContent"
:autosize="{ minRows: 2, maxRows: 4 }"
:style="{ width: '100%' }"
placeholder="请上传 public_key.pem 证书"
readonly
type="textarea"
:rows="2"
/>
</el-form-item>
<el-form-item label="" label-width="180px" prop="publicKeyContentFile">
<el-upload
ref="publicKeyContentFile"
:before-upload="pemFileBeforeUpload"
:http-request="publicKeyContentUpload"
:limit="1"
accept=".pem"
action=""
>
<el-button type="primary">
<Icon class="mr-5px" icon="ep:upload" />
点击上传
</el-button>
</el-upload>
</el-form-item>
<el-form-item label="公钥 ID" label-width="180px" prop="config.publicKeyId">
<el-input
v-model="formData.config.publicKeyId"
clearable
placeholder="请输入公钥 ID"
/>
</el-form-item>
<el-form-item label-width="180px">
<a
href="https://pay.weixin.qq.com/doc/v3/merchant/4012153196"
target="_blank"
>
微信支付公钥产品简介及使用说明
</a>
</el-form-item>
</div>
<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: 'WeixinChannelForm' })
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: undefined,
remark: '',
config: {
appId: '',
mchId: '',
apiVersion: '',
mchKey: '',
keyContent: '',
privateKeyContent: '',
certSerialNo: '',
apiV3Key: '',
publicKeyContent: '',
publicKeyId: ''
}
})
const formRules = {
feeRate: [{ required: true, message: '请输入渠道费率', trigger: 'blur' }],
status: [{ required: true, message: '渠道状态不能为空', trigger: 'blur' }],
'config.mchId': [{ required: true, message: '请传入商户号', trigger: 'blur' }],
'config.appId': [{ required: true, message: '请输入公众号APPID', trigger: 'blur' }],
'config.apiVersion': [{ required: true, message: 'API版本不能为空', trigger: 'blur' }],
'config.mchKey': [{ required: true, message: '请输入商户密钥', trigger: 'blur' }],
'config.keyContent': [
{ required: true, message: '请上传 apiclient_cert.p12 证书', trigger: 'blur' }
],
'config.privateKeyContent': [
{ required: true, message: '请上传 apiclient_key.pem 证书', trigger: 'blur' }
],
'config.certSerialNo': [{ required: true, message: '请输入证书序列号', trigger: 'blur' }],
'config.publicKeyContent': [{ required: true, message: '请上传 public_key.pem 证书', trigger: 'blur' }],
'config.publicKeyId': [{ required: true, message: '请输入公钥 ID', trigger: 'blur' }],
'config.apiV3Key': [{ required: true, message: '请上传 api V3 密钥值', 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,
feeRate: undefined,
remark: '',
config: {
appId: '',
mchId: '',
apiVersion: '',
mchKey: '',
keyContent: '',
privateKeyContent: '',
certSerialNo: '',
apiV3Key: '',
publicKeyContent: '',
publicKeyId: ''
}
}
formRef.value?.resetFields()
}
/**
* apiclient_cert.p12、apiclient_key.pem 上传前的校验
*/
const fileBeforeUpload = (file, fileAccept) => {
let format = '.' + file.name.split('.')[1]
if (format !== fileAccept) {
message.error('请上传指定格式"' + fileAccept + '"文件')
return false
}
let isRightSize = file.size / 1024 / 1024 < 2
if (!isRightSize) {
message.error('文件大小超过 2MB')
}
return isRightSize
}
const p12FileBeforeUpload = (file) => {
fileBeforeUpload(file, '.p12')
}
const pemFileBeforeUpload = (file) => {
fileBeforeUpload(file, '.pem')
}
/**
* 读取 apiclient_key.pem 到 privateKeyContent 字段
*/
const privateKeyContentUpload = async (event) => {
const readFile = new FileReader()
readFile.onload = (e: any) => {
formData.value.config.privateKeyContent = e.target.result
}
readFile.readAsText(event.file)
}
/**
* 读取 apiclient_cert.p12 到 keyContent 字段
*/
const keyContentUpload = async (event) => {
const readFile = new FileReader()
readFile.onload = (e: any) => {
formData.value.config.keyContent = e.target.result.split(',')[1]
}
readFile.readAsDataURL(event.file) // 读成 base64
}
/**
* 读取 public_key.pem 到 publicKeyContent 字段
*/
const publicKeyContentUpload = async (event) => {
const readFile = new FileReader()
readFile.onload = (e: any) => {
formData.value.config.publicKeyContent = e.target.result
}
readFile.readAsText(event.file)
}
</script>

372
src/views/pay/app/index.vue Normal file
View File

@@ -0,0 +1,372 @@
<template>
<doc-alert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
<!-- 搜索 -->
<ContentWrap>
<el-form
ref="queryFormRef"
:inline="true"
:model="queryParams"
class="-mb-15px"
label-width="68px"
>
<el-form-item label="应用名" prop="name">
<el-input
v-model="queryParams.name"
class="!w-240px"
clearable
placeholder="请输入应用名"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="开启状态" prop="status">
<el-select
v-model="queryParams.status"
class="!w-240px"
clearable
placeholder="请选择开启状态"
>
<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"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
end-placeholder="结束日期"
start-placeholder="开始日期"
type="daterange"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon class="mr-5px" icon="ep:search" />
搜索
</el-button>
<el-button @click="resetQuery">
<Icon class="mr-5px" icon="ep:refresh" />
重置
</el-button>
<el-button v-hasPermi="['pay:app:create']" plain type="primary" @click="openForm('create')">
<Icon class="mr-5px" icon="ep:plus" />
新增
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list">
<el-table-column align="center" label="应用标识" prop="appKey" />
<el-table-column align="center" label="应用名" min-width="90" prop="name" />
<el-table-column align="center" label="开启状态" prop="status">
<template #default="scope">
<el-switch
v-model="scope.row.status"
:active-value="0"
:inactive-value="1"
@change="handleStatusChange(scope.row)"
/>
</template>
</el-table-column>
<el-table-column align="center" label="支付宝配置">
<el-table-column
v-for="channel in alipayChannels"
:key="channel.code"
:label="channel.name.replace('支付宝', '')"
align="center"
>
<template #default="scope">
<el-button
v-if="isChannelExists(scope.row.channelCodes, channel.code)"
circle
size="small"
type="success"
@click="openChannelForm(scope.row, channel.code)"
>
<Icon icon="ep:check" />
</el-button>
<el-button
v-else
circle
size="small"
type="danger"
@click="openChannelForm(scope.row, channel.code)"
>
<Icon icon="ep:close" />
</el-button>
</template>
</el-table-column>
</el-table-column>
<el-table-column align="center" label="微信配置">
<el-table-column
v-for="channel in wxChannels"
:key="channel.code"
:label="channel.name.replace('微信', '')"
align="center"
>
<template #default="scope">
<el-button
v-if="isChannelExists(scope.row.channelCodes, channel.code)"
circle
size="small"
type="success"
@click="openChannelForm(scope.row, channel.code)"
>
<Icon icon="ep:check" />
</el-button>
<el-button
v-else
circle
size="small"
type="danger"
@click="openChannelForm(scope.row, channel.code)"
>
<Icon icon="ep:close" />
</el-button>
</template>
</el-table-column>
</el-table-column>
<el-table-column align="center" label="钱包支付配置">
<el-table-column :label="PayChannelEnum.WALLET.name" align="center">
<template #default="scope">
<el-button
v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.WALLET.code)"
circle
size="small"
type="success"
@click="openChannelForm(scope.row, PayChannelEnum.WALLET.code)"
>
<Icon icon="ep:check" />
</el-button>
<el-button
v-else
circle
size="small"
type="danger"
@click="openChannelForm(scope.row, PayChannelEnum.WALLET.code)"
>
<Icon icon="ep:close" />
</el-button>
</template>
</el-table-column>
</el-table-column>
<el-table-column align="center" label="模拟支付配置">
<el-table-column :label="PayChannelEnum.MOCK.name" align="center">
<template #default="scope">
<el-button
v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.MOCK.code)"
circle
size="small"
type="success"
@click="openChannelForm(scope.row, PayChannelEnum.MOCK.code)"
>
<Icon icon="ep:check" />
</el-button>
<el-button
v-else
circle
size="small"
type="danger"
@click="openChannelForm(scope.row, PayChannelEnum.MOCK.code)"
>
<Icon icon="ep:close" />
</el-button>
</template>
</el-table-column>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" min-width="110">
<template #default="scope">
<el-button
v-hasPermi="['pay:app:update']"
link
type="primary"
@click="openForm('update', scope.row.id)"
>
编辑
</el-button>
<el-button
v-hasPermi="['pay:app:delete']"
link
type="danger"
@click="handleDelete(scope.row.id)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
v-model:limit="queryParams.pageSize"
v-model:page="queryParams.pageNo"
:total="total"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<AppForm ref="formRef" @success="getList" />
<AlipayChannelForm ref="alipayFormRef" @success="getList" />
<WeixinChannelForm ref="weixinFormRef" @success="getList" />
<MockChannelForm ref="mockFormRef" @success="getList" />
<WalletChannelForm ref="walletFormRef" @success="getList" />
</template>
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as AppApi from '@/api/pay/app'
import AppForm from './components/AppForm.vue'
import { CommonStatusEnum, PayChannelEnum } from '@/utils/constants'
import AlipayChannelForm from './components/channel/AlipayChannelForm.vue'
import WeixinChannelForm from './components/channel/WeixinChannelForm.vue'
import MockChannelForm from './components/channel/MockChannelForm.vue'
import WalletChannelForm from './components/channel/WalletChannelForm.vue'
defineOptions({ name: 'PayApp' })
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: undefined,
status: undefined,
remark: undefined,
payNotifyUrl: undefined,
refundNotifyUrl: undefined,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
const alipayChannels = [
PayChannelEnum.ALIPAY_APP,
PayChannelEnum.ALIPAY_PC,
PayChannelEnum.ALIPAY_WAP,
PayChannelEnum.ALIPAY_QR,
PayChannelEnum.ALIPAY_BAR
]
const wxChannels = [
PayChannelEnum.WX_LITE,
PayChannelEnum.WX_PUB,
PayChannelEnum.WX_APP,
PayChannelEnum.WX_NATIVE,
PayChannelEnum.WX_WAP,
PayChannelEnum.WX_BAR
]
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await AppApi.getAppPage(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 handleStatusChange = async (row: any) => {
let text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用'
try {
await message.confirm('确认要"' + text + '""' + row.name + '"应用吗?')
await AppApi.changeAppStatus({ id: row.id, status: row.status })
message.success(text + '成功')
} catch {
row.status =
row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE
}
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await AppApi.deleteApp(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/**
* 根据渠道编码判断渠道列表中是否存在
*
* @param channels 渠道列表
* @param channelCode 渠道编码
*/
const isChannelExists = (channels, channelCode) => {
if (!channels) {
return false
}
return channels.indexOf(channelCode) !== -1
}
/**
* 新增支付渠道信息
*/
const alipayFormRef = ref()
const weixinFormRef = ref()
const mockFormRef = ref()
const walletFormRef = ref()
const channelParam = reactive({
appId: null, // 应用 ID
payCode: null // 渠道编码
})
const openChannelForm = async (row, payCode) => {
channelParam.appId = row.id
channelParam.payCode = payCode
if (payCode.indexOf('alipay_') === 0) {
alipayFormRef.value.open(row.id, payCode)
return
}
if (payCode.indexOf('wx_') === 0) {
weixinFormRef.value.open(row.id, payCode)
return
}
if (payCode.indexOf('mock') === 0) {
mockFormRef.value.open(row.id, payCode)
}
if (payCode.indexOf('wallet') === 0) {
mockFormRef.value.open(row.id, payCode)
}
}
/** 初始化 **/
onMounted(async () => {
await getList()
})
</script>

488
src/views/pay/cashier/index.vue Normal file
View File

@@ -0,0 +1,488 @@
<template>
<!-- 支付信息 -->
<el-card v-loading="loading">
<el-descriptions title="支付信息" :column="3" border>
<el-descriptions-item label="支付单号">{{ payOrder.id }}</el-descriptions-item>
<el-descriptions-item label="商品标题">{{ payOrder.subject }}</el-descriptions-item>
<el-descriptions-item label="商品内容">{{ payOrder.body }}</el-descriptions-item>
<el-descriptions-item label="支付金额">
￥{{ (payOrder.price / 100.0).toFixed(2) }}
</el-descriptions-item>
<el-descriptions-item label="创建时间">
{{ formatDate(payOrder.createTime) }}
</el-descriptions-item>
<el-descriptions-item label="过期时间">
{{ formatDate(payOrder.expireTime) }}
</el-descriptions-item>
</el-descriptions>
</el-card>
<!-- 支付选择框 -->
<el-card style="margin-top: 10px" v-loading="submitLoading" element-loading-text="提交支付中...">
<!-- 支付宝 -->
<el-descriptions title="选择支付宝支付" />
<div class="pay-channel-container">
<div
class="box"
v-for="channel in channelsAlipay"
:key="channel.code"
@click="submit(channel.code)"
>
<img :src="channel.icon" />
<div class="title">{{ channel.name }}</div>
</div>
</div>
<!-- 微信支付 -->
<el-descriptions title="选择微信支付" style="margin-top: 20px" />
<div class="pay-channel-container">
<div
class="box"
v-for="channel in channelsWechat"
:key="channel.code"
@click="submit(channel.code)"
>
<img :src="channel.icon" />
<div class="title">{{ channel.name }}</div>
</div>
</div>
<!-- 其它支付 -->
<el-descriptions title="选择其它支付" style="margin-top: 20px" />
<div class="pay-channel-container">
<div
class="box"
v-for="channel in channelsMock"
:key="channel.code"
@click="submit(channel.code)"
>
<img :src="channel.icon" />
<div class="title">{{ channel.name }}</div>
</div>
</div>
</el-card>
<!-- 展示形式：二维码 URL -->
<Dialog
:title="qrCode.title"
v-model="qrCode.visible"
width="350px"
append-to-body
:close-on-press-escape="false"
>
<Qrcode :text="qrCode.url" :width="310" />
</Dialog>
<!-- 展示形式：BarCode 条形码 -->
<Dialog
:title="barCode.title"
v-model="barCode.visible"
width="500px"
append-to-body
:close-on-press-escape="false"
>
<el-form ref="form" label-width="80px">
<el-row>
<el-col :span="24">
<el-form-item label="条形码" prop="name">
<el-input v-model="barCode.value" placeholder="请输入条形码" required />
</el-form-item>
</el-col>
<el-col :span="24">
<div style="text-align: right">
或使用
<el-link
type="danger"
target="_blank"
href="https://baike.baidu.com/item/条码支付/10711903"
>
(扫码枪/扫码盒)
</el-link>
扫码
</div>
</el-col>
</el-row>
</el-form>
<template #footer>
<el-button
type="primary"
@click="submit0(barCode.channelCode)"
:disabled="barCode.value.length === 0"
>
确认支付
</el-button>
<el-button @click="barCode.visible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script lang="ts" setup>
import { Qrcode } from '@/components/Qrcode'
import * as PayOrderApi from '@/api/pay/order'
import { PayChannelEnum, PayDisplayModeEnum, PayOrderStatusEnum } from '@/utils/constants'
import { formatDate } from '@/utils/formatTime'
import { useTagsViewStore } from '@/store/modules/tagsView'
// 导入图标
import svg_alipay_pc from '@/assets/svgs/pay/icon/alipay_pc.svg'
import svg_alipay_wap from '@/assets/svgs/pay/icon/alipay_wap.svg'
import svg_alipay_app from '@/assets/svgs/pay/icon/alipay_app.svg'
import svg_alipay_qr from '@/assets/svgs/pay/icon/alipay_qr.svg'
import svg_alipay_bar from '@/assets/svgs/pay/icon/alipay_bar.svg'
import svg_wx_pub from '@/assets/svgs/pay/icon/wx_pub.svg'
import svg_wx_lite from '@/assets/svgs/pay/icon/wx_lite.svg'
import svg_wx_app from '@/assets/svgs/pay/icon/wx_app.svg'
import svg_wx_native from '@/assets/svgs/pay/icon/wx_native.svg'
import svg_wx_bar from '@/assets/svgs/pay/icon/wx_bar.svg'
import svg_wallet from '@/assets/svgs/pay/icon/wallet.svg'
import svg_mock from '@/assets/svgs/pay/icon/mock.svg'
defineOptions({ name: 'PayCashier' })
const message = useMessage() // 消息弹窗
const route = useRoute() // 路由
const { push, currentRoute } = useRouter() // 路由
const { delView } = useTagsViewStore() // 视图操作
const id = ref(undefined) // 支付单号
const returnUrl = ref<string | undefined>(undefined) // 支付完的回调地址
const loading = ref(false) // 支付信息的 loading
const payOrder = ref({}) // 支付信息
const channelsAlipay = [
{
name: '支付宝 PC 网站支付',
icon: svg_alipay_pc,
code: 'alipay_pc'
},
{
name: '支付宝 Wap 网站支付',
icon: svg_alipay_wap,
code: 'alipay_wap'
},
{
name: '支付宝 App 网站支付',
icon: svg_alipay_app,
code: 'alipay_app'
},
{
name: '支付宝扫码支付',
icon: svg_alipay_qr,
code: 'alipay_qr'
},
{
name: '支付宝条码支付',
icon: svg_alipay_bar,
code: 'alipay_bar'
}
]
const channelsWechat = [
{
name: '微信公众号支付',
icon: svg_wx_pub,
code: 'wx_pub'
},
{
name: '微信小程序支付',
icon: svg_wx_lite,
code: 'wx_lite'
},
{
name: '微信 App 支付',
icon: svg_wx_app,
code: 'wx_app'
},
{
name: '微信扫码支付',
icon: svg_wx_native,
code: 'wx_native'
},
{
name: '微信条码支付',
icon: svg_wx_bar,
code: 'wx_bar'
}
]
const channelsMock = [
{
name: '钱包支付',
icon: svg_wallet,
code: 'wallet'
},
{
name: '模拟支付',
icon: svg_mock,
code: 'mock'
}
]
const submitLoading = ref(false) // 提交支付的 loading
const interval = ref<any>(undefined) // 定时任务，轮询是否完成支付
const qrCode = ref({
// 展示形式：二维码
url: '',
title: '',
visible: false
})
const barCode = ref({
// 展示形式：条形码
channelCode: '',
value: '',
title: '',
visible: false
})
/** 获得支付信息 */
const getDetail = async () => {
// 1.1 未传递订单编号
if (!id.value) {
message.error('未传递支付单号，无法查看对应的支付信息')
goReturnUrl('cancel')
return
}
const data = await PayOrderApi.getOrder(id.value, true)
payOrder.value = data
// 1.2 无法查询到支付信息
if (!data) {
message.error('支付订单不存在，请检查！')
goReturnUrl('cancel')
return
}
// 1.3 如果已支付、或者已关闭，则直接跳转
if (data.status === PayOrderStatusEnum.SUCCESS.status) {
message.success('支付成功')
goReturnUrl('success')
return
} else if (data.status === PayOrderStatusEnum.CLOSED.status) {
message.error('无法支付，原因：订单已关闭')
goReturnUrl('close')
return
}
}
/** 提交支付 */
const submit = (channelCode) => {
// 条形码支付，需要特殊处理
if (channelCode === PayChannelEnum.ALIPAY_BAR.code) {
barCode.value = {
channelCode: channelCode,
value: '',
title: '“支付宝”条码支付',
visible: true
}
return
}
if (channelCode === PayChannelEnum.WX_BAR.code) {
barCode.value = {
channelCode: channelCode,
value: '',
title: '“微信”条码支付',
visible: true
}
return
}
// 微信公众号、小程序支付，无法在 PC 网页中进行
if (channelCode === PayChannelEnum.WX_PUB.code) {
message.error('微信公众号支付：不支持 PC 网站')
return
}
if (channelCode === PayChannelEnum.WX_LITE.code) {
message.error('微信小程序：不支持 PC 网站')
return
}
// 默认的提交处理
submit0(channelCode)
}
const submit0 = async (channelCode) => {
submitLoading.value = true
try {
const formData = {
id: id.value,
channelCode: channelCode,
returnUrl: location.href, // 支付成功后，支付渠道跳转回当前页；再由当前页，跳转回 {@link returnUrl} 对应的地址
...buildSubmitParam(channelCode)
}
const data = await PayOrderApi.submitOrder(formData)
// 直接返回已支付的情况，例如说扫码支付
if (data.status === PayOrderStatusEnum.SUCCESS.status) {
clearQueryInterval()
message.success('支付成功！')
goReturnUrl('success')
return
}
// 展示对应的界面
if (data.displayMode === PayDisplayModeEnum.URL.mode) {
displayUrl(channelCode, data)
} else if (data.displayMode === PayDisplayModeEnum.QR_CODE.mode) {
displayQrCode(channelCode, data)
} else if (data.displayMode === PayDisplayModeEnum.APP.mode) {
displayApp(channelCode)
}
// 打开轮询任务
createQueryInterval()
} finally {
submitLoading.value = false
}
}
/** 构建提交支付的额外参数 */
const buildSubmitParam = (channelCode) => {
// ① 支付宝 BarCode 支付时，需要传递 authCode 条形码
if (channelCode === PayChannelEnum.ALIPAY_BAR.code) {
return {
channelExtras: {
auth_code: barCode.value.value
}
}
}
// ② 微信 BarCode 支付时，需要传递 authCode 条形码
if (channelCode === PayChannelEnum.WX_BAR.code) {
return {
channelExtras: {
authCode: barCode.value.value
}
}
}
return {}
}
/** 提交支付后，URL 的展示形式 */
const displayUrl = (_channelCode, data) => {
location.href = data.displayContent
submitLoading.value = false
}
/** 提交支付后（扫码支付） */
const displayQrCode = (channelCode, data) => {
let title = '请使用手机浏览器“扫一扫”'
if (channelCode === PayChannelEnum.ALIPAY_WAP.code) {
// 考虑到 WAP 测试，所以引导手机浏览器搞
} else if (channelCode.indexOf('alipay_') === 0) {
title = '请使用支付宝“扫一扫”扫码支付'
} else if (channelCode.indexOf('wx_') === 0) {
title = '请使用微信“扫一扫”扫码支付'
}
qrCode.value = {
title: title,
url: data.displayContent,
visible: true
}
submitLoading.value = false
}
/** 提交支付后（App） */
const displayApp = (channelCode) => {
if (channelCode === PayChannelEnum.ALIPAY_APP.code) {
message.error('支付宝 App 支付：无法在网页支付！')
}
if (channelCode === PayChannelEnum.WX_APP.code) {
message.error('微信 App 支付：无法在网页支付！')
}
submitLoading.value = false
}
/** 轮询查询任务 */
const createQueryInterval = () => {
if (interval.value) {
return
}
interval.value = setInterval(async () => {
const data = await PayOrderApi.getOrder(id.value)
// 已支付
if (data.status === PayOrderStatusEnum.SUCCESS.status) {
clearQueryInterval()
message.success('支付成功！')
goReturnUrl('success')
}
// 已取消
if (data.status === PayOrderStatusEnum.CLOSED.status) {
clearQueryInterval()
message.error('支付已关闭！')
goReturnUrl('close')
}
}, 1000 * 2)
}
/** 清空查询任务 */
const clearQueryInterval = () => {
// 清空各种弹窗
qrCode.value = {
title: '',
url: '',
visible: false
}
// 清空任务
clearInterval(interval.value)
interval.value = undefined
}
/**
* 回到业务的 URL
*
* @param payResult 支付结果
* ① success：支付成功
* ② cancel：取消支付
* ③ close：支付已关闭
*/
const goReturnUrl = (payResult) => {
// 清理任务
clearQueryInterval()
// 未配置的情况下，只能关闭
if (!returnUrl.value) {
delView(unref(currentRoute))
return
}
const url =
returnUrl.value.indexOf('?') >= 0
? returnUrl.value + '&payResult=' + payResult
: returnUrl.value + '?payResult=' + payResult
// 如果有配置，且是 http 开头，则浏览器跳转
if (returnUrl.value.indexOf('http') === 0) {
location.href = url
} else {
delView(unref(currentRoute))
push({
path: url
})
}
}
/** 初始化 */
onMounted(() => {
id.value = route.query.id
if (route.query.returnUrl) {
returnUrl.value = decodeURIComponent(route.query.returnUrl)
}
getDetail()
})
</script>
<style lang="scss" scoped>
.pay-channel-container {
display: flex;
margin-top: -10px;
.box {
width: 160px;
padding-top: 10px;
padding-bottom: 5px;
margin-right: 10px;
text-align: center;
cursor: pointer;
border: 1px solid #e6ebf5;
img {
width: 40px;
height: 40px;
}
.title {
padding-top: 5px;
}
}
}
</style>

240
src/views/pay/demo/order/index.vue Normal file
View File

@@ -0,0 +1,240 @@
<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>

129
src/views/pay/demo/withdraw/DemoWithdrawForm.vue Normal file
View File

@@ -0,0 +1,129 @@
<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>

172
src/views/pay/demo/withdraw/index.vue Normal file
View File

@@ -0,0 +1,172 @@
<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>

92
src/views/pay/notify/NotifyDetail.vue Normal file
View File

@@ -0,0 +1,92 @@
<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>

250
src/views/pay/notify/index.vue Normal file
View File

@@ -0,0 +1,250 @@
<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>

113
src/views/pay/order/OrderDetail.vue Normal file
View File

@@ -0,0 +1,113 @@
<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>

275
src/views/pay/order/index.vue Normal file
View File

@@ -0,0 +1,275 @@
<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>

95
src/views/pay/refund/RefundDetail.vue Normal file
View File

@@ -0,0 +1,95 @@
<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>

298
src/views/pay/refund/index.vue Normal file
View File

@@ -0,0 +1,298 @@
<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>

80
src/views/pay/transfer/TransferDetail.vue Normal file
View File

@@ -0,0 +1,80 @@
<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>

283
src/views/pay/transfer/index.vue Normal file
View File

@@ -0,0 +1,283 @@
<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>

22
src/views/pay/wallet/balance/WalletForm.vue Normal file
View File

@@ -0,0 +1,22 @@
<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>

156
src/views/pay/wallet/balance/index.vue Normal file
View File

@@ -0,0 +1,156 @@
<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>

122
src/views/pay/wallet/rechargePackage/WalletRechargePackageForm.vue Normal file
View File

@@ -0,0 +1,122 @@
<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>

185
src/views/pay/wallet/rechargePackage/index.vue Normal file
View File

@@ -0,0 +1,185 @@
<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>

79
src/views/pay/wallet/transaction/WalletTransactionList.vue Normal file
View File

@@ -0,0 +1,79 @@
<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>