scott
/
crm


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378
							{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: 15%;
    }

    .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;
    }

    .addImages {display: inline-block;width: 141px !important;height:94px !important;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;border: 1px dashed darkgray;background: #f8f8f8;position: relative;overflow: hidden;}
	.addImages .upload_ico{font-size: 50px;color:#28A1FF;display: inline-block;}
	.imageDiv {
		display: inline-block;
		width: 139px;
		height: 92px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border: 1px dashed darkgray;
		background: #f8f8f8;
		position: relative;
		overflow: hidden;
		margin-right: 10px;
	}
	.imageDiv div {width: 100%;height: 100%;position: absolute;top: 0px;background-color: #e6e6e600;text-align: center;}
	.imageDiv div:hover {background-color: #e6e6e680;}
	.imageDiv div:hover i {display: inline-block;cursor: pointer;}
	.imageDiv div i{display: none;	font-size: 24px;line-height:92px;text-align: center;}
    .text-detail {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</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">
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="layui-form-item">
                                <label class="layui-form-label">活动方式:</label>
                                <div class="layui-input-block ">
                                    <input type="radio" name="type" lay-filter="type" value="0" title="图片" checked>
                                    <input type="radio" name="type" lay-filter="type" value="1" title="视频">
                                </div>
                            </div>
                            <div id="imgele">
                                <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;width: 70%;">
                                        <div class="picDiv" id="draggable" style="margin: 20px 0px;overflow: hidden;">
                                            <div class="addImages" id="img">
                                                <div class="text-detail">
                                                    <i class="layui-icon upload_ico">&#xe681;</i>
                                                    <p>选择单、多图</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="videoEle" class="layui-hide">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">视频封面图</label>
                                    <div class="layui-input-inline isimgupload" style="position: relative;">
                                        <div class="" id="upload-drag">
                                            <div class="layui-upload-drag">
                                                <i class="layui-icon">&#xe681;</i>
                                                <p>上传图片</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label"><span class="colorRed">*</span>视频</label>
                                    <div class="layui-input-inline" style="width: 290px;display: block;" id="container">
                                        <a class="layui-btn btn layui-border-btn" id="selectfiles" href="javascript:void(0);">选择视频</a>
                                        <a class="layui-btn btn layui-border-btn" id="postfiles" href="javascript:void(0);">开始上传</a>
                                        <div id="ossfile"></div>
                                        <div id="symbshowed"></div>
                                        <!--报错信息返回展示-->
                                        <pre id="console"></pre>
                                        <input type="hidden" value="" id="fileuri">
                                        <!--上传到OSS哪个文件下，在这里定义-->
                                        <input type="hidden" value="Video" id="category_name">
                                    </div>
                                </div>
                                <div class="layui-form-item videolimit">
                                    <label class="layui-form-label"></label>
                                    <div><i style="color:red;margin-right:5px;">*</i><span id="limitVA">上传视频大小不超过280M</span></div>
                                </div>
                            </div>
                            <input type="button" style="margin-left:17.5%;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 type="text/javascript" src="__STATIC__/js/plupload/js/plupload.full.min.js"></script>
<script type="text/javascript" src="__STATIC__/js/plupload/ossupload.js"></script>
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.3.1.min.js" async></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,
            files = {};

        form.render();
        /* 监听提交 */
        form.on('submit(activity-submit)', function (obj) {
            var index = parent.layer.getFrameIndex(window.name);
            var formData = new FormData(obj.form);
            
            formData.set('id', "{$id}");
            let array = [];
            if (Object.keys(files).length) {
                Object.keys(files).forEach(key => {
                    array.push(files[key]['imglink']);
                })
            }

            if (obj.field.type == 0) {
                if (!array.length) {
                    layer.msg('请选择图片');
                    return;
                }
                formData.set('urls', array.join(','));
            } else {
                if (!$("#fileuri").val()) {
                    layer.msg('请选择视频');
                    return;
                }
                formData.set('urls', $("#fileuri").val());
            }

            formData.delete('file');
            // 单击之后提交按钮不可选,防止重复提交
            $.ajax({
                url: '{:url("activity/materialAdd")}',
                type: 'post',
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (res) {
                    if (res.code === 0) {
						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.layer.close(index); //再执行关闭
                        });
                    } else {
                        layer.msg(res.msg, {
                            anim: 6
                            , time: 2000
                        });
                    }
                }
            });
            return false;
        });
        
        //拖拽上传
        upload.render({
            elem: '#upload-drag',
            accept: 'image',
            exts: 'jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG',
            auto: false,
            field: 'cover',
            size: 1 * 1024,
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#upload-drag').html('<img src="' + result + '" style="width:355px !important;height:160px !important;">');
                });
            }
        });

        //多图片上传
		upload.render({
			elem: '#img',
			accept: 'images',
			url: '/upload/',
			exts: 'jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG',
			size: 5 * 1024,
			auto: false,
			multiple: true,
			choose: function(obj) {
				files = obj.pushFile();
				length = $('.imageDiv').length;
				obj.preview(function(index, file, result) {
					length++;
					if(length > 100) {
						if(length == 101) layer.msg('限制100张图片以下');
						delete files[index];
					} else {
                        ossuploadimg(file).then(f => {
							files[index]['imglink'] = f;
							$('.picDiv').prepend('<div class="imageDiv" data-id="' + index + '"><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" width="100%" height="100%"><div><i class="layui-icon layui-icon-delete" prop="del"></i> <i class="layui-icon layui-icon-search" prop="view" data-image="'+result+'" style="margin-left:25px;"></i></div></div>');
						})
					}
				});
			}
		});

        function ossuploadimg(file) {
			return new Promise((resolve,reject) => {
				var client = new OSS({
					region: "oss-cn-hangzhou",
					accessKeyId: "LTAI5tHjWupJSCAycy2yVbQZ",
					accessKeySecret: "eNFicm77Cfq3u7ZnQyw1urFmFNpf3w",
					bucket: "zyzswzh",
					secure: true
				});
				var date = new Date().getTime();
				var objectName = 'crm/' + date + "/" + Date.now() + ".jpeg";
				client.put(objectName, file).then(function (result) {
					resolve(result.name);
				}).catch(function (error) {
					reject(error)
				});
			})
		}

        $('.picDiv').on('click', 'i', function(e) {
			var that = this;
            if (e.target.attributes[1] == undefined) {
                return
            }
			if (e.target.attributes[1].nodeValue === 'view') {
				layer.photos({ photos: {"data": [{"src": e.target.attributes[2].nodeValue}]} ,closeBtn:true});
			} else {
				layer.confirm('确定删除该图片么？',{title:['信息', 'color:#333333;background-color:#D8E6F1;'],}, function(index) {
					var imgDiv = $(that).closest('.imageDiv');
					if(id = imgDiv.data('id')) {
						delete files[id];
					}
					imgDiv.remove();
					layer.close(index);
				});
			}			
		});

        //日期范围
        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) {
                $('#videoEle').removeClass('layui-hide');
                $('#imgele').addClass('layui-hide');
            } else {
                $('#imgele').removeClass('layui-hide');
                $('#videoEle').addClass('layui-hide');
            }
        });
    });
</script>
{/block}