425 lines
13 KiB
Vue
425 lines
13 KiB
Vue
<script setup lang="ts">
|
||
import { ElMessage } from 'element-plus'
|
||
import { computed, ref, watch } from 'vue'
|
||
|
||
import {
|
||
createPaymentConfig,
|
||
updatePaymentConfig,
|
||
fetchPaymentConfig,
|
||
type PaymentConfig,
|
||
type CreatePaymentConfigRequest,
|
||
type UpdatePaymentConfigRequest,
|
||
} from '@/features/admin/api/paymentConfig'
|
||
import { readError } from '@/shared/utils/error'
|
||
|
||
const props = defineProps<{
|
||
modelValue: boolean
|
||
mode: 'create' | 'edit' | 'view'
|
||
config: PaymentConfig | null
|
||
}>()
|
||
|
||
const emit = defineEmits<{
|
||
(e: 'update:modelValue', val: boolean): void
|
||
(e: 'close'): void
|
||
(e: 'saved'): void
|
||
}>()
|
||
|
||
const submitting = ref(false)
|
||
const showSecrets = ref(false)
|
||
const loadingSecrets = ref(false)
|
||
const advancedOpen = ref<string[]>([])
|
||
|
||
const defaultGateways: Record<string, string> = {
|
||
leshua: 'https://paygate.leshuazf.com/cgi-bin/lepos_pay_gateway.cgi',
|
||
lakala: 'https://test.wsmsd.cn/sit',
|
||
mock: '',
|
||
}
|
||
|
||
function defaultExtraConfig(provider: string) {
|
||
if (provider === 'lakala') {
|
||
return {
|
||
app_id: '',
|
||
serial_no: '',
|
||
term_no: '',
|
||
lakala_cert: '',
|
||
pay_mode: 'AUTO',
|
||
order_expire_minutes: 15,
|
||
}
|
||
}
|
||
return {}
|
||
}
|
||
|
||
function makeDefaultForm(provider = 'leshua'): CreatePaymentConfigRequest {
|
||
return {
|
||
name: '',
|
||
provider,
|
||
merchant_id: '',
|
||
gateway_url: defaultGateways[provider] || '',
|
||
sign_key: '',
|
||
notify_key: '',
|
||
notify_url: '',
|
||
jump_url: '',
|
||
pay_way: 'ZFBZF',
|
||
jspay_flag: '2',
|
||
sign_type: provider === 'lakala' ? 'SHA256withRSA' : 'MD5',
|
||
extra_config: defaultExtraConfig(provider),
|
||
is_default: false,
|
||
status: 'active',
|
||
environment: provider === 'lakala' ? 'sandbox' : 'production',
|
||
business_tags: [],
|
||
}
|
||
}
|
||
|
||
const formData = ref<CreatePaymentConfigRequest>(makeDefaultForm())
|
||
|
||
const dialogTitle = computed(() => {
|
||
const titles = {
|
||
create: '新增支付配置',
|
||
edit: '编辑支付配置',
|
||
view: '查看支付配置',
|
||
}
|
||
return titles[props.mode]
|
||
})
|
||
|
||
const isReadonly = computed(() => props.mode === 'view')
|
||
const isLakala = computed(() => formData.value.provider === 'lakala')
|
||
const isMock = computed(() => formData.value.provider === 'mock')
|
||
const signKeyLabel = computed(() => (isLakala.value ? '商户私钥' : '签名密钥'))
|
||
const notifyKeyLabel = computed(() => (isLakala.value ? '通知证书' : '通知密钥'))
|
||
const extraConfig = computed<Record<string, any>>(() => formData.value.extra_config || {})
|
||
|
||
function normalizeExtraConfig(provider: string, extraConfig?: Record<string, any> | null) {
|
||
const extra = {
|
||
...defaultExtraConfig(provider),
|
||
...(extraConfig || {}),
|
||
}
|
||
if (provider === 'lakala' && !extra.pay_mode) {
|
||
extra.pay_mode = 'AUTO'
|
||
}
|
||
return extra
|
||
}
|
||
|
||
watch(
|
||
() => props.modelValue,
|
||
val => {
|
||
if (val && props.config) {
|
||
formData.value = {
|
||
name: props.config.name,
|
||
provider: props.config.provider,
|
||
merchant_id: props.config.merchant_id,
|
||
gateway_url: props.config.gateway_url,
|
||
notify_url: props.config.notify_url,
|
||
jump_url: props.config.jump_url,
|
||
pay_way: props.config.pay_way,
|
||
jspay_flag: props.config.jspay_flag,
|
||
sign_type: props.config.sign_type,
|
||
extra_config: normalizeExtraConfig(props.config.provider, props.config.extra_config),
|
||
is_default: props.config.is_default,
|
||
status: props.config.status,
|
||
environment: props.config.environment,
|
||
business_tags: props.config.business_tags || [],
|
||
}
|
||
showSecrets.value = false
|
||
advancedOpen.value = []
|
||
} else if (val && !props.config) {
|
||
// 重置表单
|
||
formData.value = makeDefaultForm()
|
||
showSecrets.value = false
|
||
advancedOpen.value = []
|
||
}
|
||
},
|
||
{ immediate: true }
|
||
)
|
||
|
||
function handleProviderChange(provider: string) {
|
||
if (props.mode !== 'create') return
|
||
const currentName = formData.value.name
|
||
const currentNotifyURL = formData.value.notify_url
|
||
formData.value = {
|
||
...makeDefaultForm(provider),
|
||
name: currentName,
|
||
notify_url: currentNotifyURL,
|
||
}
|
||
}
|
||
|
||
async function handleViewSecrets() {
|
||
if (!props.config) return
|
||
loadingSecrets.value = true
|
||
try {
|
||
const config = await fetchPaymentConfig(props.config.id, true)
|
||
formData.value.sign_key = config.sign_key || ''
|
||
formData.value.notify_key = config.notify_key || ''
|
||
showSecrets.value = true
|
||
ElMessage.success('密钥已加载')
|
||
} catch (error) {
|
||
ElMessage.error(readError(error, '加载密钥失败'))
|
||
} finally {
|
||
loadingSecrets.value = false
|
||
}
|
||
}
|
||
|
||
async function handleSave() {
|
||
submitting.value = true
|
||
try {
|
||
if (props.mode === 'create') {
|
||
await createPaymentConfig(formData.value)
|
||
ElMessage.success('创建成功')
|
||
} else if (props.mode === 'edit') {
|
||
if (!props.config) return
|
||
const payload: UpdatePaymentConfigRequest = {
|
||
name: formData.value.name,
|
||
merchant_id: formData.value.merchant_id,
|
||
gateway_url: formData.value.gateway_url,
|
||
notify_url: formData.value.notify_url,
|
||
jump_url: formData.value.jump_url,
|
||
pay_way: formData.value.pay_way,
|
||
jspay_flag: formData.value.jspay_flag,
|
||
sign_type: formData.value.sign_type,
|
||
extra_config: formData.value.extra_config,
|
||
is_default: formData.value.is_default,
|
||
status: formData.value.status,
|
||
environment: formData.value.environment,
|
||
business_tags: formData.value.business_tags,
|
||
}
|
||
// 只有在修改了密钥时才传递
|
||
if (formData.value.sign_key) {
|
||
payload.sign_key = formData.value.sign_key
|
||
}
|
||
if (formData.value.notify_key) {
|
||
payload.notify_key = formData.value.notify_key
|
||
}
|
||
await updatePaymentConfig(props.config.id, payload)
|
||
ElMessage.success('更新成功')
|
||
}
|
||
emit('saved')
|
||
} catch (error) {
|
||
ElMessage.error(readError(error, '保存失败'))
|
||
} finally {
|
||
submitting.value = false
|
||
}
|
||
}
|
||
|
||
function handleClose() {
|
||
emit('update:modelValue', false)
|
||
emit('close')
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<el-dialog :model-value="modelValue" :title="dialogTitle" width="700px" @close="handleClose">
|
||
<el-form :model="formData" label-width="120px">
|
||
<el-form-item label="配置名称" required>
|
||
<el-input v-model="formData.name" placeholder="如：乐刷生产商户1" :disabled="isReadonly" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="支付服务商" required>
|
||
<el-select
|
||
v-model="formData.provider"
|
||
:disabled="mode !== 'create'"
|
||
@change="handleProviderChange"
|
||
>
|
||
<el-option label="乐刷支付" value="leshua" />
|
||
<el-option label="拉卡拉支付" value="lakala" />
|
||
<el-option label="模拟支付" value="mock" />
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="商户号" required>
|
||
<el-input v-model="formData.merchant_id" placeholder="渠道商户号" :disabled="isReadonly" />
|
||
</el-form-item>
|
||
|
||
<el-form-item v-if="!isMock" label="网关地址" required>
|
||
<el-input v-model="formData.gateway_url" placeholder="支付网关URL" :disabled="isReadonly" />
|
||
</el-form-item>
|
||
|
||
<el-form-item v-if="isLakala" label="App ID" required>
|
||
<el-input
|
||
v-model="extraConfig.app_id"
|
||
placeholder="拉卡拉开放平台 appId"
|
||
:disabled="isReadonly"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item v-if="isLakala" label="证书序列号" required>
|
||
<el-input
|
||
v-model="extraConfig.serial_no"
|
||
placeholder="商户证书序列号"
|
||
:disabled="isReadonly"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item v-if="isLakala" label="终端号" required>
|
||
<el-input v-model="extraConfig.term_no" placeholder="拉卡拉终端号" :disabled="isReadonly" />
|
||
</el-form-item>
|
||
|
||
<el-form-item v-if="!isMock" :label="signKeyLabel" required>
|
||
<el-input
|
||
v-model="formData.sign_key"
|
||
:type="isLakala ? 'textarea' : 'password'"
|
||
:rows="isLakala ? 5 : undefined"
|
||
:show-password="!isLakala"
|
||
:placeholder="
|
||
mode === 'edit' ? '留空则不修改' : isLakala ? '请输入商户私钥 PEM' : '请输入签名密钥'
|
||
"
|
||
:disabled="isReadonly"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item v-if="!isMock" :label="notifyKeyLabel" required>
|
||
<el-input
|
||
v-model="formData.notify_key"
|
||
:type="isLakala ? 'textarea' : 'password'"
|
||
:rows="isLakala ? 5 : undefined"
|
||
:show-password="!isLakala"
|
||
:placeholder="
|
||
mode === 'edit'
|
||
? '留空则不修改'
|
||
: isLakala
|
||
? '请输入拉卡拉通知验签证书 PEM'
|
||
: '请输入通知密钥'
|
||
"
|
||
:disabled="isReadonly"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item v-if="isLakala" label="平台证书">
|
||
<el-input
|
||
v-model="extraConfig.lakala_cert"
|
||
type="textarea"
|
||
:rows="4"
|
||
placeholder="拉卡拉平台响应验签证书 PEM，可与通知证书一致"
|
||
:disabled="isReadonly"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item v-if="mode === 'view' && !showSecrets" label="">
|
||
<el-button :loading="loadingSecrets" @click="handleViewSecrets">查看密钥</el-button>
|
||
</el-form-item>
|
||
|
||
<el-form-item v-if="!isMock" label="回调地址" required>
|
||
<el-input
|
||
v-model="formData.notify_url"
|
||
placeholder="异步通知回调地址"
|
||
:disabled="isReadonly"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="是否默认">
|
||
<el-switch v-model="formData.is_default" :disabled="isReadonly" />
|
||
<span class="form-hint">全局只能启用一个配置，启用后会自动设为默认</span>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="状态">
|
||
<el-select v-model="formData.status" :disabled="isReadonly">
|
||
<el-option label="启用" value="active" />
|
||
<el-option label="禁用" value="disabled" />
|
||
<el-option label="测试中" value="testing" />
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="环境">
|
||
<el-select v-model="formData.environment" :disabled="isReadonly">
|
||
<el-option label="生产环境" value="production" />
|
||
<el-option label="测试环境" value="sandbox" />
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-collapse v-model="advancedOpen" class="advanced-config">
|
||
<el-collapse-item name="advanced">
|
||
<template #title>
|
||
<span class="advanced-title">高级配置</span>
|
||
</template>
|
||
|
||
<el-form-item label="跳转地址">
|
||
<el-input
|
||
v-model="formData.jump_url"
|
||
placeholder="支付完成跳转地址"
|
||
:disabled="isReadonly"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="支付方式">
|
||
<el-select v-model="formData.pay_way" :disabled="isReadonly">
|
||
<el-option label="支付宝" value="ZFBZF" />
|
||
<el-option label="微信" value="WXZF" />
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item v-if="isLakala" label="拉卡拉模式">
|
||
<el-select v-model="extraConfig.pay_mode" :disabled="isReadonly">
|
||
<el-option label="不限制，由收银台选择" value="AUTO" />
|
||
<el-option label="支付宝" value="ALIPAY" />
|
||
<el-option label="微信" value="WECHAT" />
|
||
<el-option label="银联" value="UQRCODEPAY" />
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item v-if="isLakala" label="有效期分钟">
|
||
<el-input-number
|
||
v-model="extraConfig.order_expire_minutes"
|
||
:min="1"
|
||
:max="1440"
|
||
:disabled="isReadonly"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="支付形态">
|
||
<el-select v-model="formData.jspay_flag" :disabled="isReadonly">
|
||
<el-option label="H5 / JSAPI" value="1" />
|
||
<el-option label="简易支付 / 收银台" value="2" />
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="签名类型">
|
||
<el-select v-model="formData.sign_type" :disabled="isReadonly">
|
||
<el-option label="MD5" value="MD5" />
|
||
<el-option label="SHA256withRSA" value="SHA256withRSA" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
</el-form>
|
||
|
||
<template #footer>
|
||
<el-button @click="handleClose">{{ isReadonly ? '关闭' : '取消' }}</el-button>
|
||
<el-button v-if="!isReadonly" type="primary" :loading="submitting" @click="handleSave">
|
||
保存
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.advanced-config {
|
||
margin-top: 4px;
|
||
border-top: 1px solid #edf0f5;
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.advanced-config :deep(.el-collapse-item__header) {
|
||
height: 44px;
|
||
padding-left: 120px;
|
||
border-bottom: 0;
|
||
color: #4b5563;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.advanced-config :deep(.el-collapse-item__wrap) {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.advanced-config :deep(.el-collapse-item__content) {
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.advanced-title {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.form-hint {
|
||
margin-left: 8px;
|
||
color: #6b7280;
|
||
font-size: 12px;
|
||
}
|
||
</style>
|