ApeaTools API 串接範例

本頁面主要提供 ApeaTools 相關 API 的使用方式及注意事項。

請先依照 範例 - Cat 的方式實作 useCat.ts 後使用。

openTwidVerifyCard

開啟 TWID 驗證視窗

import { useCat } from '@/composable/useCat'

const { apeaTools } = useCat()

const openTwidVerifyCard = () => {
  apeaTools().openTwidVerifyCard()
}

setContactUsText

設定 TWID 驗證視窗 失敗時的按鈕文字

import { useCat } from '@/composable/useCat'

const { apeaTools } = useCat()

const setContactUsText = (text: string) => {
  apeaTools().setContactUsText(text)
}

setContactUsCallBack

設定 TWID 驗證視窗 失敗時點擊按鈕後觸發的 callback

import { useCat } from '@/composable/useCat'

const { apeaTools } = useCat()

const setContactUsCallBack = (callback: () => Promise<void> | void) => {
  apeaTools().setContactUsCallBack(callback)
}

setContactUsCallBack

設定 TWID 驗證視窗 關閉後觸發的 callback

import { useCat } from '@/composable/useCat'
import type { TwidValidateResult } from '@lctech-tw/f2e-cat'


const { apeaTools } = useCat()

const setContactUsCallBack = (callback: (result: TwidValidateResult) => Promise<void> | void) => {
  apeaTools().setContactUsCallBack(callback)
}

openAgeGate

開啟 年齡驗證視窗

import { useCat } from '@/composable/useCat'

const { apeaTools } = useCat()

const openAgeGate = () => {
  apeaTools().openAgeGate()
}

closeAgeGate

關閉 年齡驗證視窗

import { useCat } from '@/composable/useCat'

const { apeaTools } = useCat()

const closeAgeGate = () => {
  apeaTools().closeAgeGate()
}

onAgeGateLeave

設定 年齡驗證彈窗 點擊離開後觸發的 callback

import { useCat } from '@/composable/useCat'

const { apeaTools } = useCat()

const onAgeGateLeave = (callback: () => void) => {
  apeaTools().onAgeGateLeave(callback)
}

onAgeGatePass

設定 年齡驗證彈窗 驗證通過後觸發的 callback

import { useCat } from '@/composable/useCat'

const { apeaTools } = useCat()

const onAgeGatePass = (callback: (age?: { year: number; month: number; day: number }) => void) => {
  apeaTools().onAgeGatePass(callback)
}

onAgeGateClose

設定 年齡驗證彈窗 關閉後觸發的 callback

import { useCat } from '@/composable/useCat'

const { apeaTools } = useCat()

// @param checked — 是否勾選不再提醒
const onAgeGateClose = (callback: (checked: boolean) => void) => {
  apeaTools().onAgeGateClose(callback)
}

load

產品端 RD 不需執行，此為 Data4 開發者使用

載入 ApeaTools 相關 js 以及建立 js instance

import { useCat } from '@/composable/useCat'

const { apeaTools } = useCat()

const load = async () => {
  await apeaTools().load()
}