280 lines
9.5 KiB
Vue
280 lines
9.5 KiB
Vue
<script setup lang="ts">
|
|
import { Icon } from '@iconify/vue'
|
|
import { computed, onMounted, ref } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useRouter } from 'vue-router'
|
|
import { toast } from 'vue-sonner'
|
|
|
|
import { BasicPage } from '@/components/global-layout'
|
|
import api from '@/services/api'
|
|
|
|
const router = useRouter()
|
|
const { t } = useI18n()
|
|
|
|
interface CardType {
|
|
id: string
|
|
name: string
|
|
billing_type: string
|
|
price: number
|
|
value: number
|
|
application_id: string
|
|
}
|
|
|
|
interface Application {
|
|
id: string
|
|
name: string
|
|
}
|
|
|
|
const saving = ref(false)
|
|
const applications = ref<Application[]>([])
|
|
const cardTypes = ref<CardType[]>([])
|
|
|
|
const form = ref({
|
|
application_id: '',
|
|
card_type_id: '',
|
|
count: 1,
|
|
})
|
|
|
|
async function fetchApplications() {
|
|
try {
|
|
const data = await api.get<{ applications: Application[] }>('/dev/applications')
|
|
applications.value = Array.isArray(data?.applications) ? data.applications : []
|
|
}
|
|
catch (error) {
|
|
console.error('获取应用列表失败:', error)
|
|
}
|
|
}
|
|
|
|
async function fetchCardTypes() {
|
|
try {
|
|
const data = await api.get<{ card_types: CardType[] }>('/dev/card-types')
|
|
cardTypes.value = Array.isArray(data?.card_types) ? data.card_types : []
|
|
}
|
|
catch (error) {
|
|
console.error('获取卡类列表失败:', error)
|
|
}
|
|
}
|
|
|
|
const filteredCardTypes = computed(() => {
|
|
if (form.value.application_id) {
|
|
return cardTypes.value.filter(
|
|
ct => String(ct.application_id) === form.value.application_id,
|
|
)
|
|
}
|
|
return []
|
|
})
|
|
|
|
const selectedCardType = computed(() => {
|
|
if (form.value.card_type_id) {
|
|
return cardTypes.value.find(ct => String(ct.id) === form.value.card_type_id)
|
|
}
|
|
return null
|
|
})
|
|
|
|
const totalCost = computed(() => {
|
|
if (selectedCardType.value) {
|
|
return selectedCardType.value.price * form.value.count
|
|
}
|
|
return 0
|
|
})
|
|
|
|
function onApplicationChange() {
|
|
form.value.card_type_id = ''
|
|
}
|
|
|
|
async function handleGenerate() {
|
|
if (!form.value.application_id) {
|
|
toast.error(t('admin.cards.create.selectAppFirst'))
|
|
return
|
|
}
|
|
if (!form.value.card_type_id) {
|
|
toast.error(t('admin.cards.create.selectCardTypeFirst'))
|
|
return
|
|
}
|
|
if (form.value.count < 1 || form.value.count > 1000) {
|
|
toast.error(t('admin.cards.create.countRange'))
|
|
return
|
|
}
|
|
|
|
saving.value = true
|
|
try {
|
|
await api.post('/dev/cards/batch', {
|
|
application_id: Number(form.value.application_id),
|
|
card_type_id: Number(form.value.card_type_id),
|
|
count: form.value.count,
|
|
})
|
|
toast.success(t('admin.cards.create.generateSuccess', { count: form.value.count }))
|
|
router.push('/admin/cards')
|
|
}
|
|
catch (error: any) {
|
|
console.error('生成卡密失败:', error)
|
|
toast.error(error.message || t('admin.cards.create.generateFailed'))
|
|
}
|
|
finally {
|
|
saving.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchApplications()
|
|
fetchCardTypes()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<BasicPage
|
|
:title="t('admin.cards.create.title')"
|
|
:description="t('admin.cards.create.description')"
|
|
:breadcrumbs="[
|
|
{ title: t('admin.cards.title'), href: '/admin/cards' },
|
|
{ title: t('admin.cards.create.title') },
|
|
]"
|
|
sticky
|
|
>
|
|
<div class="space-y-6">
|
|
<div class="grid gap-6 lg:grid-cols-3">
|
|
<div class="lg:col-span-2 space-y-6">
|
|
<UiCard>
|
|
<UiCardHeader>
|
|
<UiCardTitle class="flex items-center gap-2">
|
|
<Icon icon="lucide:settings-2" class="size-5" />
|
|
{{ t('admin.cards.create.config') }}
|
|
</UiCardTitle>
|
|
<UiCardDescription>{{ t('admin.cards.create.configDesc') }}</UiCardDescription>
|
|
</UiCardHeader>
|
|
<UiCardContent class="space-y-6">
|
|
<div class="space-y-2">
|
|
<UiLabel for="application">
|
|
{{ t('admin.cards.create.application') }}
|
|
</UiLabel>
|
|
<UiSelect v-model="form.application_id" @update:model-value="onApplicationChange">
|
|
<UiSelectTrigger>
|
|
<UiSelectValue :placeholder="t('admin.cards.create.selectApplication')" />
|
|
</UiSelectTrigger>
|
|
<UiSelectContent>
|
|
<UiSelectItem v-for="app in applications" :key="app.id" :value="String(app.id)">
|
|
{{ app.name }}
|
|
</UiSelectItem>
|
|
</UiSelectContent>
|
|
</UiSelect>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<UiLabel for="cardType">
|
|
{{ t('admin.cards.create.cardType') }}
|
|
</UiLabel>
|
|
<UiSelect v-model="form.card_type_id" :disabled="!form.application_id">
|
|
<UiSelectTrigger>
|
|
<UiSelectValue :placeholder="t('admin.cards.create.selectCardType')" />
|
|
</UiSelectTrigger>
|
|
<UiSelectContent>
|
|
<UiSelectItem v-for="type in filteredCardTypes" :key="type.id" :value="String(type.id)">
|
|
{{ type.name }}
|
|
</UiSelectItem>
|
|
</UiSelectContent>
|
|
</UiSelect>
|
|
<p v-if="form.application_id && filteredCardTypes.length === 0" class="text-xs text-muted-foreground">
|
|
{{ t('admin.cards.create.noCardType') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<UiLabel for="count">
|
|
{{ t('admin.cards.create.count') }}
|
|
</UiLabel>
|
|
<div class="flex items-center gap-4">
|
|
<UiNumberField v-model="form.count" :min="1" :max="1000" class="flex-1 max-w-[200px]">
|
|
<UiNumberFieldContent>
|
|
<UiNumberFieldDecrement />
|
|
<UiNumberFieldInput />
|
|
<UiNumberFieldIncrement />
|
|
</UiNumberFieldContent>
|
|
</UiNumberField>
|
|
<div class="flex gap-2">
|
|
<UiButton variant="outline" size="sm" @click="form.count = 10">
|
|
10
|
|
</UiButton>
|
|
<UiButton variant="outline" size="sm" @click="form.count = 50">
|
|
50
|
|
</UiButton>
|
|
<UiButton variant="outline" size="sm" @click="form.count = 100">
|
|
100
|
|
</UiButton>
|
|
<UiButton variant="outline" size="sm" @click="form.count = 500">
|
|
500
|
|
</UiButton>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-muted-foreground">
|
|
{{ t('admin.cards.create.maxCount') }}
|
|
</p>
|
|
</div>
|
|
</UiCardContent>
|
|
</UiCard>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<UiCard>
|
|
<UiCardHeader>
|
|
<UiCardTitle class="flex items-center gap-2">
|
|
<Icon icon="lucide:receipt" class="size-5" />
|
|
{{ t('admin.cards.create.preview') }}
|
|
</UiCardTitle>
|
|
</UiCardHeader>
|
|
<UiCardContent class="space-y-4">
|
|
<div class="space-y-3">
|
|
<div class="flex justify-between text-sm">
|
|
<span class="text-muted-foreground">{{ t('admin.cards.create.app') }}</span>
|
|
<span>{{ applications.find(a => String(a.id) === form.application_id)?.name || '-' }}</span>
|
|
</div>
|
|
<div class="flex justify-between text-sm">
|
|
<span class="text-muted-foreground">{{ t('admin.cards.create.type') }}</span>
|
|
<span>{{ selectedCardType?.name || '-' }}</span>
|
|
</div>
|
|
<div class="flex justify-between text-sm">
|
|
<span class="text-muted-foreground">{{ t('admin.cards.create.unitPrice') }}</span>
|
|
<span>¥{{ selectedCardType?.price?.toFixed(2) || '0.00' }}</span>
|
|
</div>
|
|
<div class="flex justify-between text-sm">
|
|
<span class="text-muted-foreground">{{ t('admin.cards.create.quantity') }}</span>
|
|
<span>{{ form.count }} {{ t('admin.cards.create.units') }}</span>
|
|
</div>
|
|
<div class="border-t pt-3 mt-3">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-muted-foreground">{{ t('admin.cards.create.totalAmount') }}</span>
|
|
<span class="text-xl font-bold text-primary">¥{{ totalCost.toFixed(2) }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UiCardContent>
|
|
</UiCard>
|
|
|
|
<UiCard>
|
|
<UiCardContent class="pt-6">
|
|
<div class="flex flex-col gap-3">
|
|
<UiButton
|
|
class="w-full"
|
|
size="lg"
|
|
:disabled="saving || !form.application_id || !form.card_type_id"
|
|
@click="handleGenerate"
|
|
>
|
|
<Icon v-if="saving" icon="lucide:loader-2" class="mr-2 h-4 w-4 animate-spin" />
|
|
<Icon v-else icon="lucide:sparkles" class="mr-2 h-4 w-4" />
|
|
{{ t('admin.cards.create.generateNow') }}
|
|
</UiButton>
|
|
<UiButton
|
|
variant="outline"
|
|
class="w-full"
|
|
@click="router.back()"
|
|
>
|
|
{{ t('admin.cards.create.cancel') }}
|
|
</UiButton>
|
|
</div>
|
|
</UiCardContent>
|
|
</UiCard>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</BasicPage>
|
|
</template>
|