jcloud/dashboard/src2/components/billing/mpesa/AddMpesaCredentials.vue

<template>
	<Dialog :options="{ title: '添加 M-Pesa 凭证', size: 'xl' }">
		<template #body-content>
			<div class="grid grid-cols-2 gap-5">
				<FormControl
					label="Mpesa 设置 ID"
					v-model="mpesaSetupDetails.mpesa_setup_id"
					name="mpesa_setup_id"
					class="mb-3"
					type="text"
					placeholder="测试 Mpesa"
				/>

				<FormControl
					label="消费者密钥"
					v-model="mpesaSetupDetails.consumer_key"
					name="consumer_key"
					class="mb-3"
					type="text"
					placeholder="输入消费者密钥"
				/>

				<FormControl
					label="消费者密钥"
					v-model="mpesaSetupDetails.consumer_secret"
					name="consumer_secret"
					class="mb-3"
					type="text"
					placeholder="输入消费者密钥"
				/>

				<FormControl
					label="通行密钥"
					v-model="mpesaSetupDetails.pass_key"
					name="pass_key"
					class="mb-3"
					type="text"
					placeholder="输入通行密钥"
				/>

				<FormControl
					label="业务短码"
					v-model="mpesaSetupDetails.short_code"
					name="short_code"
					class="mb-3"
					type="text"
					placeholder="输入短码"
				/>

				<FormControl
					label="发起人名称"
					v-model="mpesaSetupDetails.initiator_name"
					name="initiator_name"
					class="mb-3"
					type="text"
					placeholder="例如 张三"
				/>

				<FormControl
					label="安全凭证"
					v-model="mpesaSetupDetails.security_credential"
					name="security_credential"
					class="mb-3"
					type="text"
					placeholder="输入安全凭证"
				/>

				<FormControl
					label="收银台号码"
					v-model="mpesaSetupDetails.till_number"
					name="till_number"
					class="mb-3"
					type="text"
					placeholder="1234567"
				/>

				<!-- <div class="flex items-center">
					<input v-model="sandBox" type="checkbox" class="mr-2" />
					<label class="text-sm font-medium text-gray-700">沙盒模式</label>
				</div> -->
				<ErrorMessage class="mt-2" :message="errorMessage" />
			</div>

			<div class="mt-4 flex w-full bg-red-300 items-center justify-center">
				<Button
					@click="saveMpesaCredentials"
					variant="solid"
					class="justify-center w-full"
				>
					保存
				</Button>
			</div>
		</template>
	</Dialog>
</template>

<script>
import { toast } from 'vue-sonner';
import { DashboardError } from '../../../utils/error';
import { ErrorMessage } from 'jingrow-ui';
export default {
	name: 'AddMpesaCredentials',
	data() {
		return {
			mpesaSetupDetails: {
				consumer_key: '',
				mpesa_setup_id: '',
				consumer_secret: '',
				pass_key: '',
				short_code: '',
				initiator_name: '',
				security_credential: '',
				till_number: '',
				// sandBox: false,
			},
			errorMessage: '',
		};
	},
	resources: {
		createMpesaSetup() {
			return {
				url: 'jcloud.api.regional_payments.mpesa.utils.update_mpesa_setup',
				makeParams() {
					return {
						mpesa_details: this.mpesaSetupDetails,
					};
				},
				validate() {
					let fields = Object.values(this.mpesaSetupDetails);
					if (fields.includes('')) {
						this.errorMessage = '请填写必填项';
						return '请填写必填项';
						// throw new DashboardError('请填写必填项');
					}
				},
				onSuccess(data) {
					if (data) {
						toast.success('M-Pesa 凭证已保存', data);
					} else {
						toast.error('保存 M-Pesa 凭证时出错');
					}
					this.$emit('closeDialog');
				},
			};
		},
		fetchMpesaSetup() {
			return {
				url: 'jcloud.api.regional_payments.mpesa.utils.fetch_mpesa_setup',
				onSuccess(data) {
					Object.assign(this.mpesaSetupDetails, {
						mpesa_setup_id: data.mpesa_setup_id,
						consumer_key: data.consumer_key,
						consumer_secret: data.consumer_secret,
						security_credential: data.security_credential,
						pass_key: data.pass_key,
						short_code: data.business_shortcode,
till_number: data.till_number,
						initiator_name: data.initiator_name,
					});
				},
				auto: true,
			};
		},
	},
	methods: {
		saveMpesaCredentials() {
			this.$resources.createMpesaSetup.submit();
		},
	},
};
</script>