oadmin/sub2api
1
0
Fork 0
Code Issues Pull Requests 1 Actions 1 Packages Projects Releases Wiki Activity

First commit

Browse Source
This commit is contained in:
shaw
2025-12-18 13:50:39 +08:00
parent 569f4882e5
commit 642842c29e
218 changed files with 86902 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

453
frontend/src/views/user/RedeemView.vue Normal file
View File

@@ -0,0 +1,453 @@
<template>
<AppLayout>
<div class="max-w-2xl mx-auto 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="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-white/20 backdrop-blur-sm mb-4">
<svg class="w-8 h-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="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<svg class="w-5 h-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 pl-12 text-lg py-3"
/>
</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="animate-spin -ml-1 mr-2 h-5 w-5"
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="w-5 h-5 mr-2" 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 dark:border-emerald-800/50 bg-emerald-50 dark:bg-emerald-900/20"
>
<div class="p-6">
<div class="flex items-start gap-4">
<div class="flex-shrink-0 w-10 h-10 rounded-xl bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center">
<svg class="w-5 h-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 dark:border-red-800/50 bg-red-50 dark:bg-red-900/20"
>
<div class="p-6">
<div class="flex items-start gap-4">
<div class="flex-shrink-0 w-10 h-10 rounded-xl bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
<svg class="w-5 h-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 dark:border-primary-800/50 bg-primary-50 dark:bg-primary-900/20">
<div class="p-6">
<div class="flex items-start gap-4">
<div class="flex-shrink-0 w-10 h-10 rounded-xl bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center">
<svg class="w-5 h-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 text-sm text-primary-700 dark:text-primary-400 space-y-1 list-disc list-inside">
<li>{{ t('redeem.codeRule1') }}</li>
<li>{{ t('redeem.codeRule2') }}</li>
<li>
{{ t('redeem.codeRule3') }}
<span v-if="contactInfo" class="inline-flex items-center ml-1.5 px-2 py-0.5 rounded-md bg-primary-200/50 dark:bg-primary-800/40 text-primary-800 dark:text-primary-200 font-medium text-xs">
{{ contactInfo }}
</span>
</li>
<li>{{ t('redeem.codeRule4') }}</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Recent Activity -->
<div class="card">
<div class="px-6 py-4 border-b border-gray-100 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="animate-spin h-6 w-6 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 p-4 rounded-xl bg-gray-50 dark:bg-dark-800"
>
<div class="flex items-center gap-4">
<div
:class="[
'w-10 h-10 rounded-xl flex items-center justify-center',
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="[
'w-5 h-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="w-5 h-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="[
'w-5 h-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">
{{ formatDate(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="text-xs text-gray-400 dark:text-dark-500 font-mono">
{{ 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="w-16 h-16 mb-4 rounded-2xl bg-gray-100 dark:bg-dark-800 flex items-center justify-center">
<svg class="w-8 h-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 { redeemAPI, authAPI, type RedeemHistoryItem } from '@/api'
import AppLayout from '@/components/layout/AppLayout.vue'
const { t } = useI18n()
const authStore = useAuthStore()
const appStore = useAppStore()
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('')
const formatDate = (dateString: string) => {
if (!dateString) return '-'
const date = new Date(dateString)
return date.toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
})
}
// Helper functions for history display
const isBalanceType = (type: string) => {
return type === 'balance' || type === 'admin_balance'
}
const isConcurrencyType = (type: string) => {
return type === 'concurrency' || type === 'admin_concurrency'
}
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()
// 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>