票夹接入（前端部分）说明文档

invoiceSelector.js使用流程

文档说明：此文档作为第三方报销系统接入我方票夹页面（前端部分）说明使用。

步骤一、引入JS文件

在需要调用JS接口的页面引入如下JS文件（测试地址）:（https://meet.yonyoucloud.com/personal-views/js/invoiceSelector.js）

备注：支持使用 AMD/CMD 标准模块加载方法加载

样例1（原生js方式）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>

    <!-- 使用iframe嵌入票夹页面 -->
    <iframe src="https://meet.yonyoucloud.com/invoices-views/invoicesList.html"></iframe>

  </body>

  <!-- 引入 invoiceSelector 资源 -->
  <script src="https://meet.yonyoucloud.com/personal-views/js/invoiceSelector.js"></script>

</html>

注：以上链接js以及票夹页面地址仅作为引入参考，实际地址将在后续提供。

样例2（AMD/CMD方式）

var Selector = require(moduleName);

说明：
1、moduleName：AMD/CMD方式中引入资源定义的模块名称。

接入注意事项：
1、票夹页面仅限以 iframe 方式嵌入。
2、选择发票数据消息仅发送至票夹页面父窗口（即嵌入 iframe 页面）。

步骤二、实例化Selector对象

监听广播消息之前需实例化Selector对象。

var selector = new Selector();

步骤三、监听/注销广播消息

// 监听发票选择后广播消息
selector.onSelected(function(invoicesList) {

  //TODO something

});


// 移除广播消息监听
selector.removeEvent();

方法说明：
1、onSelected(callback)：监听广播消息的回调方法。
参数：callback(必填)：传入的回调函数。
2、removeEvent()：移除广播消息监听事件，将不再接收广播消息。

接入注意事项：
1、此方案使用postMessage对象，如页面已使用此对象，需单独处理页面原有事件监听回调，以免接收不必要的数据。
2、如每次选择发票都需实例化Selector对象，必须在回调事件中使用 removeEvent() 方法进行注销，防止造成内存泄漏。反之初始化一次即可。

其他

一、监听选择的发票信息回调参数 invoicesList 格式规范

返回参数参考地址（以实际返回字段为准） https://meet.yonyoucloud.com/invoices-views/js/common/data.js

  {
    "basic": {
      "parent_usercode": "some code"
      "yy_usercode": "some code"
    },
    "datas": [
      {
        "invoice": "<Array>"
      },
      {
        "air": "<Array>"
      },
      {
        "train": "<Array>"
      },
      {
        "passenger": "<Array>"
      }
      ...
      },
    ]
  }

字段说明：

1、basic：基本信息，其中：

parent_usercode：接入票夹页面传入的usercode。

yy_usercode：登录票夹账号的usercode。

2、data：选取得发票信息，类型为对象数组，其中：

invoice：增值税发票
air：飞机票。
train：火车票。
passenger：客运汽车发票。
...

二、浏览器兼容性

浏览器	Chrome	Firefox	Internet Explorer	Opera	Safari (WebKit)
支持版本	>=1.0	>=6.0	>=8	>=9.5	>=4.0