scott
/
crm


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635
							{extend name="public/layout" /} {block name="title"}创建活码{/block} {block name="body"}
<style type="text/css">
    html {
        background: #fff;
    }

    body {
        min-width: 320px;
    }

    @media screen and (max-width: 450px) {
        .layui-form-item {
            width: 100%;
        }
    }

    .layui-form-label {
        width: auto;
    }

    .qrcodemana {
        padding: 9px 15px;
    }

    .layui-border-blue {
        border-color: #249efb;
        color: #249efb;
    }

    .layui-border-blue:hover {
        border-color: #249efb;
        color: #249efb;
    }

    .layui-border-red {
        border-color: #ff5722;
        color: #ff5722;
    }

    .layui-border-red:hover {
        border-color: #ff5722;
        color: #ff5722;
    }

    .layui-table thead tr,
    .layui-table-header {
        background-color: #D8E6F1 !important;
    }

    .addimg {
        display: block;
        width: 100%;
        height: 48px;
        border: 2px dashed #ccc;
        line-height: 44px;
        box-sizing: border-box;
        text-align: center;
        color: #249efb;
    }

    .layui-form-radio>i:hover,
    .layui-form-radioed>i {
        color: #249efb;
    }

    .nonepad {
        padding-left: 0 !important;
    }

    .codetext {
        background-color: #f2f2f2;
        padding: 8px 16px;
        line-height: 24px;
    }

    #layuiadmin-code-submit {
        display: block;
        color: #249EFB;
        border: 1px solid #249EFB;
        margin: 0 auto;
    }

    #layuiadmin-code-submit:hover {
        background-color: #E3F7FF;
        color: #249EFB;
    }

    .uploadimgbtn,
    .uploadimgbtn:hover {
        display: block;
        width: 120px;
        height: 32px;
        background-color: #249efb;
        color: #fff;
        margin-left: 15px;
    }


    .endtime {
        border: 1px solid #384855;
        height: 32px;
        line-height: 32px;
        width: 25%;
        padding-left: 16px;
    }

    .ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .codeicon {
        display: block;
        height: 25px;
        cursor: pointer;
    }

    .mask {
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0px;
        left: 0px;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #admin121 {
        padding-top: 50px;
    }

    .qrcode {
        position: absolute;
        right: 30px;
        top: 80px;
    }

    .qrcodeimg {
        display: block;
        width: 140px;
        height: 140px;
        padding: 10px;
        border: 1px solid #384855;
        margin: 0 auto;

    }

    .qrcodeimg img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .mt20 {
        margin-top: 20px;
    }

    #layuiadmin-code-submit12 {
        display: block;
        margin: 0 auto;
    }

    .mask-block {
        width: 90%;
        height: 80%;
        background-color: #fff;
        position: relative;
        overflow: auto;
    }

    #uploadbtn {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }

    .labelWidth {
        width: 100px;
    }

    .submit-btn121 {
        margin-top: 100px;
    }

    .mask-title {
        background-color: #D8E6F1;
        padding: 12px 20px;
        display: flex;
        justify-content: space-between;
    }
    .btnstyle,.btnstyle:hover {
        background-color: #249EFB !important;
        color: #fff !important;
    }
</style>

