Skip to content

phsl / admin

Go to a project
Commit a2fdff47 by YunaiV
Options

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

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