scott
/
crm


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445
							{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%;
        }
    }

    #layuiadmin-app-form-list {
        padding: 1% 2%;
    }

    .layui-form-label {
        width: 20%;
    }

    .layui-input {
        border: none;
        outline: none;
    }

    .layui-input-inline-bottom {
        border-bottom: 1px solid #D4E4ED;
    }

    .flex-center {
        display: flex;
        align-items: center;
    }

    .border {
        border: 1px solid #D4E4ED;
        padding-right: 10px;
        border-radius: 5px;
    }

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

    .layui-form-radioed {
        color: #249EFB;
    }

    .layui-tab-card>.layui-tab-title {
        background-color: #fff;
    }

    .layui-tab-card {
        border-radius: 10px;
        box-shadow: none;
        border: none;
    }

    .layui-form-label {
        color: #8A9AAA;
    }

    .layui-input::placeholder {
        color: #9DB6CF;
    }

    .layui-tab-card>.layui-tab-title .layui-this {
        background-color: #249EFB;
        color: #fff;
    }

    .layui-tab-card>.layui-tab-title .layui-this:after {
        border-bottom: none;
        border: none;
    }

    .layui-tab-card>.layui-tab-title li {
        background-color: #F2F2F2;
        margin: 0px 5px;
    }

    .layui-anim.layui-icon {
        font-size: 18px;
    }

    .layui-form-select dl {
        max-height: 200px !important;
    }

    xm-select {
        border: none !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">
            <div class="layui-form-item">
                <div class="layui-tab layui-tab-card">
                    <ul class="layui-tab-title">
                        <li class="layui-this">活动设置</li>
                        <li id="details">活动详情</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="layui-form-item">
                                <label class="layui-form-label"><i style="color:red;">*&nbsp;</i>活动名称</label>
                                <div class="layui-input-inline layui-input-inline-bottom" style="width: 380px;">
                                    <input type="text" id="activiteTitle" name="title" lay-verify="required"
                                        placeholder="请输入活动名称" autocomplete="off" class="layui-input"
                                        style="max-width: 500px;">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label"><i style="color:red;">*&nbsp;</i>活动时间</label>
                                <div class="layui-input-inline flex-center border">
                                    <input type="text" name="start_date" id="start_date" placeholder="选择活动开始日期"
                                        autocomplete="off" class="layui-input">
                                    <img src="__STATIC__/img/bg-calendar.png" alt="日历" width="14px" height="14px">
                                </div>
                                <div class="layui-form-mid">-</div>
                                <div class="layui-input-inline flex-center border">
                                    <input type="text" name="end_date" id="end_date" placeholder="选择活动结束日期"
                                        autocomplete="off" class="layui-input">
                                    <img src="__STATIC__/img/bg-calendar.png" alt="日历" width="14px" height="14px">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">活动地点</label>
                                <div class="layui-input-inline layui-input-inline-bottom" style="width: 380px;">
                                    <input type="text" name="address" placeholder="请输入活动地点" autocomplete="off"
                                        class="layui-input" style="max-width: 500px;">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label"><span style="color: red;">*</span>扫码人员</label>
                                <div class="layui-input-inline layui-input-inline-bottom" style="width: 70%;">
                                    <div id="qrcode-user" style="width: 100%;"></div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">活动方式:</label>
                                <div class="layui-input-block ">
                                    <input type="radio" name="cate" lay-filter="cate" value="0" title="内场" checked>
                                    <input type="radio" name="cate" lay-filter="cate" value="1" title="外场">
                                </div>
                            </div>
                            <button type="button" class="layui-btn layui-btn-normal" id="next_step"
                                style="width:165px;height:38px;margin-left:24%;">下一步</button>
                        </div>
                        <div class="layui-tab-item">
                            <div class="layui-form-item">
                                <label class="layui-form-label"><span style="color: red;">*</span>上传活动封面:</label>
                                <div class="layui-input-inline" id="upload-drag0">
                                    {if condition="0"}
                                    <img src="1" width="383px" height="114px">
                                    {else /}
                                    <div class="layui-upload-drag">
                                        <i class="layui-icon">&#xe681;</i>
                                        <p>选择封面图片</p>
                                    </div>
                                    {/if}
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label"></label>
                                <div class="layui-input-inline" style="width: 60%;"><i
                                    style="color: #FF5722;">*</i>图片格式：jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG，请上传比例为710 x 320
                                的图片</div>
                            </div>
                            <div class="layui-form-item" style="margin-bottom:0px;">
                                <label class="layui-form-label"><span style="color: red;">*</span>上传活动海报:</label>
                                <div class="layui-input-inline" id="upload-drag1" style="margin-bottom:15px;">
                                    {if condition="0"}
                                    <img src="1" width="383px" height="114px">
                                    {else /}
                                    <div class="layui-upload-drag">
                                        <i class="layui-icon">&#xe681;</i>
                                        <p>选择海报图片</p>
                                    </div>
                                    {/if}
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label"></label>
                                <div class="layui-input-inline" style="width: 60%;"><i
                                    style="color: #FF5722;">*</i>图片格式：jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG，请上传比例为5 : 4 的图片</div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label"><i style="color:red;">*&nbsp;</i>上传活动详情:<br>(视频最大100M)</label>
                                <div class="layui-col-md6 layui-col-xs6 layui-col-sm6" style="width:75%;">
                                    <textarea name="content" id="content" cols="6" rows="10" autocomplete="off"
                                        style="width: 100%;height: 400px;"></textarea>
                                </div>
                            </div>
                            <input type="button" style="margin-left:24%;width:165px;height:38px;" lay-submit
                                class="layui-btn layui-btn-normal" lay-filter="activity-submit" id="activity-submit"
                                value="确认添加">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
{/block} {block name="js"}
<script src="__STATIC__/layui/layui/lay/modules/xm-select.js" type="text/javascript" charset="utf-8"></script>
<!-- 配置文件 -->
<script type="text/javascript" src="__STATIC__/ueditor/dist/utf8-php/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="__STATIC__/ueditor/dist/utf8-php/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    var ue = UE.getEditor('content');
</script>
<script>
    layui.config({
        base: '__LAYUI__/',
        urlbase: '/sys'
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'upload', 'layedit', 'laydate'], function () {
        var form = layui.form,
            upload = layui.upload,
            layedit = layui.layedit,
            laydate = layui.laydate,
            $ = layui.jquery,
            loadingIndex = null,
            submitIndex = 0;


        // layedit.set({
        // 	uploadImage: {
        // 		url: '{:url("activity/imgUpload")}'
        // 	}
        // });


        // var textarea = layedit.build('content', {
        // 	'height': 500
        // });
        form.render();
        /* 监听提交 */
        form.on('submit(activity-submit)', function (obj) {
            var index = parent.layer.getFrameIndex(window.name);
            var formData = new FormData(obj.form);
            let val1 = xmSelectElement.getValue('valueStr');
            formData.set('qrcode_employee_id', val1);
            ue.ready(function () {
                formData.set('content', ue.getContent());
            });
            
            let startDate = $("#start_date").val();
			let endDate = $("#end_date").val();
			if (startDate && endDate) {
				if (new Date(endDate).getTime() < new Date(startDate).getTime()) {
					layer.msg('结束日期不能小于开始日期', {
						anim: 0
						,time: 2000
					});
					return false;
				}
			}
            
            var cover = '';
            var poster = '';
            formData.forEach((value, key) => {
                console.log("key %s: value %s", key, value);
                if (key == 'cover') {
                    cover = value;
                }
                if (key == 'poster') {
                    poster = value;
                }
            })
            if (cover.name == '') {
                layer.msg('请选择活动封面', {
                    anim: 6
                    , time: 2000
                });
                return false;
            }
            if (poster.name == '') {
                layer.msg('请选择活动海报', {
                    anim: 6
                    , time: 2000
                });
                return false;
            }
            if (submitIndex > 0) {
                return false;
            }
            submitIndex = 12;
            loadingIndex = layer.load('Loading...', {
                shade: [0.6,'#000'] //0.1透明度的白色背景
            });
            // 单击之后提交按钮不可选,防止重复提交
            $.ajax({
                url: '{:url("activity/addActivity")}',
                type: 'post',
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (res) {
                    if (res.code === 0) {
                        layer.close(loadingIndex);
						var DISABLED = 'layui-btn-disabled';
						var target = '#activity-submit';
						$(target).addClass(DISABLED);
						$(target).attr('disabled', 'disabled');
                        layer.msg(res.msg, {
                            anim: 0
                            , time: 2000
                        }, function () {
                            parent.layui.table.reload('company-activity'); //重载表格
                            parent.layer.close(index); //再执行关闭
                        });
                    } else {
                        layer.close(loadingIndex);
                        layer.msg(res.msg, {
                            anim: 6
                            , time: 2000
                        });
                    }
                }
            });
            return false;
        });

        //选择扫码人员
        var xmSelectElement = xmSelect.render({
            el: "#qrcode-user",
            name: 'qrcode_employee_id',
            autoRow: true,
            filterable: true,
            tips: '选择扫码人员',
            toolbar: {
                //工具条,全选,清空,反选,自定义
                show: true,
                list: [
                    'ALL',
                    'CLEAR'
                ]
            },
            height: "200px",
            data: [],
            //文本显示模式
        });

        $.ajax({
            url: "{:url('activity/get_qrcode_employee')}",
            data: {},
            type: 'post',
            dataType: 'json',
            success: function (res) {
                if (res.code == 0) {
                    let data = res.data.map(v => {
                        return { name: v.name, value: v.id, selected: v.isshow == 1 ? true : false }
                    })
                    xmSelectElement.update({ data: data })
                } else {
                    layer.msg(res.msg)
                }
            }
        });

        //拖拽上传
        upload.render({
            elem: '#upload-drag0',
            accept: 'image',
            exts: 'jpg|png|jpeg|JPG|PNG|JPEG',
            auto: false,
            field: 'cover',
            size: 1 * 1024,
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#upload-drag0').html('<img src="' + result + '" style="width:355px !important;height:160px !important;">');
                });
            }
        });

        //拖拽上传
        upload.render({
            elem: '#upload-drag1',
            accept: 'image',
            exts: 'jpg|png|jpeg|JPG|PNG|JPEG',
            auto: false,
            field: 'poster',
            size: 1 * 1024,
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#upload-drag1').html('<img src="' + result + '" style="width: 355px !important;width:160px !important;">');
                });
            }
        });
        //日期范围
        laydate.render({
            elem: '#start_date',
            trigger: 'click'//呼出事件改成click
        });
        laydate.render({
            elem: '#end_date',
            trigger: 'click'//呼出事件改成click
        });

        form.on('radio(type)', function (data) {
            if (data.value == 1) {
                $('#money').addClass('layui-hide');
            } else {
                $('#money').removeClass('layui-hide');
            }
        });

        //点击下一步
        $('#next_step').click(function () {
            let title = $('#activiteTitle')[0].value;
            let startDate = $('#start_date')[0].value;
            let endDate = $('#end_date')[0].value;
            let qrcode_employee_id = xmSelectElement.getValue('valueStr');
            if (!title) {
                layer.msg('活动名称必填');
                return;
            } else if (!startDate) {
                layer.msg('请选择活动开始日期');
                return;
            } else if (!endDate) {
                layer.msg('请选择活动结束日期');
                return;
            } else if (!qrcode_employee_id) {
                layer.msg('请选择扫码人员');
                return;
            }
            $('#details').trigger("click");
        });
    });
</script>
{/block}