feat: Update PurchaseTicketDialog to enhance ticket purchase confirmation
- Modify PurchaseTicketDialog.vue to improve the ticket purchase success message and display a ticket icon. - Add a button for users to easily navigate to their tickets area. - Refactor the layout for better visual presentation of ticket information.
This commit is contained in:
parent
72e51ea10c
commit
a6a65800a4
2 changed files with 13 additions and 9 deletions
|
|
@ -6,7 +6,7 @@ import { Button } from '@/components/ui/button'
|
|||
import { Badge } from '@/components/ui/badge'
|
||||
import { useTicketPurchase } from '@/composables/useTicketPurchase'
|
||||
import { useAuth } from '@/composables/useAuth'
|
||||
import { User, Wallet, CreditCard, Zap } from 'lucide-vue-next'
|
||||
import { User, Wallet, CreditCard, Zap, Ticket } from 'lucide-vue-next'
|
||||
|
||||
interface Props {
|
||||
event: {
|
||||
|
|
@ -222,16 +222,18 @@ onUnmounted(() => {
|
|||
<div class="text-center space-y-2">
|
||||
<h3 class="text-lg font-semibold text-green-600">Ticket Purchased Successfully!</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Your ticket has been purchased. Here's your ticket QR code:
|
||||
Your ticket has been purchased and is now available in your tickets area.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-muted/50 rounded-lg p-4">
|
||||
<div class="flex flex-col items-center space-y-3">
|
||||
<img :src="ticketQRCode" alt="Ticket QR code" class="w-48 h-48 border rounded-lg" />
|
||||
<div class="text-center w-full">
|
||||
<p class="text-xs text-muted-foreground mb-1">Ticket ID</p>
|
||||
<div class="bg-background border rounded px-2 py-1 max-w-full">
|
||||
<div class="bg-muted/50 rounded-lg p-4 w-full">
|
||||
<div class="text-center space-y-3">
|
||||
<div class="flex justify-center">
|
||||
<Ticket class="w-12 h-12 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium">Ticket ID</p>
|
||||
<div class="bg-background border rounded px-2 py-1 max-w-full mt-1">
|
||||
<p class="text-xs font-mono break-all">{{ purchasedTicketId }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -239,6 +241,9 @@ onUnmounted(() => {
|
|||
</div>
|
||||
|
||||
<div class="space-y-3 w-full">
|
||||
<Button @click="() => $router.push('/my-tickets')" class="w-full">
|
||||
View My Tickets
|
||||
</Button>
|
||||
<Button variant="outline" @click="handleClose" class="w-full">
|
||||
Close
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@ const showProfileDialog = ref(false)
|
|||
const navigation = computed<NavigationItem[]>(() => [
|
||||
{ name: t('nav.home'), href: '/' },
|
||||
{ name: t('nav.events'), href: '/events' },
|
||||
{ name: 'My Tickets', href: '/my-tickets' },
|
||||
{ name: t('nav.support'), href: '/support' },
|
||||
])
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue