Skip to content

Commit 948ef08

Browse files
YunaiVYunaiV
committed
✨ PAY：增加钱包、微信条码支付的渠道配置界面
1 parent bf3e051 commit 948ef08

File tree

3 files changed

+175
-2
lines changed

3 files changed

+175
-2
lines changed

‎src/utils/constants.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,10 @@ export const PayChannelEnum = {
133133
code: 'alipay_bar',
134134
name: '支付宝条码支付'
135135
},
136+
WALLET: {
137+
code: 'wallet',
138+
name: '钱包支付'
139+
},
136140
MOCK: {
137141
code: 'mock',
138142
name: '模拟支付'

‎src/views/pay/app/components/channel/WalletChannelForm.vue

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<template>
2+
<div>
3+
<Dialog v-model="dialogVisible" :title="dialogTitle" @closed="close" width="800px">
4+
<el-form
5+
ref="formRef"
6+
:model="formData"
7+
:rules="formRules"
8+
label-width="100px"
9+
v-loading="formLoading"
10+
>
11+
<el-form-item label-width="180px" label="渠道状态" prop="status">
12+
<el-radio-group v-model="formData.status">
13+
<el-radio
14+
v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
15+
:key="parseInt(dict.value)"
16+
:label="parseInt(dict.value)"
17+
>
18+
{{ dict.label }}
19+
</el-radio>
20+
</el-radio-group>
21+
</el-form-item>
22+
<el-form-item label-width="180px" label="备注" prop="remark">
23+
<el-input v-model="formData.remark" :style="{ width: '100%' }" />
24+
</el-form-item>
25+
</el-form>
26+
<template #footer>
27+
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
28+
<el-button @click="dialogVisible = false">取 消</el-button>
29+
</template>
30+
</Dialog>
31+
</div>
32+
</template>
33+
<script lang="ts" setup>
34+
import { CommonStatusEnum } from '@/utils/constants'
35+
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
36+
import * as ChannelApi from '@/api/pay/channel'
37+
38+
defineOptions({ name: 'WalletChannelForm' })
39+
40+
const { t } = useI18n() // 国际化
41+
const message = useMessage() // 消息弹窗
42+
43+
const dialogVisible = ref(false) // 弹窗的是否展示
44+
const dialogTitle = ref('') // 弹窗的标题
45+
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
46+
const formData = ref<any>({
47+
appId: '',
48+
code: '',
49+
status: undefined,
50+
feeRate: 0,
51+
remark: '',
52+
config: {
53+
name: 'mock-conf'
54+
}
55+
})
56+
const formRules = {
57+
status: [{ required: true, message: '渠道状态不能为空', trigger: 'blur' }]
58+
}
59+
const formRef = ref() // 表单 Ref
60+
61+
/** 打开弹窗 */
62+
const open = async (appId, code) => {
63+
dialogVisible.value = true
64+
formLoading.value = true
65+
resetForm(appId, code)
66+
// 加载数据
67+
try {
68+
const data = await ChannelApi.getChannel(appId, code)
69+
70+
if (data && data.id) {
71+
formData.value = data
72+
formData.value.config = JSON.parse(data.config)
73+
}
74+
dialogTitle.value = !formData.value.id ? '创建支付渠道' : '编辑支付渠道'
75+
} finally {
76+
formLoading.value = false
77+
}
78+
}
79+
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
80+
81+
/** 提交表单 */
82+
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
83+
const submitForm = async () => {
84+
// 校验表单
85+
if (!formRef) return
86+
const valid = await formRef.value.validate()
87+
if (!valid) return
88+
// 提交请求
89+
formLoading.value = true
90+
try {
91+
const data = { ...formData.value } as unknown as ChannelApi.ChannelVO
92+
data.config = JSON.stringify(formData.value.config)
93+
if (!data.id) {
94+
await ChannelApi.createChannel(data)
95+
message.success(t('common.createSuccess'))
96+
} else {
97+
await ChannelApi.updateChannel(data)
98+
message.success(t('common.updateSuccess'))
99+
}
100+
dialogVisible.value = false
101+
// 发送操作成功的事件
102+
emit('success')
103+
} finally {
104+
formLoading.value = false
105+
}
106+
}
107+
108+
/** 重置表单 */
109+
const resetForm = (appId, code) => {
110+
formData.value = {
111+
appId: appId,
112+
code: code,
113+
status: CommonStatusEnum.ENABLE,
114+
remark: '',
115+
feeRate: 0,
116+
config: {
117+
name: 'mock-conf'
118+
}
119+
}
120+
formRef.value?.resetFields()
121+
}
122+
</script>

‎src/views/pay/app/index.vue

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -232,6 +232,48 @@
232232
</el-button>
233233
</template>
234234
</el-table-column>
235+
<el-table-column :label="PayChannelEnum.WX_BAR.name" align="center">
236+
<template #default="scope">
237+
<el-button
238+
type="success"
239+
circle
240+
v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.WX_BAR.code)"
241+
@click="openChannelForm(scope.row, PayChannelEnum.WX_BAR.code)"
242+
>
243+
<Icon icon="ep:check" />
244+
</el-button>
245+
<el-button
246+
v-else
247+
type="danger"
248+
circle
249+
@click="openChannelForm(scope.row, PayChannelEnum.WX_BAR.code)"
250+
>
251+
<Icon icon="ep:close" />
252+
</el-button>
253+
</template>
254+
</el-table-column>
255+
</el-table-column>
256+
<el-table-column label="钱包支付配置" align="center">
257+
<el-table-column :label="PayChannelEnum.WALLET.name" align="center">
258+
<template #default="scope">
259+
<el-button
260+
type="success"
261+
circle
262+
v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.WALLET.code)"
263+
@click="openChannelForm(scope.row, PayChannelEnum.WALLET.code)"
264+
>
265+
<Icon icon="ep:check" />
266+
</el-button>
267+
<el-button
268+
v-else
269+
type="danger"
270+
circle
271+
@click="openChannelForm(scope.row, PayChannelEnum.WALLET.code)"
272+
>
273+
<Icon icon="ep:close" />
274+
</el-button>
275+
</template>
276+
</el-table-column>
235277
</el-table-column>
236278
<el-table-column label="模拟支付配置" align="center">
237279
<el-table-column :label="PayChannelEnum.MOCK.name" align="center">
@@ -290,16 +332,17 @@
290332
<AlipayChannelForm ref="alipayFormRef" @success="getList" />
291333
<WeixinChannelForm ref="weixinFormRef" @success="getList" />
292334
<MockChannelForm ref="mockFormRef" @success="getList" />
335+
<WalletChannelForm ref="walletFormRef" @success="getList" />
293336
</template>
294337
<script lang="ts" setup>
295338
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
296-
import download from '@/utils/download'
297339
import * as AppApi from '@/api/pay/app'
298340
import AppForm from './components/AppForm.vue'
299-
import { PayChannelEnum, PayType } from '@/utils/constants'
341+
import { PayChannelEnum } from '@/utils/constants'
300342
import AlipayChannelForm from './components/channel/AlipayChannelForm.vue'
301343
import WeixinChannelForm from './components/channel/WeixinChannelForm.vue'
302344
import MockChannelForm from './components/channel/MockChannelForm.vue'
345+
import WalletChannelForm from './components/channel/WalletChannelForm.vue'
303346
import { CommonStatusEnum } from '@/utils/constants'
304347
305348
defineOptions({ name: 'PayApp' })
@@ -397,6 +440,7 @@ const isChannelExists = (channels, channelCode) => {
397440
const alipayFormRef = ref()
398441
const weixinFormRef = ref()
399442
const mockFormRef = ref()
443+
const walletFormRef = ref()
400444
const channelParam = reactive({
401445
appId: null, // 应用 ID
402446
payCode: null // 渠道编码
@@ -415,6 +459,9 @@ const openChannelForm = async (row, payCode) => {
415459
if (payCode.indexOf('mock') === 0) {
416460
mockFormRef.value.open(row.id, payCode)
417461
}
462+
if (payCode.indexOf('wallet') === 0) {
463+
mockFormRef.value.open(row.id, payCode)
464+
}
418465
}
419466
420467
/** 初始化 **/

0 commit comments

Comments
 (0)