scott
/
crm


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
							{extend name="public/layout" /} {block name="title"}编辑二维码{/block} {block name="body"}
<style type="text/css">
    html,
    body {
        display: block;
        width: 100%;
        background-color: #fff;
        min-width: 700px;
    }

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

    .mt20 {
        margin-top: 20px;
    }

    .submit-btn {
        margin-top: 30px;
    }

    #layuiadmin-code-submit {
        display: block;
        margin: 0 auto;
    }
    .upqrcodebox {
        display: block;
        border: 1px solid #384855;
        padding: 4px;
        height: 70px;
        margin-right: 10px;
        margin-bottom: 12px;
    }

    .upqrcodebox img {
        display: block;
        width: 60px;
        height: 60px;
    }

    .left {
        float: left;
    }

    .upqrcodebox div {
        display: block;
        margin-left: 10px;
        width: calc(100% - 80px);
        line-height: 60px;

    }
    #uploadbtn {
        width: 150px !important;
    }
    #endtime {
        width: 260px;
    }
</style>

<body>
    <form class="layui-form" id="uploadadmin" enctype="multipart/form-data">
        <div class="layui-card-body">上传二维码：可一次性选择多张图片进行上传</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 class="layui-card-body layui-row" id="uploadImageList">
            
        </div>
        <div class="layui-card-body">
            <div class="layui-form-item">二维码有效期</div>
            <input type="input" class="layui-input" name="validitydate" placeholder="请选择日期" id="endtime">
        </div>
        <!-- <div class="layui-form-item submit-btn" style="clear:both;">
            <input class="layui-btn layui-btn-primary " type="button" lay-submit lay-filter="layuiadmin-code-submit"
                id="layuiadmin-code-submit" value="确认">
        </div> -->
    </form>
    <input type="hidden" id="hiddentext" />
</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,
            fileObj = {files: [],date: ''};

        //日期范围
        laydate.render({
            elem: '#endtime',
            trigger: 'click',//呼出事件改成click
            format: 'yyyy-MM-dd',
            done: function(value, date, endDate){
                fileObj.date = value;
                $('#hiddentext').val(JSON.stringify(fileObj));
            }
        });

        let date = new Date();
        let nextYear = date.getFullYear() + 1;
        let month = date.getMonth() + 1;
        let day = date.getDate();
        fileObj.date = `${nextYear}-${month<10 ? `0${month}` : month}-${day < 10 ? `0${day}` : day}`;
        $('#endtime').val(fileObj.date)

        upload.render({
            elem: '#uploadbtn',
            accept: 'image',
            multiple: true,
            exts: 'jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG',
            auto: false,
            field: 'qrcode_img',
            size: 1 * 1024,
            choose: function (obj) {
				obj.preview(async function(index, file, result) {
					let uploadFile = await requestUploadImage(file);
                    uploadFile.file_name = file.name;
                    fileObj.files.push(uploadFile);
                    $('#hiddentext').val(JSON.stringify(fileObj));
                    $('#uploadImageList').prepend(`<div class="layui-col-xs3 layui-col-sm3 layui-col-md3 upqrcodebox">
                <img class="left" src="${result}" />
                <div class="left ellipsis">${uploadFile.name_qrcode_img}</div>
            </div>`);
				});
            }
        });

        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);
						}
					},
				});
			})
		}
    })
</script>
{/block}