@taojimu/mx-level-result

结果浮层

截图

获得优惠券、实物奖、现金红包

未获奖、已解开所有福利、未获得宝箱（无抽奖资格）

属性

属性名	类型	默认值	描述
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

dialogBgImg

属性名	类型	默认值	描述
src	String	默认图片地址	关卡结果浮层的背景图片的 url
width	Number	650	图片宽度
height	Number	700	图片高度

noPrizeBannerImg

属性名	类型	默认值	描述
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 或不传	从未配置过	-	恭喜完成任务	成功过关！继续挑战高分吧！

.json 示例代码

{
  "usingComponents": {
    "mx-level-result": "@taojimu/mx-level-result/es/mx-level-result"
  }
}

.axml 示例代码

<mx-level-result
  visible="{{visible}}"
  gap="{{gap}}"
  prize="{{prize}}"
  onCancel="onCancel"
  onContinue="onContinue"
>
</mx-level-result>

.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({
      gap: 300,
      visible: true,
      link: 'https://h5.m.taobao.com',
      prize: compExt.prize,
    });
  },
  onContinue() {
    this.setData({
      visible: false,
    });
  },
  onCancel() {
    this.setData({
      visible: false,
    });
  },
});

ext.json 示例代码

如何生成具体的数据请参见 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
          }
        }
      }
    ]
  }
}