❤
npm
Sign UpSign In

@taojimu/mx-task

1.0.26 • Public • Published

任务面板

截图

单任务模式、多任务模式、任务已完成的状态

互动机会用完状态、收藏/加购宝贝浮层、观看视频浮层

属性

属性介绍

属性名 类型 默认值 描述
className String - 自定义组件的样式
visible Boolean false 是否展示任务面板
tasks Array [] 任务列表的数组，数组顺序决定了任务出现的顺序。请传入淘积木任务 meta 所对应的 compExt，中的 tasks 字段原始值（不是 setEnv 传入的的 tasks）。如果任务分人群，需开发者自行根据不同的人群传不同的 tasks。
taskConfig Object 见下文 任务的配置，如任务描述文案，任务按钮文案等
taskInfo String 阿喔！互动资格已用完 任务面板顶部的描述文案
taskMessage String 完成店铺小任务可获得互动资格喔！ 任务面板顶部小标题的任务描述文案
isShowAllTask Boolean true 单任务模式还是多任务模式，默认是多任务模式，即任务面板每次展现所有任务，为 false 的话每次只展现一条未做的任务。
taskPanelHeaderImg Object 见下文 任务面板的头图。请传入淘积木的 compExt 中图片 url 所在的整个图片 object 对象。尺寸要求：750x200 的 png
superTaskPanelHeaderImg Object 见下文 超级任务面板的头图。请传入淘积木的 compExt 中图片 url 所在的整个图片 object 对象。尺寸要求：750x200 的 png
dialogBgColor String '#ffffff' 弹窗的背景色
dialogBtnColor Array 或 String ['#f5515f', '#9f041b', '90deg'] 按钮的颜色，支持通过数组传 2 个色和 1 个角度做渐变色，角度为数组第 3 个值；传一个色则为纯色按钮
dialogBtnTextColor String '#ffffff' 按钮文字的颜色
dialogHeaderImg Object 见下文 任务浮层的头部背景图片，不包括文字。尺寸要求：750x200 的 png。注意，若传入该值，则 taskPanelHeaderImg 将不再生效。 超级任务面板的头图 superTaskPanelHeaderImg 不受影响。
subDialogHeaderImg Object 见下文 收藏浮层、加购浮层、观看视频浮层、预约新机浮层、互动机会用完浮层共用的头部背景图片，不包括文字。尺寸要求：590x200 的 png。注意，若传入该值，则 favorItemHeaderImg、addBagHeaderImg、watchVideoHeaderImg、reservePhoneModelHeaderImg、taskCompleteHeaderImg 将不再生效
favorItemHeaderImg Object 见下文 收藏商品任务浮层的头图。尺寸要求：590x200 的 png
addBagHeaderImg Object 见下文 加购商品任务浮层的头图。尺寸要求：590x200 的 png
taskCompleteHeaderImg Object 见下文 全部任务都做完时，游戏没任何机会了的浮层的头图。尺寸要求：590x200 的 png
taskCompleteBodyImg Object 见下文 全部任务都做完时，游戏没任何机会了的示意图。尺寸要求：300x300 的 png
watchVideoHeaderImg Object 见下文 观看视频任务的浮层头图。尺寸要求：590x200 的 png
reservePhoneModelHeaderImg Object 见下文 预约新机任务的浮层头图。尺寸要求：590x200 的 png
goHomeBtnLink String 回到游戏首页 互动机会用完状态的浮层中“返回首页”按钮的跳转链接，不填写则默认回到游戏首页。
goHomeBtnText String 返回首页 互动机会用完状态的浮层中“返回首页”按钮的文案，不填写则默认为“返回主会场”或“返回首页”。
onTaskSuccess Function - 任务成功的回调，返回 { chance: 2, task: { taskName: 'browsePage', count: 2, isCompleted: true } }
onTaskFail Function - 任务失败的回调，返回错误信息字符串
onCancel Function - 点击遮罩层或右上角叉或下方叉或取消按钮的回调。因为是受控组件，请务必在 onCancel 中通过 setData设置 visible 为 false

taskConfig

默认值

