特殊控件展示

一、 创建实体

  • 新建【特殊控件展示】实体并根据下表新建字段
操作 描述
名称 特殊控件展示
编码 specialcontrols
父实体
引用接口 自动编码
属性 编码 名称 类型 引用
name 姓名 文本
number 身份证号 文本
gender 性别 文本
qrcode 二维码 文本
staff_id 员工id 文本
invoice_number 发票号码 文本
bank_name 银行名称 文本
card_number 银行卡号 文本

image.png image.png

二、 创建页面

image.png image.png image.png

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

image.png image.png

  • 隐藏【编码】字段

image.png

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

image.png

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

image.png

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

image.png

三、 编写函数

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

image.png image.png

  • 写入函数,并保存。

image.png

  • 将每个方法均写入对应函数,并保存
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("银行卡识别失败");
}
  • 将函数全部写完后,点击移动编辑器右上角的【保存】按钮。(注意:建议一个函数一个函数绑定,每次编写完函数后都要点保存。)

image.png

四、 预览调试

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

image.png

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

image.png

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

image.png

Copyright © 用友 -【生态技术部】 2021 all right reserved,powered by Gitbook修订时间: 2021-09-29 17:44:20

results matching ""

    No results matching ""