yml/hfb_sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

支持拉卡拉多渠道支付和测试充值

Browse Source
This commit is contained in:
yml
2026-06-06 21:46:41 +08:00
parent 4d40883da6
commit ba4c56c0cc
16 changed files with 1917 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/admin/components/PaymentConfigDialog.vue
+116 -46
View File
@@ -29,23 +29,48 @@ const showSecrets = ref(false)
const loadingSecrets = ref(false)
const advancedOpen = ref<string[]>([])
const formData = ref<CreatePaymentConfigRequest>({
name: '',
provider: 'leshua',
merchant_id: '',
gateway_url: 'https://paygate.leshuazf.com/cgi-bin/lepos_pay_gateway.cgi',
sign_key: '',
notify_key: '',
notify_url: '',
jump_url: '',
pay_way: 'ZFBZF',
jspay_flag: '2',
sign_type: 'MD5',
is_default: false,
status: 'active',
environment: 'production',
business_tags: [],
})
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: 'ALIPAY',
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 = {
@@ -57,6 +82,16 @@ const dialogTitle = computed(() => {
})
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>>(() => {
if (!formData.value.extra_config) {
formData.value.extra_config = {}
}
return formData.value.extra_config
})
watch(
() => props.modelValue,
@@ -72,6 +107,7 @@ watch(
pay_way: props.config.pay_way,
jspay_flag: props.config.jspay_flag,
sign_type: props.config.sign_type,
extra_config: props.config.extra_config || defaultExtraConfig(props.config.provider),
is_default: props.config.is_default,
status: props.config.status,
environment: props.config.environment,
@@ -81,23 +117,7 @@ watch(
advancedOpen.value = []
} else if (val && !props.config) {
// 重置表单
formData.value = {
name: '',
provider: 'leshua',
merchant_id: '',
gateway_url: 'https://paygate.leshuazf.com/cgi-bin/lepos_pay_gateway.cgi',
sign_key: '',
notify_key: '',
notify_url: '',
jump_url: '',
pay_way: 'ZFBZF',
jspay_flag: '2',
sign_type: 'MD5',
is_default: false,
status: 'active',
environment: 'production',
business_tags: [],
}
formData.value = makeDefaultForm()
showSecrets.value = false
advancedOpen.value = []
}
@@ -105,6 +125,17 @@ watch(
{ 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
@@ -138,6 +169,7 @@ async function handleSave() {
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,
@@ -175,36 +207,61 @@ function handleClose() {
</el-form-item>
<el-form-item label="支付服务商" required>
<el-select v-model="formData.provider" :disabled="mode !== 'create'">
<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-input v-model="formData.merchant_id" placeholder="渠道商户号" :disabled="isReadonly" />
</el-form-item>
<el-form-item label="网关地址" required>
<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 label="签名密钥" required>
<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="password"
show-password
:placeholder="mode === 'edit' ? '留空则不修改' : '请输入签名密钥'"
:type="isLakala ? 'textarea' : 'password'"
:rows="isLakala ? 5 : undefined"
:show-password="!isLakala"
:placeholder="mode === 'edit' ? '留空则不修改' : isLakala ? '请输入商户私钥 PEM' : '请输入签名密钥'"
:disabled="isReadonly"
/>
</el-form-item>
<el-form-item label="通知密钥" required>
<el-form-item v-if="!isMock" :label="notifyKeyLabel" required>
<el-input
v-model="formData.notify_key"
type="password"
show-password
:placeholder="mode === 'edit' ? '留空则不修改' : '请输入通知密钥'"
: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>
@@ -213,7 +270,7 @@ function handleClose() {
<el-button :loading="loadingSecrets" @click="handleViewSecrets">查看密钥</el-button>
</el-form-item>
<el-form-item label="回调地址" required>
<el-form-item v-if="!isMock" label="回调地址" required>
<el-input v-model="formData.notify_url" placeholder="异步通知回调地址" :disabled="isReadonly" />
</el-form-item>
@@ -254,6 +311,18 @@ function handleClose() {
</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="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" />
@@ -264,6 +333,7 @@ function handleClose() {
<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>
frontend/src/features/admin/views/AdminPaymentConfigsView.vue
+28 -4
View File
@@ -29,6 +29,7 @@ const filterEnvironment = ref('')
const providerOptions = [
{ label: '全部', value: '' },
{ label: '乐刷支付', value: 'leshua' },
{ label: '拉卡拉支付', value: 'lakala' },
{ label: '模拟支付', value: 'mock' },
]
@@ -91,6 +92,10 @@ function handleEdit(row: PaymentConfig) {
}
async function handleDelete(row: PaymentConfig) {
if (!canDeleteConfig(row)) {
ElMessage.warning('该配置已有交易记录，需要保留用于退款、查询和回调验签')
return
}
try {
await ElMessageBox.confirm(`确定要删除配置"${row.name}"吗？`, '确认删除', {
type: 'warning',
@@ -118,6 +123,7 @@ function handleSaved() {
function formatProvider(provider: string) {
const map: Record<string, string> = {
leshua: '乐刷支付',
lakala: '拉卡拉支付',
mock: '模拟支付',
}
return map[provider] || provider
@@ -152,6 +158,14 @@ function getStatusType(status: string) {
}
return map[status] || 'info'
}
function canDeleteConfig(row: PaymentConfig) {
return row.total_transactions <= 0
}
function deleteDisabledReason(row: PaymentConfig) {
return canDeleteConfig(row) ? '删除配置' : '已有交易记录，需要保留用于退款、查询和回调验签'
}
</script>
<template>
@@ -159,7 +173,7 @@ function getStatusType(status: string) {
<div class="page-header">
<p class="eyebrow">Payment Configs</p>
<h1>支付配置管理</h1>
<p>管理多个支付商户配置，支持乐刷支付等多种支付渠道。</p>
<p>管理多个支付商户配置，支持乐刷、拉卡拉等多种支付渠道。</p>
</div>
<div class="filter-bar">
@@ -230,9 +244,19 @@ function getStatusType(status: string) {
<el-button class="action-button edit" size="small" :icon="Edit" @click="handleEdit(row)">
编辑
</el-button>
<el-button class="action-button delete" size="small" :icon="Delete" @click="handleDelete(row)">
删除
</el-button>
<el-tooltip :content="deleteDisabledReason(row)" placement="top">
<span>
<el-button
class="action-button delete"
size="small"
:icon="Delete"
:disabled="!canDeleteConfig(row)"
@click="handleDelete(row)"
>
删除
</el-button>
</span>
</el-tooltip>
</div>
</template>
</el-table-column>
frontend/src/features/wallet/views/WalletView.vue
+234 -1
View File
@@ -2,14 +2,18 @@
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { CircleCheck, Lock, Money, Refresh, Tickets, Wallet as WalletIcon } from '@element-plus/icons-vue'
import { CircleCheck, Coin, Loading, Lock, Money, Refresh, Tickets, Wallet as WalletIcon } from '@element-plus/icons-vue'
import QRCode from 'qrcode'
import {
fetchWalletBalance,
fetchWalletLedger,
queryWalletRechargePayment,
startWalletRechargePayment,
type WalletAccount,
type WalletLedger,
} from '@/features/wallet'
import type { PaymentOrder } from '@/features/orders'
import { balanceTypeLabel, ledgerDirectionLabel, walletStatusLabel } from '@/utils/statusLabels'
import { formatDateTime } from '@/utils/time'
@@ -20,6 +24,15 @@ const ledger = ref<WalletLedger[]>([])
const currentPage = ref(1)
const currentPageSize = ref(20)
const total = ref(0)
const isDev = import.meta.env.DEV
const quickRechargeAmounts = [0.01, 1, 10, 100]
const devRechargeAmount = ref(0.01)
const devRecharging = ref(false)
const rechargeDialogVisible = ref(false)
const activeRechargePayment = ref<PaymentOrder | null>(null)
const rechargeQRCodeURL = ref('')
const rechargeQRGenerating = ref(false)
const checkingRecharge = ref(false)
const walletMetrics = computed(() => {
if (!account.value) {
@@ -77,6 +90,96 @@ function handleWithdraw() {
router.push('/wallet/withdrawal')
}
function selectDevRechargeAmount(amount: number) {
devRechargeAmount.value = amount
}
function rechargePayURL(payment = activeRechargePayment.value) {
return payment?.jspay_url || payment?.td_code || payment?.jspay_info || ''
}
async function renderRechargeQRCode(payment = activeRechargePayment.value) {
const payURL = rechargePayURL(payment)
rechargeQRCodeURL.value = ''
if (!payURL) return
rechargeQRGenerating.value = true
try {
rechargeQRCodeURL.value = await QRCode.toDataURL(payURL, {
width: 220,
margin: 1,
errorCorrectionLevel: 'M',
color: {
dark: '#111827',
light: '#ffffff',
},
})
} catch {
ElMessage.error('二维码生成失败')
} finally {
rechargeQRGenerating.value = false
}
}
async function handleDevRecharge() {
if (!isDev) return
if (devRechargeAmount.value <= 0) {
ElMessage.warning('请输入充值金额')
return
}
devRecharging.value = true
try {
const payment = await startWalletRechargePayment(devRechargeAmount.value)
activeRechargePayment.value = payment
rechargeDialogVisible.value = true
await renderRechargeQRCode(payment)
if (payment.paid) {
ElMessage.success('充值成功')
await loadWallet()
} else {
ElMessage.success('测试支付单已创建')
}
} catch (error) {
ElMessage.error(readError(error, '创建测试充值失败'))
} finally {
devRecharging.value = false
}
}
async function checkDevRechargeStatus() {
if (!activeRechargePayment.value || checkingRecharge.value) return
checkingRecharge.value = true
try {
const payment = await queryWalletRechargePayment(activeRechargePayment.value.id)
activeRechargePayment.value = payment
await renderRechargeQRCode(payment)
if (payment.paid) {
ElMessage.success('充值成功')
rechargeDialogVisible.value = false
await loadWallet()
} else {
ElMessage.info('支付暂未完成')
}
} catch (error) {
ElMessage.error(readError(error, '查询支付状态失败'))
} finally {
checkingRecharge.value = false
}
}
function openRechargePayURL() {
const payURL = rechargePayURL()
if (!payURL) return
window.open(payURL, '_blank', 'noopener,noreferrer')
}
function readError(error: unknown, fallback: string) {
if (typeof error === 'object' && error && 'response' in error) {
const response = (error as { response?: { data?: { message?: string } } }).response
return response?.data?.message || fallback
}
return fallback
}
function formatMoney(value: number) {
return `¥${Number(value || 0).toFixed(2)}`
}
@@ -156,6 +259,35 @@ function amountPrefix(direction: string) {
</div>
<div class="wallet-workspace">
<section v-if="isDev" class="recharge-panel">
<div class="panel-title">
<div class="panel-title-icon is-orange">
<el-icon><Coin /></el-icon>
</div>
<div>
<h2>测试充值</h2>
<p>开发环境可见，用于快速验证当前支付渠道配置。</p>
</div>
</div>
<div class="quick-amounts">
<button
v-for="amount in quickRechargeAmounts"
:key="amount"
type="button"
:class="{ active: devRechargeAmount === amount }"
@click="selectDevRechargeAmount(amount)"
>
{{ formatMoney(amount) }}
</button>
</div>
<div class="recharge-action-row">
<el-input-number v-model="devRechargeAmount" :min="0.01" :precision="2" :step="1" />
<el-button type="primary" :icon="Coin" :loading="devRecharging" @click="handleDevRecharge">
创建测试支付
</el-button>
</div>
</section>
<section class="ledger-summary-card">
<div class="panel-title">
<div class="panel-title-icon is-blue">
@@ -216,6 +348,38 @@ function amountPrefix(direction: string) {
/>
</div>
<el-dialog v-model="rechargeDialogVisible" title="测试充值支付" width="520px">
<div class="recharge-cashier">
<div class="cashier-amount">
<span>支付金额</span>
<strong>{{ activeRechargePayment ? formatMoney(activeRechargePayment.amount_cent / 100) : formatMoney(devRechargeAmount) }}</strong>
</div>
<div v-if="rechargePayURL()" class="cashier-qr">
<div class="qr-box">
<el-icon v-if="rechargeQRGenerating" class="qr-loading"><Loading /></el-icon>
<img v-else-if="rechargeQRCodeURL" :src="rechargeQRCodeURL" alt="测试充值支付二维码" />
<span v-else>支付链接已生成</span>
</div>
<el-button text type="primary" @click="openRechargePayURL">打开支付链接</el-button>
</div>
<el-alert
v-else
title="支付单已创建，但渠道未返回可展示的支付链接"
type="info"
:closable="false"
show-icon
/>
<div class="cashier-meta" v-if="activeRechargePayment">
<span>支付单号：{{ activeRechargePayment.payment_no }}</span>
<span>渠道：{{ activeRechargePayment.provider }}</span>
<span>状态：{{ activeRechargePayment.status }}</span>
</div>
</div>
<template #footer>
<el-button @click="rechargeDialogVisible = false">关闭</el-button>
<el-button type="primary" :loading="checkingRecharge" @click="checkDevRechargeStatus">查询支付状态</el-button>
</template>
</el-dialog>
</section>
</template>
@@ -394,6 +558,11 @@ function amountPrefix(direction: string) {
color: #2563eb;
}
.panel-title-icon.is-orange {
background: #fff4ec;
color: #ff6b00;
}
.panel-title h2 {
margin: 0;
color: #111827;
@@ -437,6 +606,70 @@ function amountPrefix(direction: string) {
gap: 12px;
}
.recharge-cashier {
display: grid;
gap: 18px;
}
.cashier-amount {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border: 1px solid #e6eaf2;
border-radius: 8px;
background: #f8fafc;
}
.cashier-amount span,
.cashier-meta {
color: #64748b;
font-size: 13px;
}
.cashier-amount strong {
color: #111a44;
font-size: 24px;
}
.cashier-qr {
display: grid;
justify-items: center;
gap: 10px;
}
.qr-box {
display: grid;
width: 236px;
height: 236px;
place-items: center;
border: 1px solid #e6eaf2;
border-radius: 8px;
background: #ffffff;
}
.qr-box img {
width: 220px;
height: 220px;
}
.qr-loading {
color: #64748b;
font-size: 28px;
animation: spin 0.9s linear infinite;
}
.cashier-meta {
display: grid;
gap: 6px;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.wallet-ledger-table {
overflow-x: auto;
border: 1px solid #e6eaf2;