// 任务列表默认配置
const taskConfig = {
  'addBag': {
    label: '加购店铺宝贝',
    btnText: ['去加购', '已加购', '加购商品'],
    desc: '完成任务获得1次互动机会',
  },
  'favorItem': {
    label: '收藏店铺宝贝',
    btnText: ['去收藏', '已收藏', '收藏商品'],
    desc: '完成任务获得1次互动机会',
  },
  'favorDaren': {
    label: '关注达人',
    btnText: ['去关注', '已关注'],
    desc: '完成任务获得1次互动机会',
  },
  'favorShop': {
    label: '订阅店铺',
    btnText: ['去订阅', '已订阅'],
    desc: '完成任务获得1次互动机会',
  },
  'favorLive': {
    label: '关注直播间',
    btnText: ['去关注', '已关注'],
    desc: '完成任务获得1次互动机会',
  },
  'favorMiniapp': {
    label: '添加到手淘二楼',
    btnText: ['去添加', '已添加'],
    desc: '完成任务获得1次互动机会',
  },
  'joinMember': {
    label: '加入会员',
    btnText: ['去入会', '已入会'],
    desc: '完成任务获得1次互动机会',
  },
  'goShop': {
    label: '浏览店铺',
    btnText: ['去浏览', '已浏览'],
    desc: '完成任务获得1次互动机会',
    duration: 10,
  },
  'appointLive': {
    label: '观看店铺直播',
    btnText: ['去观看', '已观看'],
    desc: '完成任务获得1次互动机会',
    duration: 10,
  },
  'share': {
    label: '分享给好友',
    btnText: ['去分享', '已分享'],
    desc: '完成任务获得1次互动机会',
  },
  'shareForHelp': {
    label: '分享助力',
    btnText: ['去分享', '已分享'],
    desc: '完成任务获得1次互动机会',
    // shareQuery为任意的kv参数, 在首页的onLoad中可以获取到，可用于分享回流使用。
    shareQuery: {},
  },
  'goItemDetail': {
    label: '浏览店铺商品',
    btnText: ['去浏览', '已查看'],
    desc: '完成任务获得1次互动机会',
    duration: 10,
  },
  'watchVideo': {
    label: '观看视频',
    btnText: ['去观看', '已观看'],
    desc: '完成任务获得1次互动机会',
    duration: 10,
  },
  'dailyCheckin': {
    label: '每日打卡',
    btnText: ['去打卡', '已打卡'],
    desc: '完成任务获得1次互动机会',
  },
  'browsePage': {
    label: '浏览页面',
    btnText: ['去浏览', '已浏览'],
    desc: '完成任务获得1次互动机会',
  },
};
属性名 类型 默认值 描述
label String - 任务标题
btnText Array 见上文 做任务按钮的文案，值依次为：做任务文案、任务已完成文案、收藏加购等任务展现详情浮层的主按钮文案
desc String 完成任务获得 1 次互动机会 任务描述
duration Number 10 浏览店铺任务 goShop，浏览宝贝详情页任务 goItemDetail，观看直播任务 appointLive，观看视频任务 watchVideo 等任务的浏览/观看时长，单位秒

dialogHeaderImg

属性名 类型 默认值 描述
src String 头图背景 图片的 url
width Number 750 图片宽度
height Number 200 图片高度

subDialogHeaderImg

属性名 类型 默认值 描述
src String 头图背景 图片的 url
width Number 590 图片宽度
height Number 200 图片高度

taskPanelHeaderImg | superTaskPanelHeaderImg

属性名 类型 默认值 描述
src String 普通任务浮层头图、 超级任务浮层头图 图片的 url
width Number 750 图片宽度
height Number 200 图片高度

taskCompleteBodyImg

属性名 类型 默认值 描述
src String 默认图片地址 图片的 url
width Number 300 图片宽度
height Number 300 图片高度

favorItemHeaderImg | addBagHeaderImg | taskCompleteHeaderImg | watchVideoHeaderImg

属性名 类型 默认值 描述
src String 收藏宝贝浮层头图、加购宝贝浮层头图、互动没机会了浮层头图、观看视频浮层头图、预约新机浮层头图 图片的 url
width Number 590 图片宽度
height Number 200 图片高度

