特殊控件展示
一、 创建实体
- 新建【特殊控件展示】实体并根据下表新建字段
操作 | 描述 | |||||
---|---|---|---|---|---|---|
名称 | 特殊控件展示 | |||||
编码 | specialcontrols | |||||
父实体 | ||||||
引用接口 | 自动编码 | |||||
属性 | 编码 | 名称 | 类型 | 引用 | ||
name | 姓名 | 文本 | ||||
number | 身份证号 | 文本 | ||||
gender | 性别 | 文本 | ||||
qrcode | 二维码 | 文本 | ||||
staff_id | 员工id | 文本 | ||||
invoice_number | 发票号码 | 文本 | ||||
bank_name | 银行名称 | 文本 | ||||
card_number | 银行卡号 | 文本 |
二、 创建页面
- 进入移动端设计器,修改页面布局
- 隐藏【编码】字段
- 在底部栏新加【流式布局】,并将水平方向对齐。
- 在流式布局中插入【身份证识别】、【银行卡识别】、【发票识别】、【人脸识别】、【扫码】五个控件,并设置如下图的样式。
- 选择【身份证识别】控件在 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 打开日志页面,查看我们打印的数据日志。如下图所示。