54 lines
1.1 KiB
Vue
54 lines
1.1 KiB
Vue
<template>
|
|
<div>
|
|
<label class="text-lg font-semibold"> Choose your plan </label>
|
|
<p class="text-base text-gray-700">
|
|
Select a plan based on the type of usage you are expecting on your site.
|
|
</p>
|
|
<div class="mt-4">
|
|
<div v-if="$resources.plans.loading" class="flex justify-center">
|
|
<LoadingText />
|
|
</div>
|
|
<SitePlansTable
|
|
v-if="plans"
|
|
:plans="plans"
|
|
:selectedPlan="selectedPlan"
|
|
@update:selectedPlan="plan => $emit('update:selectedPlan', plan)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import SitePlansTable from '@/components/SitePlansTable.vue';
|
|
|
|
export default {
|
|
name: 'Plans',
|
|
emits: ['update:selectedPlan'],
|
|
props: ['bench', 'selectedPlan', 'benchTeam'],
|
|
components: {
|
|
SitePlansTable
|
|
},
|
|
data() {
|
|
return {
|
|
plans: null
|
|
};
|
|
},
|
|
resources: {
|
|
plans() {
|
|
return {
|
|
url: 'jcloud.api.site.get_plans',
|
|
params: {
|
|
rg: this.bench
|
|
},
|
|
auto: true,
|
|
onSuccess(r) {
|
|
this.plans = r.map(plan => {
|
|
plan.disabled = !this.$account.hasBillingInfo;
|
|
return plan;
|
|
});
|
|
}
|
|
};
|
|
}
|
|
}
|
|
};
|
|
</script>
|