安装

# npm 国内用户可设置淘宝镜像
npm config set registry https://registry.npmmirror.com
npm install @taojimu/mx-task -S

# yarn
yarn add @taojimu/mx-task -S

使用

介绍

  • 使用该组件前必须先进行 setEnv 注册，具体参见.js 示例代码
  • mx-task 组件只需传入淘积木任务 meta 所对应的 compExt 中的 tasks 字段原始值，mx-task 会根据任务是否做过进行处理，不需要开发者关心任务做的次数、任务是否已完成等。
  • 组件内置了埋点，如展示任务浮层、关闭任务浮层、点击具体某个任务、任务成功、失败等等。
  • props 中的所有图片、视频数据对象，请从淘积木的 compExt 中读取。

.json 示例代码

{
  "usingComponents": {
    "mx-task": "@taojimu/mx-task/es/mx-task"
  }
}

.axml 示例代码

<mx-task
  visible="{{visible}}"
  tasks="{{tasks}}"
  onCancel="onCancel"
  onTaskSuccess="onTaskSuccess"
  onTaskFail="onTaskFail"
  isShowAllTask="{{isShowAllTask}}"
  taskConfig="{{taskConfig}}"
>
</mx-task>

.js 示例代码

setEnv 介绍

const taojimu = requirePlugin('taojimu');

Page({
  data: {},
  onLoad() {
    const compExt = my.getExtConfigSync().componentTree[0].compExt;

    // 必须要设置setEnv，具体请参考上文的 setEnv介绍
    taojimu.setEnv({
      cid: 'test', // 当前游戏的唯一标志，全局唯一，应该避免和其他游戏isv商冲突。所有的cid 公用一个值即可。主要避免和其他isv重复。
      pageId: 123456, // 页面id, 由淘积木负责生成。测试时可随便制定，用于和cid 一起区分不同isv 厂商在不同页面下游戏和任务的消耗情况。
    });

    this.setData({
      visible: true,
      isShowAllTask: true,
      tasks: compExt.task.tasks,
    });
  },
  onCancel() {
    this.setData({
      visible: false,
    });
  },
  onTaskSuccess(result) {
    // 示例返回结果：
    // result = {
    //   chance: 2, // 游戏机会,
    //   task: {
    //     taskName: 'browsePage',
    //     count: 2, // 任务已经做了2次，
    //     isCompleted: true | false, // 当天的任务是否已经完成
    //   },
    // };
    this.setData({
      visible: false,
    });
  },
  onTaskFail(msg) {
    // 错误信息示例：msg = "请在真机上进行预览"
  },
});

ext.json 示例代码

如何生成具体的数据请参见 meta 文档

