GameTaskPanel 任务面板

本组件是对游戏任务相关业务逻辑的封装

使用

安装组件库yarn add @ezr/game-task-react，引入后使用即可

代码演示

没有任务

const [panelShow, setPanelShow] = useState(false);

<GameTaskPanel
  visible={panelShow}
  isShareAddGetLimitNum={false}
  taskGroups={JSON.stringify([])}
  onClose={() => {
    setPanelShow(false)
  }}
></GameTaskPanel>

只有分享

当游戏未关联任务，只开启了分享功能时，只会展示分享任务

const [panelShow, setPanelShow] = useState(false);

<GameTaskPanel
  visible={panelShow}
  onClose={() => {
    setPanelShow(false)
  }}
  isShareAddGetLimitNum={true}
  daySurplusGetLimitNum={2}
  vipShareGetLimitNum={3}
  shareAddMaxGetLimitNum={4}
  taskGroups={JSON.stringify([])}
></GameTaskPanel>

只有任务

const [panelShow, setPanelShow] = useState(false);

<GameTaskPanel
  visible={panelShow}
  onClose={() => {
    setPanelShow(false)
  }}
  isShareAddGetLimitNum={false}
  daySurplusGetLimitNum={2}
  vipShareGetLimitNum={3}
  shareAddMaxGetLimitNum={4}
  taskGroups={taskGroupsData}
></GameTaskPanel>

有分享和任务

const [panelShow, setPanelShow] = useState(false);

<GameTaskPanel
  visible={panelShow}
  onClose={() => {
    setPanelShow(false)
  }}
  miniAppId="123123"
  isShareAddGetLimitNum={1}
  daySurplusGetLimitNum={2}
  vipShareGetLimitNum={3}
  shareAddMaxGetLimitNum={4}
  actId="1"
  actType="0"
  fullPrizeTopOtherPic="https://assets-img.ezrpro.com/pc/img/wx/noprize.png"
  fullPrizeCentralPic="https://assets-img.ezrpro.com/pc/img/wx/backgroundpic.png"
  fullPrizeBottomPic="https://assets-img.ezrpro.com/pc/img/wx/bottonpic.png"
  fullPrizeAssistButtonTextColor="#ec8a1c"
  taskGroups={taskGroupsData}
></GameTaskPanel>

API

参数	是否必传	说明	类型	默认值	版本
visible	是	是否可见	bool	false	1.0.0
miniAppId	否	H5跳转小程序对应的AppId	string	''	1.0.0
isShareAddGetLimitNum	否	是否开启分享获取次数(1-开启，0-未开启)	number	1	1.0.0
vipShareGetLimitNum	否	已经分享的次数	number	0	1.0.0
shareAddMaxGetLimitNum	否	配置的分享次数(0-不限 其他-天)	number	0	1.0.0
fullPrizeTopOtherPic	否	弹窗顶部图片	string	https://assets-img.ezrpro.com/pc/img/wx/noprize.png	1.0.0
fullPrizeCentralPic	否	弹窗中部图片	string	https://assets-img.ezrpro.com/pc/img/wx/backgroundpic.png	1.0.0
fullPrizeBottomPic	否	弹窗底部图片	string	https://assets-img.ezrpro.com/pc/img/wx/bottonpic.png	1.0.0
fullPrizeAssistButtonTextColor	否	按钮颜色	string	#ec8a1c	1.0.0
actId	否	游戏活动id	number	0	1.0.0
actType	否	游戏类型	number	0	1.0.0
taskGroups	否	游戏任务数据	object	见下方说明	1.0.0
onClose	是	关闭弹窗回调	function		1.0.0

任务组参数说明

TaskCfg说明

添加企微好友
{"LoginId":11025}
添加企微社群
{"GroupLiveCodeId":125}
浏览小程序页面
{"AppType":1,"AppPage":[{"PageId":159,"PagePath":"page/prod/list"}],"ViewSecond":10}
预约视频号直播
{"WeChatVideoID":"123456789"}

taskGroups

[{
  "TaskId": 11, // 任务id
  "TaskName": "添加企微好友", // 任务名称
  "TaskType": 2, // 任务类型（1 添加企微好友 2 添加企微社群 3 浏览小程序页面 4 预约视频号直播）
  "TaskIcon": "https://assets-img.ezrpro.com/pc/icon/basic/g.png", //任务图标
  "TaskRemark": "我的任务2备注", //备注
  "TaskCfg": { //关联任务
    "LoginId": 128,
  },
  "TaskStatus": 2, //任务状态（-1 全部 0 已禁用 1 已启用 2 设计中 3 未开始 4 进行中 5 已结束）
  "TaskTimeType": "TS", // 任务时间类型（TS 自定义  FV 长期）
  "BegDate": "2008-05-12 14:28:00",//开始时间
  "EndDate": "2023-05-12 14:28:00",//结束时间
  "IsCompleted": false, // 任务是否完成
  "RewardNum": 1, // 奖励参与游戏活动次数
  "Sequence": 2 // 任务排序
},
  {
    "TaskId": 12,
    "TaskName": "添加企微社群",
    "TaskType": 3,
    "TaskIcon": "https://assets-img.ezrpro.com/pc/icon/basic/g.png",
    "TaskRemark": "我的任务3备注",
    "TaskCfg": {
      "GroupLiveCodeId": 1201
    },
    "TaskStatus": 2,
    "TaskTimeType": "TS",
    "BegDate": "2008-05-12 14:28:00",
    "EndDate": "2023-05-12 14:28:00",
    "IsCompleted": false,
    "RewardNum": 1,
    "Sequence": 3
  },
  {
    "TaskId": 13,
    "TaskName": "浏览商城",
    "TaskType": 4,
    "TaskIcon": "https://assets-img.ezrpro.com/pc/icon/basic/g.png",
    "TaskRemark": "我的任务4备注",
    "TaskCfg": {
      "AppType": 1,
      "AppPage": [{
        "PageId": 159,
        "PageName": "商品列表页",
        "PagePath": "page/prod/list",
        "IsViewCompleted": false
      }],
      "ViewSecond": 10
    },
    "TaskStatus": 2,
    "TaskTimeType": "TS",
    "BegDate": "2008-05-12 14:28:00",
    "EndDate": "2023-05-12 14:28:00",
    "IsCompleted": false,
    "RewardNum": 1,
    "Sequence": 4
  },
  {
    "TaskId": 14,
    "TaskName": "预约直播间",
    "TaskType": 5,
    "TaskIcon": "https://assets-img.ezrpro.com/pc/icon/basic/g.png",
    "TaskRemark": "我的任务5备注",
    "TaskCfg": {
      "WeChatVideoID": "zhaohaiyang"
    },
    "TaskStatus": 2,
    "TaskTimeType": "TS",
    "BegDate": "2008-05-12 14:28:00",
    "EndDate": "2023-05-12 14:28:00",
    "IsCompleted": false,
    "RewardNum": 1,
    "Sequence": 5
  }
]

FAQ

哪些字段可以不传？

看Demo传参，主要分为四种：

1、什么功能都没有

2、只有分享

3、只有任务组

4、任务组+分享

开启分享/开启任务组 如何判断？

• 传taskGroups则视为开启任务组

• 传isShareAddGetLimitNum === 1则视为开启了分享

任务列表顺序变化？

设计如此。已完成的任务会在列表最下方，未完成的会上来。