新增
This commit is contained in:
Your Name
@@ -0,0 +1,377 @@
|
||||
<template>
|
||||
<el-drawer
|
||||
v-model="drawer"
|
||||
destroy-on-close
|
||||
:title="`${popupTitle}配置`"
|
||||
direction="rtl"
|
||||
size="50%"
|
||||
@close="afterClose"
|
||||
:before-close="beforeClose"
|
||||
>
|
||||
<div
|
||||
class="h-full flex flex-col"
|
||||
v-loading="loading"
|
||||
element-loading-text="加载中..."
|
||||
element-loading-background="var(--el-bg-color)"
|
||||
>
|
||||
<el-form ref="formRef" :model="formData" label-width="9rem" :rules="formRules">
|
||||
<el-form-item label="支付方式">
|
||||
<el-radio :value="popupTitle" :model-value="popupTitle">
|
||||
{{ popupTitle }}
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item label="显示名称" prop="name">
|
||||
<el-input
|
||||
v-model="formData.name"
|
||||
placeholder="请输入显示名称"
|
||||
style="max-width: 250px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="image">
|
||||
<div>
|
||||
<material-picker :limit="1" :disabled="false" v-model="formData.icon" />
|
||||
<div class="form-tips">建议尺寸：200*200px</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<template v-if="formData.pay_way == PayWayEnum.WECHAT">
|
||||
<el-form-item prop="config.interface_version" label="微信支付接口版本">
|
||||
<div>
|
||||
<el-radio-group v-model="formData.config.interface_version">
|
||||
<el-radio value="v3">V3</el-radio>
|
||||
</el-radio-group>
|
||||
<div class="form-tips">暂时只支持V3版本</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="商户类型" prop="config.merchant_type">
|
||||
<div>
|
||||
<el-radio-group v-model="formData.config.merchant_type">
|
||||
<el-radio value="ordinary_merchant">普通商户</el-radio>
|
||||
</el-radio-group>
|
||||
<div class="form-tips">
|
||||
暂时只支持普通商户类型，服务商户类型模式暂不支持
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="微信支付商户号" prop="config.mch_id">
|
||||
<div>
|
||||
<el-input
|
||||
v-model="formData.config.mch_id"
|
||||
placeholder="请输入微信支付商户号"
|
||||
style="max-width: 250px"
|
||||
/>
|
||||
<div class="form-tips">微信支付商户号（MCHID）</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="商户API密钥" prop="config.pay_sign_key">
|
||||
<div>
|
||||
<el-input
|
||||
v-model="formData.config.pay_sign_key"
|
||||
placeholder="请输入微信支付商户API密钥"
|
||||
style="max-width: 250px"
|
||||
/>
|
||||
<div class="form-tips">微信支付商户API密钥（paySignKey）</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="微信支付证书" prop="config.apiclient_cert">
|
||||
<div>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
v-model="formData.config.apiclient_cert"
|
||||
placeholder="请输入微信支付证书"
|
||||
style="max-width: 400px"
|
||||
/>
|
||||
|
||||
<div class="form-tips">
|
||||
微信支付证书（apiclient_cert.pem），前往微信商家平台生成并黏贴至此处
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="微信支付证书密钥" prop="config.apiclient_key">
|
||||
<div>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
v-model="formData.config.apiclient_key"
|
||||
placeholder="请输入微信支付证书密钥"
|
||||
style="max-width: 400px"
|
||||
/>
|
||||
<div class="form-tips">
|
||||
微信支付证书密钥（apiclient_key.pem），前往微信商家平台生成并黏贴至此处
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="支付授权目录">
|
||||
<div>
|
||||
<div>
|
||||
<span class="mr-[20px]">https://前台手机域名地址/</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="formData.pay_way == PayWayEnum.ALIPAY">
|
||||
<el-form-item label="模式" prop="config.mode">
|
||||
<div>
|
||||
<el-radio-group v-model="formData.config.mode">
|
||||
<el-radio value="normal_mode">普通模式</el-radio>
|
||||
</el-radio-group>
|
||||
<div class="form-tips">暂时仅支持支付宝普通模式</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="商户类型" prop="config.merchant_type">
|
||||
<div>
|
||||
<el-radio-group v-model="formData.config.merchant_type">
|
||||
<el-radio value="ordinary_merchant">普通商户</el-radio>
|
||||
</el-radio-group>
|
||||
<div class="form-tips">
|
||||
暂时只支持普通商户类型，服务商户类型模式暂不支持
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="应用ID" prop="config.app_id">
|
||||
<div class="flex-1">
|
||||
<el-input
|
||||
v-model="formData.config.app_id"
|
||||
placeholder="请输入支付宝应用ID"
|
||||
style="max-width: 250px"
|
||||
/>
|
||||
<div class="form-tips">支付宝应用APP_ID</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="应用私钥" prop="config.private_key">
|
||||
<div class="flex-1">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
v-model="formData.config.private_key"
|
||||
placeholder="请输入支付宝应用私钥"
|
||||
style="max-width: 400px"
|
||||
/>
|
||||
<div class="form-tips">支付宝应用私钥（private_key）</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="支付宝公钥" prop="config.ali_public_key">
|
||||
<div class="flex-1">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
v-model="formData.config.ali_public_key"
|
||||
placeholder="请输入支付宝公钥"
|
||||
style="max-width: 400px"
|
||||
/>
|
||||
<div class="form-tips">支付宝公钥（alipayCertPublicKey）</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<div>
|
||||
<el-input-number v-model="formData.sort" :min="0" :max="9999" />
|
||||
<div class="form-tips">默认为0， 数值越大越排前</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="isLock" @click="lockSubmit">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { FormRules } from 'element-plus'
|
||||
import { ElForm, ElMessageBox } from 'element-plus'
|
||||
|
||||
import { getPayConfig, setPayConfig } from '@/api/setting/pay'
|
||||
import { useLockFn } from '@/hooks/useLockFn'
|
||||
import { useComponentRef } from '@/utils/getExposeType'
|
||||
|
||||
interface Config {
|
||||
interface_version?: string
|
||||
merchant_type?: string
|
||||
mch_id?: string
|
||||
pay_sign_key?: string
|
||||
apiclient_cert?: string
|
||||
apiclient_key?: string
|
||||
mode?: string
|
||||
app_id?: string
|
||||
private_key?: string
|
||||
ali_public_key?: string
|
||||
}
|
||||
|
||||
interface FormData {
|
||||
id: string
|
||||
pay_way: number
|
||||
name: string
|
||||
icon: string
|
||||
sort: number
|
||||
remark: string
|
||||
domain: string
|
||||
config: Partial<Config>
|
||||
}
|
||||
|
||||
enum PayWayEnum {
|
||||
BALANCE = 1,
|
||||
WECHAT = 2,
|
||||
ALIPAY = 3
|
||||
}
|
||||
|
||||
const drawer = ref(false)
|
||||
const formRef = useComponentRef(ElForm)
|
||||
const tenantId = ref<number>()
|
||||
const activeName = ref<'profile' | 'accounts' | 'users'>('profile')
|
||||
const editStatus = ref<boolean>(false)
|
||||
const loading = ref<boolean>(true)
|
||||
|
||||
const popupTitle = computed(() => {
|
||||
switch (formData.value.pay_way) {
|
||||
case PayWayEnum.BALANCE:
|
||||
return '余额支付'
|
||||
case PayWayEnum.WECHAT:
|
||||
return '微信支付'
|
||||
case PayWayEnum.ALIPAY:
|
||||
return '支付宝支付'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
})
|
||||
const formData = ref<FormData>({
|
||||
id: '',
|
||||
pay_way: 0,
|
||||
name: '',
|
||||
icon: '',
|
||||
sort: 0,
|
||||
remark: '',
|
||||
domain: '',
|
||||
config: {
|
||||
interface_version: '',
|
||||
merchant_type: '',
|
||||
mch_id: '',
|
||||
pay_sign_key: '',
|
||||
apiclient_cert: '',
|
||||
apiclient_key: '',
|
||||
mode: '',
|
||||
app_id: '',
|
||||
private_key: '',
|
||||
ali_public_key: ''
|
||||
}
|
||||
})
|
||||
|
||||
const formRules: FormRules = {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入显示名称'
|
||||
}
|
||||
],
|
||||
'config.mch_id': [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入微信支付商户号'
|
||||
}
|
||||
],
|
||||
'config.pay_sign_key': [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入微信支付商户API密钥'
|
||||
}
|
||||
],
|
||||
'config.apiclient_cert': [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入微信支付证书'
|
||||
}
|
||||
],
|
||||
'config.apiclient_key': [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入微信支付证书密钥'
|
||||
}
|
||||
],
|
||||
'config.app_id': [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入支付宝应用ID'
|
||||
}
|
||||
],
|
||||
'config.private_key': [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入支付宝应用私钥'
|
||||
}
|
||||
],
|
||||
'config.ali_public_key': [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入支付宝公钥'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const emits = defineEmits(['refresh'])
|
||||
|
||||
const openHandle = (id: number, status?: boolean, tabIndex?: 'profile' | 'accounts' | 'users') => {
|
||||
loading.value = true
|
||||
activeName.value = tabIndex || 'profile'
|
||||
editStatus.value = status || false
|
||||
getDetails(id)
|
||||
tenantId.value = id
|
||||
drawer.value = true
|
||||
}
|
||||
const getDetails = async (id: number) => {
|
||||
const data: FormData = await getPayConfig({
|
||||
id: id
|
||||
})
|
||||
if (!data.config) {
|
||||
data.config = formData.value.config
|
||||
}
|
||||
loading.value = false
|
||||
formData.value = data
|
||||
}
|
||||
|
||||
const beforeClose = (done: () => void) => {
|
||||
ElMessageBox.confirm('修改还未保存，确认退出编辑吗？')
|
||||
.then(() => {
|
||||
done()
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
const afterClose = () => {
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
|
||||
const submitEdit = async () => {
|
||||
await formRef.value?.validate()
|
||||
await setPayConfig(formData.value)
|
||||
drawer.value = false
|
||||
emits('refresh')
|
||||
}
|
||||
|
||||
const { isLock, lockFn: lockSubmit } = useLockFn(submitEdit)
|
||||
|
||||
defineExpose({
|
||||
openHandle
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-tabs__content) {
|
||||
flex: 1;
|
||||
|
||||
.el-tab-pane {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
:deep(.el-form-item__content) {
|
||||
align-items: start;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="!border-none" shadow="never">
|
||||
<el-alert
|
||||
type="warning"
|
||||
title="温馨提示：设置系统支持的支付方式"
|
||||
:closable="false"
|
||||
show-icon
|
||||
/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="mt-4 !border-none">
|
||||
<div>
|
||||
<el-table :data="payConfigList">
|
||||
<el-table-column prop="pay_way_name" label="支付方式" min-width="150" />
|
||||
<el-table-column prop="name" label="显示名称" min-width="150" />
|
||||
<el-table-column label="图标" min-width="150">
|
||||
<template #default="{ row }">
|
||||
<el-image
|
||||
:src="row.icon"
|
||||
alt="图标"
|
||||
style="width: 34px; height: 34px"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sort" label="排序" min-width="150" />
|
||||
<el-table-column label="操作" min-width="80" fixed="right">
|
||||
<!-- 操作 -->
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
v-perms="['setting.pay.pay_config/setConfig']"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(row)"
|
||||
>
|
||||
配置
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-card>
|
||||
<edit-popup v-if="showEdit" ref="editRef" @success="getConfig" @close="showEdit = false" />
|
||||
<Edit ref="editNewRef" @refresh="getConfig" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getPayConfigLists } from '@/api/setting/pay'
|
||||
import { useComponentRef } from '@/utils/getExposeType'
|
||||
|
||||
import Edit from './edit.vue'
|
||||
|
||||
const editNewRef = useComponentRef(Edit)
|
||||
|
||||
import EditPopup from './edit.vue'
|
||||
|
||||
const payConfigList = ref<any[]>([])
|
||||
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
|
||||
const showEdit = ref(false)
|
||||
const getConfig = async () => {
|
||||
const { lists } = await getPayConfigLists()
|
||||
payConfigList.value = lists
|
||||
}
|
||||
const handleEdit = async (data: any) => {
|
||||
editNewRef.value?.openHandle(data.id, false)
|
||||
}
|
||||
getConfig()
|
||||
</script>
|
||||
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
v-perms="['setting.pay.pay_way/setPayWay']"
|
||||
@click="handelSetupPayWay"
|
||||
>
|
||||
设置支付方式
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<el-card
|
||||
shadow="never"
|
||||
class="mt-4 !border-none"
|
||||
v-for="(value, scene) in payWay"
|
||||
:key="scene"
|
||||
>
|
||||
<div>
|
||||
<div class="text-lg mb-[24px]" v-if="scene == PaySceneEnum.MP_WEIXIN">
|
||||
微信小程序
|
||||
<span class="form-tips ml-[10px]">在微信小程序中付款的场景</span>
|
||||
</div>
|
||||
<div class="text-lg mb-[24px]" v-if="scene == PaySceneEnum.OA">
|
||||
微信公众号
|
||||
<span class="form-tips ml-[10px]">
|
||||
在微信公众号H5页面中付款的场景，公众号类型一般为服务号
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-lg mb-[24px]" v-if="scene == PaySceneEnum.H5">
|
||||
H5支付
|
||||
<span class="form-tips ml-[10px]">在浏览器H5页面中付款的场景</span>
|
||||
</div>
|
||||
<div class="text-lg mb-[24px]" v-if="scene == PaySceneEnum.PC">
|
||||
PC支付
|
||||
<span class="form-tips ml-[10px]">在浏览器PC页面中付款的场景</span>
|
||||
</div>
|
||||
<div class="text-lg mb-[24px]" v-if="scene == PaySceneEnum.APP">
|
||||
APP支付
|
||||
<span class="form-tips ml-[10px]">在APP付款的场景</span>
|
||||
</div>
|
||||
<el-table v-if="value.length" :data="value" style="width: 100%">
|
||||
<el-table-column label="图标" min-width="150">
|
||||
<template #default="{ row }">
|
||||
<el-image
|
||||
:src="row.icon"
|
||||
alt="图标"
|
||||
style="width: 34px; height: 34px"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="pay_way_name" label="支付方式" min-width="150" />
|
||||
<el-table-column label="默认支付" min-width="150">
|
||||
<template #default="{ row, $index }">
|
||||
<div>
|
||||
<template v-if="setupPayWay">
|
||||
<el-radio
|
||||
v-model="row.is_default"
|
||||
:label="1"
|
||||
@change="changePayDefault($index, scene)"
|
||||
>
|
||||
设为默认
|
||||
</el-radio>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-tag v-if="row.is_default == 1">默认</el-tag>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="开启状态" min-width="150">
|
||||
<template #default="{ row }">
|
||||
<el-switch
|
||||
v-if="setupPayWay"
|
||||
v-model="row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
/>
|
||||
<span v-else>
|
||||
{{ row.status == 1 ? '开启' : '关闭' }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-card>
|
||||
<footer-btns v-if="setupPayWay">
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">保存</el-button>
|
||||
</footer-btns>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { cloneDeep } from 'lodash'
|
||||
|
||||
import { getPayWay, setPayWay } from '@/api/setting/pay'
|
||||
|
||||
enum PaySceneEnum {
|
||||
MP_WEIXIN = 1,
|
||||
OA = 2,
|
||||
H5 = 3,
|
||||
PC = 4,
|
||||
APP = 5
|
||||
}
|
||||
const payWay = ref<Record<number, any[]>>({})
|
||||
const setupPayWay = ref(false)
|
||||
let defaultPayWay = {}
|
||||
const getConfig = async () => {
|
||||
payWay.value = await getPayWay()
|
||||
defaultPayWay = cloneDeep(payWay.value)
|
||||
}
|
||||
|
||||
const handelSetupPayWay = () => {
|
||||
setupPayWay.value = true
|
||||
}
|
||||
|
||||
const changePayDefault = (index: number, scene: number) => {
|
||||
payWay.value[scene].forEach((item: any) => {
|
||||
item.is_default = 0
|
||||
})
|
||||
payWay.value[scene][index].is_default = 1
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
payWay.value = cloneDeep(defaultPayWay)
|
||||
setupPayWay.value = false
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
await setPayWay(payWay.value)
|
||||
setupPayWay.value = false
|
||||
getConfig()
|
||||
}
|
||||
|
||||
getConfig()
|
||||
</script>
|
||||
Reference in New Issue
Block a user