ThinkAdmin/app/data/view/article_content/form.html

{extend name="../../admin/view/main"}

{block name='content'}
<form class="layui-form layui-card" action="{:request()->url()}" data-auto="true" method="post" autocomplete="off">

    <div class="layui-card-body padding-40">

        <div class="layui-form-item relative block">
            <span class="color-green font-w7 label-required-prev">文章类型</span>
            <div class="tags-container layui-textarea">
                {empty name='vo.type'}{assign name='vo.type' value='video'}{/empty}
                {foreach $types as $key=>$type}{if isset($vo.type) and $key eq $vo.type}
                <label class="think-radio notselect"><input checked type="radio" name="type" value="{$key}" lay-ignore> {$type}</label>
                {else}
                <label class="think-radio notselect"><input type="radio" name="type" value="{$key}" lay-ignore> {$type}</label>
                {/if}{/foreach}
            </div>
        </div>

        <div class="layui-form-item relative block">
            <span class="color-green font-w7 label-required-prev">文章标签</span>
            <div class="tags-container layui-textarea">
                {foreach $tags as $tag}{if isset($vo.tags) && is_array($vo.tags) && in_array($tag.title, $vo.tags)}
                <label class="think-checkbox notselect"><input checked type="checkbox" name="tags[]" value="{$tag.title}" lay-ignore> {$tag.title}</label>
                {else}
                <label class="think-checkbox notselect"><input type="checkbox" name="tags[]" value="{$tag.title}" lay-ignore> {$tag.title}</label>
                {/if}{/foreach}
            </div>
        </div>

        <div class="layui-form-item relative block">
            <span class="color-green font-w7 label-required-prev">资源文件</span>
            <label class="relative block label-required-null">
                <input required name="source" value='{$vo.source|default=""}' placeholder="请上传资源文件&nbsp; &nbsp; &nbsp; &nbsp;" class="layui-input">
                <a data-file data-type="png,jpg,gif,mp4,mp3" data-field="source" class="input-right-icon layui-icon layui-icon-upload"></a>
            </label>
        </div>

        <div class="layui-form-item relative block">
            <span class="color-green font-w7 label-required-prev">文章图片</span>
            <label class="relative block label-required-null">
                <input required name="logo" value='{$vo.logo|default=""}' placeholder="请上传图片&nbsp; &nbsp; &nbsp; &nbsp;" class="layui-input">
                <a data-file data-type="png,jpg,gif" data-field="logo" class="input-right-icon layui-icon layui-icon-upload"></a>
            </label>
        </div>

        <label class="layui-form-item relative block">
            <span class="color-green font-w7">文章标题</span>
            <input required name="title" value='{$vo.title|default=""}' placeholder="请输入文章标题" class="layui-input">
        </label>

        <label class="layui-form-item relative block">
            <span class="color-green font-w7">文章描述</span>
            <textarea required class="layui-textarea" placeholder="请输入文章描述" name="remark">{$vo.remark|default=''}</textarea>
        </label>

        <div class="layui-form-item relative block">
            <span class="color-green font-w7 label-required-prev">文章内容</span>
            <label class="relative block">
                <textarea class="layui-textarea" placeholder="请输入文章内容" name="content">{$vo.content|default=''}</textarea>
            </label>
        </div>

        <div class="hr-line-dashed"></div>
        {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}

        <div class="layui-form-item text-center">
            <button class="layui-btn" type='submit'>保存数据</button>
            <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
        </div>

    </div>

</form>

<script>
    (function () {
        $('[name="type"]').on('change', function () {
            var $input = $('[name="source"]'), type = $('[name="type"]:checked').val() || 'video';
            if (type === 'video') $input.attr('data-type', 'mp4').parents('div.layui-form-item').addClass('block').removeClass('layui-hide');
            else if (type === 'audio') console.log($input.attr('data-type', 'mp3').parents('div.layui-form-item').addClass('block').removeClass('layui-hide'));
            else $input.attr('data-type', 'jpg,png,jpeg').parents('div.layui-form-item').addClass('layui-hide').removeClass('block');
        }).trigger('change');
        require(['ckeditor'], function () {
            window.createEditor('[name=content]', {height: 300});
        })
    })();
</script>

<style>
    .tags-container {
        padding: 2px 10px 10px 10px;
        min-height: 55px;
    }

    .tags-container label {
        border: 1px dashed #e2e2e2;
        padding: 5px 8px 5px 5px;
        background: white;
    }
</style>
{/block}