leiyun
/
pc_nuxt
1
0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
12 提交
1 分支
586 KiB
 
 
 
 
目录树: 246874ad4e
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 '246874ad4e'
${ noResults }
pc_nuxt/app/pages/invite/index.vue

368 行
18 KiB
原始文件 Blame 文件历史 

  1. <template>

  2.   <div>

  3.     <AppHero

  4.       kicker="INVITE FRIENDS"

  5.       title="邀请好友，一起解锁 AI 创作"

  6.       desc="把好用的 AI 工具分享给朋友，好友完成新用户注册后，双方都能获得点数奖励。"

  7.     >

  8.       <template #aside>

  9.         <div class="w-full overflow-hidden rounded-3xl bg-gradient-to-br from-[var(--c-0758c9)] via-[var(--c-0b8cff)] to-[var(--c-54c8ff)] p-5 text-white shadow-[0_20px_42px_var(--sh-11-126-225-240)] lg:w-[350px] lg:p-6">

  10.           <div class="flex items-center gap-2 text-xs font-bold text-white/75">

  11.             <UIcon name="i-lucide-gift" class="size-4" />

  12.             双方奖励

  13.           </div>

  14.           <div class="mt-5 grid grid-cols-[1fr_auto_1fr] items-center gap-4 text-center">

  15.             <div>

  16.               <div class="text-4xl font-extrabold tabular-nums">{{ rewardDisplay(config.inviter_points) }}</div>

  17.               <div class="mt-2 text-xs text-white/70">你获得点数</div>

  18.             </div>

  19.             <div class="h-12 w-px bg-white/20" />

  20.             <div>

  21.               <div class="text-4xl font-extrabold tabular-nums">{{ rewardDisplay(config.invitee_points) }}</div>

  22.               <div class="mt-2 text-xs text-white/70">好友获得点数</div>

  23.             </div>

  24.           </div>

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

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

  27.             好友注册成功后自动发放

  28.           </div>

  29.         </div>

  30.       </template>

  31.     </AppHero>

  32. 

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

  34.       <section

  35.         v-if="!isLogin"

  36.         class="rounded-3xl border border-[var(--c-e7eef7)] bg-[var(--c-ffffff)] px-6 py-14 text-center shadow-[0_16px_40px_var(--sh-34-68-112-60)]"

  37.         aria-labelledby="invite-login-title"

  38.       >

  39.         <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)]">

  40.           <UIcon name="i-lucide-user-plus" class="size-7" />

  41.         </div>

  42.         <h2 id="invite-login-title" class="mt-6 text-xl font-extrabold text-[var(--c-172033)]">登录后生成专属邀请</h2>

  43.         <p class="mx-auto mt-2 max-w-md text-sm leading-6 text-[var(--c-66758a)]">登录后即可复制专属邀请链接、生成微信小程序码并查看邀请奖励。</p>

  44.         <button

  45.           type="button"

  46.           class="mt-7 inline-flex h-11 cursor-pointer items-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"

  47.           @click="showLogin = true"

  48.         >

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

  50.           立即登录

  51.         </button>

  52.       </section>

  53. 

  54.       <template v-else>

  55.         <div v-if="loading && !loaded" class="grid gap-5 lg:grid-cols-12" role="status" aria-label="正在加载邀请信息">

  56.           <div class="h-[330px] animate-pulse rounded-3xl bg-[var(--c-ffffff)] motion-reduce:animate-none lg:col-span-8" />

  57.           <div class="h-[330px] animate-pulse rounded-3xl bg-[var(--c-ffffff)] motion-reduce:animate-none lg:col-span-4" />

  58.         </div>

  59. 

  60.         <section

  61.           v-else-if="loadError"

  62.           class="rounded-3xl border border-[var(--c-e7eef7)] bg-[var(--c-ffffff)] px-6 py-16 text-center shadow-[0_16px_40px_var(--sh-34-68-112-60)]"

  63.           role="alert"

  64.         >

  65.           <UIcon name="i-lucide-circle-alert" class="mx-auto size-10 text-[var(--c-e85f1c)]" />

  66.           <h2 class="mt-4 text-lg font-extrabold text-[var(--c-172033)]">邀请信息加载失败</h2>

  67.           <p class="mt-2 text-sm text-[var(--c-7b8797)]">{{ loadError }}</p>

  68.           <button

  69.             type="button"

  70.             class="mt-6 cursor-pointer rounded-full bg-[var(--c-eef7ff)] px-6 py-2.5 text-sm font-bold text-[var(--c-0b8cff)]"

  71.             @click="loadData"

  72.           >

  73.             重新加载

  74.           </button>

  75.         </section>

  76. 

  77.         <div v-else class="grid gap-5 lg:grid-cols-12 lg:items-start">

  78.           <div class="space-y-5 lg:col-span-8">

  79.             <section class="overflow-hidden rounded-3xl border border-[var(--c-e7eef7)] bg-[var(--c-ffffff)] shadow-[0_16px_40px_var(--sh-34-68-112-60)]" aria-labelledby="share-title">

  80.               <div class="border-b border-[var(--c-edf2f7)] px-5 py-5 sm:px-6">

  81.                 <div class="flex flex-wrap items-center justify-between gap-3">

  82.                   <div>

  83.                     <h2 id="share-title" class="text-lg font-extrabold text-[var(--c-172033)]">分享专属邀请</h2>

  84.                     <p class="mt-1 text-xs text-[var(--c-8a97a8)]">每位好友仅能绑定一位邀请人，奖励以注册时的活动配置为准。</p>

  85.                   </div>

  86.                   <span

  87.                     class="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-bold"

  88.                     :class="activityEnabled ? 'bg-[var(--c-edfdf4)] text-[var(--c-159a54)]' : 'bg-[var(--c-f1f5fa)] text-[var(--c-7b8797)]'"

  89.                   >

  90.                     <span class="size-1.5 rounded-full" :class="activityEnabled ? 'bg-[var(--c-17a65a)]' : 'bg-[var(--c-9aa5b5)]'" />

  91.                     {{ activityEnabled ? '活动进行中' : '活动暂未开放' }}

  92.                   </span>

  93.                 </div>

  94.               </div>

  95. 

  96.               <div class="p-5 sm:p-6">

  97.                 <div class="rounded-2xl border border-[var(--c-e6edf5)] bg-[var(--c-f8fbff)] p-3.5">

  98.                   <div class="text-[11px] font-bold text-[var(--c-8a97a8)]">你的邀请链接</div>

  99.                   <div class="mt-2 flex min-w-0 items-center gap-3">

  100.                     <div class="min-w-0 flex-1 truncate text-sm font-medium text-[var(--c-4b5b70)]">{{ inviteUrl }}</div>

  101.                     <button

  102.                       type="button"

  103.                       :disabled="!activityEnabled"

  104.                       class="flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-xl bg-[var(--c-ffffff)] text-[var(--c-0b8cff)] shadow-sm transition-colors hover:bg-[var(--c-eef7ff)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)] disabled:cursor-not-allowed disabled:text-[var(--c-a0aabb)]"

  105.                       aria-label="复制邀请链接"

  106.                       @click="copyLink"

  107.                     >

  108.                       <UIcon name="i-lucide-copy" class="size-4" />

  109.                     </button>

  110.                   </div>

  111.                 </div>

  112. 

  113.                 <div class="mt-4 grid gap-3 sm:grid-cols-2">

  114.                   <button

  115.                     type="button"

  116.                     :disabled="!activityEnabled"

  117.                     class="flex h-12 cursor-pointer items-center justify-center gap-2 rounded-full bg-gradient-to-r from-[var(--c-0b8cff)] to-[var(--c-3aa9ff)] text-sm font-extrabold text-white shadow-[0_10px_22px_var(--sh-11-140-255-220)] transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-45"

  118.                     @click="shareLink"

  119.                   >

  120.                     <UIcon name="i-lucide-share-2" class="size-4" />

  121.                     分享邀请链接

  122.                   </button>

  123.                   <button

  124.                     type="button"

  125.                     :disabled="!activityEnabled"

  126.                     class="flex h-12 cursor-pointer items-center justify-center gap-2 rounded-full border border-[var(--c-dbe9f7)] bg-[var(--c-f5faff)] text-sm font-extrabold text-[var(--c-0b8cff)] transition-colors hover:bg-[var(--c-e8f5ff)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-45"

  127.                     @click="openQr"

  128.                   >

  129.                     <UIcon name="i-lucide-qr-code" class="size-4" />

  130.                     微信小程序码

  131.                   </button>

  132.                 </div>

  133.               </div>

  134.             </section>

  135. 

  136.             <section class="grid gap-3 sm:grid-cols-2" aria-label="邀请统计">

  137.               <article class="rounded-2xl border border-[var(--c-e7eef7)] bg-[var(--c-ffffff)] p-5 shadow-[0_8px_24px_var(--sh-34-68-112-45)]">

  138.                 <div class="flex items-start justify-between">

  139.                   <div>

  140.                     <p class="text-xs font-bold text-[var(--c-7b8797)]">成功邀请</p>

  141.                     <p class="mt-2 text-3xl font-extrabold text-[var(--c-172033)] tabular-nums">{{ stats.success || 0 }}</p>

  142.                     <p class="mt-1 text-[11px] text-[var(--c-9aa5b5)]">已完成注册并发放奖励</p>

  143.                   </div>

  144.                   <span class="flex size-10 items-center justify-center rounded-xl bg-[var(--c-eef7ff)] text-[var(--c-0b8cff)]">

  145.                     <UIcon name="i-lucide-users" class="size-4.5" />

  146.                   </span>

  147.                 </div>

  148.               </article>

  149.               <article class="rounded-2xl border border-[var(--c-e7eef7)] bg-[var(--c-ffffff)] p-5 shadow-[0_8px_24px_var(--sh-34-68-112-45)]">

  150.                 <div class="flex items-start justify-between">

  151.                   <div>

  152.                     <p class="text-xs font-bold text-[var(--c-7b8797)]">累计奖励</p>

  153.                     <p class="mt-2 text-3xl font-extrabold text-[var(--c-159a54)] tabular-nums">+{{ stats.inviter_points || 0 }}</p>

  154.                     <p class="mt-1 text-[11px] text-[var(--c-9aa5b5)]">已自动计入可用点数</p>

  155.                   </div>

  156.                   <span class="flex size-10 items-center justify-center rounded-xl bg-[var(--c-edfdf4)] text-[var(--c-159a54)]">

  157.                     <UIcon name="i-lucide-coins" class="size-4.5" />

  158.                   </span>

  159.                 </div>

  160.               </article>

  161.             </section>

  162. 

  163.             <section class="rounded-3xl border border-[var(--c-e7eef7)] bg-[var(--c-ffffff)] p-5 shadow-[0_12px_30px_var(--sh-34-68-112-50)] sm:p-6" aria-labelledby="steps-title">

  164.               <h2 id="steps-title" class="text-lg font-extrabold text-[var(--c-172033)]">三步获得奖励</h2>

  165.               <div class="mt-5 grid gap-3 sm:grid-cols-3">

  166.                 <div v-for="step in steps" :key="step.no" class="rounded-2xl bg-[var(--c-f6f9fd)] p-4">

  167.                   <div class="flex items-center justify-between">

  168.                     <span class="text-[11px] font-extrabold tracking-[0.12em] text-[var(--c-0b8cff)]">STEP {{ step.no }}</span>

  169.                     <UIcon :name="step.icon" class="size-4 text-[var(--c-8a97a8)]" />

  170.                   </div>

  171.                   <h3 class="mt-4 text-sm font-extrabold text-[var(--c-172033)]">{{ step.title }}</h3>

  172.                   <p class="mt-1.5 text-xs leading-5 text-[var(--c-7b8797)]">{{ step.desc }}</p>

  173.                 </div>

  174.               </div>

  175.             </section>

  176.           </div>

  177. 

  178.           <aside class="space-y-5 lg:col-span-4">

  179.             <section class="rounded-3xl border border-[var(--c-e7eef7)] bg-[var(--c-ffffff)] p-5 shadow-[0_12px_30px_var(--sh-34-68-112-50)] sm:p-6">

  180.               <div class="flex items-center justify-between gap-3">

  181.                 <h2 class="text-base font-extrabold text-[var(--c-172033)]">最近邀请</h2>

  182.                 <NuxtLink to="/invite/records" class="inline-flex items-center gap-1 text-xs font-bold text-[var(--c-0b8cff)] hover:underline">

  183.                   全部记录

  184.                   <UIcon name="i-lucide-chevron-right" class="size-3.5" />

  185.                 </NuxtLink>

  186.               </div>

  187. 

  188.               <div v-if="recentList.length" class="mt-4 divide-y divide-[var(--c-edf2f7)]">

  189.                 <div v-for="item in recentList" :key="item.id" class="flex items-center gap-3 py-3 first:pt-0 last:pb-0">

  190.                   <div class="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[var(--c-eef7ff)] text-sm font-extrabold text-[var(--c-0b8cff)]">

  191.                     <img v-if="item.avatar" :src="item.avatar" :alt="item.user_name || '好友'" class="size-full object-cover">

  192.                     <span v-else>{{ getInitial(item.user_name) }}</span>

  193.                   </div>

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

  195.                     <div class="truncate text-sm font-bold text-[var(--c-172033)]">{{ item.user_name || '好友' }}</div>

  196.                     <div class="mt-0.5 text-[11px] text-[var(--c-9aa5b5)]">{{ formatTime(item.reward_time || item.add_time) }}</div>

  197.                   </div>

  198.                   <span class="shrink-0 text-xs font-extrabold" :class="Number(item.status) === 1 ? 'text-[var(--c-159a54)]' : 'text-[var(--c-8a97a8)]'">

  199.                     {{ Number(item.status) === 1 ? `+${item.inviter_points || 0}` : item.status_text }}

  200.                   </span>

  201.                 </div>

  202.               </div>

  203. 

  204.               <div v-else class="py-9 text-center">

  205.                 <UIcon name="i-lucide-user-round-plus" class="mx-auto size-8 text-[var(--c-b1bbc8)]" />

  206.                 <p class="mt-3 text-sm font-bold text-[var(--c-66758a)]">还没有邀请记录</p>

  207.                 <p class="mt-1 text-xs text-[var(--c-9aa5b5)]">分享给第一位好友吧</p>

  208.               </div>

  209.             </section>

  210. 

  211.             <section class="rounded-3xl bg-gradient-to-br from-[var(--c-f0f8ff)] to-[var(--c-f7fbff)] p-5 ring-1 ring-inset ring-[var(--c-dcecfb)] sm:p-6">

  212.               <div class="flex items-center gap-2 text-sm font-extrabold text-[var(--c-172033)]">

  213.                 <UIcon name="i-lucide-scroll-text" class="size-4 text-[var(--c-0b8cff)]" />

  214.                 活动规则

  215.               </div>

  216.               <p class="mt-3 text-xs leading-6 text-[var(--c-66758a)]">{{ config.rule_text || '好友通过你的邀请完成新用户注册后，你和好友都可获得点数奖励。' }}</p>

  217.               <div class="mt-4 border-t border-[var(--c-dcecfb)] pt-4 text-[11px] leading-5 text-[var(--c-8a97a8)]">

  218.                 每位新用户仅可触发一次邀请奖励；异常注册或超过每日奖励上限时，本次邀请可能只记录不发放。

  219.               </div>

  220.             </section>

  221.           </aside>

  222.         </div>

  223.       </template>

  224.     </main>

  225. 

  226.     <InviteShareModal

  227.       :open="qrOpen"

  228.       :qrcode-url="qrcodeUrl"

  229.       :invite-url="inviteUrl"

  230.       :loading="qrLoading"

  231.       @close="qrOpen = false"

  232.       @copy="copyLink"

  233.     />

  234.   </div>

  235. </template>

  236. 

  237. <script setup>

  238. import dayjs from 'dayjs'

  239. 

  240. useSeoMeta({

  241.   title: '邀请好友 - AI在线',

  242.   description: '邀请好友体验 AI 在线，双方领取 AI 创作点数。',

  243.   robots: 'noindex, nofollow',

  244. })

  245. 

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

  247. const { post } = useApi()

  248. const { buildInviteUrl } = useInvite()

  249. const toast = useToast()

  250. 

  251. const config = ref({})

  252. const stats = ref({})

  253. const recentList = ref([])

  254. const inviteCode = ref('')

  255. const loading = ref(false)

  256. const loaded = ref(false)

  257. const loadError = ref('')

  258. const qrOpen = ref(false)

  259. const qrLoading = ref(false)

  260. const qrcodeUrl = ref('')

  261. 

  262. const steps = [

  263.   { no: '01', title: '分享专属邀请', desc: '复制网页链接，或让好友扫描微信小程序码。', icon: 'i-lucide-share-2' },

  264.   { no: '02', title: '好友完成注册', desc: '好友通过邀请落地页登录并完成新用户注册。', icon: 'i-lucide-user-check' },

  265.   { no: '03', title: '点数自动到账', desc: '系统核验成功后，双方奖励直接计入点数余额。', icon: 'i-lucide-coins' },

  266. ]

  267. 

  268. const activityEnabled = computed(() => Number(config.value.status ?? 1) === 1)

  269. const inviteUrl = computed(() => buildInviteUrl(inviteCode.value || userInfo.value.open_id))

  270. 

  271. function rewardDisplay(value) {

  272.   if (!loaded.value) return '—'

  273.   return Number(value || 0)

  274. }

  275. 

  276. async function loadData() {

  277.   if (!isLogin.value || loading.value) return

  278.   loading.value = true

  279.   loadError.value = ''

  280.   try {

  281.     const [myRes, listRes] = await Promise.all([

  282.       post('/invite/my'),

  283.       post('/invite/list', { page_no: 1, page_size: 4 }),

  284.     ])

  285.     config.value = myRes.data?.config || {}

  286.     stats.value = myRes.data?.stats || {}

  287.     inviteCode.value = myRes.data?.invite_code || ''

  288.     recentList.value = listRes.list || []

  289.     loaded.value = true

  290.   } catch (error) {

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

  292.   } finally {

  293.     loading.value = false

  294.   }

  295. }

  296. 

  297. async function copyText(text) {

  298.   if (navigator.clipboard && window.isSecureContext) {

  299.     await navigator.clipboard.writeText(text)

  300.     return

  301.   }

  302.   const input = document.createElement('textarea')

  303.   input.value = text

  304.   input.style.position = 'fixed'

  305.   input.style.opacity = '0'

  306.   document.body.appendChild(input)

  307.   input.select()

  308.   document.execCommand('copy')

  309.   input.remove()

  310. }

  311. 

  312. async function copyLink() {

  313.   if (!activityEnabled.value) return

  314.   try {

  315.     await copyText(inviteUrl.value)

  316.     toast.add({ title: '邀请链接已复制', color: 'success' })

  317.   } catch {

  318.     toast.add({ title: '复制失败，请手动复制链接', color: 'error' })

  319.   }

  320. }

  321. 

  322. async function shareLink() {

  323.   if (!activityEnabled.value) return

  324.   if (navigator.share) {

  325.     try {

  326.       await navigator.share({

  327.         title: config.value.share_title || '邀请你体验 AI ONLINE',

  328.         text: config.value.share_desc || '登录注册即可领取 AI 创作点数',

  329.         url: inviteUrl.value,

  330.       })

  331.       return

  332.     } catch (error) {

  333.       if (error?.name === 'AbortError') return

  334.     }

  335.   }

  336.   await copyLink()

  337. }

  338. 

  339. async function openQr() {

  340.   if (!activityEnabled.value) return

  341.   qrOpen.value = true

  342.   if (qrcodeUrl.value || qrLoading.value) return

  343.   qrLoading.value = true

  344.   try {

  345.     const res = await post('/invite/qrcode')

  346.     qrcodeUrl.value = res.data?.qrcode_url || ''

  347.   } catch (error) {

  348.     toast.add({ title: error.message || '小程序码生成失败', color: 'error' })

  349.   } finally {

  350.     qrLoading.value = false

  351.   }

  352. }

  353. 

  354. function getInitial(name = '') {

  355.   return String(name || '友').slice(0, 1)

  356. }

  357. 

  358. function formatTime(value) {

  359.   if (!value) return ''

  360.   return dayjs(Number(value) * 1000).format('YYYY-MM-DD HH:mm')

  361. }

  362. 

  363. onMounted(loadData)

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

  365.   if (value) loadData()

  366. })

  367. </script>