# Chuangkit 创客贴

# 使用配置

# 第一步：配置签名函数

在安装创客贴组件时，需要传入 getSign 获取创客贴签名配置，否则无法唤起创客贴窗口，同时方法返回 Promise 对象，返回结果必须包含 app_id、expire_time、sign、user_flag 四个信息，user_flag 为用户唯一标识，该字段不会在 params 中附带，需要在后端签名时将该字段一起入参并返回。

PS: params 是根据创客贴的规则生成的参数，不得修改对象内容，否则签名失败，无法打开创客贴。

创客贴获取签名文档地址：点我打开 (opens new window)

import Vue from 'vue';
import { Chuangkit } from '@polyv/polyv-ui';

// 获取创客贴签名
function getChuangkitSign(params = {}) {
  // TODO 根据 params 参数请求后端接口获取签名信息

  return Promise.resolve({
    app_id: 'app_id', // 创客贴 appId
    expire_time: 'expire_time', // 签名过期时间
    sign: 'sign', // 签名
    user_flag: 'user_flag', // 用户唯一标识，一般是保利威账号id，该字段需要由后端入参并一起返回到 getSign 中
  });
}

Vue.use(Chuangkit, {
  // 获取创客贴签名配置
  getSign: (params = {}) => {
    return getChuangkitSign(params);
  },
});

# 第二步：配置获取图片地址方法

在创客贴窗口唤起并完成编辑并保存后，创客贴会回调设计数据，需要将这些设计数据中的 design_id、source-urls 传给后端下载图片到 oss 中。

创客贴支持同个 design_id 多张图片同时编辑，source-urls 获取回来的是一个数组，由于保利威当前业务仅提供单张图片的编辑，因此只传入数组的第一项到后端中进行下载。

import Vue from 'vue';
import { Chuangkit } from '@polyv/polyv-ui';

Vue.use(Chuangkit, {
  // 根据完成回调数据获取图片地址
  getImgUrl: async (data) => {
    if (data['design-id'] && data['source-urls'] && data['source-urls'].length) {
      const designId = data['design-id'];
      const url = data['source-urls'][0];
      // TODO 传入后端下载图片资源

      return 'url...';
    }
  },
});

# 第三步：配置获取创客贴模板（可选）

由于创客贴提供的 api 接口前端直接访问会报跨域，因此获取创客贴模板需要通过后端获取并返回模板信息，返回结果必须返回 queryDesignTemplateBeanList totalCount。

getTemplateAction 为可选，如果需要使用到获取模板的操作则为必传。

创客贴获取模板文档接口：点我打开 (opens new window)

import Vue from 'vue';
import { Chuangkit } from '@polyv/polyv-ui';

function getTemplateAction(params = {}) {
  // TODO 将 params 传入后端获取模板列表

  return Promise.resolve({
    queryDesignTemplateBeanList: [], // 创客贴 api 接口的模板列表
    totalCount: 500, // 模板总条目数
  });
}

Vue.use(Chuangkit, {
  // 获取模板列表
  getTemplateAction: async (params = {}) => {
    return getTemplateAction(params);
  },
});

# 第四步：检查账号使用状态（可选）

在唤起创客贴窗口、打开选择模板面板前，会触发创客贴账号状态检查回调 checkAccountStatus，该配置方法需要返回 Promise 对象，当账号可用时返回 resolve，不可用时返回 reject。

当检测不通过时将不会打开对应的窗口，项目实际接入时，可在该方法中执行相关的交互。

当没传入 checkAccountStatus 时，默认判断为允许打开。

import Vue from 'vue';
import { Chuangkit } from '@polyv/polyv-ui';

Vue.use(Chuangkit, {
  checkAccountStatus: () => {
    const status = true;
    if (status) {
      // 账号可用
      return Promise.resolve();
    }

    // 账号不可用
    return Promise.reject();
  },
});

# 第五步：配置套餐 ID

唤起窗口需要配置套餐ID，否则创客贴平台会弹 -211 错误提示。

import Vue from 'vue';
import { Chuangkit } from '@polyv/polyv-ui';

Vue.use(Chuangkit, {
  // 套餐 id
  packageId: 'xxxxx',
});

当页面打开中途才开通的创客贴功能，则可以通过 updatePackageId 方法修改套餐 ID。

import { Chuangkit } from '@polyv/polyv-ui';

// 修改套餐 ID
Chuangkit.updatePackageId('xxxx');

# 设置创客贴全局开关

通过 updateChuangkitEnabled 可控制全局的创客贴开关，开关默认为 true，该开关仅在 image-upload 中适用，通过 js 方式已经可以打开创客贴。

import Vue from 'vue';
import { Chuangkit } from '@polyv/polyv-ui';

// 注册时传入
Vue.use(Chuangkit, {
  enabled: false,
});

// 手动关闭创客贴全局开关
Chuangkit.updateChuangkitEnabled(false);

# 创客贴图片路径规则

后端通过创客贴保存的图片地址必须按照规则生成：/ext/ckt/[designId]/[timestamp].png，由于内部判断是否为创客贴已经获取图片的 designId 都是通过图片地址获取，因此地址规则不得擅自改变。

# 使用方式

# 选择创客贴模板

// vue 组件中使用
const data = await this.$chuangkit.choiceTemplate({
  // 场景选项
  kindOptions: [{
    id: 20,
    label: '横版海报'
  }],
});

// js 调用
import { Chuangkit } from '@polyv/polyv-ui';
const data = await Chuangkit.choiceTemplate({
  // ...
});

调用参数的选项类参数均为数组，数组节点类型如下：

interface Option {
  /** 选项id，该值由创客贴平台提供 */
  id: number,
  /** 选项文案 */
  label: string,
}

# 唤起创客贴

创客贴唤起窗口参数文档：点我打开 (opens new window)

// vue 组件中使用
const url = await this.$chuangkit.open({
  // 可选参数，参数内容为创客贴平台参数
});

// js 调用
import { Chuangkit } from '@polyv/polyv-ui';
const url = await Chuangkit.open();

ChoiceTemplate Attributes

参数	说明	类型	可选值	默认值
kindOptions	场景选项	`Array`	-	内部默认
industryTagOptions	行业选项	`Array`	-	内部默认
sortOptions	排序选项	`Array`	-	内部默认
colorOptions	颜色选项	`Array`	-	内部默认
styleTagOptions	风格选项	`Array`	-	内部默认
proportion	比例	`Number`	-	16 / 9

← BuryingPoint 埋点 LoginPage 登录页 →