PanTools API 串接範例

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

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

position

重新定位 個人小卡 、 快速導航小卡 、 Oauth 視窗

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

const { panTools } = useCat()

const position = () => {
  panTools().position()
}

openAvatarCard

開啟 個人小卡

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

const { panTools } = useCat()

const openAvatarCard = () => {
  panTools().openAvatarCard()
}

openAvatarCardQRCode

開啟 個人小卡 - QR CODE

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

const { panTools } = useCat()

const openAvatarCardQRCode = () => {
  panTools().openAvatarCardQRCode()
}

openJpoints

開啟 個人小卡 - JPoints

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

const { panTools } = useCat()

const openJpoints = (page?: string, options?: OpenJPointsOptions) => {
  panTools().openJpoints(page, options)
}

openJpointsLaunchPage

開啟 個人小卡 - JPoints - 介紹頁

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

const { panTools } = useCat()

const openJpointsLaunchPage = (options?: OpenJPointsOptions) => {
  panTools().openJpointsLaunchPage(options)
}

openJpointsRedeem

關閉 個人小卡 - JPoints - 序號兌換頁

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

const { panTools } = useCat()

// id 可以預先帶入欲儲值的序號
const openJpointsRedeem = (id: string, options?: OpenJPointsOptions) => {
  panTools().openJpointsRedeem(id, options)
}

closeAvatarCard

關閉 個人小卡

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

const { panTools } = useCat()

const closeAvatarCard = () => {
  panTools().closeAvatarCard()
}

initProductCardBtn

此為 web component 用法，會需要載入額外的 js 並使用 html tag 作為渲染執行點

載入 快速導航按鈕 web component js，載入後便可使用 html tag 去渲染 快速導航按鈕

index.ts

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

const { panTools } = useCat()
panTools().initProductCardBtn()

index.html

<!-- 純顯示用 -->
<pan-tools-product-card-btn>快速導航</pan-tools-product-card-btn>

<!-- 完整屬性操作示範 -->
<!-- jtheme 用來控制顏色 -->
<!-- mini 用以控制是否用精簡模式顯示 -->
<!-- mobile 用來控制是否用 mobile 模式顯示 -->
<pan-tools-product-card-btn jtheme="dark" mini mobile onclick="console.log('快速導航')">
  快速導航
</pan-tools-product-card-btn>

openProductCard

開啟 快速導航小卡

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

const { panTools } = useCat()

const openProductCard = () => {
  panTools().openProductCard()
}

closeProductCard

關閉 快速導航小卡

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

const { panTools } = useCat()

const closeProductCard = () => {
  panTools().closeProductCard()
}

openOauthLogin

開啟 Oauth 登入視窗

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

const { panTools } = useCat()

const openOauthLogin = () => {
  panTools().openOauthLogin()
}

openOauthRegister

開啟 Oauth 註冊視窗

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

const { panTools } = useCat()

const openOauthRegister = () => {
  panTools().openOauthRegister()
}

closeOauth

關閉 Oauth 視窗

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

const { panTools } = useCat()

const closeOauth = () => {
  panTools().closeOauth()
}

getAvatarUploader

初始化並調用 頭貼上傳元件

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

const { panTools } = useCat()

let avatarUploaderInstance: null | Awaited<ReturnType<PanToolsMethods['getAvatarUploader']>> = null

// 初始化頭貼上傳元件
const initAvatarUploader = async (): Promise<void> => {
  avatarUploaderInstance = await panTools().getAvatarUploader()

  // 觸發時機：需要介接圖片上傳位址及參數的 API 時
  avatarUploaderInstance?.onNeedUploadInfo(
    async (
      imageFileType: string,
      imageBlob: Blob
    ): Promise<{
      signedPostPolicy: Record<string, string>
      urlToUpload: string
      displayImagePath: string
    }> => {
      // 產品端可自行提供上傳位址及顯示連結
      // 範例如下：

      // 目前 imageFileType 皆提供 'image/jpeg'
      const res = await avatarUploader(accessToken, imageFileType)

      return {
        // 需要夾帶上傳的參數，將會以 FormData 的形式 Form Post 到提供之 urlToUpload。
        // 並且預設將圖片產生之 imageBlob 以 'file' 為鍵值夾帶其中。
        signedPostPolicy: res.signedPostPolicy,
        // 上傳的位置，Form Post 形式上傳。
        urlToUpload: res.urlToUpload,
        // 顯示的連結，Cat 在上傳成功後會嘗試呼叫，直到 displayImagePath 資源可以被取得。
        displayImagePath: res.displayImagePath,
      }
    }
  )

  // 觸發時機：上傳完成，且提供之 displayImagePath 資源可以被取得。
  // 上傳完成後會自動關閉彈窗。
  // callback 中會提供當時上傳的 displayImagePath 。
  avatarUploaderInstance?.onUploaded((newUrl: string) => {
    console.log({ message: '頭貼上傳成功: ' + newUrl, type: 'error' })
  })

  // 觸發時機：上傳失敗，會顯示錯誤提示在 UI 中。
  avatarUploaderInstance?.onError((e: unknown) => {
    console.log({ message: '頭貼上傳失敗: ' + e, type: 'error' })
  })
}

// 開啟頭貼上傳元件
const openAvatarUploader = (): void => {
  avatarUploaderInstance?.open()
}

// 關閉頭貼上傳元件
const closeAvatarUploader = (): void => {
  avatarUploaderInstance?.close()
}

load

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

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

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

const { panTools } = useCat()

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