speakeloudest
686be3a855
All checks were successful
site-dist-deploy / build-and-deploy (push) Successful in 1m0s
90 lines
2.7 KiB
Vue
90 lines
2.7 KiB
Vue
<template>
|
|
<div class="md:flex md:h-full md:flex-col md:justify-between">
|
|
<div class="bg-[#A8FF53] px-6 font-sans text-black md:flex-1">
|
|
<h2 class="mb-1 text-center text-2xl font-bold">选择付款方式</h2>
|
|
|
|
<div class="flex flex-col gap-4 pt-[43px]">
|
|
<div
|
|
v-for="item in list"
|
|
:key="item.value"
|
|
@click="handleSelect(item.value)"
|
|
:class="[
|
|
'flex h-[66px] cursor-pointer items-center justify-between border-[5px] border-black px-6 transition-all active:scale-[0.98]',
|
|
'rounded-[32px]', // 超大圆角
|
|
selectedValue === item.value ? 'bg-[#A8FF53]' : 'bg-[#A8FF53]',
|
|
]"
|
|
>
|
|
<span class="text-xl font-semibold">{{ item.label }}</span>
|
|
|
|
<div
|
|
class="flex h-7 w-7 items-center justify-center rounded-full border-[1px] border-black bg-transparent"
|
|
>
|
|
<div
|
|
v-if="selectedValue === item.value"
|
|
class="h-3.5 w-3.5 rounded-full bg-black"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-6 pt-[55px]">
|
|
<h2 class="mb-1 text-center text-2xl font-bold">订单信息</h2>
|
|
<div class="ml-[11px] pt-[22px] text-[16px] font-semibold">
|
|
{{ selectedPlan?.days }}天套餐
|
|
</div>
|
|
<div class="ml-[11px] flex items-center justify-between pt-[22px] text-[16px] font-semibold">
|
|
<div>订单金额</div>
|
|
<div>USD {{ selectedPlan?.price }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-6 pt-[85px] pb-[23px]">
|
|
<Button
|
|
:disabled="isPaying"
|
|
@click="$emit('pay', selectedValue)"
|
|
class="h-[50px] w-full rounded-[32px] border-none bg-black text-[16px] font-black text-white transition-all hover:bg-black/90 active:scale-[0.98] disabled:opacity-50"
|
|
>
|
|
<Loader2 v-if="isPaying" class="mr-2 h-4 w-4 animate-spin" />
|
|
{{ isPaying ? '正在支付...' : '立即支付' }}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed } from 'vue'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Loader2 } from 'lucide-vue-next'
|
|
|
|
interface PaymentOption {
|
|
label: string
|
|
value: number | string
|
|
}
|
|
|
|
const props = defineProps<{
|
|
methods: any[]
|
|
selectedPlan: any
|
|
isPaying?: boolean
|
|
}>()
|
|
|
|
const list = computed(() =>
|
|
props.methods.map((item) => ({
|
|
label: item.name,
|
|
value: item.id,
|
|
})),
|
|
)
|
|
|
|
// 当前选中的值，默认选中第一个
|
|
const selectedValue = ref<number | string>(props.methods[0]?.id || 1)
|
|
|
|
const handleSelect = (value: number | string) => {
|
|
selectedValue.value = value
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 如果需要特殊的斜体感，可以在这里微调 */
|
|
span {
|
|
letter-spacing: -0.02em;
|
|
}
|
|
</style>
|