caiping/app/admin/view/project/cost/edit_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>


<!-- <hr class="ws-space-16" style="border: 1.5px solid #e2e2e2 !important;"> -->

<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="请输入内容" maxlength="3000"class="layui-textarea"></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="webform" 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="uploadBtn2" 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>
                 <!--//TODO 重载的时候加上comment_type，0:全部，1:财政局to公司，2财政局to业主，3公司to业主-->
                <!-- <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() {
        console.log(location.href)
        var form = layui.form,tool=layui.tool,upload = layui.upload;
        //头像上传
        var uploadInst = upload.render({
            elem: '#uploadBtn2'
            , url: '/admin/api/upload'
            , done: function (e) {
                //如果上传失败
                if (e.code == 1) {
                    return layer.msg('上传失败');
                }
                //上传成功
                $('#uploadBtn2 input').attr('value', e.data.filepath);
                $('#uploadBtn2 img').attr('src', e.data.filepath);
                $('#imgdel').show();
            }
        });

        $('#imgdel').click(()=>{
            $('#uploadBtn2 input').attr('value', '');
            $('#uploadBtn2 img').attr('src', '/static/home/images/upload.png');
            $('#imgdel').hide();
            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 a = 1;
        //监听提交
        form.on('submit(webform)', function (data) {
            if (a) {
                console.log(data)
                let callback = function (e) {
                    a = 1
                    layer.msg(e.msg);
                    $("#text").val("");
                    $('#uploadBtn2 input').attr('value', '');
                    $('#imgdel').hide();
                    $('#uploadBtn2 img').attr('src', '/static/home/images/upload.png');

                    //TODO 重载的时候加上comment_type，0:全部，1:财政局to公司，2财政局to业主，3公司to业主
                    $("#comments").load(location.href + " #comments>*", "type=2&comment_type=" + data.field.type)

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

            a = 0
            return false;
        });
    }
</script>

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

    tx.addEventListener('input', function () {

      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>