@cbd-wujie-components/user-tower

安装

npm install --save @cbd-wujie-components/user-tower

yarn install --save @cbd-wujie-components/user-tower

pnpm install @cbd-wujie-components/user-tower

使用

import React from 'react'
import { UserTower } from 'cbd-wujie-components'
const App = () => {
  
  const configAdd = {
    authId: '1828168xxxx',
    env: 'DEV',
    type: 'add',
    maId: 'maId',
    close: (res: UserTowerRes) => {
      console.log(res)
    },
  } as UserTowerConfig
  
  return (
    <div>
      <UserTower config={configAdd} />
    </div>
  )
}
export default App

组件 props

export interface UserTowerProps {
  config: UserTowerConfig
  hooks?: {
    beforeLoad?: () => void
    beforeMount?: () => void
    afterMount?: () => void
    beforeUnmount?: () => void
    afterUnmount?: () => void
  }
}

| 名称 | 说明 | 必填说明 | |----------|--------------------|------| | config | user-tower 的配置参数 | 必填 | | hooks | wujie子应用载入的 hooks | 可选 |

props config

export interface UserTowerConfig {
  authId: string | number
  env: 'DEV' | 'PROD'
  type: 'add' | 'edit' | 'view' | 'select'
  startTime: string // e.g. 2023-04-27T07:32:39.000+00:00
  endTime: string // e.g. 2023-07-27T07:32:39.000+00:00
  crowdId: string | number
  maId: string | number
  close: (res: UserTowerRes) => void
}

| 名称 | 说明 | 必填说明 | |--------------|-----------------------------------|------| | authId | 鉴权id(登录使用，可以是账户下绑定的手机号) | 必填 | | env | 环境配置，决定请求 user-tower 的地址是开发还是生产 | 必填 | | type | 操作类型，分别对应使用场景为创建人群、编辑人群和查看人群 | 必填 | | startTime | 活动开始时间 在编辑时必填！ |可选 | | endTime | 活动结束时间 在编辑时必填！ | 可选 | | crowdId | 人群id，在编辑和查看时必填！！ | 可选 | | ComponentId | 组件id | 必填 | | maId | 画布id | 必填 | | close | user-tower 关闭时的回调方法，根据场景出参，支持业务流程 | 必填 |

props config 中的 close 方法返回值

export interface UserTowerRes {
  status: 'complete' | 'interrupt'
  type: 'add' | 'edit' | 'view' | 'select'
  msg?: string
  data: {
    crowd?: Array<{
      id: string | number
      num: number
      name: string
    }>
    maId: string | number
    num?: number
    name?: string
    brandId?: number
  } | null
}

| 名称 | 说明 | |---------|-------------| | status | 表示流程是否被中断 | | type | 操作类型 | | data | 点选人群后返回的数据 |

• 在选择时，勾选人群后，点击人群选择按钮 UserTowerRes 的返回值

const res = {
  status: 'complete',
  data: {
    brandId: 123,
    maId,
    crowd: [{
      id: 'xxxx',
      num: '0000',
      name: 'xxx人群'
    }]
  },
  type: 'add'
}

• 在选择时，點擊關閉按鈕

const res = {
  status: 'interrupt',
  data: null,
  type: 'select'
}

• 在創建时，關閉按鈕

const res = {
  status: 'interrupt',
  data: null,
  type: 'add'
}

• 在創建时，點擊保存按钮

人群创建和编辑的保存皆为伪保存，需要在画布保存时调用Api userTowerSaveFT 来保存并获取出参

const res = {
  status: 'complete',
  data: {
    brandId: 123,
    num: 1,
    name: 'xxx',
    maId: 'xxx',
  },
  type: 'add'
}

• 在导入人群时，點擊關閉按鈕

const res = {
  status: 'interrupt',
  data: null,
  type: 'add'
}

• 在导入人群时，保存上传导入的人群包

const res = {
  status: 'complete',
  data: {
    brandId: 123,
    name: 'xxx',
    maId: 'xxx',
  },
  type: 'add'
}

• 在编辑时，點擊取消或關閉按鈕

const res = {
  status: 'interrupt',
  data: null,
  type: 'edit'
}

• 在编辑时，保存人群

人群创建和编辑的保存皆为伪保存，需要在画布保存时调用Api userTowerSaveFT 来保存并获取出参