<body>
    <form class="layui-form" id="admin" enctype="multipart/form-data">
        <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list"
            style="padding: 20px 30px 0 0;">
            <div class="layui-form-item">
                <label class="layui-form-label"><i style="color: red;margin-right:5px;">*</i>活动名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required" placeholder="请输入活动名称" autocomplete="off"
                        class="layui-input" style="max-width: 400px;" value="{$data.name}">
                </div>
            </div>
            <div class="qrcodemana">二维码管理</div>
            <div class="layui-card-body layui-form">
                <table class="layui-table" id="addcode" lay-filter="addcode">
                    <thead>
                        <tr>
                            <th>优先级</th>
                            <th>二维码文件名</th>
                            <th>二维码 </th>
                            <th>报名上限</th>
                            <th>失效时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="tbodyHtmls">
                    </tbody>
                </table>
            </div>
            <div class="layui-card-body" id="upload-drag">
                <div class="addimg">+点击添加二维码<span id="uploadNumber"></span></div>
            </div>
            <div class="layui-card-body layui-form">
                <div class="layui-form-item">
                    <div class="layui-form-label nonepad">二维码切换方式</div>
                    <div class="layui-input-block">
                        <input lay-filter="setcode" type="radio" name="switch_type" value="1" title="轮询切换" {eq
                            name="$data.switch_type" value="1" }checked{/eq}>
                        <input lay-filter="setcode" type="radio" name="switch_type" value="2" title="顺序切换" {eq
                            name="$data.switch_type" value="2" }checked{/eq}>
                        <input lay-filter="setcode" type="radio" name="switch_type" value="3" title="随机切换" {eq
                            name="$data.switch_type" value="3" }checked{/eq}>
                    </div>
                </div>
                <div class="layui-form-item codetext">
                    <p class=""{eq
                        name="$data.switch_type" value="1" } {else/} style="display:none;"{/eq}>根据二维码的优先级顺序，平均展示给访问用户</p>
                    <p class="" {eq
                        name="$data.switch_type" value="2" } {else/} style="display:none;" {/eq}>二维码访问人数达到报名上限后，自动切换至下一个二维码</p>
                    <p class="" {eq
                        name="$data.switch_type" value="3" } {else/} style="display:none;" {/eq}>用户扫描二维码后，将在所上传的二维码中随机一个进行展示</p>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-label nonepad">上传活动海报</div>
                    <div class="layui-input-inline" id="upload-cover">
                        {if condition="$data.poster_img neq ''"}
                        <div class="layui-upload-drag" style="width: 250px; margin-top: 13px;">
                            <img src="{:$data['poster_img']}?x-oss-process=image/resize,l_125" class="layui-upload-img"
                                width="100%" height="100%">
                        </div>
                        {else /}
                        <div class="layui-upload-drag" style="width: 250px;margin-top: 13px;">
                            <i class="layui-icon">&#xe681;</i>
                            <p>点击上传</p>
                        </div>

                        {/if}
                    </div>
                    <!--<div class="layui-input-block">
                        <input lay-filter="covershow" type="radio" name="is_poster" value="1" title="不展示" {eq
                            name="$data.is_poster" value="1" }checked{/eq}>
                        <input lay-filter="covershow" type="radio" name="is_poster" value="2" title="展示" {eq
                            name="$data.is_poster" value="2" }checked{/eq}>
                    </div>-->
                </div>
                <!--<div class="layui-form-item activityshowbox">
                    <div class="layui-form-label nonepad" style="display:none;">上传活动海报</div>
                    <div class="layui-input-inline" id="upload-cover">
                        {if condition="$data.poster_img neq ''"}
                        <div class="layui-upload-drag" style="width: 250px; margin-top: 13px;">
                            <img src="{:$data['poster_img']}?x-oss-process=image/resize,l_125" class="layui-upload-img"
                                width="100%" height="100%">
                        </div>
                        {else /}

                        <div class="layui-upload-drag" style="width: 250px;margin-top: 13px;">
                            <i class="layui-icon">&#xe681;</i>
                            <p>点击上传</p>
                        </div>

                        {/if}
                    </div>
                </div>-->
            </div>
            <div class="layui-form-item submit-btn" style="clear:both;">
                <input class="layui-btn btnstyle" type="button" lay-submit lay-filter="layuiadmin-code-submit"
                    id="layuiadmin-code-submit" value="确认">
            </div>
        </div>
    </form>
    <div class="mask layui-hide">
        <div class="mask-block">
            <div class="mask-title">
                <span>编辑二维码</span>
                <i class="layui-icon layui-icon-close"
                    style="color: #333;font-weight: 700;font-size: 18px;cursor: pointer;"></i>
            </div>
            <form class="layui-form" id="admin121" enctype="multipart/form-data">
                <div class="layui-card-body">二维码文件名：<span id="qrName"></span></div>
                <div class="layui-form-item mt20">
                    <div class="layui-form-label labelWidth">访问人数上限</div>
                    <input class="layui-input input-indent-box limitEl" min="1" style="width:190px;" name="limit"
                        type="number" value="" lay-verify="int" />
                </div>
                <div class="layui-form-item mt20">
                    <div class="layui-form-label labelWidth">优先级</div>
                    <input class="layui-input input-indent-box priorityEl" min="1" style="width:190px;" name="priority"
                        type="number" value="" lay-verify="int" />
                </div>
                <div class="layui-form-item mt20">
                    <div class="layui-form-label labelWidth">二维码有效期</div>
                    <input class="layui-input input-indent-box validityDate" id="validityDate" style="width:190px;"
                        name="validity_date" type="text" value="2023-06-11" readonly />
                </div>
                <div class="qrcode">
                    <div class="qrcodeimg" id="qrcodeimgOne">
                        <img class="qrcodeimgLinks" src="__STATIC__/img/official.jpg" />
                    </div>
                    <div class="layui-form-item " id="uploadbtn">
                        <button type="button"
                            class="layui-btn layui-btn-primary layui-btn-xs uploadimgbtn">点击上传二维码</button>
                    </div>
                    <div class="layui-card-body" style="padding-top:0;">只能上传jpg/png，且大小不能超过1M</div>
                </div>
                <div class="layui-form-item submit-btn121">
                    <input class="layui-btn layui-btn-primary " type="button" lay-submit
                        lay-filter="layuiadmin-code-submit12" id="layuiadmin-code-submit12" value="确认">
                </div>
            </form>
        </div>
    </div>
