属性名 | 类型 | 默认值 | 描述 |
---|---|---|---|
className | String |
- | 自定义组件的样式 |
visible | Boolean |
false |
是否展示浮层 |
closable | Boolean |
true |
是否展示浮层关闭按钮 |
mode | String |
'score' |
游戏模式,可选积分模式score 或 宝箱模式box
|
gap | Number |
0 | 与mode 相关,距离下一福利还需多少分(积分模式),或待解锁宝箱还有多少个(宝箱模式) |
prize | Object |
淘积木奖池对象。 | |
coupons | Array |
淘积木优惠券数据的数组。 | |
dialogBgImg | Object |
见下文 | 关卡结果浮层的背景图片。尺寸要求:650x780 的 png |
noPrizeBannerImg | Object |
见下文 | 没有中奖的情况下的 banner 头图。尺寸要求:510x174 的 png |
noPrizeBannerLink | String |
- | 结果浮层中“兜底 banner”图片的跳转链接,不填写则无跳转。 |
dialogBtnColor |
Array 或 String
|
['#f5515f', '#9f041b'] |
关卡结果浮层主按钮的颜色。支持通过数组传 2 个色做从上到下的渐变色,传一个色则为纯色按钮 |
link | String |
跳转店铺首页 | 结果浮层中“了解更多”按钮的跳转链接,不填写则默认跳转至店铺首页。 |
continueBtnText | String |
- | 结果浮层中“继续挑战”按钮的文字 |
onContinue | Function |
- | 结果浮层中“继续挑战”按钮的回调 |
onCancel | Function |
- | 点击遮罩层或右上角叉或下方叉或取消按钮的回调。因为是受控组件,请务必在 onCancel 中通过 setData 设置 visible 为 false
|
属性名 | 类型 | 默认值 | 描述 |
---|---|---|---|
src | String |
默认图片地址 | 关卡结果浮层的背景图片的 url |
width | Number |
650 | 图片宽度 |
height | Number |
700 | 图片高度 |
属性名 | 类型 | 默认值 | 描述 |
---|---|---|---|
src | String |
默认图片地址 | 关卡结果浮层的背景图片的 url |
width | Number |
510 | 图片宽度 |
height | Number |
174 | 图片高度 |
# npm 国内用户可设置淘宝镜像
npm config set registry https://registry.npmmirror.com
npm install @taojimu/mx-level-result -S
# yarn
yarn add @taojimu/mx-level-result -S
-
点击继续挑战后(即在
onContinue
的回调中),开发者需要先通过 taojimu.task.queryInfo 查询任务数据,获得游戏剩余机会chance
,若有游戏机会(chance > 0)则继续游戏,否则则通过控制mx-task
组件的visible
属性打开任务面板,通过做任务来获取游戏机会。 -
互动的每个关卡/阶段结束后,需要抽奖时,开发者通过控制该组件的
visible
属性来展示浮层,通过gap
、prize
、coupons
来控制展示不同状态的浮层。 -
组件内置了埋点,如是否有抽奖资格、是否中奖、中的什么奖等等。
-
props 中的所有图片、优惠券、奖池等数据,请从淘积木的 compExt 中读取。
-
浮层状态解释:
gap prize、coupons 是否中奖 顶部 底部 大于 0 有 是 红包、优惠券、实物奖 下一福利还差 xx 分,或待解锁宝箱还有多少个 大于 0 有 否 未中奖,继续加油 下一福利还差 xx 分,或待解锁宝箱还有多少个 大于 0 无 - 再接再厉 下一福利还差 xx 分,或待解锁宝箱还有多少个 大于 0 从未配置过 - 再接再厉 就差一点点!继续挑战高分吧! 0 或不传 有 是 红包、优惠券、实物奖 恭喜!福利全解锁 0 或不传 有 否 未中奖,继续加油 恭喜!福利全解锁 0 或不传 无 - 恭喜完成任务 恭喜!福利全解锁 0 或不传 从未配置过 - 恭喜完成任务 成功过关!继续挑战高分吧!
{
"usingComponents": {
"mx-level-result": "@taojimu/mx-level-result/es/mx-level-result"
}
}
<mx-level-result
visible="{{visible}}"
gap="{{gap}}"
prize="{{prize}}"
onCancel="onCancel"
onContinue="onContinue"
>
</mx-level-result>
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({
gap: 300,
visible: true,
link: 'https://h5.m.taobao.com',
prize: compExt.prize,
});
},
onContinue() {
this.setData({
visible: false,
});
},
onCancel() {
this.setData({
visible: false,
});
},
});
如何生成具体的数据请参见 meta 文档
{
"extEnable": true,
"ext": {
"componentTree": [
{
"meta": [
{
"key": "prize",
"type": "oright",
"required": true,
"title": "奖池配置"
}
],
"compExt": {
"prize": {
"poolId": 16082075,
"creatorId": 22473103,
"type": 3,
"ename": "44d478d3b291d2870",
"name": "啸棠测试新版权益发奖",
"startTime": "2021-08-16 01:00:10",
"endTime": "2021-09-30 00:00:00",
"status": 1
}
}
}
]
}
}