caiping/app/admin/view/project/cost_company/project_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;
    }

    /* 点击图片放大 */
    .img-responsive{
        /* width: 150px; */
        height: 150px;
        /* padding: 10px; */
    }
</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 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>


<!--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('submit(caca)', function (data) {

            let callback = function (e) {
                layer.msg(e.msg);
                $("#text").val("");
                $('#uploada input').attr('value', '');
                $('#uploada img').attr('src', '/static/home/images/upload.png');
                $("#comments").load(location.href+" #comments>*","type=2")
                console.log(location.href+" #comments>*","type=2");
            }
            if(data.field.content === '' &&  data.field.thumb === ''){
                console.log(data.field)
            }else {
                data.field["project_id"] = project_id;
                tool.post("/admin/project.comment/add_company", data.field, callback);

            }


            return false;
        });
    }
</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>