const res = {
  status: 'complete',
  data: {
    brandId: 123,
    num: 1,
    name: 'xxx',
    maId: 'xxx',
  },
  type: 'edit'
}

组件 Api

userTowerSaveFT

在画布保存时调用, 对编辑或创建的人群进行保存

Tips:

• 它的调用同样必须在打开过组件页面后才生效，因为需要获取到人群管理后台登录 token，才能调用接口
• 它会根据 maId 和 ComponentId找到对应缓存数据，根据type进行编辑提交或创建提交

declare interface UTSaveOptionsItem {
  maId: string | number;
  ComponentId: string | number;
}
declare type UTSaveOptions = Array<UTSaveOptionsItem>;

declare function userTowerSaveFT(
  options: UTSaveOptions,
  type: "add" | "edit",
  env: 'dev' | 'prod'): Promise<UserTowerSaveRes>

| 名称 | 说明 | 类型 | 必填 | |------------|------|----------------------|------| | options | 配置列表 | Array | 必填 | | type | 操作类型 | "add" or "edit" | 必填 | | env | 请求环境 | 'dev' / 'prod' | 必填 |

export interface UserTowerSaveRes {
 status: 'complete' | 'interrupt'
 type: 'add' | 'edit'
 msg?: string
 data: [{
   crowd: [{
     // 人群id 
     id: string | number
     // 人群数量 
     num?: string | number
     // 人群名称 
     name: string
   }]
   // 画布 id
   maId: string | number
   // 组件 id
   ComponentId: string | number
   // 品牌id
   brandId: number | string,
 }] | null
}

destroyUserTower

销毁组件子应用实例，销毁时会清空所有事件订阅监听

declare function destroyUserTower(
  appId: string
): void

| 名称 | 说明 | 类型 | 必填 | |--------------|-------|----------------|------| | appId | appid | string | 必填 |

参数示例

选择人群

const configSelect = {
  authId: '18281xxxxx',
  env: 'DEV',
  type: 'select',
  maId: 'maId',
  close: (res: UserTowerRes) => {
    console.log(res)
  },
} as UserTowerConfig

查看人群

const configView = {
  authId: '1828168xxxx',
  env: 'DEV',
  type: 'view',
  maId: 'maId',
  crowdId: '5',
  close: (res: UserTowerRes) => {
    console.log(res)
  },
} as UserTowerConfig

创建人群

const configAdd = {
  authId: '1828168xxxx',
  env: 'DEV',
  type: 'add',
  maId: 'maId',
  ComponentId: 'ComponentId',
  close: (res: UserTowerRes) => {
    console.log(res)
  },
} as UserTowerConfig

创建人群保存

import { userTowerSaveFT } from '@cbd-wujie-components/user-tower'
const handleSave = async() => {
const res = await userTowerSaveFT('maId', 'ComponentId', 'add', 'dev')
console.log(res)
}

编辑人群

const configEdit = {
  authId: '1828168xxx',
  env: 'DEV',
  type: 'edit',
  maId: 'maId',
  startTime: '2023-09-20T07:32:39.000+00:00',
  endTime: '2023-09-27T07:32:39.000+00:00',
  ComponentId: 'ComponentId',
  crowdId: '5',
  close: (res: UserTowerRes) => {
    console.log(res)
  },
} as UserTowerConfig

编辑人群保存

import { userTowerSaveFT } from '@cbd-wujie-components/user-tower'
const handleSave = async() => {
const res = await userTowerSaveFT('maId', 'ComponentId', 'edit', 'dev')
  console.log(res)
}

销毁组件子应用

import { destroyUserTower } from '@cbd-wujie-components/user-tower'
const destroy = () => {
  destroyUserTower(`__CBD_WJ_USER_TOWER_${ComponentId}`)
}

❗❗❗ Tips

• 暴露的方法 userTowerSaveFT 需要子应用的token，因此调用前必须打开过组件页面
• 由于 user-tower 接口请求频次限制，不可以使用同一个 authId 同时打开两个 user-tower
• 导入人群创建成功之后没有人群数量，只有人群id 正常创建成功后有人群id和人群数量
• user-tower 组件基于 是基于 wujie 的微前端封装，如果无法访问，这与网站访问安全策略有关，需要找誉博一同解决