88 lines
2.4 KiB
Vue
88 lines
2.4 KiB
Vue
<template>
|
|
<div class="@container" v-if="plans.length">
|
|
<div class="grid grid-cols-2 gap-3 @xl:grid-cols-3">
|
|
<button
|
|
v-for="(plan, i) in plans"
|
|
:key="plan.name"
|
|
class="flex flex-col overflow-hidden rounded border text-left hover:bg-gray-50"
|
|
:class="[
|
|
modelValue?.name === plan?.name
|
|
? 'border-gray-900 ring-1 ring-gray-900'
|
|
: 'border-gray-300',
|
|
{
|
|
'pointer-events-none opacity-50': plan.disabled,
|
|
},
|
|
]"
|
|
@click="$emit('update:modelValue', plan)"
|
|
>
|
|
<div
|
|
class="h-16 w-full border-b p-3"
|
|
:class="[
|
|
modelValue === plan ? 'border-gray-900 ring-1 ring-gray-900' : '',
|
|
]"
|
|
>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex w-full items-center text-lg">
|
|
<span class="truncate font-medium text-gray-900">
|
|
{{ plan.plan_title}}
|
|
</span>
|
|
<Tooltip text="包含支持">
|
|
<i-lucide-badge-check
|
|
class="ml-1 h-4 w-6 text-gray-600"
|
|
v-if="plan.support_included"
|
|
/>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
<div class="mt-1 text-sm text-gray-600">
|
|
<template v-if="plan.sublabel">
|
|
{{ plan.sublabel }}
|
|
</template>
|
|
<template v-else-if="plan.price_cny || plan.price_usd">
|
|
({{
|
|
$format.userCurrency(
|
|
$format.pricePerDay(
|
|
$team.pg.currency === 'CNY'
|
|
? plan.price_cny
|
|
: plan.price_usd,
|
|
plan.interval
|
|
),
|
|
)
|
|
}}/天)
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div class="p-3 text-p-sm text-gray-800">
|
|
<div v-for="feature in plan.features">
|
|
<div v-if="feature.value" class="flex space-x-2">
|
|
<component
|
|
v-if="feature.icon"
|
|
:is="_icon(feature.icon, 'mt-1 h-3 w-4 shrink-0 text-gray-900')"
|
|
/>
|
|
<span>{{ feature.value }} </span>
|
|
<span class="ml-1 text-gray-600">
|
|
{{ feature.label }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div v-else class="flex h-6 items-center">
|
|
<div class="text-base text-gray-600">无可用计划</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { icon } from '../utils/components';
|
|
|
|
export default {
|
|
props: ['plans', 'modelValue'],
|
|
methods: {
|
|
_icon(iconName, classes) {
|
|
return icon(iconName, classes);
|
|
},
|
|
},
|
|
};
|
|
</script> |