86 lines
3.5 KiB
Vue
86 lines
3.5 KiB
Vue
<script setup lang="ts">
|
||
import { siteConfig } from '~/config/site'
|
||
|
||
useSeoMeta({
|
||
title: `赞助 - ${siteConfig.siteName}`,
|
||
description: '感谢您的支持，您的赞助将帮助我持续创作优质内容',
|
||
})
|
||
|
||
const route = useRoute()
|
||
const hasWechatQrcode = computed(() => Boolean(siteConfig.sponsors.qrcode.wechat))
|
||
|
||
const ratio = computed(() => {
|
||
const v = Number(route.query.ratio)
|
||
return Number.isFinite(v) && v > 0 ? v : 0
|
||
})
|
||
|
||
function formatAmount(amount: string): string {
|
||
if (!ratio.value) return amount
|
||
const match = amount.match(/^([\d.]+)(.*)$/)
|
||
if (!match) return amount
|
||
const num = (parseFloat(match[1]) * ratio.value).toFixed(2)
|
||
return num + match[2]
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="container mx-auto max-w-4xl px-4 py-12">
|
||
<div class="mb-8 text-center anim-fade-in-up">
|
||
<h1 class="mb-4 text-4xl font-bold">赞助支持</h1>
|
||
<p class="text-lg text-muted-foreground">感谢您的支持，您的赞助将帮助我持续创作优质内容</p>
|
||
</div>
|
||
|
||
<!-- 微信支付 -->
|
||
<div v-if="hasWechatQrcode" class="mb-8 rounded-xl border p-6 text-center anim-fade-in-up anim-delay-1" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
|
||
<h2 class="mb-2 text-xl font-semibold">微信支付</h2>
|
||
<p class="mb-4 text-sm text-muted-foreground">扫描下方二维码向我赞助</p>
|
||
<div class="flex justify-center py-4">
|
||
<img
|
||
:src="siteConfig.sponsors.qrcode.wechat"
|
||
alt="微信支付二维码"
|
||
class="h-64 w-64 rounded-lg"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 支付宝 -->
|
||
<div class="mb-12 rounded-xl border p-6 text-center anim-fade-in-up anim-delay-2" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
|
||
<h2 class="mb-2 text-xl font-semibold">支付宝</h2>
|
||
<p class="text-lg text-muted-foreground py-8">敬请期待 ✧</p>
|
||
</div>
|
||
|
||
<!-- 赞助名单 -->
|
||
<div class="anim-fade-in-up anim-delay-3">
|
||
<h2 class="mb-6 text-2xl font-bold">赞助名单</h2>
|
||
<div v-if="siteConfig.sponsors.list.length === 0" class="rounded-xl border p-12 text-center text-muted-foreground" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
|
||
暂无赞助记录，期待你的出现 ✧
|
||
</div>
|
||
<div v-else class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||
<div
|
||
v-for="sponsor in siteConfig.sponsors.list"
|
||
:key="sponsor.name"
|
||
class="rounded-xl border p-4"
|
||
style="border-color: var(--color-border); background-color: var(--color-bg-card);"
|
||
>
|
||
<div class="flex items-center gap-4">
|
||
<img
|
||
v-if="sponsor.avatar"
|
||
:src="sponsor.avatar"
|
||
:alt="sponsor.name"
|
||
class="h-12 w-12 shrink-0 rounded-full object-cover"
|
||
/>
|
||
<div v-else class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full text-lg font-bold" style="background: var(--color-bg-hover); color: var(--color-text-secondary);">
|
||
{{ sponsor.text || sponsor.name.charAt(0) }}
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<div class="font-semibold">{{ sponsor.name }}</div>
|
||
<div class="text-sm text-muted-foreground">{{ sponsor.date }}</div>
|
||
<div v-if="sponsor.amount" class="text-sm font-medium text-primary mt-1">{{ formatAmount(sponsor.amount) }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|