caiping/app/admin/view/project/cost/project_comments.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" src=""/>
    </div>
    <!-- <hr class="ws-space-16" style="border: 1.5px solid #e2e2e2 !important;"> -->
</div>



    <!--zjl,懂的都懂-->
    <script src="{__JS__}/jquery-3.4.1.min.js"></script>
    <script>

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

            $('#imgdel').click(() => {
                $('#uploadBtn input').attr('value', '');
                $('#uploadBtn img').attr('src', '/static/home/images/upload.png');
                $('#imgdel').hide();
                return false;
            })
            $('#uploadBtn').click(() => {
                console.log(1)
                return false;
            })
            //监听提交
            form.on('submit(webform)', function (data) {

                let callback = function (e) {
                    layer.msg(e.msg);
                    $("#text").val("");
                    $('#uploadBtn input').attr('value', '');
                    $('#imgdel').hide();
                    $('#uploadBtn img').attr('src', '/static/home/images/upload.png');
                    $("#comments").load(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", 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>