结果浮层

截图

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

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

属性

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