✨ PAY：增加钱包、微信条码支付的渠道配置界面
This commit is contained in:
YunaiV
parent
bf3e051d74
commit
948ef08533
@ -133,6 +133,10 @@ export const PayChannelEnum = {
|
||||
code: 'alipay_bar',
|
||||
name: '支付宝条码支付'
|
||||
},
|
||||
WALLET: {
|
||||
code: 'wallet',
|
||||
name: '钱包支付'
|
||||
},
|
||||
MOCK: {
|
||||
code: 'mock',
|
||||
name: '模拟支付'
|
||||
|
||||
122
src/views/pay/app/components/channel/WalletChannelForm.vue
Normal file
122
src/views/pay/app/components/channel/WalletChannelForm.vue
Normal file
@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div>
|
||||
<Dialog v-model="dialogVisible" :title="dialogTitle" @closed="close" width="800px">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-form-item label-width="180px" label="渠道状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio
|
||||
v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="parseInt(dict.value)"
|
||||
:label="parseInt(dict.value)"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label-width="180px" label="备注" 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>
|
||||
@ -232,6 +232,48 @@
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="PayChannelEnum.WX_BAR.name" align="center">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="success"
|
||||
circle
|
||||
v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.WX_BAR.code)"
|
||||
@click="openChannelForm(scope.row, PayChannelEnum.WX_BAR.code)"
|
||||
>
|
||||
<Icon icon="ep:check" />
|
||||
</el-button>
|
||||
<el-button
|
||||
v-else
|
||||
type="danger"
|
||||
circle
|
||||
@click="openChannelForm(scope.row, PayChannelEnum.WX_BAR.code)"
|
||||
>
|
||||
<Icon icon="ep:close" />
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="钱包支付配置" align="center">
|
||||
<el-table-column :label="PayChannelEnum.WALLET.name" align="center">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="success"
|
||||
circle
|
||||
v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.WALLET.code)"
|
||||
@click="openChannelForm(scope.row, PayChannelEnum.WALLET.code)"
|
||||
>
|
||||
<Icon icon="ep:check" />
|
||||
</el-button>
|
||||
<el-button
|
||||
v-else
|
||||
type="danger"
|
||||
circle
|
||||
@click="openChannelForm(scope.row, PayChannelEnum.WALLET.code)"
|
||||
>
|
||||
<Icon icon="ep:close" />
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="模拟支付配置" align="center">
|
||||
<el-table-column :label="PayChannelEnum.MOCK.name" align="center">
|
||||
@ -290,16 +332,17 @@
|
||||
<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 download from '@/utils/download'
|
||||
import * as AppApi from '@/api/pay/app'
|
||||
import AppForm from './components/AppForm.vue'
|
||||
import { PayChannelEnum, PayType } from '@/utils/constants'
|
||||
import { 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'
|
||||
import { CommonStatusEnum } from '@/utils/constants'
|
||||
|
||||
defineOptions({ name: 'PayApp' })
|
||||
@ -397,6 +440,7 @@ const isChannelExists = (channels, channelCode) => {
|
||||
const alipayFormRef = ref()
|
||||
const weixinFormRef = ref()
|
||||
const mockFormRef = ref()
|
||||
const walletFormRef = ref()
|
||||
const channelParam = reactive({
|
||||
appId: null, // 应用 ID
|
||||
payCode: null // 渠道编码
|
||||
@ -415,6 +459,9 @@ const openChannelForm = async (row, payCode) => {
|
||||
if (payCode.indexOf('mock') === 0) {
|
||||
mockFormRef.value.open(row.id, payCode)
|
||||
}
|
||||
if (payCode.indexOf('wallet') === 0) {
|
||||
mockFormRef.value.open(row.id, payCode)
|
||||
}
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
|
||||
Loading…
Reference in New Issue
Block a user