yzc/app/admin/view/article/article/create.php

{extend name="public/container"}
{block name="head_top"}
<link href="{__ADMIN_PATH}plug/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
<link href="{__ADMIN_PATH}module/wechat/news/css/style.css" type="text/css" rel="stylesheet">
<link href="{__FRAME_PATH}css/plugins/chosen/chosen.css" rel="stylesheet">
<script type="text/javascript" src="{__ADMIN_PATH}plug/umeditor/third-party/jquery.min.js"></script>
<script type="text/javascript" src="{__ADMIN_PATH}plug/umeditor/third-party/template.min.js"></script>
<script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/umeditor/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/umeditor/umeditor.js"></script>
<script src="{__ADMIN_PATH}frame/js/ajaxfileupload.js"></script>
<script src="{__ADMIN_PATH}plug/validate/jquery.validate.js"></script>
<script src="{__FRAME_PATH}js/plugins/chosen/chosen.jquery.js"></script>
<script src="{__ADMIN_PATH}js/axios.min.js"></script>
<!-- 新增视频上传所需JS -->
<script src="{__MODULE_PATH}widget/aliyun-oss-sdk-4.4.4.min.js"></script>
<script src="{__MODULE_PATH}widget/cos-js-sdk-v5.min.js"></script>
<script src="{__MODULE_PATH}widget/qiniu-js-sdk-2.5.5.js"></script>
<script src="{__MODULE_PATH}widget/plupload.full.min.js"></script>
<script src="{__MODULE_PATH}widget/videoUpload.js"></script>

