dlh_test_server/app/admin/view/business_school/add_content.html

{layout name="layout2" /}
<style>
    .layui-form-item .layui-input-inline { width: 340px; }
    #video-block, #file-block {position: relative; width: 500px;height: 300px;margin-left: 110px;}
    .del-video-btn {
        visibility: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        z-index: 100;
        top: -11px;
        right: -9px;
        width: 20px;
        height: 20px;
        cursor: pointer;
        font-size: 14px;
        color: #FFFFFF;
        border-radius: 50%;
        background: hsla(0, 0%, 60%, .6)
    }

    .file-thumb {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .upload-image-div {
        line-height: 80px;
        padding: 0 6px;
    }
</style>

<div class="layui-card layui-form" style="box-shadow:none;">
    <div class="layui-card-body">
        <div class="layui-form-item">
            <label for="title" class="layui-form-label"><span style="color:red;">*</span>标题：</label>
            <div class="layui-input-inline">
                <input type="text" name="title" id="title" lay-verType="tips" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="cid" class="layui-form-label"><span style="color:red;">*</span>分类：</label>
            <div class="layui-input-inline">
                <select name="cid" id="cid" lay-verType="tips" lay-verify="required">
                    <option value="">全部</option>
                    {volist name="category" id="vo"}
                        <option value="{$vo.id}">{$vo.name}</option>
                    {/volist}
                </select>
            </div>
        </div>

        <div id="mall-video" class="layui-form-item">
            <label class="layui-form-label">视频：</label>
            <div id="upload-video-block" class="layui-input-block">
                <div class="like-upload-image">
                    <div class="upload-image-elem"><a class="add-upload-video"> + 上传视频</a></div>
                </div>
            </div>

            <div id="video-block" style="display: none">
                <div class="del-video-btn" style="visibility: inherit">x</div>
                <video id="businessSchoolVideo" controls style="width: 500px;height: 300px;"></video>
                <input type="hidden" name="video" >
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <span style="color: #a3a3a3;font-size: 9px">视频上传格式为mp4</span>
            </div>
        </div>

        <div id="business-school-image" class="layui-form-item">
            <label class="layui-form-label">图片：</label>
            <div class="layui-input-block">
                <div class="like-upload-image">
                    <div class="upload-image-elem"><a class="add-upload-image" id="businessSchoolImage"> + 添加图片</a></div>
                </div>
            </div>
        </div>

        <div id="business-school-file" class="layui-form-item">
            <label class="layui-form-label">附件：</label>
            <div id="upload-file-block" class="layui-input-block">
                <div class="like-upload-image">
                    <div class="upload-image-elem"><a id="upload-file" class="add-upload-file"> + 上传附件</a></div>
                </div>
            </div>

            <div id="file-block" style="display: none">
                <div class="del-file-btn" style="visibility: inherit">x</div>
                <input type="hidden" name="file" >
            </div>
        </div>

        <div class="layui-form-item">
            <label for="intro" class="layui-form-label">简介：</label>
            <div class="layui-input-inline">
                <input type="text" name="intro" id="intro" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="sort" class="layui-form-label">排序：</label>
            <div class="layui-input-inline">
                <input type="text" name="sort" id="sort" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">文章状态：</label>
            <div class="layui-input-inline">
                <input type="radio" name="is_show" value="1" title="显示" checked>
                <input type="radio" name="is_show" value="0" title="隐藏">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="content" class="layui-form-label">文章内容：</label>
            <div class="layui-input-block">
                <textarea name="content" id="content" lay-verify="content"></textarea>
            </div>
        </div>

        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="addSubmit" id="addSubmit" value="确认">
        </div>
    </div>
</div>

<script>
    layui.config({
        base: "/static/lib/"
    }).extend({
        likeedit: "likeedit/likeedit"
    }).use(["likeedit", "form"], function(){
        var form = layui.form;
        var likeedit = layui.likeedit;
        var likeupload = layui.upload;

        var content = likeedit.build("content", {
            uploadImage: {
                url: '{:url("file/lists")}?type=10'
            }
        });

        form.verify({
            content: function() {
                likeedit.sync(content)
            }
        });

        like.delUpload();
        $(document).on("click", ".add-upload-image", function () {
            like.imageUpload({
                limit: 6,
                field: "image[]",
                that: $(this)
            });
        });

        // 视频上传
        likeupload
        var uploadInst = likeupload.render({
            elem: '.add-upload-video' //绑定元素
            ,url: "{:url('BusinessSchool/uploadVideo')}" //上传接口
            ,accept: 'video'
            ,exts: "mp4"
            ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load(); //上传loading
            }
            ,done: function(res, index, upload){
                console.log('res=', res)
                if (res.code === 1) {
                    $("#upload-video-block").hide()
                    $("#video-block").show()
                    $("#businessSchoolVideo").attr('src', res.data.file)
                    $("input[name='video']").val(res.data.file)
                } else {
                    layer.msg('上传错误');
                    return false;
                }
                layer.closeAll('loading'); //关闭loading
            }
            ,error: function(index, upload){
                layer.closeAll('loading'); //关闭loading
            }
        });

        // 删除视频
        $(document).on("click", ".del-video-btn", function (e) {
            layer.confirm("是否删除该视频？", function(index) {
                const videoFile = $("#businessSchoolVideo").attr('src')
                like.ajax({
                    url: '{:url("BusinessSchool/delVideo")}',
                    data:  {videoFile},
                    type: "post",
                    success: function (res) {}
                });

                $("#upload-video-block").show()
                $("#video-block").hide()
                $("#businessSchoolVideo").attr('src', '')
                layer.close(index);
            })
        });

        // 附件上传
        likeupload
        var that = this
        var uploadInst = likeupload.render({
            elem: '.add-upload-file' //绑定元素
            ,url: "{:url('BusinessSchool/uploadFile')}" //上传接口
            ,accept: 'file'
            ,exts: 'pdf|doc|docx'
            ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load(); //上传loading
            }
            ,done: function(res, index, upload){
                if (res.code === 1) {
                    var template  = '<div class="upload-image-div">';
                    template += '<a class="file-thumb" href="'+ res.data.src +'" >' + res.data.file + '</a>';
                    template += '<input type="hidden" name="file[]" value="'+ res.data.src +'">';
                    template += '<div class="del-upload-btn" data-src="'+ res.data.src +'">x</div>';

                    $("#upload-file").parent().before(template)
                } else {
                    layer.msg('上传错误');
                    return false;
                }
                layer.closeAll('loading'); //关闭loading
            }
            ,error: function(index, upload){
                layer.closeAll('loading'); //关闭loading
            }
        });
    })
</script>