594 lines
22 KiB
Vue
594 lines
22 KiB
Vue
<template>
|
|
<AppLayout>
|
|
<div class="mx-auto max-w-2xl space-y-6">
|
|
<!-- Current Balance Card -->
|
|
<div class="card overflow-hidden">
|
|
<div class="bg-gradient-to-br from-primary-500 to-primary-600 px-6 py-8 text-center">
|
|
<div
|
|
class="mb-4 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-white/20 backdrop-blur-sm"
|
|
>
|
|
<svg
|
|
class="h-8 w-8 text-white"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<p class="text-sm font-medium text-primary-100">{{ t('redeem.currentBalance') }}</p>
|
|
<p class="mt-2 text-4xl font-bold text-white">
|
|
${{ user?.balance?.toFixed(2) || '0.00' }}
|
|
</p>
|
|
<p class="mt-2 text-sm text-primary-100">
|
|
{{ t('redeem.concurrency') }}: {{ user?.concurrency || 0 }} {{ t('redeem.requests') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Redeem Form -->
|
|
<div class="card">
|
|
<div class="p-6">
|
|
<form @submit.prevent="handleRedeem" class="space-y-5">
|
|
<div>
|
|
<label for="code" class="input-label">
|
|
{{ t('redeem.redeemCodeLabel') }}
|
|
</label>
|
|
<div class="relative mt-1">
|
|
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
|
|
<svg
|
|
class="h-5 w-5 text-gray-400 dark:text-dark-500"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<input
|
|
id="code"
|
|
v-model="redeemCode"
|
|
type="text"
|
|
required
|
|
:placeholder="t('redeem.redeemCodePlaceholder')"
|
|
:disabled="submitting"
|
|
class="input py-3 pl-12 text-lg"
|
|
/>
|
|
</div>
|
|
<p class="input-hint">
|
|
{{ t('redeem.redeemCodeHint') }}
|
|
</p>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
:disabled="!redeemCode || submitting"
|
|
class="btn btn-primary w-full py-3"
|
|
>
|
|
<svg
|
|
v-if="submitting"
|
|
class="-ml-1 mr-2 h-5 w-5 animate-spin"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<circle
|
|
class="opacity-25"
|
|
cx="12"
|
|
cy="12"
|
|
r="10"
|
|
stroke="currentColor"
|
|
stroke-width="4"
|
|
></circle>
|
|
<path
|
|
class="opacity-75"
|
|
fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
></path>
|
|
</svg>
|
|
<svg
|
|
v-else
|
|
class="mr-2 h-5 w-5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
{{ submitting ? t('redeem.redeeming') : t('redeem.redeemButton') }}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Success Message -->
|
|
<transition name="fade">
|
|
<div
|
|
v-if="redeemResult"
|
|
class="card border-emerald-200 bg-emerald-50 dark:border-emerald-800/50 dark:bg-emerald-900/20"
|
|
>
|
|
<div class="p-6">
|
|
<div class="flex items-start gap-4">
|
|
<div
|
|
class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-emerald-100 dark:bg-emerald-900/30"
|
|
>
|
|
<svg
|
|
class="h-5 w-5 text-emerald-600 dark:text-emerald-400"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-sm font-semibold text-emerald-800 dark:text-emerald-300">
|
|
{{ t('redeem.redeemSuccess') }}
|
|
</h3>
|
|
<div class="mt-2 text-sm text-emerald-700 dark:text-emerald-400">
|
|
<p>{{ redeemResult.message }}</p>
|
|
<div class="mt-3 space-y-1">
|
|
<p v-if="redeemResult.type === 'balance'" class="font-medium">
|
|
{{ t('redeem.added') }}: ${{ redeemResult.value.toFixed(2) }}
|
|
</p>
|
|
<p v-else-if="redeemResult.type === 'concurrency'" class="font-medium">
|
|
{{ t('redeem.added') }}: {{ redeemResult.value }}
|
|
{{ t('redeem.concurrentRequests') }}
|
|
</p>
|
|
<p v-else-if="redeemResult.type === 'subscription'" class="font-medium">
|
|
{{ t('redeem.subscriptionAssigned') }}
|
|
<span v-if="redeemResult.group_name"> - {{ redeemResult.group_name }}</span>
|
|
<span v-if="redeemResult.validity_days">
|
|
({{
|
|
t('redeem.subscriptionDays', { days: redeemResult.validity_days })
|
|
}})</span
|
|
>
|
|
</p>
|
|
<p v-if="redeemResult.new_balance !== undefined">
|
|
{{ t('redeem.newBalance') }}:
|
|
<span class="font-semibold">${{ redeemResult.new_balance.toFixed(2) }}</span>
|
|
</p>
|
|
<p v-if="redeemResult.new_concurrency !== undefined">
|
|
{{ t('redeem.newConcurrency') }}:
|
|
<span class="font-semibold"
|
|
>{{ redeemResult.new_concurrency }} {{ t('redeem.requests') }}</span
|
|
>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
|
|
<!-- Error Message -->
|
|
<transition name="fade">
|
|
<div
|
|
v-if="errorMessage"
|
|
class="card border-red-200 bg-red-50 dark:border-red-800/50 dark:bg-red-900/20"
|
|
>
|
|
<div class="p-6">
|
|
<div class="flex items-start gap-4">
|
|
<div
|
|
class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-red-100 dark:bg-red-900/30"
|
|
>
|
|
<svg
|
|
class="h-5 w-5 text-red-600 dark:text-red-400"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-sm font-semibold text-red-800 dark:text-red-300">
|
|
{{ t('redeem.redeemFailed') }}
|
|
</h3>
|
|
<p class="mt-2 text-sm text-red-700 dark:text-red-400">
|
|
{{ errorMessage }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
|
|
<!-- Information Card -->
|
|
<div
|
|
class="card border-primary-200 bg-primary-50 dark:border-primary-800/50 dark:bg-primary-900/20"
|
|
>
|
|
<div class="p-6">
|
|
<div class="flex items-start gap-4">
|
|
<div
|
|
class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-primary-100 dark:bg-primary-900/30"
|
|
>
|
|
<svg
|
|
class="h-5 w-5 text-primary-600 dark:text-primary-400"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-sm font-semibold text-primary-800 dark:text-primary-300">
|
|
{{ t('redeem.aboutCodes') }}
|
|
</h3>
|
|
<ul
|
|
class="mt-2 list-inside list-disc space-y-1 text-sm text-primary-700 dark:text-primary-400"
|
|
>
|
|
<li>{{ t('redeem.codeRule1') }}</li>
|
|
<li>{{ t('redeem.codeRule2') }}</li>
|
|
<li>
|
|
{{ t('redeem.codeRule3') }}
|
|
<span
|
|
v-if="contactInfo"
|
|
class="ml-1.5 inline-flex items-center rounded-md bg-primary-200/50 px-2 py-0.5 text-xs font-medium text-primary-800 dark:bg-primary-800/40 dark:text-primary-200"
|
|
>
|
|
{{ contactInfo }}
|
|
</span>
|
|
</li>
|
|
<li>{{ t('redeem.codeRule4') }}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Activity -->
|
|
<div class="card">
|
|
<div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
|
|
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
|
|
{{ t('redeem.recentActivity') }}
|
|
</h2>
|
|
</div>
|
|
<div class="p-6">
|
|
<!-- Loading State -->
|
|
<div v-if="loadingHistory" class="flex items-center justify-center py-8">
|
|
<svg class="h-6 w-6 animate-spin text-primary-500" fill="none" viewBox="0 0 24 24">
|
|
<circle
|
|
class="opacity-25"
|
|
cx="12"
|
|
cy="12"
|
|
r="10"
|
|
stroke="currentColor"
|
|
stroke-width="4"
|
|
></circle>
|
|
<path
|
|
class="opacity-75"
|
|
fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- History List -->
|
|
<div v-else-if="history.length > 0" class="space-y-3">
|
|
<div
|
|
v-for="item in history"
|
|
:key="item.id"
|
|
class="flex items-center justify-between rounded-xl bg-gray-50 p-4 dark:bg-dark-800"
|
|
>
|
|
<div class="flex items-center gap-4">
|
|
<div
|
|
:class="[
|
|
'flex h-10 w-10 items-center justify-center rounded-xl',
|
|
isBalanceType(item.type)
|
|
? item.value >= 0
|
|
? 'bg-emerald-100 dark:bg-emerald-900/30'
|
|
: 'bg-red-100 dark:bg-red-900/30'
|
|
: isSubscriptionType(item.type)
|
|
? 'bg-purple-100 dark:bg-purple-900/30'
|
|
: item.value >= 0
|
|
? 'bg-blue-100 dark:bg-blue-900/30'
|
|
: 'bg-orange-100 dark:bg-orange-900/30'
|
|
]"
|
|
>
|
|
<!-- 余额类型图标 -->
|
|
<svg
|
|
v-if="isBalanceType(item.type)"
|
|
:class="[
|
|
'h-5 w-5',
|
|
item.value >= 0
|
|
? 'text-emerald-600 dark:text-emerald-400'
|
|
: 'text-red-600 dark:text-red-400'
|
|
]"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
<!-- 订阅类型图标 -->
|
|
<svg
|
|
v-else-if="isSubscriptionType(item.type)"
|
|
class="h-5 w-5 text-purple-600 dark:text-purple-400"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z"
|
|
/>
|
|
</svg>
|
|
<!-- 并发类型图标 -->
|
|
<svg
|
|
v-else
|
|
:class="[
|
|
'h-5 w-5',
|
|
item.value >= 0
|
|
? 'text-blue-600 dark:text-blue-400'
|
|
: 'text-orange-600 dark:text-orange-400'
|
|
]"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-gray-900 dark:text-white">
|
|
{{ getHistoryItemTitle(item) }}
|
|
</p>
|
|
<p class="text-xs text-gray-500 dark:text-dark-400">
|
|
{{ formatDateTime(item.used_at) }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<p
|
|
:class="[
|
|
'text-sm font-semibold',
|
|
isBalanceType(item.type)
|
|
? item.value >= 0
|
|
? 'text-emerald-600 dark:text-emerald-400'
|
|
: 'text-red-600 dark:text-red-400'
|
|
: isSubscriptionType(item.type)
|
|
? 'text-purple-600 dark:text-purple-400'
|
|
: item.value >= 0
|
|
? 'text-blue-600 dark:text-blue-400'
|
|
: 'text-orange-600 dark:text-orange-400'
|
|
]"
|
|
>
|
|
{{ formatHistoryValue(item) }}
|
|
</p>
|
|
<p
|
|
v-if="!isAdminAdjustment(item.type)"
|
|
class="font-mono text-xs text-gray-400 dark:text-dark-500"
|
|
>
|
|
{{ item.code.slice(0, 8) }}...
|
|
</p>
|
|
<p v-else class="text-xs text-gray-400 dark:text-dark-500">
|
|
{{ t('redeem.adminAdjustment') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div v-else class="empty-state py-8">
|
|
<div
|
|
class="mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-gray-100 dark:bg-dark-800"
|
|
>
|
|
<svg
|
|
class="h-8 w-8 text-gray-400 dark:text-dark-500"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<p class="text-sm text-gray-500 dark:text-dark-400">
|
|
{{ t('redeem.historyWillAppear') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useAuthStore } from '@/stores/auth'
|
|
import { useAppStore } from '@/stores/app'
|
|
import { useSubscriptionStore } from '@/stores/subscriptions'
|
|
import { redeemAPI, authAPI, type RedeemHistoryItem } from '@/api'
|
|
import AppLayout from '@/components/layout/AppLayout.vue'
|
|
import { formatDateTime } from '@/utils/format'
|
|
|
|
const { t } = useI18n()
|
|
const authStore = useAuthStore()
|
|
const appStore = useAppStore()
|
|
const subscriptionStore = useSubscriptionStore()
|
|
|
|
const user = computed(() => authStore.user)
|
|
|
|
const redeemCode = ref('')
|
|
const submitting = ref(false)
|
|
const redeemResult = ref<{
|
|
message: string
|
|
type: string
|
|
value: number
|
|
new_balance?: number
|
|
new_concurrency?: number
|
|
group_name?: string
|
|
validity_days?: number
|
|
} | null>(null)
|
|
const errorMessage = ref('')
|
|
|
|
// History data
|
|
const history = ref<RedeemHistoryItem[]>([])
|
|
const loadingHistory = ref(false)
|
|
const contactInfo = ref('')
|
|
|
|
// Helper functions for history display
|
|
const isBalanceType = (type: string) => {
|
|
return type === 'balance' || type === 'admin_balance'
|
|
}
|
|
|
|
const isSubscriptionType = (type: string) => {
|
|
return type === 'subscription'
|
|
}
|
|
|
|
const isAdminAdjustment = (type: string) => {
|
|
return type === 'admin_balance' || type === 'admin_concurrency'
|
|
}
|
|
|
|
const getHistoryItemTitle = (item: RedeemHistoryItem) => {
|
|
if (item.type === 'balance') {
|
|
return t('redeem.balanceAddedRedeem')
|
|
} else if (item.type === 'admin_balance') {
|
|
return item.value >= 0 ? t('redeem.balanceAddedAdmin') : t('redeem.balanceDeductedAdmin')
|
|
} else if (item.type === 'concurrency') {
|
|
return t('redeem.concurrencyAddedRedeem')
|
|
} else if (item.type === 'admin_concurrency') {
|
|
return item.value >= 0 ? t('redeem.concurrencyAddedAdmin') : t('redeem.concurrencyReducedAdmin')
|
|
} else if (item.type === 'subscription') {
|
|
return t('redeem.subscriptionAssigned')
|
|
}
|
|
return 'Unknown'
|
|
}
|
|
|
|
const formatHistoryValue = (item: RedeemHistoryItem) => {
|
|
if (isBalanceType(item.type)) {
|
|
const sign = item.value >= 0 ? '+' : ''
|
|
return `${sign}$${item.value.toFixed(2)}`
|
|
} else if (isSubscriptionType(item.type)) {
|
|
// 订阅类型显示有效天数和分组名称
|
|
const days = item.validity_days || Math.round(item.value)
|
|
const groupName = item.group?.name || ''
|
|
return groupName ? `${days}${t('redeem.days')} - ${groupName}` : `${days}${t('redeem.days')}`
|
|
} else {
|
|
const sign = item.value >= 0 ? '+' : ''
|
|
return `${sign}${item.value} ${t('redeem.requests')}`
|
|
}
|
|
}
|
|
|
|
const fetchHistory = async () => {
|
|
loadingHistory.value = true
|
|
try {
|
|
history.value = await redeemAPI.getHistory()
|
|
} catch (error) {
|
|
console.error('Failed to fetch history:', error)
|
|
} finally {
|
|
loadingHistory.value = false
|
|
}
|
|
}
|
|
|
|
const handleRedeem = async () => {
|
|
if (!redeemCode.value.trim()) {
|
|
return
|
|
}
|
|
|
|
submitting.value = true
|
|
errorMessage.value = ''
|
|
redeemResult.value = null
|
|
|
|
try {
|
|
const result = await redeemAPI.redeem(redeemCode.value.trim())
|
|
|
|
redeemResult.value = result
|
|
|
|
// Refresh user data to get updated balance/concurrency
|
|
await authStore.refreshUser()
|
|
|
|
// If subscription type, immediately refresh subscription status
|
|
if (result.type === 'subscription') {
|
|
await subscriptionStore.fetchActiveSubscriptions(true) // force refresh
|
|
}
|
|
|
|
// Clear the input
|
|
redeemCode.value = ''
|
|
|
|
// Refresh history
|
|
await fetchHistory()
|
|
|
|
// Show success toast
|
|
appStore.showSuccess(t('redeem.codeRedeemSuccess'))
|
|
} catch (error: any) {
|
|
errorMessage.value = error.response?.data?.detail || t('redeem.failedToRedeem')
|
|
|
|
appStore.showError(t('redeem.redeemFailed'))
|
|
} finally {
|
|
submitting.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
fetchHistory()
|
|
try {
|
|
const settings = await authAPI.getPublicSettings()
|
|
contactInfo.value = settings.contact_info || ''
|
|
} catch (error) {
|
|
console.error('Failed to load contact info:', error)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-8px);
|
|
}
|
|
</style>
|