172 lines
4.1 KiB
Vue
172 lines
4.1 KiB
Vue
<template>
|
|
<Dialog :options="{ title: '添加支付网关', size: 'lg' }">
|
|
<template #body-content>
|
|
<div class="flex flex-col gap-4">
|
|
<FormControl
|
|
label="网关名称"
|
|
v-model="paymentGatewayDetails.gateway_name"
|
|
name="gateway_name"
|
|
type="text"
|
|
placeholder="输入网关名称"
|
|
/>
|
|
<FormControl
|
|
label="端点URL"
|
|
v-model="paymentGatewayDetails.url"
|
|
name="url"
|
|
type="text"
|
|
placeholder="https://xyz.com/api/action/<endpoint>"
|
|
/>
|
|
<div class="flex gap-4">
|
|
<FormControl
|
|
label="API密钥"
|
|
v-model="paymentGatewayDetails.api_key"
|
|
name="api_key"
|
|
type="text"
|
|
placeholder="输入API密钥"
|
|
/>
|
|
|
|
<FormControl
|
|
label="API密钥"
|
|
v-model="paymentGatewayDetails.api_secret"
|
|
name="api_secret"
|
|
type="text"
|
|
placeholder="输入API密钥"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex gap-4">
|
|
<FormControl
|
|
label="货币"
|
|
v-model="paymentGatewayDetails.currency"
|
|
name="currency"
|
|
type="text"
|
|
placeholder="例如 KES"
|
|
/>
|
|
<FormControl
|
|
label="税费(%)"
|
|
v-model="paymentGatewayDetails.taxes_and_charges"
|
|
name="taxes_and_charges"
|
|
type="text"
|
|
placeholder="输入税费"
|
|
/>
|
|
</div>
|
|
<FormControl
|
|
label="打印格式"
|
|
v-model="paymentGatewayDetails.print_format"
|
|
name="print_format"
|
|
type="text"
|
|
placeholder="默认"
|
|
/>
|
|
</div>
|
|
|
|
<div class="mt-4 flex w-full bg-red-300 items-center justify-center">
|
|
<Button
|
|
@click="savePaymentGateway"
|
|
variant="solid"
|
|
class="justify-center w-full font-bold"
|
|
>保存</Button
|
|
>
|
|
</div>
|
|
</template>
|
|
</Dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import { toast } from 'vue-sonner';
|
|
export default {
|
|
name: 'AddPaymentGateway',
|
|
data() {
|
|
return {
|
|
paymentGatewayDetails: {
|
|
currency: 'KES',
|
|
gateway_name: '',
|
|
gateway_setting: 'Mpesa Setup',
|
|
gateway_controller: '',
|
|
url: '',
|
|
api_key: '',
|
|
api_secret: '',
|
|
taxes_and_charges: '',
|
|
print_format: '',
|
|
},
|
|
integrationLogo: null,
|
|
};
|
|
},
|
|
resources: {
|
|
getPaymentGatewayDetails() {
|
|
return {
|
|
url: 'jcloud.api.regional_payments.mpesa.utils.get_payment_gateway_details',
|
|
onSuccess(data) {
|
|
Object.assign(this.paymentGatewayDetails, {
|
|
currency: data.currency,
|
|
gateway_name: data.gateway_name,
|
|
url: data.url,
|
|
api_key: data.api_key,
|
|
api_secret: data.api_secret,
|
|
taxes_and_charges: data.taxes_and_charges,
|
|
print_format: data.print_format,
|
|
});
|
|
},
|
|
auto: true,
|
|
};
|
|
},
|
|
createPaymentGatewaySettings() {
|
|
return {
|
|
url: 'jcloud.api.regional_payments.mpesa.utils.update_payment_gateway_settings',
|
|
makeParams() {
|
|
return {
|
|
gateway_details: this.paymentGatewayDetails,
|
|
};
|
|
},
|
|
validate() {
|
|
let fields = Object.values(this.paymentGatewayDetails);
|
|
if (fields.includes('')) {
|
|
this.errorMessage = '请填写必填项';
|
|
return '请填写必填项';
|
|
// throw new DashboardError('请填写必填项');
|
|
}
|
|
},
|
|
async onSuccess(data) {
|
|
if (data) {
|
|
toast.success('支付网关设置已保存', data);
|
|
} else {
|
|
toast.error('保存支付网关设置时出错');
|
|
}
|
|
},
|
|
};
|
|
},
|
|
fetchGatewayController() {
|
|
return {
|
|
url: 'jcloud.api.regional_payments.mpesa.utils.get_gateway_controller',
|
|
method: 'GET',
|
|
auto: true,
|
|
onSuccess: (res) => {
|
|
Object.assign(this.paymentGatewayDetails, {
|
|
gateway_controller: res,
|
|
});
|
|
},
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
handleFileUpload(event) {
|
|
this.integrationLogo = event.target.files[0];
|
|
},
|
|
|
|
async savePaymentGateway() {
|
|
try {
|
|
await this.$resources.createPaymentGatewaySettings.submit();
|
|
this.$emit('closeDialog');
|
|
} catch (error) {
|
|
this.$toast.error(
|
|
`保存支付网关设置时出错: ${error.message}`,
|
|
);
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
integrationLogo: function () {
|
|
this.handleFileUpload();
|
|
},
|
|
},
|
|
};
|
|
</script> |