特殊控件展示

一、 创建实体

• 新建【特殊控件展示】实体并根据下表新建字段

二、 创建页面

• 进入移动端设计器，修改页面布局

• 隐藏【编码】字段

• 在底部栏新加【流式布局】，并将水平方向对齐。

• 在流式布局中插入【身份证识别】、【银行卡识别】、【发票识别】、【人脸识别】、【扫码】五个控件，并设置如下图的样式。

• 选择【身份证识别】控件在 APIlink 中购买好接口使用次数，将 apicode 复制到下图红框内。
  【银行卡识别】、【发票识别】同样操作。

三、 编写函数

• 给五个控件均绑定扫描成功事件和失败事件，并点击进入函数编辑器

• 写入函数，并保存。

• 将每个方法均写入对应函数，并保存

function (event) {
  var viewModel = this;
    console.log("扫码成功");
    console.log(event.events);
    viewModel.get('qrcode').setValue(event.events);
}
function (event) {
  var viewModel = this;
    console.log("扫码失败");
} 

function (event) {
    var viewModel = this;
    console.log("人脸扫描成功");
    console.log(event.events);
    viewModel.get('staff_id').setValue(event.events.userId);
} 
function (event) {
    var viewModel = this;
    console.log("人脸扫描失败");
} 

function (event) {
  var viewModel = this;
    console.log("身份证识别成功");
    console.log(event.events);
    viewModel.get('name').setValue(event.events.name);
    viewModel.get('number').setValue(event.events.number);
    viewModel.get('gender').setValue(event.events.sex);
} 
function (event) {
  var viewModel = this;
    console.log("身份证识别失败");
} 

function (event) {
  var viewModel = this;
    console.log("发票识别成功");
    console.log(event.events);
    viewModel.get('invoice_number').setValue(event.events.number);
} 
function (event) {
  var viewModel = this;
    console.log("发票识别失败");
} 

function (event) {
  var viewModel = this;
    console.log("银行卡识别成功");
    console.log(event.events);
    viewModel.get('bank_name').setValue(event.events.bank_name);
    viewModel.get('card_number').setValue(event.events.card_number);
} 
function (event) {
  var viewModel = this;
    console.log("银行卡识别失败");
}

• 将函数全部写完后，点击移动编辑器右上角的【保存】按钮。（注意：建议一个函数一个函数绑定，每次编写完函数后都要点保存。）

四、 预览调试

• 保存完成后点击【预览】，此时可以将二维码切换成调试模式，使用手机扫描进行试用。

• 将每个按钮都使用后，可以获取如下图的数据。

• 在调试模式中，也可以点击右下角 vConsole 打开日志页面，查看我们打印的数据日志。如下图所示。