caiping/app/admin/view/project/cost_company/edit_log.html

<style>
    #imgdel {
        font-size: 30px;
        position: absolute;
        top: -30px;
        right: -12px;
        display: none;
        color: red;
    }

    .wrapper{
        display: flex;
        justify-content: space-between;
        padding-top: 3px;
    }
</style>

<div class="log_item_top" id="comments">
    <div class="layui-tab-content">
        {volist name="$comment" id="vo"}
        <div class="log_top">
            <span>{$vo.maker}</span><span
                class="{if $vo.unit_type==2}log_commentary{else}log_company{/if}">{$vo.unit_name}</span><span>{$vo.create_time|date="y-m-d H:i"}</span>
        </div>
        <div class="log_content">
            <div style="word-wrap:break-word;padding: 5px 10px;width: fit-content;">
                {$vo.content}
            </div>
            {if !empty($vo.thumb)}
            <div class="log_content_img" style="width: fit-content;">
                <img src="{$vo.thumb}" alt="" class="img-responsive">
                <span></span>
            </div>
            {/if}
        </div>
        {/volist}
    </div>
</div>



<div class="log_item_bottom" style="border-top: 2px solid #e2e2e2;">
    <div class="layui-form log_bottom_left">
        <form class="layui-form" action="">
            <div class="layui-form-item layui-form-text" style="float: left;width: 95%;">
                <label class="layui-form-label">普通文本域</label>
                <div class="layui-input-block" style="margin-left: 100px;">
                    <textarea id="text" name="content" placeholder="请输入内容" class="layui-textarea" maxlength="3000" onkeyup="setLength(this,3000,'wordsLength');"></textarea>
                </div>
                <div class="wrapper">
                    <span></span><span class="total">0/3000字</span>
                  </div>
            </div>
            <div class="layui-form-item" style="float: left;width: 4.5%;">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit lay-filter="caca" type="button"
                            style="width: 100%;height: 100% !important;background-color: #16baaa00 !important;margin-top: 30%;">
                        <img src="/static/home/images/allupload.png" height="100"
                        style="max-width: 40px;height: 40px;"/>
                    </button>
                </div>
            </div>
            <div style="clear: both;"></div>
            <div class="layui-form-item" id="imgItem">
                <label class="layui-form-label">上传图片：</label>
                <div>
                    <div class="layui-upload-drag-self">
                        <div id="uploada" style="position:relative;">
                            <img src="/static/home/images/upload.png" height="100"
                                 style="max-width: 100%; width: 100%;"/>
                            <input type="hidden" name="thumb" value="">

                            <i class="layui-icon  layui-icon-clear" id="imgdel"></i>

                        </div>
                    </div>
                </div>
                
                <!--<label class="layui-form-label">通信对象：</label>-->
                <!--<div>-->
                <!--    <div class="layui-upload-drag-self">-->
                <!--        <div id="uploadBtn3" style="position:relative;">-->
                <!--           <select lay-filter="uploadBtn3" name="type">-->
                <!--              <option value="0">全部</option>-->
                <!--              <option value="1">财政局to公司</option>-->
                              <!--<option value="2">财政局to业主</option>-->
                <!--              <option value="3">公司to业主</option>-->
                <!--            </select>-->
                <!--        </div>-->
                <!--    </div>-->
                <!--</div>-->
            </div>
        </form>
    </div>
    
    <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
        <div id="innerdiv" style="position:absolute;">
            <img id="bigimg" style="" src="" />
        </div>
    </div>
</div>




<!--zjl,懂的都懂-->
<script>

    function comment() {
        var form = layui.form,tool=layui.tool,upload = layui.upload;
        //头像上传
        var uploadInst = upload.render({
            elem: '#uploada'
            , url: '/admin/api/upload'
            , done: function (e) {
                //如果上传失败
                if (e.code == 1) {
                    return layer.msg('上传失败');
                }
                //上传成功
                $('#uploada input').attr('value', e.data.filepath);
                $('#uploada img').attr('src', e.data.filepath);
                $('#imgdel').show();
            }
        });

        $('#imgdel').click(()=>{
            $('#uploada input').attr('value', '');
            $('#uploada img').attr('src', '/static/home/images/upload.png');
            $('#imgdel').hide();
            return false;
        })
        $('#uploada').click(()=>{
            console.log(1)
            return false;
        })

        form.on('select(uploadBtn3)', function (data) {
            console.log(data)
            $("#comments").load(location.href + " #comments>*", "type=2&comment_type=" + data.value)
             
            return false;
        });

        let d = 1;

        //监听提交
        form.on('submit(caca)', function (data) {
            if(d){
                let callback = function (e) {
                d = 1
                layer.msg(e.msg);
                $("#text").val("");
                $('#uploada input').attr('value', '');
                $('#uploada img').attr('src', '/static/home/images/upload.png');
                $('#imgdel').hide();
                $("#comments").load(location.href + " #comments>*", "type=2&comment_type=" + data.field.type)
                console.log(location.href+" #comments>*","type=2");
            }
            if(data.field.content === '' &&  data.field.thumb === ''){
                console.log(data.field)
                layer.msg("请完善内容");
            }else {
                data.field["project_id"] = project_id;
                tool.post("/admin/project.comment/add_company", data.field, callback);
            }
            }
            
            d = 0
            return false;
        });
    }
</script>

<script>
    // 限制文本框字数
			function setLength(obj,maxlength,id){
			    var num=maxlength-obj.value.length;//获取文本框输入内容的长度
			    var leng=id;//获取右下角显示的id
			    if(num<0){
			        num=0;//如果文本框文字小于零则让它显示为零
			    }
			    document.getElementById(leng).innerHTML=num+"/50";
				//通过id获取到span标签在页面上的显示并对它的值进行拼接,就是把计算出来的结果+最大限制字数
			}
</script>



<script>
    const tx = document.querySelector('#text')
    const total = document.querySelector('.total')

    tx.addEventListener('input', function () {
       console.log(tx.value.length)
      total.innerHTML = `${tx.value.length}/3000字`
    })
</script>

<!-- 点击放大图片 -->
<script src="{__MOBILE__}/js/jquery.min.js"></script>
<script>
    $(function() {
    $(".img-responsive").click(function (){
        // debugger
        var _this=$(this);
        imgShow("#outerdiv","#innerdiv","#bigimg",_this);
    });
});

function imgShow(outerdiv,innerdiv,bigimg,_this){
    // debugger
    var src=_this.attr("src");
    $(bigimg).attr("src",src);
    $("<img/>").attr("src",src).on('load',function () {
        // debugger
        var windowW=$(window).width()
        var windowH=$(window).height();
        var realWidth=this.width;
        var readHeight=this.height;
        var imgWidth,imgHeight;
        var scale=0.8;
        if(realWidth>windowW+scale){
            imgHeight=windowH*scale;
            imgWidth=imgHeight/readHeight*realWidth;
            if(imgWidth>windowW*scale){
                imgWidth=windowW*scale;
            }
        }else if(realWidth>windowW*scale){
            imgWidth=windowW*scale;
            imgHeight=imgWidth/realWidth*readHeight;
        }else {
            imgWidth=realWidth;
            imgHeight=readHeight;
        }
        $(bigimg).css("width",imgWidth);
        var w=(windowW-imgWidth)/2;
        var h=(windowH-imgHeight)/2;
        $(innerdiv).css({"top":h,"left":w});
        $(outerdiv).fadeIn("fast");
    });
    $(outerdiv).click(function (){
        $(this).fadeOut("fast");
    });
};
</script>