scott
/
crm


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548
							{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;">
                </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="轮询切换" checked>
                        <input lay-filter="setcode" type="radio" name="switch_type" value="2" title="顺序切换">
                        <input lay-filter="setcode" type="radio" name="switch_type" value="3" title="随机切换">
                    </div>
                </div>
                <div class="layui-form-item codetext">
                    <p class="">根据二维码的优先级顺序，平均展示给访问用户</p>
                    <p class="" style="display:none;">二维码访问人数达到报名上限后，自动切换至下一个二维码</p>
                    <p class="" style="display:none;">用户扫描二维码后，将在所上传的二维码中随机一个进行展示</p>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-label nonepad">上传活动海报</div>
                        <div class="layui-input-inline" id="upload-cover">
                            <div class="layui-upload-drag" style="width: 250px;margin-top: 13px;">
                                <i class="layui-icon">&#xe681;</i>
                                <p>点击上传</p>
                            </div>
                        </div>
                    
                    <!--<div class="layui-input-block">
                        <input lay-filter="is_poster" type="radio" name="is_poster" value="1" title="不展示">
                        <input lay-filter="is_poster" type="radio" name="is_poster" value="2" title="展示" checked>
                    </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">
                        <div class="layui-upload-drag" style="width: 250px;">
                            <i class="layui-icon">&#xe681;</i>
                            <p>点击上传</p>
                        </div>
                    </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);
            let img = $('#upload-cover')[0].children;
            if (!(img && img[0].localName == 'img')) {
				layer.msg('请上传活动海报');
				return;
			}
            formData.append('zima_list',JSON.stringify(qrcodelist));
            // 单击之后提交按钮不可选,防止重复提交
            var DISABLED = 'layui-btn-disabled';
            var target = '#activity-submit';
            $(target).addClass(DISABLED);
            $(target).attr('disabled', 'disabled');
            $.ajax({
				url: '{:url("Huoma/add_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 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}" class="layui-btn-xs layui-btn layui-btn-primary layui-border-blue editqrcode"
                                    lay-event="edit">
                                    编辑
                                </a>
                                <a data-index="${i}" 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: ['上传二维码', 'color:#333333;background-color:#D8E6F1;'],
                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.validity_date = obj.date;
                        v.limit = 9999
                    });
                    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) {
            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 == 0) {
                $('.activityshowbox .nonepad').show();
                $('#upload-cover').hide();
            } else {
                $('.activityshowbox .nonepad').hide();
                $('#upload-cover').show();
            }
        });

        form.on('radio(is_poster)', function (data) {
            if (data.value == 1) {
                $('.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 () {
            let index = parseInt(e.target.dataset.index);
            layer.confirm('确定删除此二维码？', { title: ['信息', 'color:#333333;background-color:#D8E6F1;'], }, function (index) {
                qrcodelist.splice(eIndex,1);
                setHtml(qrcodelist);
                layer.close(index);
            });
        })
        //日期范围
        laydate.render({
            elem: '#validityDate',
            trigger: 'click',//呼出事件改成click
            format: 'yyyy-MM-dd',
        });
    })
</script>
{/block}