jcloud/dashboard/src/components/BuyPrepaidCreditsForm.vue

<template>
	<div>
		<FormControl
			:label="$t('Payment Amount')"
			class="mb-3"
			v-model.number="creditsToBuy"
			name="amount"
			autocomplete="off"
			type="number"
			:min="minimumAmount"
			:error="amountError"
		>
			<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">{{ $t('Payment Method') }}</div>
		<div class="mt-1.5 grid grid-cols-1 gap-2 sm:grid-cols-2">
			<label
				class="payment-option"
				:class="{'payment-option-active': paymentGateway === 'Alipay'}"
			>
				<div class="payment-icon">
					<AlipayLogo />
				</div>
				<input type="radio" v-model="paymentGateway" value="Alipay" class="hidden-radio">
				<span class="checkmark-circle" v-if="paymentGateway === 'Alipay'">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="checkmark-icon">
						<path fill="currentColor" d="M9.55 18l-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"/>
					</svg>
				</span>
			</label>
			
			<label
				class="payment-option"
				:class="{'payment-option-active': paymentGateway === 'WeChatPay'}"
			>
				<div class="payment-icon">
					<WeChatPayLogo />
				</div>
				<input type="radio" v-model="paymentGateway" value="WeChatPay" class="hidden-radio">
				<span class="checkmark-circle" v-if="paymentGateway === 'WeChatPay'">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="checkmark-icon">
						<path fill="currentColor" d="M9.55 18l-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"/>
					</svg>
				</span>
			</label>
		</div>
	</div>

	<div class="text-xs text-gray-500 mt-2 mb-4" v-if="$team.pg.currency === 'CNY'">
		{{ $t('Pay with {method}, fast and convenient. Balance will be credited immediately after successful payment.', { method: paymentGateway === 'Alipay' ? $t('Alipay') : $t('WeChat Pay') }) }}
	</div>

	<BuyPrepaidCreditsAlipay
		v-if="paymentGateway === 'Alipay'"
		:amount="creditsToBuy"
		:minimumAmount="minimumAmount"
		:isOnboarding="isOnboarding"
		@success="onSuccess"
		@cancel="onCancel"
	/>

	<BuyPrepaidCreditsWeChatPay
		v-if="paymentGateway === 'WeChatPay'"
		:amount="creditsToBuy"
		:minimumAmount="minimumAmount"
		:isOnboarding="isOnboarding"
		@success="onSuccess"
		@cancel="onCancel"
	/>
</template>
<script>
import BuyPrepaidCreditsAlipay from './BuyPrepaidCreditsAlipay.vue';
import BuyPrepaidCreditsWeChatPay from './BuyPrepaidCreditsWeChatPay.vue';
import AlipayLogo from '../logo/AlipayLogo.vue';
import WeChatPayLogo from '../logo/WeChatPayLogo.vue';

export default {
	name: 'BuyPrepaidCreditsForm',
	components: {
		BuyPrepaidCreditsAlipay,
		BuyPrepaidCreditsWeChatPay,
		AlipayLogo,
		WeChatPayLogo
	},
	data() {
		return {
			paymentGateway: 'Alipay', // Default to Alipay
			creditsToBuy: this.minimumAmount || 0,
			amountError: ''
		};
	},
	props: {
		modelValue: {
			default: false
		},
		minimumAmount: {
			type: Number,
			default: 0
		},
		isOnboarding: {
			type: Boolean,
			default: false
		}
	},
	emits: ['success', 'cancel'],
	methods: {
		onSuccess() {
			this.$emit('success');
		},
		onCancel() {
			this.$emit('cancel');
		}
	}
};
</script>
<style scoped>
.payment-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.payment-option:hover {
    border-color: #ccc;
    background-color: #f9fafb;
}

.payment-option-active, 
.payment-option-active:has(input[value="Alipay"]:checked) {
    border-color: #1677ff;
    border-width: 2px;
    box-shadow: 0 0 0 1px rgba(22, 119, 255, 0.1);
}

.payment-option-active:has(input[value="WeChatPay"]:checked) {
    border-color: #22AC38;
    box-shadow: 0 0 0 1px rgba(34, 172, 56, 0.1);
}

.payment-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    width: 90px;
    max-width: 90px;
    min-width: 60px;
    flex-shrink: 0;
}

.alipay-svg, .wechat-svg {
    width: 100%;
    height: auto;
    max-height: 30px;
}

.payment-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ml-2 {
    margin-left: 8px;
}

.hidden-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkmark-circle {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #1677ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.checkmark-icon {
    width: 14px;
    height: 14px;
}

.payment-option-active:has(input[value="WeChatPay"]:checked) .checkmark-circle {
    background-color: #22AC38;
}

/* Responsive design */
@media (max-width: 640px) {
    .payment-options {
        flex-direction: column;
    }
    
    .payment-option {
        padding: 10px;
    }
    
    .payment-icon {
        width: 70px;
        min-width: 50px;
    }
    
    .alipay-svg, .wechat-svg {
        max-height: 24px;
    }
    
    .checkmark-circle {
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
        width: 16px;
        height: 16px;
    }
    
    .checkmark-icon {
        width: 12px;
        height: 12px;
    }
}
</style>