nk-lihaink-cn/app/admin/view/nk/broadcast/add.html

{extend name="common/base"/}
{block name="style"}
<style type="text/css">
    .editormd-code-toolbar select {
        display: inline-block
    }

    .editormd li {
        list-style: inherit;
    }
</style>
{/block}
<!-- 主体 -->
{block name="body"}
<form class="layui-form p-4">
    <h3 class="pb-3">添加内容</h3>
    <table class="layui-table layui-table-form">
        <tr>
            <td class="layui-td-gray">标题<font>*</font></td>
            <td colspan="7"><input type="text" name="title" lay-verify="required" lay-reqText="请输入标题"
                                   autocomplete="off" placeholder="请输入标题" class="layui-input"></td>
        </tr>

        <tr>
            <td class="layui-td-gray">人数<font>*</font></td>
            <td colspan="3">
                <input type="text" name="people_num" lay-verify="required" lay-reqText="请输入人数"
                       autocomplete="off" placeholder="请输入人数" class="layui-input"></td>
            <td class="layui-td-gray">标签(多选)<font>*</font></td>
            <td>
                <input type="checkbox" name="is_hot" title="热门">
                <input type="checkbox" name="is_tourism" title="文旅">
            </td>
        </tr>
        <tr>
            <td class="layui-td-gray" style="vertical-align:top;">简介</td>
            <td colspan="3">
                <textarea name="info" placeholder="请输入摘要，不能超过200个字" class="layui-textarea"></textarea>
            </td>
            <td class="layui-td-gray" style="vertical-align:top;">缩略图</td>
            <td>
                <div class="layui-upload">
                    <button type="button" class="layui-btn layui-btn-sm" id="upload_btn_thumb">
                        上传缩略图(尺寸:428x270)
                    </button>
                    <div class="layui-upload-list" id="upload_box_thumb"
                         style="width: 428px; height:270px; overflow: hidden;">
                        <img src=""
                             onerror="javascript:this.src='{__GOUGU__}/gougu/images/nonepic600x360.jpg';this.onerror=null;"
                             width="100" style="max-width: 100%; height:66px;"/>
                        <input type="hidden" name="images" value="">
                    </div>
                </div>
            </td>
        </tr>
        {if {:session('gougu_admin')['group_access']==1}
        <tr>
            <td style="width: 30%">
                <div class="layui-form-item">
                    <label class="layui-form-label">区县</label>
                    <div class="layui-input-block">
                        <select name="area_id" lay-filter="area_id" lay-verify="required">
                            {volist name='street' id='vo'}
                            <option value="{$vo.code}">{$vo.name}</option>
                            {/volist}
                        </select>
                    </div>
                </div>
            </td>
            <td colspan="3">
                <div class="layui-form-item">
                    <label class="layui-form-label">街道/镇</label>
                    <div class="layui-input-block">
                        <div id="demo1"></div>
                    </div>
                </div>
            </td>
            <td colspan="3">
                <div class="layui-form-item">
                    <label class="layui-form-label">村/社区</label>
                    <div class="layui-input-block">
                        <div id="demo2"></div>
                    </div>
                </div>
            </td>
        </tr>
        {/if}
        <tr>
            <td colspan="6" class="layui-td-gray" style="text-align:left">文章内容</td>
        </tr>
        <tr>
            <td colspan="6">
                <textarea class="layui-textarea" id="container_content"></textarea>
            </td>
        </tr>

    </table>
    <div class="pt-3">
        <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script src="/static/assets/js/xm-select.js"></script>
<script>
    const editorType = '{$editor}';
    var moduleInit = ['tool', 'tagpicker', 'tinymce'];
    var group_access = "{:session('gougu_admin')['group_access']}"

    function gouguInit() {
        var form = layui.form, tool = layui.tool, tagspicker = layui.tagpicker;

        //上传缩略图
        var upload_thumb = layui.upload.render({
            elem: '#upload_btn_thumb',
            url: '/admin/api/upload',
            done: function (res) {
                //如果上传失败
                if (res.code == 1) {
                    return layer.msg('上传失败');
                }
                //上传成功
                $('#upload_box_thumb input').attr('value', res.data.filepath);
                $('#upload_box_thumb img').attr('src', res.data.filepath);
            }
        });
        form.on('select(area_id)', function (data) {
            street(data.value)
        });
        function street (id) {
            var demo1 = xmSelect.render({
                name: 'street_id',
                el: '#demo1',
                prop: {
                    name: 'name',
                    value: 'code',
                },
                data: [],
                radio: true,
                disabled: group_access == 2 ? true : false,
                on: function (data) {
                    var arr = data.arr;
                    village(arr[0]['code'])
                },
            })
            $.get('/api/geo/street?pcode=' + id, function (result) {
                demo1.update({
                    data: result.data
                })
            });
        }
        function village (id) {
            var demo2 = xmSelect.render({
                name: 'village_id',
                el: '#demo2',
                prop: {
                    name: 'name',
                    value: 'id',
                },
                data: [],
                radio: true,
                disabled: group_access == 2 ? true : false,
            })
            $.get('/api/geo/village?pcode=' + id, function (result) {
                demo2.update({
                    data: result.data
                })
            });
        }
        var editor = layui.tinymce;
        var edit = editor.render({
            selector: "#container_content",
            height: 500
        });
        //监听提交
        form.on('submit(webform)', function (data) {
            data.field.introduce = tinyMCE.editors['container_content'].getContent();
            if (data.field.introduce == '') {
                layer.msg('请先完善文章内容');
                return false;
            }
            let callback = function (e) {
                layer.msg(e.msg);
                if (e.code == 0) {
                    tool.tabRefresh(71);
                    tool.sideClose(1000);
                }
            }
            tool.post('{$url[1]}', data.field, callback);
            return false;
        });

    }
</script>
{/block}
<!-- /脚本 -->