caiping/app/admin/view/project/approval/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;
    }
</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;">
                {$vo.content}
            </div>
            {if !empty($vo.thumb)}
            <div class="log_content_img">
                <span class="content_img"><img src="{$vo.thumb}" alt=""></span><span></span>
            </div>
            {/if}
        </div>
        {/volist}
    </div>
</div>
<hr class="ws-space-16">
<div class="log_item_bottom">
    <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 class="layui-input-inlines-self">
                    <div class="layui-upload-drag-self">
                        <div id="uploadBtn" 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>
            </div>
        </form>
    </div>
</div>




<!--zjl,懂的都懂-->
 <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>
    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>