src/main/resources/templates/conference/confqrcode.html

<div id="qrcode-form" lay-filter="qrcode-form-filter" class="layui-form model-form" style="padding: 10px 25px;">
    <div class="layui-form-item">
        <input type="hidden" id="qrcode-confid" th:value="${confid}"/>
        <input type="hidden" id="myText" th:value="${qrcode}"/>
        <div id="qrcode" class="qrcode-cc layui-input-inline" style="width: auto;margin-left: 150px" ></div>
    </div>

    <div class="layui-form-item">
        <label class="confinput-label layui-form-label" style="width: 150px;"><span style="color: red" >* </span>有效时间段</label>
        <div class="layui-input-inline" style="width: 100px;">
            <input type="text" name="starttime" placeholder="9:00" id="form-qrcode-starttime" autocomplete="off"
                   maxlength="5"
                   class="layui-input" lay-verify="required"/>
        </div>
        <div class="layui-form-mid">-</div>
        <div class="layui-input-inline" style="width: 100px;">
            <input type="text" name="endtime" placeholder="12:00" id="form-qrcode-endtime" autocomplete="off"
                   maxlength="5"
                   class="layui-input" lay-verify="required"/>
        </div>
    </div>

    <div class="layui-form-item model-form-footer">
        <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        <button class="layui-btn" lay-filter="qrcode-form-submit" lay-submit id="submitbtn">申请</button>
    </div>
</div>

<script>

    layui.use(['layer', 'admin', 'form', 'laydate', 'upload'], function () {
        var layer = layui.layer;
        var admin = layui.admin;
        var form = layui.form;
        var laydate = layui.laydate;


        form.render("select");
        laydate.render({
            elem: '#form-qrcode-starttime',
            type: 'time',
            format: 'HH:mm',
            trigger: 'click'
        });
        laydate.render({
            elem: '#form-qrcode-endtime',
            type: 'time',
            format: 'HH:mm',
            trigger: 'click'
        });
        var qcode = $("#myText").val();
        createQrcode(qcode);

        form.on('submit(qrcode-form-submit)', function (data) {
            var token = $("meta[name='_csrf_token']").attr("value");
            var vdata = data.field;

            if (null == vdata.starttime || null == vdata.endtime) {
                layer.msg("请选择时间段", {icon: 2, time: 1500});
                return;
            } else if (vdata.endtime <= vdata.starttime) {
                layer.msg("请正确选择时间段", {icon: 2, time: 1500});
                return;
            }
            var formData = new FormData();
            var confid=$("#qrcode-confid").val();
            formData.append("starttime", vdata.starttime);
            formData.append("endtime", vdata.endtime);
            formData.append("confid", confid);

            layer.load(2);
            $.ajax({
                type: "POST",
                url: '[[@{/conference/getqrcode}]]',
                dataType: 'json',
                processData: false,
                contentType: false,
                data: formData,
                headers: {
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': token,
                },

                success: function (result) {
                    layer.closeAll('loading');
                    if (result.code == 200) {

                        createQrcode(result.msg);
                        layer.msg("成功", {icon: 1, time: 1500});


                    } else if (result.code == 401) {
                        layer.msg(result.msg, {icon: 2, time: 1500}, function () {
                            location.replace('[[@{/login}]]');
                        }, 1000);
                        return;
                    } else if (result.code == 599) {
                        //自定义错误
                        layer.open({
                            type: 0,
                            title: "错误信息",
                            icon: 2,
                            area: ['600px', '400px'],
                            content: result.msg
                        });

                    } else {
                        layer.msg(result.msg, {icon: 2, time: 1500});
                    }
                },
                error: function (err) {
                    layer.msg("error", {icon: 2, time: 1500});
                }
            });

        });


    });

    function  createQrcode(qcode) {

        if (undefined != qcode && null != qcode && "" != qcode) {
            var qrcode = new QRCode(document.getElementById("qrcode"), {
                render : "canvas",
                text: qcode,
                width: 220,
                height: 220,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H
            });
        }
    }
</script>