</body>
{/block} {block name="js"}
<script>
    layui.config({
        base: '__LAYUI__/',
        urlbase: '/sys'
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'table', 'upload', 'laydate'], function () {
        var $ = layui.$,
            upload = layui.upload,
            form = layui.form,
            table = layui.table,
            laydate = layui.laydate,
            qrcodelist = [],
            eIndex = null,
            fileObj = {};


        form.render()
        form.on('submit(layuiadmin-code-submit)', function (obj) {
            var index = parent.layer.getFrameIndex(window.name);
            var formData = new FormData(obj.form);
            // 单击之后提交按钮不可选,防止重复提交
            formData.append('zima_list', JSON.stringify(qrcodelist));
            formData.set('id', '{$data.id}');
            var DISABLED = 'layui-btn-disabled';
            var target = '#activity-submit';
            $(target).addClass(DISABLED);
            $(target).attr('disabled', 'disabled');
            $.ajax({
                url: '{:url("huoma/edit_code")}',
                type: 'post',
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (res) {
                    if (res.code === 0) {
                        layer.msg(res.msg, {
                            anim: 0
                            , time: 2000
                        }, function () {
                            parent.layui.table.reload('livecode'); //重载表格
                            parent.layer.close(index); //再执行关闭
                        });
                    } else {
                        layer.msg(res.msg, {
                            anim: 6
                            , time: 2000
                        });
                    }
                }
            });
            return false;
        });

        form.on('submit(layuiadmin-code-submit12)', function (obj) {
            qrcodelist[eIndex].priority = obj.field.priority;
            qrcodelist[eIndex].limit = obj.field.limit;
            qrcodelist[eIndex].validity_date = obj.field.validity_date;
            if (fileObj.name_qrcode_img) {
                qrcodelist[eIndex].name_qrcode_img = fileObj.name_qrcode_img;
                qrcodelist[eIndex].link_qrcode_img = fileObj.link_qrcode_img;
                qrcodelist[eIndex].qrcode_img = fileObj.qrcode_img;
                qrcodelist[eIndex].file_name = fileObj.file_name;
            }
            setHtml(qrcodelist)
            $('.mask').addClass('layui-hide');
        });


        function htmlspecialchars_decode(text) {
            var replacements = Array("&", "<", ">", '"', "'");
            var chars = Array("&amp;", "&lt;", "&gt;", "&quot;", "'");
            for (var i = 0; i < chars.length; i++) {
                var re = new RegExp(chars[i], "gi");
                if (re.test(text)) {
                    text = text.replace(re, replacements[i]);
                }
            }
            return text;
        }

        setDataMsg();
        function setDataMsg () {
            qrcodelist = JSON.parse(htmlspecialchars_decode("{$data.zima}")).map(v => {
                return {
                    id: v.id,
                    priority: v.stort,
                    validity_date: v.code_invalid_time,
                    limit: v.max_visit,
                    link_qrcode_img: v.qrcode_img,
                    name_qrcode_img: v.qrcode_name,
                    qrcode_img: v.qrcode_img,
                    file_name: v.file_name
                }
            });
            $('#uploadNumber').html(`（已添加${qrcodelist.length}张）`);
            setHtml(qrcodelist);

            let is_poster = "{$data.is_poster}";
            /*if (is_poster == 1) {
                $('.activityshowbox .nonepad').show();
                $('#upload-cover').hide();
            } else {
                $('.activityshowbox .nonepad').hide();
                $('#upload-cover').show();
            }*/
        }

        function setHtml(arr) {
            let htmls = arr.map((v, i) => {
                return `<tr>
                            <td>${v.priority}</td>
                            <td>${v.file_name}</td>
                            <td><img class="codeicon" src="${v.link_qrcode_img}" alt="" /></td>
                            <td>${v.limit}</td>
                            <td>${v.validity_date}</td>
                            <td>
                                <a data-index="${i}" data-id="${v.id}" class="layui-btn-xs layui-btn layui-btn-primary layui-border-blue editqrcode"
                                    lay-event="edit">
                                    编辑
                                </a>
                                <a data-index="${i}" data-id="${v.id}" class="layui-btn-xs layui-btn layui-btn-primary layui-border-red delqrcode"
                                    lay-event="del">
                                    删除
                                </a>
                            </td>
                        </tr>`
            }).join('');
            $('#tbodyHtmls').html(htmls)
        }

        $('.layui-icon-close').click(() => {
            $('.mask').addClass('layui-hide')
        })

        $('#upload-drag').click(() => {
            layer.open({
                type: 2,
                title: '上传二维码',
                content: '{:url("huoma/add_qrcode")}', //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                area: ['90%', '90%'],
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    var obj = JSON.parse(layero.find('iframe').contents().find("#hiddentext").val());
                    obj.files.forEach((v, i) => {
                        v.priority = i + 1;
                        v.validity_date = obj.date;
                        v.limit = 9999;
                        v.id = '';
                    });
                    qrcodelist.push(...obj.files);
                    qrcodelist.forEach((v, i) => {
                        v.priority = i + 1;
                    })
                    $('#uploadNumber').html(`（已添加${qrcodelist.length}张）`);
                    setHtml(qrcodelist)
                    layer.close(index);
                }
            });
        })

        upload.render({
            elem: '#upload-cover',
            accept: 'image',
            exts: 'jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG',
            auto: false,
            field: 'poster_img',
            size: 1 * 1024,
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#upload-cover').html('<img src="' + result + '" style="height: 100%;width:100%;">');
                });
            }
        });

        upload.render({
            elem: '#uploadbtn',
            accept: 'image',
            exts: 'jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG',
            auto: false,
            field: 'cover',
            size: 1 * 1024,
            choose: function (obj) {
                obj.preview(async function (index, file, result) {
                    fileObj = await requestUploadImage(file);
                    fileObj.file_name = file.name;
                    $('#qrcodeimgOne').html('<img src="' + result + '" style="height: 100%;width:100%;">');
                });
            }
        });

        function requestUploadImage(file) {
            let formData = new FormData();
            formData.append('qrcode_img', file);
            return new Promise(function (resolve, reject) {
                $.ajax({
                    url: '{:url("huoma/add_img")}',
                    type: 'post',
                    data: formData,
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: (ress) => {
                        if (ress.code == 0) {
                            resolve(ress.data);
                        }
                    },
                });
            })
        }


        form.on('radio(setcode)', function (data) {
            // console.log(data.elem); //得到radio原始DOM对象
            // console.log(data.value); //被点击的radio的value值
            for (var i = 0; i < 3; i++) {
                $($('.codetext p')[i]).hide();
            }
            $($('.codetext p')[data.value - 1]).show();
        });
        form.on('radio(covershow)', function (data) {
            if (data.value == 1) {
                $('.activityshowbox .nonepad').show();
                $('#upload-cover').hide();
            } else {
                $('.activityshowbox .nonepad').hide();
                $('#upload-cover').show();
            }
        });

        form.on('radio(edit)', function (data) {
            if (data.value == 0) {
                $('.activityshowbox .nonepad').show();
                $('#upload-cover').hide();
            } else {
                $('.activityshowbox .nonepad').hide();
                $('#upload-cover').show();
            }
        });

        $('#admin').on('click', '.editqrcode', function (e) {
            let index = parseInt(e.target.dataset.index);
            eIndex = index;
            $('#qrName').html(qrcodelist[index].file_name);
            $('.limitEl').val(qrcodelist[index].limit);
            $('.priorityEl').val(qrcodelist[index].priority)
            $('.validityDate').val(qrcodelist[index].validity_date)
            $('.qrcodeimgLinks').prop('src', qrcodelist[index].link_qrcode_img)
            $('.mask').removeClass('layui-hide');
        })
        $('#admin').on('click', '.delqrcode', function (e) {
            let index = parseInt(e.target.dataset.index);
            var id = parseInt(e.target.dataset.id);
            layer.confirm('确定删除此二维码？', { title: ['信息', 'color:#333333;background-color:#D8E6F1;'], }, function (index) {
                if (id && id != undefined) {
                    $.ajax({
                        type: 'post',
                        url: "{:url('huoma/del_qrcode')}",
                        data: {
                            id: id
                        },
                        success: function (res) {
                            if (res.code == 0) {
                                qrcodelist.splice(eIndex, 1);
                                setHtml(qrcodelist);
                                layer.close(index);
                                layer.msg(res.msg);
                            } else {
                                layer.msg(res.msg, {
                                    anim: 6
                                });
                            }
                        }
                    });
                } else {
                    qrcodelist.splice(eIndex, 1);
                    setHtml(qrcodelist);
                    layer.close(index);
                }
            });
        })
        //日期范围
        laydate.render({
            elem: '#validityDate',
            trigger: 'click',//呼出事件改成click
            format: 'yyyy-MM-dd',
        });
    })
</script>
{/block}