zhongshen_project/app/shop/view/article/edit.html

{extend name="app/shop/view/base.html"/}
{block name="resources"}
<style>
    .upload-img-block .upload-img-box .upload-default{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
</style>
{/block}
{block name="main"}

<div class="layui-form form-wrap">

    <div class="layui-form-item">
        <label class="layui-form-label short-label"><span class="required">*</span>文章标题：</label>
        <div class="layui-input-inline">
            <input type="text" name="article_title" value="{$info.article_title}" lay-verify="required" maxlength="40" autocomplete="off" placeholder="文章标题最多40个字" class="layui-input len-long">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>文章分类：</label>
        <div class="layui-input-inline">
            <select name="category_id" lay-verify="required">
                <option value="">请选择</option>
                {foreach $category_list as $v}
                <option value="{$v['category_id']}" {if $info.category_id == $v.category_id} selected {/if}>{$v['category_name']}</option>
                {/foreach}
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label short-label">摘要：</label>
        <div class="layui-input-block">
            <textarea name="article_abstract" class="layui-textarea len-long" maxlength="100">{$info.article_abstract}</textarea>
        </div>
        <div class="word-aux">文章摘要最多可输入100个字</div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">封面</label>
        <div class="layui-input-block img-upload">
            <div class="upload-img-block square simple-uploading">
                <div class="upload-img-box" id="img">
                    <div class="upload-default">
                        <i class="iconfont iconshangchuan"></i>
                        <p>点击上传</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="word-aux">推荐使用 750x420 像素的图片 最多上传1张</div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>文章内容：</label>
        <div class="layui-input-inline">
            <script id="editor" type="text/plain" class="special-length" style="height:500px;"></script>
            <input type="hidden" name="article_content" id="article_content" value="{$info.article_content}"/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">发布时间：</label>
        <div class="layui-input-inline">
            <input type="radio" name="is_show_release_time" value="1" title="显示" {if $info.is_show_release_time == 1} checked {/if}>
            <input type="radio" name="is_show_release_time" value="0" title="不显示" {if $info.is_show_release_time == 0} checked {/if}>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">阅读次数：</label>
        <div class="layui-input-inline">
            <input type="radio" name="is_show_read_num" value="1" title="显示" {if $info.is_show_read_num == 1} checked {/if}>
            <input type="radio" name="is_show_read_num" value="0" title="不显示" {if $info.is_show_read_num == 0} checked {/if}>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">点赞次数：</label>
        <div class="layui-input-inline">
            <input type="radio" name="is_show_dianzan_num" value="1" title="显示" {if $info.is_show_dianzan_num == 1} checked {/if}>
            <input type="radio" name="is_show_dianzan_num" value="0" title="不显示" {if $info.is_show_dianzan_num == 0} checked {/if}>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">虚拟阅读数：</label>
        <div class="layui-input-inline">
            <input type="number" min="0" name="initial_read_num" value="{$info.initial_read_num}" onchange="detectionNumType(this,'integral')"  class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">虚拟点赞数：</label>
        <div class="layui-input-inline">
            <input type="number" min="0" name="initial_dianzan_num" value="{$info.initial_dianzan_num}" onchange="detectionNumType(this,'integral')" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">排序：</label>
        <div class="layui-input-inline">
            <input type="number" min="0" name="sort" value="{$info.sort}" class="layui-input">
        </div>
    </div>

    <input type="hidden" name="article_id" value="{$info.article_id}" />

    <div class="form-row">
        {if $info.status == 1}
        <button class="layui-btn" lay-submit lay-filter="save">保存</button>
        <button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
        {else /}
        <button class="layui-btn" lay-submit lay-filter="saveDrafts">保存</button>
        <button class="layui-btn" lay-submit lay-filter="save">立即发布</button>
        <button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
        {/if}
    </div>

</div>

{/block}
{block name="script"}
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/ueditor.all.js"></script>
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/lang/zh-cn/zh-cn.js"></script>
<script>
    var form,upload,
            IMAGE_MAX = 9, //最多可以上传多少张图片
            imageCollection = [], //图片集合
            selectedGoodsId = [],
            goods_id=[],
            repeat_flag = false,
            coverImg = '{$info.cover_img}';

    initImg();//初始化图片
    function initImg(){
        $("#img").html("<img src=" + ns.img(coverImg) + " >");
        imageCollection = [coverImg];

    }
    //实例化富文本
    var ue = UE.getEditor('editor');
    if($("#article_content").val()){
        ue.ready(function() {
            ue.setContent($("#article_content").val());
        });
    }

    layui.use(['form'], function() {
        form = layui.form;
        form.render();

        // 单图上传
        $("body").on("click", "#img", function () {
            openAlbum(function (data) {
                imageCollection = [];
                imageCollection.push(data[0].pic_path);
                imageCollection.splice(1, imageCollection.length);
                var val = '<img src="' + ns.img(imageCollection[0]) + '" alt="">';
                $("#img").html(val);
            }, 1);
        });

        /**
         * 表单提交(立即发布)
         */
        form.on('submit(save)', function(data){
            field = data.field;
            field.status = 1;
            formSubmit(field)
        });

        /**
         * 表单提交(草稿箱)
         */
        form.on('submit(saveDrafts)', function(data){
            field = data.field;
            field.status = 0;
            formSubmit(field)
        });

    });

    /**
     *  提交
     */
    function formSubmit(field)
    {
        if (!imageCollection.length){
            layer.msg('请选择封面图！', {icon: 5, anim: 6});
            return;
        }
        field.cover_img = imageCollection.join();

        if (!ue.getContent()){
            layer.msg("文章内容不能为空");
            return false;
        }

        if(field.sort < 0){
            layer.msg("排序号不能小于0");
            return false;
        }

        field.article_content = ue.getContent();

        if(repeat_flag) return;
        repeat_flag = true;

        $.ajax({
            type: 'POST',
            dataType: 'JSON',
            url: ns.url("shop/article/edit"),
            data: field,
            async: false,
            success: function(res){
                repeat_flag = false;

                if (res.code == 0) {
                    layer.confirm('编辑成功', {
                        title:'操作提示',
                        btn: ['返回列表', '继续编辑'],
                        yes: function(){
                            if(field.status == 1){
                                location.href = ns.url("shop/article/lists");
                            }else{
                                location.href = ns.url("shop/article/drafts");
                            }
                        },
                        btn2: function() {
                            location.reload();
                        }
                    });
                }else{
                    layer.msg(res.message);
                }
            }
        })
    }

    function back() {
        location.href = ns.url("shop/article/lists");
    }

    //检测数据类型
    function detectionNumType(el, type) {
        var value = $(el).val();
        //大于零 且 不是小数
        if (value < 0 && type == 'integral')
            $(el).val(0);
        else if (type == 'integral')
            $(el).val(Math.round(value));

        //大于1 且 不是小数
        if (value < 1 && type == 'positiveInteger')
            $(el).val(1);
        else if (type == 'positiveInteger')
            $(el).val(Math.round(value));
        //大于零可以是小数
        if (type == 'positiveNumber') {
            value = parseFloat(value).toFixed(2);
            if (value < 0)
                $(el).val(0);
            else
                $(el).val(value);
        }
    }
</script>
{/block}