125 lines
3.2 KiB
Vue
125 lines
3.2 KiB
Vue
<template>
|
|
<div>
|
|
<!-- 金额 -->
|
|
<div>
|
|
<FormControl
|
|
:label="`金额 (最低金额: ${maximumAmount})`"
|
|
class="mb-3"
|
|
v-model.number="creditsToBuy"
|
|
name="amount"
|
|
autocomplete="off"
|
|
type="number"
|
|
:max="maximumAmount"
|
|
>
|
|
<template #prefix>
|
|
<div class="grid w-4 place-items-center text-sm text-gray-700">
|
|
{{ team.pg.currency === 'CNY' ? '¥' : '$' }}
|
|
</div>
|
|
</template>
|
|
</FormControl>
|
|
<FormControl
|
|
v-if="team.pg.currency === 'CNY'"
|
|
:label="`总金额`"
|
|
disabled
|
|
:modelValue="totalAmount"
|
|
name="total"
|
|
autocomplete="off"
|
|
type="number"
|
|
>
|
|
<template #prefix>
|
|
<div class="grid w-4 place-items-center text-sm text-gray-700">
|
|
{{ team.pg.currency === 'CNY' ? '¥' : '$' }}
|
|
</div>
|
|
</template>
|
|
</FormControl>
|
|
</div>
|
|
|
|
<!-- 支付网关 -->
|
|
<div class="mt-4">
|
|
<div class="text-xs text-gray-600">选择支付网关</div>
|
|
<div class="mt-1.5 grid grid-cols-1 gap-2 sm:grid-cols-2">
|
|
<Button
|
|
v-if="team.pg.currency === 'CNY' || team.pg.razorpay_enabled"
|
|
size="lg"
|
|
:class="{
|
|
'border-[1.5px] border-gray-700': paymentGateway === 'Razorpay'
|
|
}"
|
|
@click="paymentGateway = 'Razorpay'"
|
|
>
|
|
<RazorpayLogo class="w-24" />
|
|
</Button>
|
|
<Button
|
|
size="lg"
|
|
:class="{
|
|
'border-[1.5px] border-gray-700': paymentGateway === 'Stripe'
|
|
}"
|
|
@click="paymentGateway = 'Stripe'"
|
|
>
|
|
<StripeLogo class="h-7 w-24" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 支付按钮 -->
|
|
<BuyPartnerCreditsStripe
|
|
v-if="paymentGateway === 'Stripe'"
|
|
:amount="creditsToBuy"
|
|
:maximumAmount="maximumAmount"
|
|
@success="() => emit('success')"
|
|
@cancel="show = false"
|
|
/>
|
|
|
|
<BuyPartnerCreditsRazorpay
|
|
v-if="paymentGateway === 'Razorpay'"
|
|
:amount="creditsToBuy"
|
|
:maximumAmount="maximumAmount"
|
|
type="Partnership Fee"
|
|
@success="() => emit('success')"
|
|
@cancel="show = false"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import BuyPartnerCreditsStripe from './BuyPartnerCreditsStripe.vue';
|
|
import BuyPartnerCreditsRazorpay from './BuyPartnerCreditsRazorpay.vue';
|
|
import RazorpayLogo from '../../logo/RazorpayLogo.vue';
|
|
import StripeLogo from '../../logo/StripeLogo.vue';
|
|
import { FormControl, Button, createDocumentResource } from 'jingrow-ui';
|
|
import { ref, computed, inject, defineEmits } from 'vue';
|
|
|
|
const emit = defineEmits(['success']);
|
|
|
|
const team = inject('team');
|
|
|
|
const jcloudSettings = createDocumentResource({
|
|
pagetype: 'Jcloud Settings',
|
|
name: 'Jcloud Settings',
|
|
auto: true,
|
|
initialData: {}
|
|
});
|
|
|
|
const maximumAmount = computed(() => {
|
|
if (!jcloudSettings.pg) return 0;
|
|
const feeAmount =
|
|
team.pg?.currency == 'CNY'
|
|
? jcloudSettings.pg.partnership_fee_cny
|
|
: jcloudSettings.pg.partnership_fee_usd;
|
|
return Math.ceil(feeAmount);
|
|
});
|
|
|
|
const creditsToBuy = ref(maximumAmount.value);
|
|
const paymentGateway = ref('');
|
|
|
|
const totalAmount = computed(() => {
|
|
const _creditsToBuy = creditsToBuy.value || 0;
|
|
|
|
if (team.pg?.currency === 'CNY') {
|
|
return (
|
|
_creditsToBuy +
|
|
_creditsToBuy * (team.pg.billing_info.gst_percentage || 0)
|
|
).toFixed(2);
|
|
} else {
|
|
return _creditsToBuy;
|
|
}
|
|
});
|
|
</script> |