@quicktvui/tv-ad-unlock

TV广告解锁组件，用于QuickTVUI框架的电视端广告解锁功能。

功能特性

• 生成电视端广告二维码
• 轮询广告观看状态
• 自动管理解锁状态
• 支持自定义配置

安装

pnpm add @quicktvui/tv-ad-unlock

使用方法

1. 基础使用

<template>
  <TVAdUnlock
    :config="adConfig"
    :storageKeys="storageKeys"
    :requestManager="requestManager"
    @unlockSuccess="onUnlockSuccess"
    @unlockFailed="onUnlockFailed"
  />
</template>

<script setup lang="ts">
import { TVAdUnlock, useTVAdUnlockStorage } from '@quicktvui/tv-ad-unlock'
import type { TVAdUnlockConfig, TVAdUnlockStorageKeys, RequestManager } from '@quicktvui/tv-ad-unlock'

const adConfig: TVAdUnlockConfig = {
  packageName: 'com.example.app',
  superRequestBaseUrl: 'https://superapi.extscreen.com/extscreenapi/api',
  invalidTimeout: 300000,
  pollInterval: 1000
}

const storageKeys: TVAdUnlockStorageKeys = {
  playCountKey: 'app_play_count',
  unlockDateKey: 'app_ad_unlock_date',
  unlockedTodayKey: 'app_ad_unlocked_today'
}

const requestManager: RequestManager = {
  post: async (url, data) => { /* 实现请求逻辑 */ },
  get: async (url, data) => { /* 实现请求逻辑 */ }
}

function onUnlockSuccess() {
  console.log('解锁成功')
}

function onUnlockFailed(error: Error) {
  console.error('解锁失败', error)
}
</script>

2. 使用 Composable

import { useTVAdUnlock, useTVAdUnlockStorage } from '@quicktvui/tv-ad-unlock'
import { useESLocalStorage } from '@extscreen/es3-core'

const storage = useESLocalStorage()

const storageKeys = {
  playCountKey: 'app_play_count',
  unlockDateKey: 'app_ad_unlock_date',
  unlockedTodayKey: 'app_ad_unlocked_today'
}

const adStorage = useTVAdUnlockStorage(storage, storageKeys, 32)

async function checkNeedShowAd() {
  const needAd = await adStorage.checkNeedAd()
  if (needAd) {
    router.push({ name: 'ad' })
  }
}

3. 路由配置

import { ESRouteType } from '@extscreen/es3-router'

const routes = [
  {
    path: '/ad',
    name: 'ad',
    component: () => import('./views/ad/index.vue'),
    type: ESRouteType.ES_ROUTE_TYPE_DIALOG
  }
]

API

Props

| 属性 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | config | TVAdUnlockConfig | 是 | - | 广告配置 | | storageKeys | TVAdUnlockStorageKeys | 是 | - | 存储键名配置 | | requestManager | RequestManager | 是 | - | 请求管理器 | | title | string | 否 | '观看30秒广告 当日解锁' | 标题文字 | | subTitle | string | 否 | '手机打开【微信】扫码' | 副标题文字 | | invalidCodeImage | string | 否 | '' | 二维码失效图片 | | scannedCodeImage | string | 否 | '' | 已扫码图片 | | scanTitle | string | 否 | '观看奖励' | 扫码标题 | | scanContent | string | 否 | '观看广告后可获得奖励' | 扫码内容 | | scanToast | string | 否 | '奖励已获得，请前往电视端观看' | 扫码提示 |

Events

| 事件名 | 参数 | 说明 | |--------|------|------| | unlockSuccess | - | 解锁成功 | | unlockFailed | error: Error | 解锁失败 | | qrCodeInvalid | - | 二维码失效 | | qrCodeScanned | - | 二维码已扫码 |

Types

interface TVAdUnlockConfig {
  packageName: string
  superRequestBaseUrl: string
  trackBaseUrl?: string
  invalidTimeout?: number
  pollInterval?: number
}

interface TVAdUnlockStorageKeys {
  playCountKey: string
  unlockDateKey: string
  unlockedTodayKey: string
}

interface RequestManager {
  post(url: string, data: Record<string, any>): Promise<any>
  get(url: string, data: string): Promise<any>
}

License

MIT