Skip to content

phsl / admin

Go to a project
Commit a2fdff47 by YunaiV
Options

支付应用：模拟支付的添加代码优化

parent b3b1d974
Showing with 84 additions and 102 deletions
src/utils/constants.ts
...@@ -126,15 +126,6 @@ export const PayChannelEnum = { ...@@ -126,15 +126,6 @@ export const PayChannelEnum = {
} }
/** /**
* 支付类型枚举
*/
export const PayType = {
WECHAT: 'WECHAT',
ALIPAY: 'ALIPAY',
MOCK: 'MOCK'
}
/**
* 支付订单状态枚举 * 支付订单状态枚举
*/ */
export const PayOrderStatusEnum = { export const PayOrderStatusEnum = {
......
src/views/pay/app/components/channel/AlipayChannelForm.vue
...@@ -151,8 +151,8 @@ ...@@ -151,8 +151,8 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
<el-button @click="close">取消</el-button> <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button type="primary" @click="submitForm">确定</el-button> <el-button @click="dialogVisible = false">取 消</el-button>
</template> </template>
</Dialog> </Dialog>
</div> </div>
......
src/views/pay/app/components/mockChannelForm.vue → src/views/pay/app/components/channel/MockChannelForm.vue
<template> <template>
<div> <div>
<el-dialog <Dialog v-model="dialogVisible" :title="dialogTitle" @closed="close" width="800px">
v-model:visible="dialogVisible"
:title="title"
@closed="close"
append-to-body
destroy-on-close
width="800px"
>
<el-form <el-form
ref="formRef" ref="formRef"
:model="formData" :model="formData"
:rules="rules" :rules="formRules"
label-width="100px" label-width="100px"
v-loading="formLoading" v-loading="formLoading"
> >
...@@ -31,22 +24,25 @@ ...@@ -31,22 +24,25 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
<el-button @click="close">取消</el-button> <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button type="primary" @click="submitForm">确定</el-button> <el-button @click="dialogVisible = false">取 消</el-button>
</template> </template>
</el-dialog> </Dialog>
</div> </div>
</template> </template>
<script lang="ts" setup name="MockChannelForm"> <script lang="ts" setup>
import { createChannel, getChannel, updateChannel } from '@/api/pay/channel'
import { CommonStatusEnum } from '@/utils/constants' import { CommonStatusEnum } from '@/utils/constants'
import { DICT_TYPE, getDictOptions } from '@/utils/dict' import { DICT_TYPE, getDictOptions } from '@/utils/dict'
import * as ChannelApi from '@/api/pay/channel'
defineOptions({ name: 'MockChannelForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) const dialogTitle = ref('') // 弹窗的标题
const title = ref('') const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref<any>({ const formData = ref<any>({
appId: '', appId: '',
code: '', code: '',
...@@ -57,62 +53,60 @@ const formData = ref<any>({ ...@@ -57,62 +53,60 @@ const formData = ref<any>({
name: 'mock-conf' name: 'mock-conf'
} }
}) })
const formRules = {
const rules = {
status: [{ required: true, message: '渠道状态不能为空', trigger: 'blur' }] status: [{ required: true, message: '渠道状态不能为空', trigger: 'blur' }]
} }
const formRef = ref() // 表单 Ref
const formRef = ref() /** 打开弹窗 */
const emit = defineEmits(['success'])
const open = async (appId, code) => { const open = async (appId, code) => {
dialogVisible.value = true dialogVisible.value = true
formLoading.value = true formLoading.value = true
reset(appId, code) resetForm(appId, code)
// 加载数据
try { try {
const data = await getChannel(appId, code) const data = await ChannelApi.getChannel(appId, code)
if (data && data.id) { if (data && data.id) {
formData.value = data formData.value = data
formData.value.config = JSON.parse(data.config) formData.value.config = JSON.parse(data.config)
} }
title.value = !formData.value.id ? '创建支付渠道' : '编辑支付渠道' dialogTitle.value = !formData.value.id ? '创建支付渠道' : '编辑支付渠道'
} finally { } finally {
formLoading.value = false formLoading.value = false
} }
} }
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
const close = () => { /** 提交表单 */
dialogVisible.value = false const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
reset(undefined, undefined)
}
const submitForm = async () => { const submitForm = async () => {
const valid = await formRef.value?.validate() // 校验表单
if (!valid) { if (!formRef) return
return const valid = await formRef.value.validate()
} if (!valid) return
const data = { ...formData.value } // 提交请求
formLoading.value = true
try {
const data = { ...formData.value } as unknown as ChannelApi.ChannelVO
data.config = JSON.stringify(formData.value.config) data.config = JSON.stringify(formData.value.config)
if (!data.id) { if (!data.id) {
createChannel(data).then(() => { await ChannelApi.createChannel(data)
message.success('新增成功') message.success(t('common.createSuccess'))
emit('success')
close()
})
} else { } else {
updateChannel(data).then(() => { await ChannelApi.updateChannel(data)
message.success('修改成功') message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success') emit('success')
close() } finally {
}) formLoading.value = false
} }
} }
/** 重置表单 */ /** 重置表单 */
const reset = (appId, code) => { const resetForm = (appId, code) => {
formData.value = { formData.value = {
appId: appId, appId: appId,
code: code, code: code,
...@@ -125,6 +119,4 @@ const reset = (appId, code) => { ...@@ -125,6 +119,4 @@ const reset = (appId, code) => {
} }
formRef.value?.resetFields() formRef.value?.resetFields()
} }
defineExpose({ open })
</script> </script>
src/views/pay/app/components/channel/WeixinChannelForm.vue
...@@ -158,8 +158,8 @@ ...@@ -158,8 +158,8 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
<el-button @click="close">取消</el-button> <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button type="primary" @click="submitForm">确定</el-button> <el-button @click="dialogVisible = false">取 消</el-button>
</template> </template>
</Dialog> </Dialog>
</div> </div>
......
src/views/pay/app/index.vue
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
<el-button <el-button
type="success" type="success"
v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_APP.code)" v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_APP.code)"
@click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_APP.code, PayType.ALIPAY)" @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_APP.code)"
circle circle
> >
<Icon icon="ep:check" /> <Icon icon="ep:check" />
...@@ -97,7 +97,7 @@ ...@@ -97,7 +97,7 @@
v-else v-else
type="danger" type="danger"
circle circle
@click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_APP.code, PayType.ALIPAY)" @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_APP.code)"
> >
<Icon icon="ep:close" /> <Icon icon="ep:close" />
</el-button> </el-button>
...@@ -109,7 +109,7 @@ ...@@ -109,7 +109,7 @@
type="success" type="success"
circle circle
v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_PC.code)" v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_PC.code)"
@click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_PC.code, PayType.ALIPAY)" @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_PC.code)"
> >
<Icon icon="ep:check" /> <Icon icon="ep:check" />
</el-button> </el-button>
...@@ -117,7 +117,7 @@ ...@@ -117,7 +117,7 @@
v-else v-else
type="danger" type="danger"
circle circle
@click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_PC.code, PayType.ALIPAY)" @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_PC.code)"
> >
<Icon icon="ep:close" /> <Icon icon="ep:close" />
</el-button> </el-button>
...@@ -129,7 +129,7 @@ ...@@ -129,7 +129,7 @@
type="success" type="success"
circle circle
v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_WAP.code)" v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_WAP.code)"
@click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_WAP.code, PayType.ALIPAY)" @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_WAP.code)"
> >
<Icon icon="ep:check" /> <Icon icon="ep:check" />
</el-button> </el-button>
...@@ -137,7 +137,7 @@ ...@@ -137,7 +137,7 @@
v-else v-else
type="danger" type="danger"
circle circle
@click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_WAP.code, PayType.ALIPAY)" @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_WAP.code)"
> >
<Icon icon="ep:close" /> <Icon icon="ep:close" />
</el-button> </el-button>
...@@ -149,7 +149,7 @@ ...@@ -149,7 +149,7 @@
type="success" type="success"
circle circle
v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_QR.code)" v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_QR.code)"
@click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_QR.code, PayType.ALIPAY)" @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_QR.code)"
> >
<Icon icon="ep:check" /> <Icon icon="ep:check" />
</el-button> </el-button>
...@@ -157,7 +157,7 @@ ...@@ -157,7 +157,7 @@
v-else v-else
type="danger" type="danger"
circle circle
@click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_QR.code, PayType.ALIPAY)" @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_QR.code)"
> >
<Icon icon="ep:close" /> <Icon icon="ep:close" />
</el-button> </el-button>
...@@ -169,7 +169,7 @@ ...@@ -169,7 +169,7 @@
type="success" type="success"
circle circle
v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_BAR.code)" v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_BAR.code)"
@click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_BAR.code, PayType.ALIPAY)" @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_BAR.code)"
> >
<Icon icon="ep:check" /> <Icon icon="ep:check" />
</el-button> </el-button>
...@@ -177,7 +177,7 @@ ...@@ -177,7 +177,7 @@
v-else v-else
type="danger" type="danger"
circle circle
@click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_BAR.code, PayType.ALIPAY)" @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_BAR.code)"
> >
<Icon icon="ep:close" /> <Icon icon="ep:close" />
</el-button> </el-button>
...@@ -191,7 +191,7 @@ ...@@ -191,7 +191,7 @@
type="success" type="success"
circle circle
v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.WX_LITE.code)" v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.WX_LITE.code)"
@click="openChannelForm(scope.row, PayChannelEnum.WX_LITE.code, PayType.WECHAT)" @click="openChannelForm(scope.row, PayChannelEnum.WX_LITE.code)"
> >
<Icon icon="ep:check" /> <Icon icon="ep:check" />
</el-button> </el-button>
...@@ -199,7 +199,7 @@ ...@@ -199,7 +199,7 @@
v-else v-else
type="danger" type="danger"
circle circle
@click="openChannelForm(scope.row, PayChannelEnum.WX_LITE.code, PayType.WECHAT)" @click="openChannelForm(scope.row, PayChannelEnum.WX_LITE.code)"
> >
<Icon icon="ep:close" /> <Icon icon="ep:close" />
</el-button> </el-button>
...@@ -211,7 +211,7 @@ ...@@ -211,7 +211,7 @@
type="success" type="success"
circle circle
v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.WX_PUB.code)" v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.WX_PUB.code)"
@click="openChannelForm(scope.row, PayChannelEnum.WX_PUB.code, PayType.WECHAT)" @click="openChannelForm(scope.row, PayChannelEnum.WX_PUB.code)"
> >
<Icon icon="ep:check" /> <Icon icon="ep:check" />
</el-button> </el-button>
...@@ -219,7 +219,7 @@ ...@@ -219,7 +219,7 @@
v-else v-else
type="danger" type="danger"
circle circle
@click="openChannelForm(scope.row, PayChannelEnum.WX_PUB.code, PayType.WECHAT)" @click="openChannelForm(scope.row, PayChannelEnum.WX_PUB.code)"
> >
<Icon icon="ep:close" /> <Icon icon="ep:close" />
</el-button> </el-button>
...@@ -231,7 +231,7 @@ ...@@ -231,7 +231,7 @@
type="success" type="success"
circle circle
v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.WX_APP.code)" v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.WX_APP.code)"
@click="openChannelForm(scope.row, PayChannelEnum.WX_APP.code, PayType.WECHAT)" @click="openChannelForm(scope.row, PayChannelEnum.WX_APP.code)"
> >
<Icon icon="ep:check" /> <Icon icon="ep:check" />
</el-button> </el-button>
...@@ -239,7 +239,7 @@ ...@@ -239,7 +239,7 @@
v-else v-else
type="danger" type="danger"
circle circle
@click="openChannelForm(scope.row, PayChannelEnum.WX_APP.code, PayType.WECHAT)" @click="openChannelForm(scope.row, PayChannelEnum.WX_APP.code)"
> >
<Icon icon="ep:close" /> <Icon icon="ep:close" />
</el-button> </el-button>
...@@ -252,17 +252,19 @@ ...@@ -252,17 +252,19 @@
<el-button <el-button
type="success" type="success"
circle circle
v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.MOCK.code)" v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.MOCK)"
@click="openChannelForm(scope.row, PayChannelEnum.MOCK.code)" @click="openChannelForm(scope.row, PayChannelEnum.MOCK.code)"
><Icon icon="ep:check" >
/></el-button> <Icon icon="ep:check" />
</el-button>
<el-button <el-button
v-else v-else
type="danger" type="danger"
circle circle
@click="openChannelForm(scope.row, PayChannelEnum.MOCK.code)" @click="openChannelForm(scope.row, PayChannelEnum.MOCK.code)"
><Icon icon="ep:close" >
/></el-button> <Icon icon="ep:close" />
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table-column> </el-table-column>
...@@ -310,7 +312,7 @@ import AppForm from './components/AppForm.vue' ...@@ -310,7 +312,7 @@ import AppForm from './components/AppForm.vue'
import { PayChannelEnum, PayType } from '@/utils/constants' import { PayChannelEnum, PayType } from '@/utils/constants'
import AlipayChannelForm from './components/channel/AlipayChannelForm.vue' import AlipayChannelForm from './components/channel/AlipayChannelForm.vue'
import WeixinChannelForm from './components/channel/WeixinChannelForm.vue' import WeixinChannelForm from './components/channel/WeixinChannelForm.vue'
import MockChannelForm from './components/mockChannelForm.vue' import MockChannelForm from './components/channel/MockChannelForm.vue'
import { CommonStatusEnum } from '@/utils/constants' import { CommonStatusEnum } from '@/utils/constants'
defineOptions({ name: 'PayApp' }) defineOptions({ name: 'PayApp' })
...@@ -318,10 +320,6 @@ defineOptions({ name: 'PayApp' }) ...@@ -318,10 +320,6 @@ defineOptions({ name: 'PayApp' })
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const alipayFormRef = ref()
const weixinFormRef = ref()
const mockFormRef = ref()
const loading = ref(true) // 列表的加载中 const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数 const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据 const list = ref([]) // 列表的数据
...@@ -376,11 +374,6 @@ const handleStatusChange = async (row: any) => { ...@@ -376,11 +374,6 @@ const handleStatusChange = async (row: any) => {
} }
/** 添加/修改操作 */ /** 添加/修改操作 */
const channelParam = reactive({
loading: false,
appId: null, // 应用 ID
payCode: null // 渠道编码
})
const formRef = ref() const formRef = ref()
const openForm = (type: string, id?: number) => { const openForm = (type: string, id?: number) => {
formRef.value.open(type, id) formRef.value.open(type, id)
...@@ -429,20 +422,26 @@ const isChannelExists = (channels, channelCode) => { ...@@ -429,20 +422,26 @@ const isChannelExists = (channels, channelCode) => {
/** /**
* 新增支付渠道信息 * 新增支付渠道信息
*/ */
const openChannelForm = async (row, payCode, type) => { const alipayFormRef = ref()
channelParam.loading = false const weixinFormRef = ref()
const mockFormRef = ref()
const channelParam = reactive({
appId: null, // 应用 ID
payCode: null // 渠道编码
})
const openChannelForm = async (row, payCode) => {
channelParam.appId = row.id channelParam.appId = row.id
channelParam.payCode = payCode channelParam.payCode = payCode
switch (type) { if (payCode.indexOf('alipay_') === 0) {
case PayType.ALIPAY:
alipayFormRef.value.open(row.id, payCode) alipayFormRef.value.open(row.id, payCode)
break return
case PayType.WECHAT: }
if (payCode.indexOf('wx_') === 0) {
weixinFormRef.value.open(row.id, payCode) weixinFormRef.value.open(row.id, payCode)
break return
case PayType.MOCK: }
if (payCode.indexOf('mock') === 0) {
mockFormRef.value.open(row.id, payCode) mockFormRef.value.open(row.id, payCode)
break
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment