quansitech/qscmf-rightbutton-qrscanner

qscmf listbuilder component

v1.0.3 2020-05-12 09:11 UTC

This package is auto-updated.

Last update: 2024-04-12 18:14:33 UTC


README

##二维码扫码

介绍

该组件可用于需要生成二维码,并使用扫码触发某些业务的场景。如:绑定用户二维码

安装

composer require quansitech/qscmf-rightbutton-qrscanner

demo图

扫码组件 77417738-c3aa6180-6e00-11ea-8ff9-325c4be69b52.gif

设置了二维码5秒后失效,点击可刷新二维码 77417866-02401c00-6e01-11ea-99cf-f55a0345075f.gif

使用样例

生成列表按钮

$builder->addRightButton('qrscanner', null, '', '', [
                        'websocket' => 'ws://192.168.31.222:2346',
                        'url' => U('home/index/scan', '', false, true),
                        'queryStr' => 'project_id=__id__'
                    ]);

websocket服务端的安装配置方法请移步传送门

该组件封装了react-qrscanner,以下代码为封装好的前端扫码调用实例

<script type="text/javascript" src="__PUBLIC__/qrscanner/qrscanner-bundle.js"></script>
<script>
    //第一个参数 websocket地址
    //第二个参数 自动生成的二维码token
    //第三个参数 扫码回调 status是扫码状态1表示成功,0表示失败  | error 为扫码失败时的错误原因
    //第四个参数 需要传递给服务端业务处理的客制化参数
    window.Qrscanner.scan('ws://192.168.31.222:2346', '{$token}', function(status, error){
        var msg = '';
        if(status){
            msg = '绑定成功';
        }
        else{
            msg = error;
        }
        alert(msg);
    }, {project_id: {$project_id}});
</script>