75 lines
1.4 KiB
Vue
75 lines
1.4 KiB
Vue
<template>
|
|
<Dialog
|
|
:options="{
|
|
title: `选择 ${app?.app_title || app?.title} 的计划`,
|
|
size: '3xl',
|
|
actions: [
|
|
{
|
|
label: '选择计划',
|
|
variant: 'solid',
|
|
disabled: !selectedPlan,
|
|
onClick: () => {
|
|
$emit('plan-select', selectedPlan);
|
|
show = false;
|
|
}
|
|
}
|
|
]
|
|
}"
|
|
v-model="show"
|
|
>
|
|
<template #body-content>
|
|
<PlansCards v-model="selectedPlan" :plans="plans" />
|
|
</template>
|
|
</Dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import PlansCards from '../PlansCards.vue';
|
|
|
|
export default {
|
|
props: ['app', 'modelValue', 'currentPlan'],
|
|
emits: ['plan-select', 'update:modelValue'],
|
|
components: {
|
|
PlansCards
|
|
},
|
|
data() {
|
|
return {
|
|
selectedPlan: this.currentPlan
|
|
};
|
|
},
|
|
computed: {
|
|
show: {
|
|
get() {
|
|
return this.modelValue;
|
|
},
|
|
set(val) {
|
|
this.$emit('update:modelValue', val);
|
|
if (!val) {
|
|
this.selectedPlan = null;
|
|
}
|
|
}
|
|
},
|
|
plans() {
|
|
return this.app.plans.map(plan => {
|
|
return {
|
|
label:
|
|
plan.price_cny === 0 || plan.price_usd === 0
|
|
? '免费'
|
|
: `${this.$format.userCurrency(
|
|
this.$team.pg.currency === 'CNY'
|
|
? plan.price_cny
|
|
: plan.price_usd
|
|
)}/月`,
|
|
sublabel: ' ',
|
|
plan_title: plan.title,
|
|
...plan,
|
|
features: plan.features.map(f => ({
|
|
value: f,
|
|
icon: 'check-circle'
|
|
}))
|
|
};
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script> |