dlh_test_server/app/admin/view/mall_news/add.html

{layout name="layout2" /}
<style>
    .layui-form {padding: 20px 30px;background-color: #ffffff;}
    .layui-form-item .layui-form-label { width: 95px; }
    .layui-form-item .layui-input-inline { width: 240px; }
    .layui-form-item .map-container{ width: 600px; height: 400px; margin-left: 100px; margin-top: 20px; }
    #video-block {position: relative; width: 700px;height: 300px}
    .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)
    }
    .select-goods {margin-left: 10px}
</style>

<div class="layui-card layui-form">
    <div class="layui-card-body">
        <div class="layui-form-item">
            <label for="title" class="layui-form-label">标题：</label>
            <div class="layui-input-inline">
                <input type="text" name="title" id="title" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="desc" class="layui-form-label">文章概述：</label>
            <div class="layui-input-inline">
                <input type="text" name="desc" id="desc" 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" lay-filter="type" name="type" value="0" title="文章" checked>
                <input type="radio" lay-filter="type" name="type" value="1" title="视频">
            </div>
        </div>

        <div class="layui-form-item" id="mall_type">
            <label class="layui-form-label">快讯类型：</label>
            <div class="layui-input-inline">
                <input type="radio" lay-filter="mall_type" name="mall_type" value="0" title="单个商品" checked>
                <input type="radio" lay-filter="mall_type" name="mall_type" value="1" title="组类商品">
            </div>
        </div>

        <div id="mall-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="mallNewImage"> + 添加图片</a></div>
                </div>
            </div>
        </div>

        <div id="mall-video" class="layui-form-item" style="display: none">
            <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="mallVideo" controls></video>
                <input type="hidden" name="video_file" >
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <span style="color: #a3a3a3;font-size: 9px">视频上传格式为mp4，上传文件大小限制为：{$max_upload_size}</span>
            </div>
        </div>

        <div class="layui-form-item" id="one-shop">
            <label class="layui-form-label">商品：</label>
            <div class="layui-input-inline" style="display: flex">
                <div id="shop_name"></div>
                <input type="hidden" id="shop_id" name="shop_id">
                <a class="layui-btn layui-btn-normal select-goods">选择商品</a>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">是否置顶：</label>
            <div class="layui-input-inline">
                <input type="radio" name="is_top" value="0" title="否" checked>
                <input type="radio" name="is_top" value="1" title="是">
            </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" id="article-content">
            <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>
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="addSubmit" id="addSubmit" value="确认">
    </div>
</div>


<script src="__PUBLIC__/static/common/js/area.js"></script>
<script>
    layui.config({
        base: "/static/lib/"
    }).extend({
        likeedit: "likeedit/likeedit",
        likeArea: "likeArea/likeArea",
        txMap: "likeMap/txMap"
    }).use(["form", "laydate", "likeArea", "txMap", 'likeedit', 'upload', 'element'], function(){
        var $ = layui.$;
        var form = layui.form;
        var laydate = layui.laydate;
        var likeedit = layui.likeedit;
        var likeupload = layui.upload;

        //------------------------------------------富文本编辑器 begin --------------------------------
        var content = likeedit.build("content", {
            uploadImage: {
                url: '{:url("file/lists")}?type=10'
            }
        });

        form.verify({
            content: function() {
                likeedit.sync(content)
            }
        });
        //------------------------------------------富文本编辑器 end --------------------------------


        form.on('radio(type)', function(data){
            var val = $('input[name="mall_type"]:checked').val()

            if(data.value == 0){
                if (val == 1) {
                    $("#mall-image").hide()
                } else {
                    $("#mall-image").show()
                }

                $("#mall_type").show()
                $("#mall-video").hide()
            } else {
                $("#mall-image").hide()
                $("#mall_type").hide()
                $("#one-shop").show()
                $("#mall-video").show()
            }
        });

        form.on('radio(mall_type)', function(data){
            if(data.value == 0){
                $("#mall-image").show()
                $("#mall-video").hide()
                $("#article-content").show()
            } else {
                console.log(456)
                $("#mall-image").hide()
                $("#mall-video").hide()
                $("#article-content").hide()
            }
        });

        laydate.render({type:"datetime", elem:"#expire_time", trigger:"click",min:0});

        like.delUpload();
        $(document).on("click", "#mallNewImage", function () {
            like.imageUpload({
                limit: {$max_upload_file},
                field: "mall_news_images[]",
                that: $(this)
            });
        });

        // 视频上传
        likeupload
        var uploadInst = likeupload.render({
            elem: '.add-upload-video' //绑定元素
            ,url: "{:url('MallNews/uploadVideo')}" //上传接口
            ,accept: 'video'
            ,exts: "mp4"
            ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                console.log(222)
                layer.load(); //上传loading
            }
            ,done: function(res, index, upload){
                if (res.code === 1) {
                    $("#upload-video-block").hide()
                    $("#video-block").show()
                    $("#mallVideo").attr('src', res.data.file)
                    $("#mall_news_images").val(res.data.file)
                    $("input[name='video_file']").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 = $("#mallVideo").attr('src')
                like.ajax({
                    url: '{:url("mallNews/delVideo")}',
                    data:  {videoFile},
                    type: "post",
                    success: function (res) {}
                });

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

        // 选择商品
        $(document).on('click','.select-goods',function () {
            var val = $('input[name="mall_type"]:checked').val()
            if (val == 0) {
                layer.open({
                    type: 2
                    ,title: '选择商品'
                    ,content: '{:url("mallNews/goods")}'
                    ,area: ['90%', '90%']
                    ,btn: ['确认', '取消']
                    ,yes: function(index, layero){
                        var data = window["layui-layer-iframe" + index].callbackdata();
                        $('#shop_name').html(data[0].name)
                        $('#shop_id').val(data[0].id)
                    }
                })
            } else if (val == 1) {
                layer.open({
                    type: 2
                    ,title: '选择商品'
                    ,content: '{:url("mallNews/mall_news_goods")}'
                    ,area: ['90%', '90%']
                    ,btn: ['确认', '取消']
                    ,yes: function(index, layero){
                        var data = window["layui-layer-iframe" + index].callbackdata();
                        var html = $('#shop_name').html()
                        html += '<br/> ' + data[0].name
                        $('#shop_name').html(html)

                        var val = $('#shop_id').val()
                        val += ',' + data[0].id
                        $('#shop_id').val(val)
                    }
                })
            }
        })

        form.verify({
            title: function (value, item) {
                if (!value) {
                    switchTab($(item).attr("switch-tab"));
                    return "请填写标题";
                }
            },
            desc: function (value, item) {
                if (!value) {
                    switchTab($(item).attr("switch-tab"));
                    return "请填写文章概述";
                }
            },
        });

        function switchTab(number) {
            $('.layui-tab-card .layui-tab-title li').removeClass('layui-this');
            $('.layui-tab-content .layui-tab-item').removeClass('layui-show');
            $('.layui-tab-card .layui-tab-title li').eq(number).addClass('layui-this');
            $('.layui-tab-content .layui-tab-item').eq(number).addClass('layui-show');
        }
    })
</script>