xiangan_pc/static/js/sign.js

plugin = null;
function initCRF() {
    let index = 0
    // 初始化签字笔
    const initPlugin = function () {
        index++
        // console.log(plugin);
        if (plugin) {
            plugin.DestroyPlugin();
        }
        plugin = new PluginNSV();
        plugin.InitPlugin(function (state) {
            if (state === 1) {
                //set pen size
                plugin.setPenSizeRange(1, 5, null);
                //set pen color
                plugin.setPenColor(0, 0, 0, null);
                plugin.setDisplayMapMode(1, 0, 0, null)
                console.log('succeeded')
            } else {
                console.log('fails')
            }
        });
        /*confirm event*/
        plugin.onConfirm = function () {
            saveSignToBase64();
            endSign();
            plugin.mouseControl(false, null);
        };
        /*clear event*/
        plugin.onClear = function () {
            clearSign();
        };
        /*cancel event*/
        plugin.onCancel = function () {
            endSign();
        };
        // 监听插件连接服务的状态
        plugin.onStateChange = function (state) {
            if (state === 1) {
                // 连接服务成功
            } else {
                // 连接服务断开
            }
        }
        // 第一次启动时判断
        if (index === 1) {
            console.log('--------------111111111111');
            // 设备是否连接--use是否插上
            plugin.onDevNotifyEvent = (item) => {
                if (item === 1) {
                    alert('签字笔已插入')
                } else {
                    alert('签字笔已拔出')
                }
            }
        }
    }

    initPlugin()

    // 点击手签按钮事件
    $('.shouqian').on('click', function () {
        // console.log($(this)[0].id);
        const buttonNodeIdName = {
            name: $(this)[0].id,
            isImgClick: false,
            type: 1 // 1手签 2自动获取
        }
        $(this).parent().addClass("shouqian-buttons")
        window.sessionStorage.setItem('sign-nodeIdName', JSON.stringify(buttonNodeIdName))
        // 开始签字
        beginSign()
    })

    // 手签图片点击事件
    $('.shouqian-img').on('click', function () {
        // console.log($(this)[0].id);
        const imgNodeName = {
            name: $(this)[0].id,
            isImgClick: true,
            type: 1 // 1手签 2自动获取
        }
        window.sessionStorage.setItem('sign-nodeIdName', JSON.stringify(imgNodeName))
        // 开始签字
        beginSign()
    })

    // 点击自动获取按钮
    $('.auto-import').on('click', function () {
        console.log('自动获取');
        // console.log($(this)[0].id);
        const buttonNodeIdName = {
            name: $(this)[0].id,
            isImgClick: false,
            type: 2 // 1手签 2自动获取
        }
        $(this).parent().addClass("auto-import-buttons")
        window.sessionStorage.setItem('sign-nodeIdName', JSON.stringify(buttonNodeIdName))
        setAutoImport()
    })

    // 开始签名
    const beginSign = function () {
        if (!!plugin) {
            plugin.beginSign(function (state, args) { });
        }
    }

    // 清空签名
    const clearSign = function () {
        if (!!plugin) {
            plugin.clearSign(function (state, args) { });
        }
    }

    // 结束签名
    function endSign() {
        if (!!plugin) {
            /* plugin.endSign(null);*/
            plugin.endSign(function (state, args) { });
        }
    }

    // 保存返回的base64图片
    function saveSignToBase64() {
        if (!!plugin) {
            //Get the plugin's signature image data.
            plugin.saveSignToBase64(/*615, 272*/0, 0, function (state, args) {
                if (state) {
                    const img_base64_data = args[0];
                    const nodeIdName = JSON.parse(window.sessionStorage.getItem('sign-nodeIdName'))
                    const img_base64 = "data:image/png;base64," + img_base64_data;
                    // 没有图片时如果点击的是按钮
                    if (!nodeIdName.isImgClick) {
                        let img = `<img id="${nodeIdName.name}-img" class="shouqian-img" style="width:60px;margin: 0 auto;" src="${img_base64}" ></img>`
                        // 动态插入img
                        $(`#${nodeIdName.name}`).after(img)
                        // 当前父级p标签margn设置为0
                        $(`#${nodeIdName.name}`).parent()[0].style.margin = '0px'
                        // 图片显示后按钮设置为隐藏
                        // $(`#${nodeIdName.name}`).parent().next().css({ "display": "none" })  // 兄弟节点按钮隐藏
                        $(`#${nodeIdName.name}`).css({ "display": "none" })  // 当前节点按钮隐藏
                        // 有了图片后添加图片的点击事件
                        $('.shouqian-img').on('click', function () {
                            // console.log($(this)[0].id);
                            const imgNodeName = {
                                name: $(this)[0].id,
                                isImgClick: true
                            }
                            window.sessionStorage.setItem('sign-nodeIdName', JSON.stringify(imgNodeName))
                            // 开始签字
                            beginSign()
                        })
                    }
                    // 有图片后如果点击的是图片
                    else {
                        // 给img动态设置src
                        // console.log($(`.${nodeIdName.name}`)[0].src);
                        $(`#${nodeIdName.name}`)[0].src = img_base64;
                    }
                } else {
                    // ...
                }
            });
        }
    }

    // 自动获取图片
    function setAutoImport() {
        console.log(123);
        const nodeIdName = JSON.parse(window.sessionStorage.getItem('sign-nodeIdName'))
        const img_base64 = JSON.parse(window.sessionStorage.getItem('qg-userData')).signImgBasesignImgBase
        // 调取接口
        let img = `<img id="${nodeIdName.name}-img" class="shouqian-img" style="width:60px;margin: 0 auto;vertical-align: middle;" src="${img_base64}" ></img>`
        // 动态插入img
        $(`#${nodeIdName.name}`).after(img)
        // 当前父级p标签margn设置为0
        $(`#${nodeIdName.name}`).parent()[0].style.margin = '0px'
        // 图片显示后按钮设置为隐藏
        $(`#${nodeIdName.name}`).parent().prev().css({ "display": "none" })  // 兄弟节点按钮隐藏
        $(`#${nodeIdName.name}`).css({ "display": "none" }) // 当前节点按钮隐藏
    }
}
initCRF()

// 销毁签字笔
function destroyPlugin() {
    console.log('销毁');
    plugin.DestroyPlugin();
    // 防止签名重复调取，销毁点击事件
    $('.auto-import').unbind("click");
}