leiyun
/
pc_nuxt
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
16 Commits
1 Branch
586 KiB
 
 
 
 
Branch: main
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'main'
${ noResults }
pc_nuxt/app/pages/earn-points.vue

393 lines
19 KiB
Raw Permalink Blame History 

  1. <template>

  2.   <div class="min-h-screen bg-[var(--c-f3f7fb)]">

  3.     <AppHero

  4.       kicker="EARN POINTS"

  5.       title="获得点数"

  6.       desc="完成下面的任务即可获得点数，点数在小程序、H5 与 PC 端共享，可用于全部 AI 工具。"

  7.     >

  8.       <template #actions>

  9.         <NuxtLink

  10.           to="/bill"

  11.           class="inline-flex h-10 cursor-pointer items-center gap-1.5 rounded-full bg-[var(--c-ffffff)] px-5 text-sm font-extrabold text-[var(--c-5b6b80)] shadow-sm transition-colors hover:bg-[var(--c-f7faff)] lg:h-11"

  12.         >

  13.           <UIcon name="i-lucide-receipt" class="size-4" />

  14.           点数明细

  15.         </NuxtLink>

  16.         <NuxtLink

  17.           to="/recharge"

  18.           class="inline-flex h-10 cursor-pointer items-center gap-1.5 rounded-full bg-[var(--c-0b8cff)] px-5 text-sm font-extrabold text-white shadow-[0_10px_20px_var(--sh-11-140-255-220)] transition-colors hover:bg-[var(--c-0a7ce0)] lg:h-11"

  19.         >

  20.           <UIcon name="i-lucide-coins" class="size-4" />

  21.           去充值

  22.         </NuxtLink>

  23.       </template>

  24.       <template #aside>

  25.         <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-[300px] lg:p-6">

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

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

  28.             我的点数

  29.           </div>

  30.           <div class="mt-4 text-4xl font-extrabold tabular-nums">{{ balance }}</div>

  31.           <div class="mt-2 text-xs text-white/70">点数长期有效，多端共享</div>

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

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

  34.             任务完成后自动到账

  35.           </div>

  36.         </div>

  37.       </template>

  38.     </AppHero>

  39. 

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

  41.       <!-- 未登录 -->

  42.       <section

  43.         v-if="!isLogin"

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

  45.       >

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

  47.           <UIcon name="i-lucide-gift" class="size-7" />

  48.         </div>

  49.         <h2 class="mt-6 text-xl font-extrabold text-[var(--c-172033)]">登录后完成任务获得点数</h2>

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

  51.           登录后可以每日签到、邀请好友或扫码看视频获得点数，点数与小程序端共享。

  52.         </p>

  53.         <button

  54.           type="button"

  55.           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"

  56.           @click="showLogin = true"

  57.         >

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

  59.           立即登录

  60.         </button>

  61.       </section>

  62. 

  63.       <template v-else>

  64.         <!-- 骨架 -->

  65.         <div v-if="loading && !config" class="grid gap-5 lg:grid-cols-2" role="status" aria-label="正在加载任务">

  66.           <div class="h-[260px] animate-pulse rounded-3xl bg-[var(--c-ffffff)] motion-reduce:animate-none" />

  67.           <div class="h-[260px] animate-pulse rounded-3xl bg-[var(--c-ffffff)] motion-reduce:animate-none" />

  68.         </div>

  69. 

  70.         <template v-else>

  71.           <!-- 到账提示 -->

  72.           <Transition name="tip">

  73.             <div

  74.               v-if="arrivedPoints"

  75.               class="mb-5 flex items-center gap-2 rounded-2xl border border-[var(--c-b7ecd0)] bg-[var(--c-edfdf4)] px-4 py-3 text-sm font-bold text-[var(--c-159a54)]"

  76.               role="status"

  77.             >

  78.               <UIcon name="i-lucide-circle-check" class="size-4" />

  79.               点数 +{{ arrivedPoints }} 已到账，当前 {{ balance }} 点

  80.             </div>

  81.           </Transition>

  82. 

  83.           <!-- 每日签到：低成本任务放在最前，单一主操作可直接完成 -->

  84.           <section

  85.             v-if="checkinTask.enabled"

  86.             class="mb-5 overflow-hidden rounded-3xl border border-[var(--c-dbeafe)] bg-gradient-to-br from-[var(--c-f4faff)] via-[var(--c-ffffff)] to-[var(--c-edfdf4)] p-5 shadow-[0_16px_40px_var(--sh-34-68-112-60)] lg:flex lg:items-center lg:gap-6 lg:p-6"

  87.             aria-labelledby="checkin-task-title"

  88.           >

  89.             <div class="flex min-w-0 flex-1 items-start gap-4">

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

  91.                 <UIcon name="i-lucide-calendar-check-2" class="size-6" />

  92.               </div>

  93.               <div class="min-w-0">

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

  95.                   <h2 id="checkin-task-title" class="text-lg font-extrabold text-[var(--c-172033)]">

  96.                     {{ pointCopy(checkinTask.title, '每日签到') }}

  97.                   </h2>

  98.                   <span class="rounded-full bg-[var(--c-fff5e8)] px-2.5 py-1 text-xs font-extrabold text-[var(--c-ff8a00)]">

  99.                     +{{ checkinTask.points_per_checkin }} / 天

  100.                   </span>

  101.                 </div>

  102.                 <p class="mt-1 text-sm leading-relaxed text-[var(--c-66758a)]">

  103.                   {{ pointCopy(checkinTask.desc, '每天签到一次，点数立即到账') }}

  104.                 </p>

  105.                 <div class="mt-3 flex items-center gap-1.5 text-xs font-bold" :class="checkinTask.checked_in ? 'text-[var(--c-159a54)]' : 'text-[var(--c-0b8cff)]'">

  106.                   <UIcon :name="checkinTask.checked_in ? 'i-lucide-circle-check' : 'i-lucide-clock-3'" class="size-4" />

  107.                   {{ checkinTask.checked_in ? '今日已完成，明天再来' : '今日尚未签到' }}

  108.                 </div>

  109.               </div>

  110.             </div>

  111.             <button

  112.               type="button"

  113.               class="mt-5 flex h-11 w-full cursor-pointer items-center justify-center gap-2 rounded-full bg-gradient-to-r from-[var(--c-0b8cff)] to-[var(--c-3aa9ff)] px-7 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:bg-[var(--c-d9e3ef)] disabled:shadow-none disabled:opacity-100 lg:mt-0 lg:w-auto"

  114.               :disabled="checkinLoading || checkinTask.checked_in"

  115.               @click="claimCheckin"

  116.             >

  117.               <span v-if="checkinLoading" class="size-4 animate-spin rounded-full border-2 border-white/35 border-t-white motion-reduce:animate-none" />

  118.               <UIcon v-else :name="checkinTask.checked_in ? 'i-lucide-check' : 'i-lucide-calendar-plus'" class="size-4" />

  119.               {{ checkinLoading ? '签到中...' : (checkinTask.checked_in ? '今日已签到' : '立即签到') }}

  120.             </button>

  121.           </section>

  122. 

  123.           <div class="grid gap-5 lg:grid-cols-2">

  124.             <!-- 看广告：PC 无激励视频，扫码去小程序看 -->

  125.             <section

  126.               v-if="adTask.enabled"

  127.               class="flex h-full flex-col rounded-3xl border border-[var(--c-e7eef7)] bg-[var(--c-ffffff)] p-5 shadow-[0_16px_40px_var(--sh-34-68-112-60)] lg:p-6"

  128.               aria-labelledby="ad-task-title"

  129.             >

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

  131.                 <div class="min-w-0">

  132.                   <h2 id="ad-task-title" class="text-lg font-extrabold text-[var(--c-172033)]">

  133.                     {{ pointCopy(adTask.title, '看视频获得点数') }}

  134.                   </h2>

  135.                   <p class="mt-1 text-xs leading-relaxed text-[var(--c-8a97a8)]">

  136.                     {{ pointCopy(adTask.desc, '完整观看一段视频即可获得点数') }}

  137.                   </p>

  138.                 </div>

  139.                 <span class="shrink-0 rounded-full bg-[var(--c-fff5e8)] px-3 py-1 text-xs font-extrabold text-[var(--c-ff8a00)]">

  140.                   +{{ adTask.points_per_ad }} / 次

  141.                 </span>

  142.               </div>

  143. 

  144.               <div class="mt-5 flex flex-1 flex-col gap-5 sm:flex-row sm:items-center">

  145.                 <div class="mx-auto shrink-0 sm:mx-0">

  146.                   <div class="flex size-[168px] items-center justify-center overflow-hidden rounded-2xl border border-[var(--c-e6edf5)] bg-[var(--c-f8fbff)] p-2">

  147.                     <img v-if="qrcodeUrl" :src="qrcodeUrl" class="size-full object-contain" alt="小程序码，扫码看视频获得点数">

  148.                     <span v-else-if="qrLoading" class="size-7 animate-spin rounded-full border-2 border-[var(--c-0b8cff)]/25 border-t-[var(--c-0b8cff)] motion-reduce:animate-none" />

  149.                     <div v-else class="flex flex-col items-center gap-2 text-center text-xs leading-5 text-[var(--c-8a95a6)]">

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

  151.                         <UIcon name="i-lucide-qr-code" class="size-6" />

  152.                       </div>

  153.                       <span>点击右侧按钮生成</span>

  154.                     </div>

  155.                   </div>

  156.                 </div>

  157. 

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

  159.                   <ol class="space-y-2 text-sm text-[var(--c-5f6f83)]">

  160.                     <li class="flex gap-2">

  161.                       <span class="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-[var(--c-eef7ff)] text-[11px] font-extrabold text-[var(--c-0b8cff)]">1</span>

  162.                       {{ qrcodeUrl ? '微信扫描左侧小程序码' : '点击下方按钮生成小程序码' }}

  163.                     </li>

  164.                     <li class="flex gap-2">

  165.                       <span class="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-[var(--c-eef7ff)] text-[11px] font-extrabold text-[var(--c-0b8cff)]">2</span>

  166.                       用同一账号登录小程序，完整看完视频

  167.                     </li>

  168.                     <li class="flex gap-2">

  169.                       <span class="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-[var(--c-eef7ff)] text-[11px] font-extrabold text-[var(--c-0b8cff)]">3</span>

  170.                       点数自动到账，本页会自动刷新

  171.                     </li>

  172.                   </ol>

  173.                   <div class="mt-4 text-xs text-[var(--c-8a97a8)]">{{ adProgressText }}</div>

  174.                   <button

  175.                     type="button"

  176.                     class="mt-3 inline-flex h-11 cursor-pointer items-center justify-center gap-2 rounded-full bg-[var(--c-0b8cff)] px-6 text-sm font-extrabold text-white shadow-[0_10px_22px_var(--sh-11-140-255-220)] 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 disabled:cursor-not-allowed disabled:opacity-50"

  177.                     :disabled="qrLoading"

  178.                     @click="loadQrcode"

  179.                   >

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

  181.                     {{ qrcodeUrl ? '刷新小程序码' : '生成小程序码' }}

  182.                   </button>

  183.                 </div>

  184.               </div>

  185.             </section>

  186. 

  187.             <!-- 邀请好友 -->

  188.             <section

  189.               v-if="inviteTask.enabled"

  190.               class="flex h-full flex-col rounded-3xl border border-[var(--c-e7eef7)] bg-[var(--c-ffffff)] p-5 shadow-[0_16px_40px_var(--sh-34-68-112-60)] lg:p-6"

  191.               aria-labelledby="invite-task-title"

  192.             >

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

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

  195.                   <h2 id="invite-task-title" class="text-lg font-extrabold text-[var(--c-172033)]">邀请好友注册</h2>

  196.                   <p class="mt-1 text-xs leading-relaxed text-[var(--c-8a97a8)]">

  197.                     好友注册成功后，你获得 {{ inviteTask.inviter_points }} 点，好友也获得 {{ inviteTask.invitee_points }} 点

  198.                   </p>

  199.                 </div>

  200.                 <span class="shrink-0 rounded-full bg-[var(--c-edfdf4)] px-3 py-1 text-xs font-extrabold text-[var(--c-159a54)]">

  201.                   +{{ inviteTask.inviter_points }} / 人

  202.                 </span>

  203.               </div>

  204. 

  205.               <div class="mt-5 grid grid-cols-2 gap-3">

  206.                 <div class="rounded-2xl bg-[var(--c-f8fbff)] p-4">

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

  208.                   <div class="mt-1 text-2xl font-extrabold tabular-nums text-[var(--c-172033)]">

  209.                     {{ inviteTask.stats?.success || 0 }}

  210.                   </div>

  211.                 </div>

  212.                 <div class="rounded-2xl bg-[var(--c-f8fbff)] p-4">

  213.                   <div class="text-xs font-bold text-[var(--c-7b8797)]">累计获得</div>

  214.                   <div class="mt-1 text-2xl font-extrabold tabular-nums text-[var(--c-0b8cff)]">

  215.                     {{ inviteTask.stats?.inviter_points || 0 }}

  216.                   </div>

  217.                 </div>

  218.               </div>

  219. 

  220.               <div class="mt-auto pt-5">

  221.                 <NuxtLink

  222.                   to="/invite"

  223.                   class="flex h-11 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"

  224.                 >

  225.                   <UIcon name="i-lucide-user-plus" class="size-4" />

  226.                   去邀请好友

  227.                 </NuxtLink>

  228.               </div>

  229.             </section>

  230.           </div>

  231. 

  232.           <!-- 规则 -->

  233.           <section v-if="ruleLines.length" class="mt-5 rounded-3xl border border-[var(--c-e7eef7)] bg-[var(--c-ffffff)] p-5 shadow-[0_8px_24px_var(--sh-34-68-112-45)] lg:p-6">

  234.             <h2 class="text-base font-extrabold text-[var(--c-172033)]">规则说明</h2>

  235.             <ul class="mt-3 space-y-2">

  236.               <li v-for="(line, index) in ruleLines" :key="line" class="flex items-start gap-3 text-sm leading-relaxed text-[var(--c-5f6f83)]">

  237.                 <span class="mt-0.5 flex h-5 w-7 shrink-0 items-center justify-center rounded-[14px] bg-[var(--c-eef7ff)] text-[11px] font-extrabold text-[var(--c-0b8cff)]">

  238.                   {{ String(index + 1).padStart(2, '0') }}

  239.                 </span>

  240.                 {{ line }}

  241.               </li>

  242.             </ul>

  243.           </section>

  244.         </template>

  245.       </template>

  246.     </main>

  247.   </div>

  248. </template>

  249. 

  250. <script setup>

  251. useSeoMeta({

  252.   title: '获得点数 - AI在线',

  253.   description: '每日签到、邀请好友注册或扫码在小程序看视频，即可获得 AI 在线点数，点数多端共享，可用于全部 AI 工具。',

  254. })

  255. 

  256. const { post } = useApi()

  257. const { isLogin, showLogin, refreshBalance } = useUser()

  258. const { config, loading, entryEnabled, adTask, inviteTask, checkinTask, load } = useEarnPoints()

  259. const toast = useToast()

  260. const router = useRouter()

  261. 

  262. const balance = ref(0)

  263. const qrcodeUrl = ref('')

  264. const qrLoading = ref(false)

  265. const checkinLoading = ref(false)

  266. const arrivedPoints = ref(0)

  267. 

  268. // 扫码后点数在小程序侧到账，PC 只能轮询余额；最多轮 2 分钟，避免无意义的长轮询

  269. const POLL_INTERVAL = 5000

  270. const POLL_LIMIT = 2 * 60 * 1000

  271. let pollTimer = null

  272. let pollStart = 0

  273. 

  274. const adProgressText = computed(() => {

  275.   if (!adTask.value.enabled) return ''

  276.   if (adTask.value.daily_limit > 0) {

  277.     return `今日 ${adTask.value.today_used || 0}/${adTask.value.daily_limit} 次`

  278.   }

  279.   return '今日不限次数'

  280. })

  281. 

  282. const ruleLines = computed(() => {

  283.   const lines = []

  284.   if (checkinTask.value.enabled && checkinTask.value.rule_text) lines.push(...splitRule(checkinTask.value.rule_text))

  285.   if (adTask.value.enabled && adTask.value.rule_text) lines.push(...splitRule(adTask.value.rule_text))

  286.   if (inviteTask.value.enabled && inviteTask.value.rule_text) lines.push(...splitRule(inviteTask.value.rule_text))

  287.   return lines

  288. })

  289. 

  290. function splitRule(text) {

  291.   return pointCopy(text)

  292.     .split(/[\n；;]/)

  293.     .map(item => item.trim())

  294.     .filter(Boolean)

  295. }

  296. 

  297. async function init() {

  298.   const data = await load(true)

  299.   balance.value = Number(data?.balance?.points || 0)

  300.   // 所有免费任务都关闭时本页没有意义，直接送去充值页

  301.   if (!data?.entry_enabled) router.replace('/recharge')

  302. }

  303. 

  304. // 兼容后台历史配置中仍使用“积分”的文案，前台统一展示为“点数”。

  305. function pointCopy(text, fallback = '') {

  306.   return String(text || fallback).replace(/积分/g, '点数')

  307. }

  308. 

  309. onMounted(() => {

  310.   if (isLogin.value) init()

  311.   else load(true)

  312. })

  313. onUnmounted(() => stopPoll())

  314. 

  315. watch(isLogin, (v) => {

  316.   if (v) init()

  317. })

  318. 

  319. async function claimCheckin() {

  320.   if (checkinLoading.value || checkinTask.value.checked_in) return

  321.   checkinLoading.value = true

  322.   try {

  323.     const res = await post('/point/checkin', {})

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

  325.     if (data.balance) balance.value = Number(data.balance.points || 0)

  326.     arrivedPoints.value = Number(data.points || 0)

  327.     toast.add({

  328.       title: data.duplicated ? '今天已经签到过了' : `签到成功，点数 +${data.points || checkinTask.value.points_per_checkin}`,

  329.       color: data.duplicated ? 'neutral' : 'success',

  330.     })

  331.     await refreshBalance()

  332.     await load(true)

  333.   } catch (e) {

  334.     toast.add({ title: e.message || '签到失败，请稍后再试', color: 'error' })

  335.   } finally {

  336.     checkinLoading.value = false

  337.   }

  338. }

  339. 

  340. async function loadQrcode() {

  341.   if (qrLoading.value) return

  342.   qrLoading.value = true

  343.   try {

  344.     const res = await post('/point/earnqrcode', {})

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

  346.     if (!qrcodeUrl.value) throw new Error('小程序码生成失败')

  347.     startPoll()

  348.   } catch (e) {

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

  350.   } finally {

  351.     qrLoading.value = false

  352.   }

  353. }

  354. 

  355. /** 轮询余额：小程序侧看完广告后，这里能自动看到到账 */

  356. function startPoll() {

  357.   stopPoll()

  358.   pollStart = Date.now()

  359.   pollTimer = setInterval(async () => {

  360.     if (Date.now() - pollStart > POLL_LIMIT) return stopPoll()

  361.     try {

  362.       const res = await post('/point/balance', {})

  363.       const points = Number(res.data?.points || 0)

  364.       if (points > balance.value) {

  365.         arrivedPoints.value = points - balance.value

  366.         balance.value = points

  367.         refreshBalance()

  368.         load(true)

  369.       }

  370.     } catch (e) {

  371.       // 单次失败不打断轮询

  372.     }

  373.   }, POLL_INTERVAL)

  374. }

  375. 

  376. function stopPoll() {

  377.   if (pollTimer) clearInterval(pollTimer)

  378.   pollTimer = null

  379. }

  380. </script>

  381. 

  382. <style scoped>

  383. .tip-enter-active,

  384. .tip-leave-active { transition: opacity 0.2s ease; }

  385. .tip-enter-from,

  386. .tip-leave-to { opacity: 0; }

  387. 

  388. @media (prefers-reduced-motion: reduce) {

  389.   .tip-enter-active,

  390.   .tip-leave-active { transition: none; }

  391. }

  392. </style>