<style>
    .wrapper-content {
        padding: 0 !important;
    }
    /* 视频上传样式 */
    .video-upload-box {
        margin-top: 20px;
    }
    .video-upload-box .input-group {
        display: flex;
        margin-bottom: 10px;
    }
    .video-upload-box .input-group .layui-input {
        flex: 1;
        margin-right: 10px;
    }
    .video-upload-box .video-preview {
        position: relative;
        width: 300px;
        height: 180px;
        border-radius: 10px;
        background-color: #f5f5f5;
        margin-top: 15px;
        overflow: hidden;
    }
    .video-upload-box .video-preview video {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .video-upload-box .delete-video {
        position: absolute;
        top: 5px;
        right: 5px;
        color: #1E9FFF;
        font-size: 20px;
        cursor: pointer;
        z-index: 10;
    }
    .video-upload-box .progress-container {
        margin-top: 15px;
        display: none;
    }
    .video-upload-box .progress-container .progress-bar {
        height: 20px;
        background-color: #1E9FFF;
        text-align: center;
        color: white;
        border-radius: 4px;
    }
    .help-block {
        color: #ccc;
        margin-top: 5px;
    }
</style>
{/block}
{block name="content"}
<div class="row">
    <div class="col-sm-12 panel panel-default" >
        <div class="panel-body" style="padding: 30px">
            <form class="form-horizontal" id="signupForm">
                <div class="form-group">
                    <div class="col-md-12">
                        <div class="input-group">
                            <span class="input-group-addon">标题</span>
                            <input maxlength="64" placeholder="请在这里输入标题" name="title" class="layui-input" id="title" value="{$news.title}">
                            <input type="hidden"  id="id" value="{$news.id}">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        <div class="input-group">
                            <span class="input-group-addon">作者</span>
                            <input maxlength="8" placeholder="请输入作者" name="author" class="layui-input" id="author" value="{$news.author}">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        <div class="input-group">
                            <span class="input-group-addon">文章分类</span>
                            <?php if(empty($all)){?>
                            <select data-placeholder="请先添加文章分类" class="chosen-select"  style="width:100%;" tabindex="4" name="type_id">
                                <?php }else{ ?>
                                    <select data-placeholder="选择文章分类" class="chosen-select"  style="width:100%;" tabindex="4" name="type_id" {eq name="$select" value="1"}disabled="disabled"{/eq}>
                                <?php }?>
                                {volist name="all" id="vo" key="k"}
                                {if condition="$key eq $cid"}
                                <option value="{$key}" selected hassubinfo="true" >{$vo}</option>
                                {elseif condition="in_array($key,$news['cid'])"}
                                <option value="{$key}" selected hassubinfo="true" >{$vo}</option>
                                {else/}
                                <option value="{$key}" hassubinfo="true" >{$vo}</option>
                                {/if}
                                {/volist}
                            </select></div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        <div class="form-control" style="height:auto">
                            <label style="color:#ccc">图文封面大图片设置</label>
                            <div class="row nowrap">
                                <div class="col-xs-3" style="width:160px">
                                    {if condition="$news['image_input']"}
                                    <div class="upload-image-box transition image_img" style="height: 80px;background-repeat:no-repeat;background-size:contain;background-image:url({$news['image_input']})">
                                        <input value="" type="hidden" name="local_url">
                                    </div>
                                    {else/}
                                    <div class="upload-image-box transition image_img" style="height: 80px;background-repeat:no-repeat;background-size:contain;background-image:url('/system/module/wechat/news/images/image.png')">
                                        <input value="" type="hidden" name="local_url">
                                    </div>
                                    {/if}
                                </div>
                                <div class="col-xs-6">
                                    <input type="file" class="upload" name="image" style="display: none;" id="image" />
                                    <br>
                                    <a class="btn btn-sm add_image upload_span">上传图片</a>
                                    <br>
                                    <br>
                                </div>
                            </div>
                            <input type="hidden" name="image" id="image_input" value="{$news['image_input']}"/>
                            <p class="help-block" style="margin-top:10px;color:#ccc">封面大图片建议尺寸：900像素 * 500像素</p>
                        </div>
                    </div>
                </div>

                <!-- 新增视频上传部分 -->
                <div class="form-group">
                    <div class="col-md-12 video-upload-box">
                        <div class="form-control" style="height:auto">
                            <label style="color:#ccc">视频上传</label>
                            <div class="input-group">
                                <input type="text" name="video_link" id="video_link"
                                       placeholder="请输入视频链接" class="layui-input"
                                       value="{$news.video_link}">
                                <button type="button" class="btn btn-sm btn-info" id="upload_video_btn">
                                    {$news.video_link ? '确认添加' : '上传视频'}
                                </button>
                                <input type="file" id="video_file" style="display: none;">
                            </div>
                            <div class="progress-container" id="video_progress">
                                <div class="progress-bar" id="progress_bar" style="width:0%">0%</div>
                            </div>
                            <div class="video-preview" id="video_preview" {if condition="!$news['video_link']"}style="display:none"{/if}>
                            {if condition="$news['video_link']"}
                            <video controls src="{$news.video_link}">
                                您的浏览器不支持 video 标签。
                            </video>
                            {/if}
                            <i class="layui-icon layui-icon-delete delete-video" id="delete_video"></i>
                        </div>
                        <p class="help-block">支持MP4格式视频，文件大小不超过100MB</p>
                    </div>
                </div>
        </div>

        <div class="form-group">
            <div class="col-md-12">
                <label style="color:#aaa">文章简介</label>
                <textarea  id="synopsis" name="synopsis" class="layui-input" style="height:80px;resize:none;line-height:20px;color:#333;">{$news.synopsis}</textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-12">
                <label style="color:#aaa">文章内容</label>
                <textarea type="text/plain" id="myEditor" style="width:100%;">{$news['content']|raw}</textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-12">
                <div class="col-md-6">
                    <label style="color:#aaa">是否显示banner</label>
                    <br/>
                    <input type="radio" name="is_banner" class="layui-radio" value="0" {eq name="news['is_banner']" value="0"}checked{/eq}>否
                    <input type="radio" name="is_banner" class="layui-radio" value="1" {eq name="news['is_banner']" value="1"}checked{/eq}>是
                </div>
                <div class="col-md-6">
                    <label style="color:#aaa">是否显示热门</label>
                    <br/>
                    <input type="radio" name="is_hot" class="layui-radio" value="0" {eq name="news['is_hot']" value="0"}checked{/eq}>否
                    <input type="radio" name="is_hot" class="layui-radio" value="1" {eq name="news['is_hot']" value="1"}checked{/eq}>是
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-12">
                <label style="display:block"><span style="color:#aaa;">原文链接<b>选填</b>，填写之后在图文左下方会出现此链接</span>
                    <input maxlength="200" name="url" class="layui-input" id="url" value="{$news.url}">
                </label>
            </div>
        </div>
        <div class="form-actions">
            <div class="row">
                <div class="col-md-offset-4 col-md-9">
                    <button type="button" class="btn btn-w-m btn-info save_news">保存</button>
                </div>
            </div>
        </div>
        </form>
    </div>
</div>
</div>
<script src="{__ADMIN_PATH}js/layuiList.js"></script>
{/block}
{block name="script"}
<script>
    var editor = document.getElementById('myEditor');
    editor.style.height = '300px';
    window.UMEDITOR_CONFIG.toolbar = [
        // 加入一个 test
        'source | undo redo | bold italic underline strikethrough | superscript subscript | forecolor backcolor | removeformat |',
        'insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize' ,
        '| justifyleft justifycenter justifyright justifyjustify |',
        'link unlink | emotion selectimgs video  | map',
        '| horizontal print preview fullscreen', 'drafts', 'formula'
    ];
    UM.registerUI('selectimgs',function(name){
        var me = this;
        var $btn = $.eduibutton({
            icon : 'image',
            click : function(){
                createFrame('选择图片','{:Url('widget.images/index')}?fodder=editor');
            },
            title: '选择图片'
        });

        this.addListener('selectionchange',function(){
            //切换为不可编辑时，把自己变灰
            var state = this.queryCommandState(name);
            $btn.edui().disabled(state == -1).active(state == 1)
        });
        return $btn;
    });
    //实例化编辑器
    var um = UM.getEditor('myEditor', {
        autoTransWord: false,       // 关闭自动转义
        allHtmlEnabled: true        // 允许所有HTML
    });

    // 视频上传功能
    $(function() {
        // 上传视频按钮点击事件
        $('#upload_video_btn').on('click', function() {
            if ($('#video_link').val()) {
                // 如果输入框有值，直接设置为视频链接
                $('#video_preview').show();
                $('#video_preview video').attr('src', $('#video_link').val());
                $(this).text('上传视频');
            } else {
                // 否则触发文件选择
                $('#video_file').trigger('click');
            }
        });

        // 删除视频
        $('#delete_video').on('click', function() {
            $('#video_link').val('');
            $('#video_preview').hide();
            $('#upload_video_btn').text('上传视频');
        });

        // 文件选择变化事件
        $('#video_file').on('change', function() {
            var file = this.files[0];
            if (!file) return;

            // 验证文件类型
            if (!file.type.includes('video/mp4') && !file.name.toLowerCase().endsWith('.mp4')) {
                $eb.message('error', '请选择MP4格式的视频文件');
                return;
            }

            // 验证文件大小（100MB以内）
            if (file.size > 100 * 1024 * 1024) {
                $eb.message('error', '视频文件大小不能超过100MB');
                return;
            }

            // 显示进度条
            $('#video_progress').show();
            $('#progress_bar').css('width', '0%').text('0%');

            // 获取签名信息
            $.ajax({
                url: "https://shop.yzcyzjkc.com/admin/widget.video/get_signature",
                type: 'GET',
                success: function(signatureResponse) {
                    console.log(上传视频);
                    console.log(signatureResponse);
                    // if (signatureResponse.code != 200) {
                    //     $eb.message('error', signatureResponse.msg || '获取上传凭证失败');
                    //     $('#video_progress').hide();
                    //     return;
                    // }

                    // 使用AdminUpload进行上传
                    AdminUpload.upload(signatureResponse.data.uploadType, {
                        token: signatureResponse.data.uploadToken || '',
                        file: file,
                        accessKeyId: signatureResponse.data.accessKey || '',
                        accessKeySecret: signatureResponse.data.secretKey || '',
                        bucketName: signatureResponse.data.storageName || '',
                        region: signatureResponse.data.storageRegion || '',
                        domain: signatureResponse.data.domain || '',
                        uploadIng: function(progress) {
                            $('#progress_bar').css('width', progress + '%').text(progress + '%');
                        }
                    }).then(function(res) {
                        // 上传成功
                        $('#video_link').val(res.url);
                        $('#video_preview').show();
                        $('#video_preview video').attr('src', res.url);
                        $('#upload_video_btn').text('确认添加');
                        $eb.message('success', '视频上传成功');
                        $('#video_progress').hide();
                    }).catch(function(err) {
                        // 上传失败
                        console.error('视频上传失败:', err);
                        $eb.message('error', '视频上传失败: ' + (err.message || '未知错误'));
                        $('#video_progress').hide();
                    });
                },
                error: function() {
                    $eb.message('error', '获取上传凭证失败');
                    $('#video_progress').hide();
                }
            });
        });
    });

    // 选择图片
    function changeIMG(index,pic){
        $(".image_img").css('background-image',"url("+pic+")");
        $(".active").css('background-image',"url("+pic+")");
        $('#image_input').val(pic);
    }

    // 选择图片插入到编辑器中
    function insertEditor(list){
        um.execCommand('insertimage', list);
    }

    // 图片上传按钮点击事件
    $('.upload_span').on('click',function (e) {
        createFrame('选择图片','{:Url('widget.images/index')}?fodder=image');
    })

    // 编辑器上传图片
    $('.edui-icon-image').on('click',function (e) {
        createFrame('选择图片','{:Url('widget.images/index')}?fodder=image');
    })

    // 提交图文
    $('.save_news').on('click',function(){
        var list = {};
        list.title = $('#title').val();
        list.author = $('#author').val();
        list.image_input = $('#image_input').val();
        list.content = UM.getEditor('myEditor').body.innerHTML;
        list.synopsis = $('#synopsis').val();
        list.url = $('#url').val();
        list.id = $('#id').val();
        list.cid = $('.chosen-select').val();
        list.is_hot = $("input[name='is_hot']:checked").val();
        list.is_banner = $("input[name='is_banner']:checked").val();
        list.video_link = $('#video_link').val(); // 新增视频链接字段

        var Expression = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
        var objExp = new RegExp(Expression);

        if(list.title == ''){
            $eb.message('error','请输入标题');
            return false;
        }
        if(list.author == ''){
            $eb.message('error','请输入作者');
            return false;
        }
        if(list.image_input == ''){
            $eb.message('error','请添加图片');
            return false;
        }
        if(list.content == ''){
            $eb.message('error','请输入内容');
            return false;
        }
        if(list.synopsis == ''){
            $eb.message('error','请输入简介');
            return false;
        }
        if(list.url != '' && !objExp.test(list.url)){
            $eb.message('error','网址格式不正确！请重新输入');
            return false;
        }

        var index = layList.layer.load(1, {shade: [0.5,'#fff']});
        $.ajax({
            url:"{:Url('add_new')}",
            data:list,
            type:'post',
            dataType:'json',
            success:function(re){
                layer.close(index);
                if(re.code == 200){
                    $eb.message('success',re.msg);
                    setTimeout(function() {
                        parent.$(".J_iframe:visible")[0].contentWindow.location.reload();
                    }, 600);
                } else {
                    $eb.message('error',re.msg);
                }
            },
            error:function() {
                layer.close(index);
            }
        });
    });

    // 初始化选择器
    $(document).ready(function() {
        var config = {
            ".chosen-select": {},
            ".chosen-select-deselect": {allow_single_deselect: true},
            ".chosen-select-no-single": {disable_search_threshold: 10},
            ".chosen-select-no-results": {no_results_text: "沒有找到你要搜索的分类"},
            ".chosen-select-width": {width: "95%"}
        };
        for (var selector in config) {
            $(selector).chosen(config[selector])
        }
    });

    // 创建弹窗框架
    function createFrame(title,src,opt){
        opt === undefined && (opt = {});
        return layer.open({
            type: 2,
            title:title,
            area: [(opt.w || 800)+'px', (opt.h || 550)+'px'],
            fixed: false,
            maxmin: true,
            moveOut:false,
            anim:5,
            offset:'auto',
            shade:0,
            resize:true,
            content: src,
            move:'.layui-layer-title'
        });
    }
</script>
{/block}