99 lines
2.1 KiB
Vue
99 lines
2.1 KiB
Vue
<template>
|
|
<div
|
|
v-if="plan"
|
|
class="flex flex-col justify-between rounded-2xl border border-gray-100 p-5 shadow"
|
|
:class="[
|
|
popular ? 'relative bg-blue-100' : '',
|
|
selected ? 'relative ring-2 ring-inset ring-blue-500' : '',
|
|
clickable ? 'cursor-pointer hover:border-gray-300' : ''
|
|
]"
|
|
>
|
|
<div>
|
|
<div
|
|
v-if="popular"
|
|
class="absolute -top-3 left-1/4 rounded-md bg-blue-500 py-1 px-2 text-center text-xs"
|
|
>
|
|
<h5 class="font-medium uppercase text-white">Most Popular</h5>
|
|
</div>
|
|
|
|
<input
|
|
v-if="selected"
|
|
type="checkbox"
|
|
class="absolute top-3 right-3 h-4 w-4 rounded border-gray-300 text-blue-500"
|
|
checked
|
|
disabled
|
|
/>
|
|
|
|
<h4 class="flex justify-between text-xl font-semibold text-gray-900">
|
|
<div>
|
|
<span v-if="plan.price_usd <= 0"> Free </span>
|
|
|
|
<span v-else>
|
|
{{ $planTitle(plan) }}
|
|
<span class="text-base font-normal text-gray-600">
|
|
{{ plan.block_monthly === 1 ? '/year' : '/mo' }}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div v-if="editable">
|
|
<Button icon-left="edit" @click="e => $emit('beginEdit', e)"
|
|
>Edit</Button
|
|
>
|
|
</div>
|
|
</h4>
|
|
<!--<h4
|
|
v-if="plan.discounted"
|
|
class="mt-1 text-base text-gray-600 line-through"
|
|
>
|
|
{{
|
|
$planTitle({
|
|
price_usd: plan.price_usd_before_discount,
|
|
price_cny: plan.price_cny_before_discount
|
|
})
|
|
}}
|
|
</h4>-->
|
|
|
|
<FeatureList class="mt-5" :features="plan.features" />
|
|
</div>
|
|
|
|
<Badge
|
|
v-if="editable"
|
|
:label="plan.enabled ? 'Enabled' : 'Disabled'"
|
|
class="mt-4 self-start"
|
|
></Badge>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import FeatureList from '@/components/FeatureList.vue';
|
|
|
|
export default {
|
|
name: 'AppPlanCard',
|
|
emits: ['beginEdit'],
|
|
props: {
|
|
plan: {
|
|
type: Object
|
|
},
|
|
popular: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
selected: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
clickable: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
editable: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
components: {
|
|
FeatureList
|
|
}
|
|
};
|
|
</script>
|