Initial commit: 网络验证平台
This commit is contained in:
Admin
@@ -0,0 +1,279 @@
|
||||
<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('developer.cards.create.selectAppFirst'))
|
||||
return
|
||||
}
|
||||
if (!form.value.card_type_id) {
|
||||
toast.error(t('developer.cards.create.selectCardTypeFirst'))
|
||||
return
|
||||
}
|
||||
if (form.value.count < 1 || form.value.count > 1000) {
|
||||
toast.error(t('developer.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('developer.cards.create.generateSuccess', { count: form.value.count }))
|
||||
router.push('/developer/cards')
|
||||
}
|
||||
catch (error: any) {
|
||||
console.error('生成卡密失败:', error)
|
||||
toast.error(error.message || t('developer.cards.create.generateFailed'))
|
||||
}
|
||||
finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchApplications()
|
||||
fetchCardTypes()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicPage
|
||||
:title="t('developer.cards.create.title')"
|
||||
:description="t('developer.cards.create.description')"
|
||||
:breadcrumbs="[
|
||||
{ title: t('developer.cards.title'), href: '/developer/cards' },
|
||||
{ title: t('developer.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('developer.cards.create.config') }}
|
||||
</UiCardTitle>
|
||||
<UiCardDescription>{{ t('developer.cards.create.configDesc') }}</UiCardDescription>
|
||||
</UiCardHeader>
|
||||
<UiCardContent class="space-y-6">
|
||||
<div class="space-y-2">
|
||||
<UiLabel for="application">
|
||||
{{ t('developer.cards.create.application') }}
|
||||
</UiLabel>
|
||||
<UiSelect v-model="form.application_id" @update:model-value="onApplicationChange">
|
||||
<UiSelectTrigger>
|
||||
<UiSelectValue :placeholder="t('developer.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('developer.cards.create.cardType') }}
|
||||
</UiLabel>
|
||||
<UiSelect v-model="form.card_type_id" :disabled="!form.application_id">
|
||||
<UiSelectTrigger>
|
||||
<UiSelectValue :placeholder="t('developer.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('developer.cards.create.noCardType') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<UiLabel for="count">
|
||||
{{ t('developer.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('developer.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('developer.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('developer.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('developer.cards.create.type') }}</span>
|
||||
<span>{{ selectedCardType?.name || '-' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-muted-foreground">{{ t('developer.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('developer.cards.create.quantity') }}</span>
|
||||
<span>{{ form.count }} {{ t('developer.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('developer.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('developer.cards.create.generateNow') }}
|
||||
</UiButton>
|
||||
<UiButton
|
||||
variant="outline"
|
||||
class="w-full"
|
||||
@click="router.back()"
|
||||
>
|
||||
{{ t('developer.cards.create.cancel') }}
|
||||
</UiButton>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BasicPage>
|
||||
</template>
|
||||
Reference in New Issue
Block a user