{
  "extEnable": true,
  "ext": {
    "componentTree": [
      {
        "meta": [
          {
            "key": "task",
            "type": "task",
            "title": "设置任务",
            "info": "最少1个最多7个",
            "required": true,
            "extension": {
              "scene": "isv",
              "tasks": [
                "favorItem",
                "favorShop",
                "favorLive",
                "addBag",
                "joinMember",
                "share",
                "appointLive",
                "goShop",
                "goItemDetail",
                "favorDaren",
                "watchVideo",
                "dailyCheckin",
                "favorMiniapp"
              ],
              "config": {
                "share": { "name": "分享到群", "minDailyLimit": 1, "maxDailyLimit": 20 },
                "appointLive": { "name": "观看直播", "showDailyLimit": false },
                "addBag": { "itemMin": 1, "itemMax": 4 }
              },
              "showDailyLimit": true,
              "minDailyLimit": 1,
              "maxDailyLimit": 50,
              "max": 7,
              "min": 1
            }
          }
        ],
        "compExt": {
          "task": {
            "tasks": [
              { "taskContent": { "type": "favorShop" }, "dailyLimit": 1 },
              { "taskContent": { "type": "favorLive" }, "dailyLimit": 1 },
              {
                "taskContent": {
                  "type": "favorItem",
                  "items_favor": [586468068490],
                  "items_favorPrefetchData": [
                    {
                      "auction_id": "586468068490",
                      "itemImges": "",
                      "promoName": "",
                      "preSellType": 0,
                      "itemTitle": "测试白盒黑盒创意，请不要拍",
                      "promoMBasePrice": "0.01",
                      "isPostFree": "1",
                      "pictUrl": "//gw.alicdn.com/bao/uploaded/i1/2247603103/O1CN01xnD9Ym1YnDYsTvpMn_!!2-item_pic.png",
                      "preSellCount": "0",
                      "isMall": "1",
                      "icQuantityDesc": "有货",
                      "preSellPrice": "",
                      "promoMPrice": "",
                      "spBiz30day": "0",
                      "spProvcity": "广东 广州",
                      "spSeven": "1",
                      "totalSold": "9",
                      "price": "0.01",
                      "allowApply": false
                    }
                  ]
                },
                "dailyLimit": 3
              },
              {
                "taskContent": {
                  "type": "addBag",
                  "items_addbag": [586468068490],
                  "items_addbagPrefetchData": [
                    {
                      "auction_id": "586468068490",
                      "itemImges": "",
                      "promoName": "",
                      "preSellType": 0,
                      "itemTitle": "测试白盒黑盒创意，请不要拍",
                      "promoMBasePrice": "0.01",
                      "isPostFree": "1",
                      "pictUrl": "//gw.alicdn.com/bao/uploaded/i1/2247603103/O1CN01xnD9Ym1YnDYsTvpMn_!!2-item_pic.png",
                      "preSellCount": "0",
                      "isMall": "1",
                      "icQuantityDesc": "有货",
                      "preSellPrice": "",
                      "promoMPrice": "",
                      "spBiz30day": "0",
                      "spProvcity": "广东 广州",
                      "spSeven": "1",
                      "totalSold": "9",
                      "price": "0.01",
                      "allowApply": false
                    }
                  ]
                },
                "dailyLimit": 3
              },
              { "taskContent": { "type": "joinMember" }, "dailyLimit": 1 },
              { "taskContent": { "type": "share" }, "dailyLimit": 3 },
              { "taskContent": { "type": "goShop" }, "dailyLimit": 3 },
              { "taskContent": { "type": "appointLive", "feedId": 306813489767 }, "dailyLimit": 3 },
              {
                "taskContent": { "type": "goItemDetail", "items_goItemDetail": [563932506881] },
                "dailyLimit": 3
              },
              {
                "taskContent": { "type": "favorDaren", "darenId": "2208728948483" },
                "dailyLimit": 1
              },
              {
                "taskContent": {
                  "type": "watchVideo",
                  "video": {
                    "duration": 3,
                    "url": "https://a1.alibabausercontent.com/prod/feupload/user/qr/c3e1a9a0-2b10-11ec-baf0-fff1de6c9a40.mp4_.mp4",
                    "width": 800,
                    "height": 800,
                    "snapshot": "https://a1.alibabausercontent.com/prod/feupload/user/qr/c3e1a9a0-2b10-11ec-baf0-fff1de6c9a40.mp4_.mp4?x-oss-process=video/snapshot,t_0,w_800,h_800",
                    "poster": "https://a1.alibabausercontent.com/prod/feupload/user/qr/c3e1a9a0-2b10-11ec-baf0-fff1de6c9a40.mp4_.mp4?x-oss-process=video/snapshot,t_0,w_800,h_800",
                    "name": "8WUelvWCo9MVQW2AAh5.mp4"
                  }
                },
                "dailyLimit": 1
              },
              { "taskContent": { "type": "dailyCheckin" }, "dailyLimit": 1 },
              {
                "taskContent": { "type": "favorMiniapp", "miniappId": "3000000027280761" },
                "dailyLimit": 1
              }
            ],
            "current": 11
          }
        },
        "version": "0.0.1"
      }
    ]
  }
}

Readme

Keywords

none

Package Sidebar

Install

npm i @taojimu/mx-task

Weekly Downloads

243

Version

1.0.26

License

ISC

Unpacked Size

89.3 kB

Total Files

11

Last publish

Collaborators

  • taojimu-miniapp
Try on RunKit
Report malware