UNION_NJUST/target/classes/views/platform/common/signature.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
    <title>签字</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="/assets/platform/plugins/vant/vant.css">

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="/assets/platform/plugins/vue/vue.min.js"></script>
    <script src="/assets/platform/plugins/vant/vant.js"></script>
    <script src="/assets/platform/plugins/jquery/jquery-1.11.1.min.js"></script>
    <script src="/assets/platform/plugins/moment/moment.min.js"></script>
    <script src="/assets/platform/js/signature.min.js"></script>
</head>
<style>
    [v-cloak] {
        display: none
    }

    html, body, #app {
        height: 100%;
        width: 100%;
        margin: 0;
    }

    body {
        overflow: hidden;
        background: #fff;
    }
</style>
<body style="height: 100%;width: 100%">
<div v-cloak id="app" style="height: 100%;width: 100%">
    <van-row style="margin-top: 10vh;text-align: center">
        <h3 style="color: #1989fa">提示：请在下方区域签字！</h3>
    </van-row>
    <van-row style="margin-top: 20px">
        <canvas id="canvas" style="border: rgb(220,220,220) 1px solid"></canvas>
    </van-row>
    <van-row style="margin-top: 20px">
        <van-col span="24" style="text-align: center">
            <van-row type="flex" justify="space-around">
                <van-col span="11">
                    <van-button @click="reset" type="default" size="large">清 空</van-button>
                </van-col>
                <van-col span="11">
                    <van-button type="info" @click="doSub" size="large" :disabled="subDis">提 交</van-button>
                </van-col>
            </van-row>
        </van-col>
    </van-row>
</div>

<script>
    document.body.addEventListener('touchmove', function (e) {
        e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
    }, {passive: false}); //passive 参数不能省略，用来兼容ios和android

    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return '';
    }

    var qmoption = {
        el: '#canvas',
        lineWidth: 4,
        lineColor: '#000',
        overflow: false,
        background: '#fff'
    }
    var qm

    var
        vue = new Vue({
            el: "#app",
            data: function () {
                return {
                    prefix: '',
                    id: '',
                    base64: '',
                    subDis: false,
                    isNull: function (val) {
                        if (val === null || val === undefined || val === '') {
                            return true
                        }
                        return false
                    },
                }
            },
            filters: {
                none2str: function (value) {
                    if (vue.isNull(value)) {
                        return '暂无'
                    }
                    return value
                }
            },
            methods: {
                showNotify(message, type) {
                    if (this.$notify) {
                        this.$notify({
                            message: message,
                            type: type
                        });
                        return
                    }
                    if (window.vant && vant.Notify) {
                        vant.Notify({
                            message: message,
                            type: type
                        })
                        return
                    }
                    window.alert(message)
                },
                reset() {
                    qm.reset()
                },
                doSub() {
                    qm.getContentBase64(false, (val) => {
                        this.base64 = val
                    })

                    $.post("/signature/doSub", {
                        prefix: this.prefix,
                        id: this.id,
                        base64: this.base64
                    }, (data) => {
                        if (data.code == 0) {
                            this.showNotify(data.msg, 'success')
                            this.subDis = true
                        } else {
                            this.showNotify(data.msg, 'danger')
                        }
                    }, "json");
                }
            },
            mounted: function () {
                var canvas = document.getElementById("canvas");
                if (canvas.width < window.innerWidth) {
                    canvas.width = window.innerWidth;
                }

                if (canvas.height < window.innerHeight) {
                    canvas.height = window.innerHeight * 0.5;
                }

                qm = new Signature(qmoption);
                qm.create();
            },
            created: function () {
                if (this.isNull(getQueryVariable("id")) || this.isNull(getQueryVariable("prefix"))) {
                    this.showNotify('缺少参数！', 'danger')
                    this.subDis = true
                }
                this.id = getQueryVariable("id")
                this.prefix = getQueryVariable("prefix")
            }
        })
</script>
</body>
</html>