leiyun
/
pc_nuxt
1
0
Forkuj 0
Kod Zgłoszenia 0 Oczekujące zmiany 0 Wydania 0 Wiki Aktywność
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
9 Commity
1 Gałąź
586 KiB
 
 
 
 
Drzewo: f1816c090a
Gałęzie Tagi
${ item.name }
Utwórz gałąź ${ searchTerm }
z 'f1816c090a'
${ noResults }
pc_nuxt/app/pages/bill.vue

602 wiersze
27 KiB
Czysty Wina Historia 

  1. <template>

  2.   <div class="bill-page">

  3.     <AppHero

  4.       kicker="POINTS LEDGER"

  5.       title="点数账单"

  6.       desc="每一次点数变化都清晰可查，充值、消费与奖励记录一目了然。"

  7.     >

  8.       <template #aside>

  9.         <div

  10.           class="relative w-full overflow-hidden rounded-[28px] bg-gradient-to-br from-[var(--c-0758c9)] via-[var(--c-0b8cff)] to-[var(--c-55c8ff)] p-5 text-white shadow-[0_22px_48px_var(--sh-11-112-220-240)] lg:w-[360px] lg:p-6"

  11.           aria-label="点数余额"

  12.         >

  13.           <div class="pointer-events-none absolute -right-10 -top-14 size-40 rounded-full border border-white/15 bg-white/10" />

  14.           <div class="pointer-events-none absolute -bottom-20 -left-10 size-44 rounded-full bg-[var(--c-004da8)]/20 blur-xl" />

  15. 

  16.           <div class="relative">

  17.             <div class="flex items-center justify-between gap-4">

  18.               <div class="flex items-center gap-2.5">

  19.                 <span class="flex size-9 items-center justify-center rounded-xl bg-white/15">

  20.                   <UIcon name="i-lucide-wallet-cards" class="size-4.5" />

  21.                 </span>

  22.                 <div>

  23.                   <div class="text-[11px] font-bold tracking-[0.12em] text-white/65">AVAILABLE POINTS</div>

  24.                   <div class="mt-0.5 text-xs font-bold text-white/90">当前可用点数</div>

  25.                 </div>

  26.               </div>

  27.               <span class="flex items-center gap-1.5 rounded-full bg-white/12 px-2.5 py-1 text-[11px] font-bold text-white/80">

  28.                 <span class="size-1.5 rounded-full bg-[var(--c-8affd8)]" />

  29.                 多端同步

  30.               </span>

  31.             </div>

  32. 

  33.             <div class="mt-6 flex items-end justify-between gap-5">

  34.               <div class="flex min-w-0 items-end">

  35.                 <span class="truncate text-[40px] font-extrabold leading-none tracking-tight tabular-nums lg:text-[44px]">

  36.                   {{ balanceText }}

  37.                 </span>

  38.                 <span v-if="balanceUnit" class="mb-1 ml-2 text-sm font-bold text-white/70">{{ balanceUnit }}</span>

  39.               </div>

  40. 

  41.               <NuxtLink

  42.                 v-if="isLogin"

  43.                 to="/recharge"

  44.                 class="inline-flex h-10 shrink-0 items-center gap-1.5 rounded-full bg-[var(--c-ffffff)] px-4 text-sm font-extrabold text-[var(--c-086fd5)] shadow-[0_8px_18px_var(--sh-0-65-140-160)] transition-colors hover:bg-[var(--c-f5fbff)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-e8eef7)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--c-0b8cff)] motion-reduce:transition-none"

  45.               >

  46.                 去充值

  47.                 <UIcon name="i-lucide-arrow-up-right" class="size-4" />

  48.               </NuxtLink>

  49.               <button

  50.                 v-else

  51.                 type="button"

  52.                 class="inline-flex h-10 shrink-0 cursor-pointer items-center rounded-full bg-[var(--c-ffffff)] px-4 text-sm font-extrabold text-[var(--c-086fd5)] shadow-[0_8px_18px_var(--sh-0-65-140-160)] transition-colors hover:bg-[var(--c-f5fbff)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-e8eef7)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--c-0b8cff)] motion-reduce:transition-none"

  53.                 @click="showLogin = true"

  54.               >

  55.                 登录查看

  56.               </button>

  57.             </div>

  58. 

  59.             <div class="mt-6 flex items-center gap-2 border-t border-white/15 pt-4 text-[11px] font-medium text-white/70">

  60.               <UIcon name="i-lucide-shield-check" class="size-3.5" />

  61.               账目实时同步，点数长期有效

  62.             </div>

  63.           </div>

  64.         </div>

  65.       </template>

  66.     </AppHero>

  67. 

  68.     <main class="mx-auto max-w-7xl px-4 py-7 sm:px-6 lg:px-8 lg:py-10">

  69.       <section

  70.         v-if="!isLogin"

  71.         class="relative overflow-hidden rounded-3xl border border-[var(--c-e7eef7)] bg-[var(--c-ffffff)] px-6 py-14 text-center shadow-[0_16px_40px_var(--sh-33-68-112-60)] sm:py-18"

  72.         aria-labelledby="bill-login-title"

  73.       >

  74.         <div class="pointer-events-none absolute left-1/2 top-0 h-36 w-72 -translate-x-1/2 rounded-full bg-[var(--c-eaf6ff)] blur-3xl" />

  75.         <div class="relative">

  76.           <div class="mx-auto flex size-16 items-center justify-center rounded-2xl bg-[var(--c-eef7ff)] text-[var(--c-0b8cff)] ring-8 ring-[var(--c-f7fbff)]">

  77.             <UIcon name="i-lucide-receipt-text" class="size-7" />

  78.           </div>

  79.           <h2 id="bill-login-title" class="mt-6 text-xl font-extrabold text-[var(--c-172033)]">登录后查看你的点数账单</h2>

  80.           <p class="mx-auto mt-2 max-w-md text-sm leading-6 text-[var(--c-66758a)]">

  81.             登录后即可同步各端余额，随时核对每一笔充值、创作消费与奖励记录。

  82.           </p>

  83.           <div class="mt-5 flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-xs font-bold text-[var(--c-7b8797)]">

  84.             <span class="inline-flex items-center gap-1.5">

  85.               <UIcon name="i-lucide-check" class="size-3.5 text-[var(--c-17a65a)]" />

  86.               多端记录同步

  87.             </span>

  88.             <span class="inline-flex items-center gap-1.5">

  89.               <UIcon name="i-lucide-check" class="size-3.5 text-[var(--c-17a65a)]" />

  90.               点数去向清晰

  91.             </span>

  92.             <span class="inline-flex items-center gap-1.5">

  93.               <UIcon name="i-lucide-check" class="size-3.5 text-[var(--c-17a65a)]" />

  94.               变动余额可追溯

  95.             </span>

  96.           </div>

  97.           <button

  98.             type="button"

  99.             class="mt-7 inline-flex h-11 cursor-pointer items-center justify-center gap-2 rounded-full bg-[var(--c-0b8cff)] px-7 text-sm font-extrabold text-white shadow-[0_10px_22px_var(--sh-11-140-255-240)] transition-colors hover:bg-[var(--c-087dde)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)] focus-visible:ring-offset-2 motion-reduce:transition-none"

  100.             @click="showLogin = true"

  101.           >

  102.             <UIcon name="i-lucide-log-in" class="size-4" />

  103.             立即登录

  104.           </button>

  105.         </div>

  106.       </section>

  107. 

  108.       <template v-else>

  109.         <section class="grid gap-3 sm:grid-cols-3" aria-label="点数概览">

  110.           <article

  111.             v-for="item in summaryStats"

  112.             :key="item.key"

  113.             class="relative overflow-hidden rounded-2xl border border-[var(--c-e8eef7)] bg-[var(--c-ffffff)] p-4 shadow-[0_8px_24px_var(--sh-34-68-112-45)] sm:p-5"

  114.           >

  115.             <div class="flex items-start justify-between gap-4">

  116.               <div>

  117.                 <p class="text-xs font-bold text-[var(--c-7b8797)]">{{ item.label }}</p>

  118.                 <p class="mt-2 text-2xl font-extrabold tracking-tight tabular-nums" :class="item.valueTone">

  119.                   {{ hasLoaded ? item.value : '—' }}

  120.                 </p>

  121.                 <p class="mt-1 text-[11px] text-[var(--c-9aa5b5)]">{{ item.helper }}</p>

  122.               </div>

  123.               <span class="flex size-10 shrink-0 items-center justify-center rounded-xl" :class="item.iconTone">

  124.                 <UIcon :name="item.icon" class="size-4.5" />

  125.               </span>

  126.             </div>

  127.           </article>

  128.         </section>

  129. 

  130.         <section

  131.           class="mt-6 overflow-hidden rounded-3xl border border-[var(--c-e7eef7)] bg-[var(--c-ffffff)] shadow-[0_16px_40px_var(--sh-34-68-112-60)]"

  132.           aria-labelledby="bill-list-title"

  133.           :aria-busy="loading"

  134.         >

  135.           <header class="border-b border-[var(--c-edf2f7)] px-4 pb-4 pt-5 sm:px-6 sm:pb-5 sm:pt-6">

  136.             <div class="flex flex-wrap items-end justify-between gap-3">

  137.               <div>

  138.                 <div class="flex items-center gap-2">

  139.                   <h2 id="bill-list-title" class="text-lg font-extrabold text-[var(--c-172033)] sm:text-xl">流水明细</h2>

  140.                   <span class="rounded-full bg-[var(--c-f1f5fa)] px-2.5 py-1 text-[11px] font-bold text-[var(--c-7b8797)]">

  141.                     {{ total }} 条

  142.                   </span>

  143.                 </div>

  144.                 <p class="mt-1.5 text-xs text-[var(--c-8a97a8)]">按时间倒序展示，最近的点数变动排在最前</p>

  145.               </div>

  146.               <div v-if="list.length" class="text-xs font-medium text-[var(--c-9aa5b5)]">

  147.                 已显示 {{ list.length }} 条

  148.               </div>

  149.             </div>

  150. 

  151.             <div class="bill-tabs -mx-1 mt-5 overflow-x-auto px-1 pb-1" role="tablist" aria-label="账单类型">

  152.               <div class="grid auto-cols-[minmax(104px,1fr)] grid-flow-col gap-2 sm:grid-flow-row sm:grid-cols-5">

  153.                 <button

  154.                   v-for="item in tabs"

  155.                   :key="item.key"

  156.                   type="button"

  157.                   role="tab"

  158.                   class="flex h-11 cursor-pointer items-center justify-center gap-2 rounded-xl px-3 text-sm font-bold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)] focus-visible:ring-offset-2 disabled:cursor-wait motion-reduce:transition-none"

  159.                   :class="activeTab === item.key

  160.                     ? 'bg-[var(--c-0b8cff)] text-white shadow-[0_8px_18px_var(--sh-11-140-255-200)]'

  161.                     : 'bg-[var(--c-f6f9fd)] text-[var(--c-66758a)] hover:bg-[var(--c-eef7ff)] hover:text-[var(--c-0b8cff)]'"

  162.                   :aria-selected="activeTab === item.key"

  163.                   :disabled="loading"

  164.                   @click="changeTab(item.key)"

  165.                 >

  166.                   <UIcon :name="item.icon" class="size-4 shrink-0" />

  167.                   <span>{{ item.name }}</span>

  168.                   <span

  169.                     class="min-w-5 rounded-full px-1.5 py-0.5 text-[10px] font-extrabold tabular-nums"

  170.                     :class="activeTab === item.key ? 'bg-white/18 text-white' : 'bg-[var(--c-ffffff)] text-[var(--c-8a97a8)]'"

  171.                   >

  172.                     {{ tabCounts[item.key] || 0 }}

  173.                   </span>

  174.                 </button>

  175.               </div>

  176.             </div>

  177.           </header>

  178. 

  179.           <div

  180.             v-if="initialLoading"

  181.             class="divide-y divide-[var(--c-edf2f7)]"

  182.             role="status"

  183.             aria-label="正在加载账单"

  184.           >

  185.             <div v-for="i in 5" :key="i" class="flex items-center gap-4 px-4 py-5 sm:px-6">

  186.               <div class="size-11 shrink-0 animate-pulse rounded-2xl bg-[var(--c-edf2f7)] motion-reduce:animate-none" />

  187.               <div class="min-w-0 flex-1">

  188.                 <div class="h-3.5 w-36 animate-pulse rounded-full bg-[var(--c-edf2f7)] motion-reduce:animate-none" />

  189.                 <div class="mt-3 h-3 w-56 max-w-full animate-pulse rounded-full bg-[var(--c-f1f5fa)] motion-reduce:animate-none" />

  190.               </div>

  191.               <div class="hidden w-20 sm:block">

  192.                 <div class="ml-auto h-4 w-14 animate-pulse rounded-full bg-[var(--c-edf2f7)] motion-reduce:animate-none" />

  193.                 <div class="ml-auto mt-3 h-3 w-20 animate-pulse rounded-full bg-[var(--c-f1f5fa)] motion-reduce:animate-none" />

  194.               </div>

  195.               <span class="sr-only">加载中</span>

  196.             </div>

  197.           </div>

  198. 

  199.           <div v-else-if="loadError && !list.length" class="px-5 py-16 text-center sm:py-20" role="alert">

  200.             <div class="mx-auto flex size-14 items-center justify-center rounded-2xl bg-[var(--c-fff3f0)] text-[var(--c-e85f1c)] ring-8 ring-[var(--c-fff9f7)]">

  201.               <UIcon name="i-lucide-circle-alert" class="size-6" />

  202.             </div>

  203.             <h3 class="mt-6 text-base font-extrabold text-[var(--c-172033)]">账单加载失败</h3>

  204.             <p class="mx-auto mt-2 max-w-sm text-sm leading-6 text-[var(--c-8a97a8)]">{{ loadError }}</p>

  205.             <button

  206.               type="button"

  207.               class="mt-6 inline-flex h-10 cursor-pointer items-center gap-1.5 rounded-full bg-[var(--c-eef7ff)] px-5 text-sm font-bold text-[var(--c-0b8cff)] transition-colors hover:bg-[var(--c-e1f1ff)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)] focus-visible:ring-offset-2 motion-reduce:transition-none"

  208.               @click="fetchList(true)"

  209.             >

  210.               <UIcon name="i-lucide-refresh-cw" class="size-3.5" />

  211.               重新加载

  212.             </button>

  213.           </div>

  214. 

  215.           <div v-else-if="list.length">

  216.             <div class="hidden grid-cols-[minmax(0,1fr)_150px] border-b border-[var(--c-edf2f7)] bg-[var(--c-fbfcfe)] px-6 py-2.5 text-[11px] font-bold text-[var(--c-9aa5b5)] sm:grid">

  217.               <span>记录</span>

  218.               <span class="text-right">点数变动</span>

  219.             </div>

  220. 

  221.             <div class="divide-y divide-[var(--c-edf2f7)]">

  222.               <article

  223.                 v-for="item in list"

  224.                 :key="item.id"

  225.                 class="grid gap-4 px-4 py-5 transition-colors hover:bg-[var(--c-fbfdff)] sm:grid-cols-[minmax(0,1fr)_150px] sm:items-center sm:px-6 motion-reduce:transition-none"

  226.               >

  227.                 <div class="flex min-w-0 items-start gap-3.5">

  228.                   <span

  229.                     class="flex size-11 shrink-0 items-center justify-center rounded-2xl ring-1 ring-inset"

  230.                     :class="typeTone(item.type)"

  231.                     aria-hidden="true"

  232.                   >

  233.                     <UIcon :name="getTypeIcon(item.type)" class="size-4.5" />

  234.                   </span>

  235. 

  236.                   <div class="min-w-0 flex-1">

  237.                     <div class="flex min-w-0 flex-wrap items-center gap-2">

  238.                       <h3 class="min-w-0 truncate text-sm font-extrabold text-[var(--c-172033)] sm:text-[15px]">

  239.                         {{ item.title || '点数变动' }}

  240.                       </h3>

  241.                       <span

  242.                         class="shrink-0 rounded-full px-2 py-0.5 text-[10px] font-extrabold"

  243.                         :class="typeBadgeTone(item.type)"

  244.                       >

  245.                         {{ item.type_text || '其他' }}

  246.                       </span>

  247.                     </div>

  248.                     <p v-if="item.desc" class="mt-1.5 line-clamp-2 text-xs leading-5 text-[var(--c-66758a)] sm:truncate">

  249.                       {{ item.desc }}

  250.                     </p>

  251.                     <div class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-[var(--c-9aa5b5)]">

  252.                       <span class="inline-flex items-center gap-1">

  253.                         <UIcon name="i-lucide-clock-3" class="size-3" />

  254.                         {{ item.time || '时间未知' }}

  255.                       </span>

  256.                       <!-- 充值流水带上订单号，方便对账 / 客服核单，点击可复制 -->

  257.                       <button

  258.                         v-if="orderNo(item)"

  259.                         type="button"

  260.                         class="inline-flex max-w-full cursor-pointer items-center gap-1 transition-colors hover:text-[var(--c-0b8cff)]"

  261.                         :title="`点击复制订单号 ${orderNo(item)}`"

  262.                         @click="copyOrderNo(orderNo(item))"

  263.                       >

  264.                         <UIcon name="i-lucide-receipt" class="size-3 shrink-0" />

  265.                         <span class="truncate tabular-nums">订单号 {{ orderNo(item) }}</span>

  266.                         <UIcon name="i-lucide-copy" class="size-3 shrink-0" />

  267.                       </button>

  268.                       <span class="sm:hidden">变动后 {{ formatNumber(item.balance_after) }} 点</span>

  269.                     </div>

  270.                   </div>

  271.                 </div>

  272. 

  273.                 <div class="flex items-center justify-between border-t border-dashed border-[var(--c-e8eef7)] pt-3 sm:block sm:border-0 sm:pt-0 sm:text-right">

  274.                   <span class="text-[11px] font-medium text-[var(--c-9aa5b5)] sm:hidden">点数变动</span>

  275.                   <div>

  276.                     <div class="text-lg font-extrabold tabular-nums" :class="amountTone(item.amount)">

  277.                       {{ formatAmount(item.amount) }}

  278.                     </div>

  279.                     <div class="mt-1 hidden text-[11px] text-[var(--c-9aa5b5)] sm:block">

  280.                       变动后 {{ formatNumber(item.balance_after) }} 点

  281.                     </div>

  282.                   </div>

  283.                 </div>

  284.               </article>

  285.             </div>

  286.           </div>

  287. 

  288.           <div v-else class="px-5 py-16 text-center sm:py-20">

  289.             <div class="mx-auto flex size-14 items-center justify-center rounded-2xl bg-[var(--c-eef7ff)] text-[var(--c-0b8cff)] ring-8 ring-[var(--c-f8fbff)]">

  290.               <UIcon :name="activeTab === 'all' ? 'i-lucide-receipt-text' : 'i-lucide-list-filter'" class="size-6" />

  291.             </div>

  292.             <h3 class="mt-6 text-base font-extrabold text-[var(--c-172033)]">

  293.               {{ activeTab === 'all' ? '还没有点数记录' : `暂无${activeTabName}` }}

  294.             </h3>

  295.             <p class="mx-auto mt-2 max-w-sm text-sm leading-6 text-[var(--c-8a97a8)]">

  296.               {{ activeTab === 'all' ? '充值或使用 AI 工具后，点数变化会自动记录在这里。' : '当前分类暂时没有记录，可以看看其他类型的流水。' }}

  297.             </p>

  298.             <NuxtLink

  299.               v-if="activeTab === 'all'"

  300.               to="/recharge"

  301.               class="mt-6 inline-flex h-10 items-center gap-1.5 rounded-full bg-[var(--c-eef7ff)] px-5 text-sm font-bold text-[var(--c-0b8cff)] transition-colors hover:bg-[var(--c-e1f1ff)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)] focus-visible:ring-offset-2 motion-reduce:transition-none"

  302.             >

  303.               去充值

  304.               <UIcon name="i-lucide-arrow-right" class="size-3.5" />

  305.             </NuxtLink>

  306.             <button

  307.               v-else

  308.               type="button"

  309.               class="mt-6 inline-flex h-10 cursor-pointer items-center rounded-full bg-[var(--c-eef7ff)] px-5 text-sm font-bold text-[var(--c-0b8cff)] transition-colors hover:bg-[var(--c-e1f1ff)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)] focus-visible:ring-offset-2 motion-reduce:transition-none"

  310.               @click="changeTab('all')"

  311.             >

  312.               查看全部记录

  313.             </button>

  314.           </div>

  315. 

  316.           <footer v-if="list.length" class="border-t border-[var(--c-edf2f7)] px-4 py-4 sm:px-6">

  317.             <div v-if="loading" class="flex items-center justify-center gap-2 py-1 text-xs font-bold text-[var(--c-8a97a8)]" role="status">

  318.               <span class="size-4 animate-spin rounded-full border-2 border-[var(--c-0b8cff)]/20 border-t-[var(--c-0b8cff)] motion-reduce:animate-none" />

  319.               正在加载更多

  320.             </div>

  321.             <button

  322.               v-else-if="hasMore"

  323.               type="button"

  324.               class="mx-auto flex h-10 cursor-pointer items-center gap-1.5 rounded-full bg-[var(--c-eef7ff)] px-6 text-sm font-bold text-[var(--c-0b8cff)] transition-colors hover:bg-[var(--c-e1f1ff)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)] focus-visible:ring-offset-2 motion-reduce:transition-none"

  325.               @click="loadMore"

  326.             >

  327.               加载更多

  328.               <UIcon name="i-lucide-chevron-down" class="size-3.5" />

  329.             </button>

  330.             <div v-else class="flex items-center justify-center gap-3 py-1 text-[11px] text-[var(--c-a0aabb)]">

  331.               <span class="h-px w-8 bg-[var(--c-e6edf5)]" />

  332.               已经到底了

  333.               <span class="h-px w-8 bg-[var(--c-e6edf5)]" />

  334.             </div>

  335.           </footer>

  336.         </section>

  337. 

  338.         <div class="mt-4 flex items-start gap-2 rounded-2xl bg-[var(--c-eef7ff)]/70 px-4 py-3 text-xs leading-5 text-[var(--c-66758a)]">

  339.           <UIcon name="i-lucide-info" class="mt-0.5 size-3.5 shrink-0 text-[var(--c-0b8cff)]" />

  340.           <p>点数账单由系统自动生成。如对某条记录有疑问，请保留记录时间和变动后余额，以便快速核对。</p>

  341.         </div>

  342.       </template>

  343.     </main>

  344.   </div>

  345. </template>

  346. 

  347. <script setup>

  348. useSeoMeta({

  349.   title: '点数账单 - AI在线',

  350.   description: '查看点数充值、消费、奖励与余额变动明细',

  351. })

  352. 

  353. const { userInfo, isLogin, showLogin } = useUser()

  354. const { post } = useApi()

  355. const toast = useToast()

  356. 

  357. const tabs = [

  358.   { key: 'all', name: '全部', icon: 'i-lucide-list' },

  359.   { key: 'recharge', name: '充值', icon: 'i-lucide-wallet-cards' },

  360.   { key: 'consume', name: '消费', icon: 'i-lucide-sparkles' },

  361.   { key: 'reward', name: '奖励', icon: 'i-lucide-gift' },

  362.   { key: 'other', name: '其他', icon: 'i-lucide-ellipsis' },

  363. ]

  364. 

  365. const activeTab = ref('all')

  366. const list = ref([])

  367. const page = ref(1)

  368. const pageSize = 10

  369. const total = ref(0)

  370. const loading = ref(false)

  371. const loadError = ref('')

  372. const hasLoaded = ref(false)

  373. const balance = ref({})

  374. const summary = ref({

  375.   recharge: 0,

  376.   consume: 0,

  377.   reward: 0,

  378.   refund: 0,

  379.   adjust: 0,

  380.   counts: { all: 0, recharge: 0, consume: 0, reward: 0, other: 0 },

  381. })

  382. 

  383. const numberFormatter = new Intl.NumberFormat('zh-CN')

  384. 

  385. const balanceText = computed(() => {

  386.   if (!isLogin.value) return '—'

  387.   const points = balance.value.points ?? balance.value.point_balance ?? userInfo.value.balance

  388.   return Number(points) < 0 ? '不限' : formatNumber(points)

  389. })

  390. const balanceUnit = computed(() => (balanceText.value === '不限' || balanceText.value === '—' ? '' : '点'))

  391. const tabCounts = computed(() => summary.value.counts || {})

  392. const hasMore = computed(() => list.value.length < total.value)

  393. const initialLoading = computed(() => loading.value && !list.value.length)

  394. const activeTabName = computed(() => {

  395.   const item = tabs.find(tab => tab.key === activeTab.value)

  396.   return item ? `${item.name}记录` : '全部记录'

  397. })

  398. const summaryStats = computed(() => [

  399.   {

  400.     key: 'recharge',

  401.     label: '累计充值',

  402.     helper: '历史充值获得',

  403.     value: formatSigned(summary.value.recharge, true),

  404.     icon: 'i-lucide-circle-plus',

  405.     iconTone: 'bg-[var(--c-eef7ff)] text-[var(--c-0b8cff)]',

  406.     valueTone: 'text-[var(--c-0879dc)]',

  407.   },

  408.   {

  409.     key: 'consume',

  410.     label: '累计消费',

  411.     helper: '创作累计使用',

  412.     value: formatSigned(summary.value.consume ? -Math.abs(summary.value.consume) : 0),

  413.     icon: 'i-lucide-sparkles',

  414.     iconTone: 'bg-[var(--c-fff4ec)] text-[var(--c-e85f1c)]',

  415.     valueTone: 'text-[var(--c-e85f1c)]',

  416.   },

  417.   {

  418.     key: 'reward',

  419.     label: '累计奖励',

  420.     helper: '活动与任务获得',

  421.     value: formatSigned(summary.value.reward, true),

  422.     icon: 'i-lucide-gift',

  423.     iconTone: 'bg-[var(--c-edfdf4)] text-[var(--c-159a54)]',

  424.     valueTone: 'text-[var(--c-159a54)]',

  425.   },

  426. ])

  427. 

  428. async function fetchList(reset = false) {

  429.   if (!isLogin.value || loading.value) return false

  430.   if (reset) {

  431.     page.value = 1

  432.     list.value = []

  433.     total.value = 0

  434.   }

  435.   loading.value = true

  436.   loadError.value = ''

  437. 

  438.   try {

  439.     const res = await post('/point/loglist', {

  440.       type: activeTab.value,

  441.       page_no: page.value,

  442.       page_size: pageSize,

  443.     })

  444.     const rows = res.list || []

  445.     const data = res.data || {}

  446.     list.value = reset ? rows : list.value.concat(rows)

  447.     total.value = Number(data.total ?? rows.length)

  448.     setBalance(data.balance || {})

  449.     summary.value = normalizeSummary(data.summary || {})

  450.     hasLoaded.value = true

  451.     return true

  452.   } catch (e) {

  453.     loadError.value = e.message || '网络开小差了，请稍后重试。'

  454.     toast.add({ title: loadError.value, color: 'error' })

  455.     return false

  456.   } finally {

  457.     loading.value = false

  458.   }

  459. }

  460. 

  461. function normalizeSummary(data = {}) {

  462.   const counts = Object.assign(

  463.     { all: 0, recharge: 0, consume: 0, reward: 0, other: 0 },

  464.     data.counts || {},

  465.   )

  466.   Object.keys(counts).forEach((key) => {

  467.     counts[key] = Number(counts[key] || 0)

  468.   })

  469.   return {

  470.     recharge: Number(data.recharge || 0),

  471.     consume: Number(data.consume || 0),

  472.     reward: Number(data.reward || 0),

  473.     refund: Number(data.refund || 0),

  474.     adjust: Number(data.adjust || 0),

  475.     counts,

  476.   }

  477. }

  478. 

  479. function setBalance(data = {}) {

  480.   balance.value = data

  481.   const points = data.points ?? data.point_balance

  482.   if (points !== undefined) userInfo.value.balance = Number(points) || 0

  483. }

  484. 

  485. function changeTab(key) {

  486.   if (activeTab.value === key || loading.value) return

  487.   activeTab.value = key

  488.   fetchList(true)

  489. }

  490. 

  491. async function loadMore() {

  492.   if (loading.value || !hasMore.value) return

  493.   page.value += 1

  494.   const success = await fetchList()

  495.   if (!success) page.value -= 1

  496. }

  497. 

  498. function formatNumber(value) {

  499.   const num = Number(value || 0)

  500.   return numberFormatter.format(Number.isFinite(num) ? num : 0)

  501. }

  502. 

  503. function formatSigned(value, plus = false) {

  504.   const num = Number(value || 0)

  505.   return num > 0 && plus ? `+${formatNumber(num)}` : formatNumber(num)

  506. }

  507. 

  508. function formatAmount(value) {

  509.   const num = Number(value || 0)

  510.   return num > 0 ? `+${formatNumber(num)}` : formatNumber(num)

  511. }

  512. 

  513. /**

  514.  * 充值流水的订单号。

  515.  * 后端 point_log.biz_no 在充值时存的就是 point_order.order_no（消费存的是计费流水号，不展示）。

  516.  */

  517. function orderNo(item) {

  518.   if (!item || item.type !== 'recharge') return ''

  519.   return String(item.biz_no || '').trim()

  520. }

  521. 

  522. async function copyOrderNo(value) {

  523.   if (!value) return

  524.   try {

  525.     await navigator.clipboard.writeText(value)

  526.     toast.add({ title: '订单号已复制', color: 'success' })

  527.   } catch {

  528.     // 非 HTTPS / 旧浏览器下 clipboard 不可用，退回到 execCommand

  529.     const input = document.createElement('input')

  530.     input.value = value

  531.     document.body.appendChild(input)

  532.     input.select()

  533.     const ok = document.execCommand?.('copy')

  534.     document.body.removeChild(input)

  535.     toast.add({ title: ok ? '订单号已复制' : '复制失败，请手动选择', color: ok ? 'success' : 'error' })

  536.   }

  537. }

  538. 

  539. function getTypeIcon(type) {

  540.   const map = {

  541.     recharge: 'i-lucide-wallet-cards',

  542.     consume: 'i-lucide-sparkles',

  543.     reward: 'i-lucide-gift',

  544.     refund: 'i-lucide-rotate-ccw',

  545.     adjust: 'i-lucide-sliders-horizontal',

  546.   }

  547.   return map[type] || 'i-lucide-receipt-text'

  548. }

  549. 

  550. function typeTone(type) {

  551.   const map = {

  552.     recharge: 'bg-[var(--c-eef7ff)] text-[var(--c-0b8cff)] ring-[var(--c-d9ecff)]',

  553.     consume: 'bg-[var(--c-fff4ec)] text-[var(--c-e85f1c)] ring-[var(--c-ffe0cc)]',

  554.     reward: 'bg-[var(--c-edfdf4)] text-[var(--c-159a54)] ring-[var(--c-d2f5e2)]',

  555.     refund: 'bg-[var(--c-f3f0ff)] text-[var(--c-7253e5)] ring-[var(--c-e2dafd)]',

  556.     adjust: 'bg-[var(--c-f3f0ff)] text-[var(--c-7253e5)] ring-[var(--c-e2dafd)]',

  557.   }

  558.   return map[type] || 'bg-[var(--c-f1f5fa)] text-[var(--c-66758a)] ring-[var(--c-e3eaf2)]'

  559. }

  560. 

  561. function typeBadgeTone(type) {

  562.   const map = {

  563.     recharge: 'bg-[var(--c-eef7ff)] text-[var(--c-0879dc)]',

  564.     consume: 'bg-[var(--c-fff4ec)] text-[var(--c-d95414)]',

  565.     reward: 'bg-[var(--c-edfdf4)] text-[var(--c-14894d)]',

  566.     refund: 'bg-[var(--c-f3f0ff)] text-[var(--c-6848d8)]',

  567.     adjust: 'bg-[var(--c-f3f0ff)] text-[var(--c-6848d8)]',

  568.   }

  569.   return map[type] || 'bg-[var(--c-f1f5fa)] text-[var(--c-66758a)]'

  570. }

  571. 

  572. function amountTone(value) {

  573.   const amount = Number(value || 0)

  574.   if (amount > 0) return 'text-[var(--c-159a54)]'

  575.   if (amount < 0) return 'text-[var(--c-e85f1c)]'

  576.   return 'text-[var(--c-66758a)]'

  577. }

  578. 

  579. onMounted(() => fetchList(true))

  580. watch(isLogin, (value) => {

  581.   if (value) {

  582.     fetchList(true)

  583.   } else {

  584.     list.value = []

  585.     total.value = 0

  586.     loadError.value = ''

  587.     hasLoaded.value = false

  588.     balance.value = {}

  589.   }

  590. })

  591. </script>

  592. 

  593. <style scoped>

  594. .bill-tabs {

  595.   scrollbar-width: none;

  596. }

  597. 

  598. .bill-tabs::-webkit-scrollbar {

  599.   display: none;

  600. }

  601. </style>