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-14 23:38:03 +08:00
parent 2dc5a8121e
commit 3ff8c1de88
27 changed files with 550 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/admin/api/paymentConfig.ts
+1
View File
@@ -80,6 +80,7 @@ export interface UpdatePaymentConfigRequest {
export async function fetchPaymentConfigs(params?: {
provider?: string
pay_way?: string
status?: string
environment?: string
page?: number
frontend/src/features/admin/components/PaymentConfigDialog.vue
+94 -21
View File
@@ -31,10 +31,49 @@ 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: '',
}
const lakalaGateways: Record<string, string> = {
production: 'https://s2.lakala.com',
sandbox: 'https://test.wsmsd.cn/sit',
}
const defaultNotifyURLs: Record<string, string> = {
leshua: 'https://hao858.com/api/payments/leshua/notify',
lakala: 'https://hao858.com/api/payments/lakala/notify',
mock: '',
}
const defaultJumpURLs: Record<string, string> = {
leshua: 'https://hao858.com/orders',
lakala: 'https://hao858.com/orders',
mock: '',
}
const lakalaPayModeByPayWay: Record<string, string> = {
ZFBZF: 'ALIPAY',
WXZF: 'WECHAT',
}
// defaultEnvironment 返回新建配置时的默认环境。
function defaultEnvironment(provider: string) {
return provider === 'mock' ? 'production' : 'production'
}
// defaultGateway 根据服务商和环境生成默认网关地址。
function defaultGateway(provider: string, environment = defaultEnvironment(provider)) {
if (provider === 'lakala') {
return lakalaGateways[environment] || lakalaGateways.production
}
return defaultGateways[provider] || ''
}
// isDefaultLakalaGateway 判断当前网关是否仍是拉卡拉系统默认值。
function isDefaultLakalaGateway(value?: string) {
return !value || Object.values(lakalaGateways).includes(value)
}
function defaultExtraConfig(provider: string) {
if (provider === 'lakala') {
return {
@@ -42,30 +81,33 @@ function defaultExtraConfig(provider: string) {
serial_no: '',
term_no: '',
lakala_cert: '',
pay_mode: 'AUTO',
pay_mode: 'ALIPAY',
order_expire_minutes: 15,
}
}
return {}
}
function makeDefaultForm(provider = 'leshua'): CreatePaymentConfigRequest {
function makeDefaultForm(
provider = 'leshua',
environment = defaultEnvironment(provider)
): CreatePaymentConfigRequest {
return {
name: '',
provider,
merchant_id: '',
gateway_url: defaultGateways[provider] || '',
gateway_url: defaultGateway(provider, environment),
sign_key: '',
notify_key: '',
notify_url: '',
jump_url: '',
notify_url: defaultNotifyURLs[provider] || '',
jump_url: defaultJumpURLs[provider] || '',
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',
environment,
business_tags: [],
}
}
@@ -99,6 +141,15 @@ function normalizeExtraConfig(provider: string, extraConfig?: Record<string, any
return extra
}
// syncLakalaPayMode 根据支付方式同步拉卡拉渠道模式。
function syncLakalaPayMode(payWay = formData.value.pay_way || 'ZFBZF') {
if (!isLakala.value) return
formData.value.extra_config = {
...normalizeExtraConfig('lakala', formData.value.extra_config),
pay_mode: lakalaPayModeByPayWay[payWay] || 'AUTO',
}
}
watch(
() => props.modelValue,
val => {
@@ -134,12 +185,25 @@ watch(
function handleProviderChange(provider: string) {
if (props.mode !== 'create') return
const currentName = formData.value.name
const currentNotifyURL = formData.value.notify_url
const currentPayWay = formData.value.pay_way || 'ZFBZF'
const currentEnvironment = formData.value.environment || defaultEnvironment(provider)
formData.value = {
...makeDefaultForm(provider),
...makeDefaultForm(provider, currentEnvironment),
name: currentName,
notify_url: currentNotifyURL,
pay_way: currentPayWay,
}
syncLakalaPayMode(currentPayWay)
}
// handlePayWayChange 处理支付方式切换，并联动渠道扩展配置。
function handlePayWayChange(payWay: string | number | boolean) {
syncLakalaPayMode(String(payWay))
}
// handleEnvironmentChange 处理环境切换，并同步拉卡拉默认网关。
function handleEnvironmentChange(environment: string) {
if (!isLakala.value || !isDefaultLakalaGateway(formData.value.gateway_url)) return
formData.value.gateway_url = defaultGateway('lakala', environment)
}
async function handleViewSecrets() {
@@ -206,7 +270,7 @@ function handleClose() {
</script>
<template>
<el-dialog :model-value="modelValue" :title="dialogTitle" width="700px" @close="handleClose">
<el-dialog :model-value="modelValue" :title="dialogTitle" width="760px" @close="handleClose">
<el-form :model="formData" label-width="120px">
<el-form-item label="配置名称" required>
<el-input v-model="formData.name" placeholder="如：乐刷生产商户1" :disabled="isReadonly" />
@@ -224,6 +288,18 @@ function handleClose() {
</el-select>
</el-form-item>
<el-form-item label="支付方式" required>
<el-segmented
v-model="formData.pay_way"
:disabled="isReadonly"
:options="[
{ label: '支付宝', value: 'ZFBZF' },
{ label: '微信', value: 'WXZF' },
]"
@change="handlePayWayChange"
/>
</el-form-item>
<el-form-item label="商户号" required>
<el-input v-model="formData.merchant_id" placeholder="渠道商户号" :disabled="isReadonly" />
</el-form-item>
@@ -306,7 +382,7 @@ function handleClose() {
<el-form-item label="是否默认">
<el-switch v-model="formData.is_default" :disabled="isReadonly" />
<span class="form-hint">全局只能启用一个配置，启用后会自动设为默认</span>
<span class="form-hint">同一支付方式只保留一个启用默认配置</span>
</el-form-item>
<el-form-item label="状态">
@@ -318,7 +394,11 @@ function handleClose() {
</el-form-item>
<el-form-item label="环境">
<el-select v-model="formData.environment" :disabled="isReadonly">
<el-select
v-model="formData.environment"
:disabled="isReadonly"
@change="handleEnvironmentChange"
>
<el-option label="生产环境" value="production" />
<el-option label="测试环境" value="sandbox" />
</el-select>
@@ -338,18 +418,11 @@ function handleClose() {
/>
</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="AUTO" />
<el-option label="银联" value="UQRCODEPAY" />
</el-select>
</el-form-item>
frontend/src/features/admin/views/AdminPaymentConfigsView.vue
+48 -2
View File
@@ -29,6 +29,7 @@ const dialogMode = ref<'create' | 'edit' | 'view'>('create')
const currentConfig = ref<PaymentConfig | null>(null)
const filterProvider = ref('')
const filterPayWay = ref('')
const filterStatus = ref('')
const filterEnvironment = ref('')
@@ -46,6 +47,12 @@ const statusOptions = [
{ label: '测试中', value: 'testing' },
]
const payWayOptions = [
{ label: '全部', value: '' },
{ label: '支付宝', value: 'ZFBZF' },
{ label: '微信', value: 'WXZF' },
]
const environmentOptions = [
{ label: '全部', value: '' },
{ label: '生产环境', value: 'production' },
@@ -65,6 +72,7 @@ async function loadConfigs() {
try {
const res = await fetchPaymentConfigs({
provider: filterProvider.value || undefined,
pay_way: filterPayWay.value || undefined,
status: filterStatus.value || undefined,
environment: filterEnvironment.value || undefined,
page: currentPage.value,
@@ -161,7 +169,7 @@ async function handleImportFile(event: Event) {
try {
await ElMessageBox.confirm(
'导入会按服务商和商户号新增或更新配置，并恢复备份中的启用配置。备份文件包含支付密钥明文，请确认来源可信。',
'导入会按服务商、商户号和支付方式新增或更新配置，并恢复备份中的启用配置。备份文件包含支付密钥明文，请确认来源可信。',
'导入支付配置备份',
{
type: 'warning',
@@ -213,6 +221,24 @@ function formatProvider(provider: string) {
return map[provider] || provider
}
// formatPayWay 将支付方式编码展示为运营可读名称。
function formatPayWay(payWay: string) {
const map: Record<string, string> = {
ZFBZF: '支付宝',
WXZF: '微信',
}
return map[payWay] || payWay || '-'
}
// getPayWayType 按支付方式返回标签颜色。
function getPayWayType(payWay: string) {
const map: Record<string, 'success' | 'primary' | 'info'> = {
ZFBZF: 'primary',
WXZF: 'success',
}
return map[payWay] || 'info'
}
function formatStatus(status: string) {
const map: Record<string, string> = {
active: '启用',
@@ -257,7 +283,7 @@ function deleteDisabledReason(row: PaymentConfig) {
<div class="page-header">
<p class="eyebrow">Payment Configs</p>
<h1>支付配置管理</h1>
<p>管理多个支付商户配置，支持乐刷、拉卡拉等多种支付渠道，同一时间仅一个配置启用。</p>
<p>管理多个支付商户配置，支付宝和微信可分别启用默认渠道。</p>
</div>
<div class="filter-bar">
@@ -274,6 +300,19 @@ function deleteDisabledReason(row: PaymentConfig) {
:value="opt.value"
/>
</el-select>
<el-select
v-model="filterPayWay"
placeholder="支付方式"
style="width: 120px"
@change="loadConfigs"
>
<el-option
v-for="opt in payWayOptions"
:key="opt.value"
:label="opt.label"
:value="opt.value"
/>
</el-select>
<el-select
v-model="filterStatus"
placeholder="状态"
@@ -325,6 +364,13 @@ function deleteDisabledReason(row: PaymentConfig) {
{{ formatProvider(row.provider) }}
</template>
</el-table-column>
<el-table-column prop="pay_way" label="支付方式" width="104" align="center">
<template #default="{ row }">
<el-tag :type="getPayWayType(row.pay_way)" size="small">
{{ formatPayWay(row.pay_way) }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="merchant_id" label="商户号" min-width="150" />
<el-table-column prop="environment" label="环境" width="86" align="center">
<template #default="{ row }">
frontend/src/features/orders/api/orders.ts
+2
View File
@@ -142,6 +142,8 @@ export interface StartOrderPaymentRequest {
jspay_flag?: string
}
export type PaymentPayWay = 'ZFBZF' | 'WXZF'
export interface RefundStatus {
order_id: number
refund_status: string
frontend/src/features/orders/components/MobilePaymentCashierPopup.vue
+10 -1
View File
@@ -15,6 +15,15 @@ const emit = defineEmits<{
'update:show': [value: boolean]
refresh: []
}>()
// payWayLabel 展示当前支付单实际选择的支付方式。
function payWayLabel(payWay?: string) {
const map: Record<string, string> = {
ZFBZF: '支付宝',
WXZF: '微信',
}
return map[payWay || ''] || '当前方式'
}
</script>
<template>
@@ -41,7 +50,7 @@ const emit = defineEmits<{
<img v-else-if="qrCodeUrl" :src="qrCodeUrl" alt="支付二维码" />
<van-icon v-else name="qr" :size="46" />
</div>
<p class="mobile-pay-title">请使用微信或支付宝扫码支付</p>
<p class="mobile-pay-title">请使用{{ payWayLabel(payment?.pay_way) }}扫码支付</p>
<p class="mobile-pay-desc">支付完成后页面会自动刷新，也可以手动点击下方按钮确认。</p>
<van-button
type="primary"
frontend/src/features/orders/composables/useOrderActions.ts
+6 -1
View File
@@ -19,6 +19,7 @@ import {
type HandoffRecord,
type Order,
type PaymentOrder,
type PaymentPayWay,
} from '@/features/orders/api/orders'
import {
hydrateCounterFormFromCheckout,
@@ -51,6 +52,8 @@ export interface UseOrderActionsOptions {
confirm: (opts: { title: string; message: string }) => Promise<boolean>
/** 需要走二次确认的 handler 名集合。Mobile 传 ['cancel','confirmCheckout','acceptCheckout','cancelDispute']，PC 传 []。 */
actionsNeedingConfirm: readonly string[]
/** 支付前选择支付方式。返回 null 表示用户取消支付。 */
selectPayWay: () => Promise<PaymentPayWay | null>
/** 订单列表跳转路径，PC '/orders' / Mobile '/m/orders'。 */
ordersPath: string
/** 订单群聊路由前缀，PC '/messages/' / Mobile '/m/chats/'。openOrderChat 内部拼接 `${prefix}${chat.id}`。 */
@@ -261,9 +264,11 @@ export function useOrderActions(options: UseOrderActionsOptions) {
async function handlePay() {
if (!order.value) return
const payWay = await options.selectPayWay()
if (!payWay) return
startingPayment.value = true
try {
const payment = await startOrderPayment(order.value.id)
const payment = await startOrderPayment(order.value.id, { pay_way: payWay })
if (payment.paid) {
options.notifySuccess('支付成功，等待号主交接')
await loadOrder()
frontend/src/features/orders/views/MobileOrderDetailView.vue
+19
View File
@@ -19,6 +19,7 @@ import {
} from '@/features/orders'
import { handoffStatusLabel, orderStatusLabel } from '@/shared/utils/statusLabels'
import { formatDateTime } from '@/shared/utils/time'
import type { PaymentPayWay } from '@/features/orders/api/orders'
// 移动端支付收银台（基于通用 useOrderPaymentCashier 的薄封装：注入 vant toast + App 浏览器跳转）。
const cashier = useMobilePaymentCashier()
@@ -101,6 +102,7 @@ const {
}
},
actionsNeedingConfirm: CONFIRMABLE_ACTIONS,
selectPayWay,
ordersPath: '/m/orders',
chatPathPrefix: '/m/chats/',
startCashier: (payment, onPaid) => cashier.openMobilePaymentCashier(payment, onPaid),
@@ -115,6 +117,23 @@ const showDisputePopup = ref(false)
const showCounterPopup = ref(false)
const showRejectPopup = ref(false)
// selectPayWay 在创建支付单前让移动端用户选择支付宝或微信。
async function selectPayWay(): Promise<PaymentPayWay | null> {
try {
await showDialog({
title: '选择支付方式',
message: '选择后将生成对应渠道的支付二维码。',
showCancelButton: true,
confirmButtonText: '支付宝支付',
cancelButtonText: '微信支付',
closeOnClickOverlay: false,
})
return 'ZFBZF'
} catch (action) {
return action === 'cancel' ? 'WXZF' : null
}
}
// 账号快照展示（PC 不用，保留在本视图）。
function readSnapshot() {
return readOrderSnapshot(order.value) as Record<string, any> | null
frontend/src/features/orders/views/MobileOrdersView.vue
+27 -3
View File
@@ -2,10 +2,15 @@
import { readError } from '@/shared/utils/error'
import { onMounted, ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast } from 'vant'
import { showDialog, showToast } from 'vant'
import MobileBottomNav from '@/components/MobileBottomNav.vue'
import { fetchOrders, startOrderPayment, type Order } from '@/features/orders/api/orders'
import {
fetchOrders,
startOrderPayment,
type Order,
type PaymentPayWay,
} from '@/features/orders/api/orders'
import MobilePaymentCashierPopup from '@/features/orders/components/MobilePaymentCashierPopup.vue'
import { useMobilePaymentCashier } from '@/features/orders/composables/useMobilePaymentCashier'
import { centToYuan, formatMoney } from '@/shared/utils/money'
@@ -89,9 +94,11 @@ function goDetail(id: number) {
}
async function handlePay(order: Order) {
const payWay = await selectPayWay()
if (!payWay) return
payingOrderId.value = order.id
try {
const payment = await startOrderPayment(order.id)
const payment = await startOrderPayment(order.id, { pay_way: payWay })
if (payment.paid) {
showToast({ message: '支付成功，等待号主交接', icon: 'passed' })
await loadOrders()
@@ -105,6 +112,23 @@ async function handlePay(order: Order) {
}
}
// selectPayWay 在列表快捷支付前让用户选择支付宝或微信。
async function selectPayWay(): Promise<PaymentPayWay | null> {
try {
await showDialog({
title: '选择支付方式',
message: '选择后将生成对应渠道的支付二维码。',
showCancelButton: true,
confirmButtonText: '支付宝支付',
cancelButtonText: '微信支付',
closeOnClickOverlay: false,
})
return 'ZFBZF'
} catch (action) {
return action === 'cancel' ? 'WXZF' : null
}
}
function money(value: unknown) {
return formatMoney(Number(value || 0))
}
frontend/src/features/orders/views/OrderDetailView.vue
+33 -2
View File
@@ -1,5 +1,6 @@
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ChatDotRound, CopyDocument, Loading } from '@element-plus/icons-vue'
import {
@@ -14,6 +15,7 @@ import { useOrderPaymentCashier } from '@/features/orders/composables/useOrderPa
import { formatCent } from '@/shared/utils/money'
import { handoffStatusLabel, orderStatusLabel } from '@/shared/utils/statusLabels'
import { formatDateTime } from '@/shared/utils/time'
import type { PaymentPayWay } from '@/features/orders/api/orders'
// 支付收银台：二维码渲染 + 轮询查询。PC 不做 App 浏览器跳转，直接渲染二维码弹窗。
const cashier = useOrderPaymentCashier({
@@ -88,6 +90,7 @@ const {
notifyWarning: message => ElMessage.warning(message),
confirm: async () => true, // PC 不做二次确认，直接放行。
actionsNeedingConfirm: [],
selectPayWay,
ordersPath: '/orders',
chatPathPrefix: '/messages/',
startCashier: (payment, onPaid) => cashier.openPaymentCashier(payment, onPaid),
@@ -100,6 +103,34 @@ const paymentQRCodeURL = cashier.paymentQRCodeURL
const qrGenerating = cashier.qrGenerating
const checkingPayment = cashier.checkingPayment
const paymentPayURL = cashier.payURL
const activePayWayLabel = computedPayWayLabel(activePayment)
// selectPayWay 在创建支付单前让用户选择支付宝或微信。
async function selectPayWay(): Promise<PaymentPayWay | null> {
try {
await ElMessageBox.confirm('选择后将生成对应渠道的支付二维码。', '选择支付方式', {
type: 'info',
confirmButtonText: '支付宝支付',
cancelButtonText: '微信支付',
distinguishCancelAndClose: true,
closeOnClickModal: false,
})
return 'ZFBZF'
} catch (action) {
return action === 'cancel' ? 'WXZF' : null
}
}
// computedPayWayLabel 根据当前支付单展示支付方式名称。
function computedPayWayLabel(paymentRef: typeof activePayment) {
return computed(() => {
const map: Record<string, string> = {
ZFBZF: '支付宝',
WXZF: '微信',
}
return map[paymentRef.value?.pay_way || ''] || '当前方式'
})
}
function handleRefreshPayment() {
void cashier.refreshPaymentStatus(false)
}
@@ -594,7 +625,7 @@ async function copyListingCode() {
<img v-else-if="paymentQRCodeURL" :src="paymentQRCodeURL" alt="支付二维码" />
</div>
<div class="pay-instructions">
<h3>请使用微信或支付宝扫码支付</h3>
<h3>请使用{{ activePayWayLabel }}扫码支付</h3>
<p>扫码完成后将自动刷新，也可手动点击下方按钮确认。</p>
</div>
</div>