增加动态页面有轮播图片管理

app/data/controller/base/Pager.php

@@ -0,0 +1,87 @@
+<?php
+
+namespace app\data\controller\base;
+
+use think\admin\Controller;
+use think\admin\model\SystemBase;
+
+/**
+ * 页面内容管理
+ * Class Pager
+ * @package app\data\controller\base
+ */
+class Pager extends Controller
+{
+    /**
+     * 字典类型
+     * @var string
+     */
+    protected $type = '页面内容';
+
+    /**
+     * 页面类型
+     * @var array
+     */
+    protected $types = [];
+
+    /**
+     * 控制器初始化
+     * @return void
+     */
+    protected function initialize()
+    {
+        $this->types = SystemBase::mk()->items($this->type);
+    }
+
+    /**
+     * 内容页面管理
+     * @auth true
+     * @menu true
+     */
+    public function index()
+    {
+        $this->title = '内容页面管理';
+        $this->fetch();
+    }
+
+    /**
+     * 内容页面编辑
+     * @auth true
+     * @throws \think\db\exception\DataNotFoundException
+     * @throws \think\db\exception\DbException
+     * @throws \think\db\exception\ModelNotFoundException
+     */
+    public function edit()
+    {
+        $this->skey = input('get.type', '');
+        $this->base = $this->types[$this->skey] ?? [];
+        if (empty($this->base)) $this->error('未配置基础数据！');
+        $this->title = "编辑{$this->base['name']}";
+        $this->sysdata();
+    }
+
+    /**
+     * 显示并保存数据
+     * @throws \think\db\exception\DataNotFoundException
+     * @throws \think\db\exception\DbException
+     * @throws \think\db\exception\ModelNotFoundException
+     */
+    private function sysdata()
+    {
+        if ($this->request->isGet()) {
+            $this->data = sysdata($this->skey);
+            $this->fetch('form');
+        } elseif ($this->request->isPost()) {
+            if (is_string(input('data'))) {
+                $data = json_decode(input('data'), true) ?: [];
+            } else {
+                $data = $this->request->post();
+            }
+            if (sysdata($this->skey, $data) !== false) {
+                $this->success('内容保存成功！', 'javascript:history.back()');
+            } else {
+                $this->error('内容保存失败，请稍候再试!');
+            }
+        }
+    }
+}

app/data/controller/base/Slider.php

@@ -0,0 +1,94 @@
+<?php
+
+namespace app\data\controller\base;
+
+use think\admin\Controller;
+use think\admin\model\SystemBase;
+
+/**
+ * 轮播图片管理
+ * Class Slider
+ * @package app\data\controller\base
+ */
+class Slider extends Controller
+{
+    /**
+     * 跳转规则定义
+     * @var string[]
+     */
+    protected $rules = [
+        '#'  => '不跳转',
+        'LK' => '自定义链接',
+        'NL' => '新闻资讯列表',
+        'NS' => '新闻资讯详情',
+    ];
+
+    /**
+     * 数据类型
+     * @var string
+     */
+    protected $type = '轮播图片';
+
+    /**
+     * 页面类型
+     * @var array
+     */
+    protected $types = [];
+
+    /**
+     * 控制器初始化
+     * @return void
+     */
+    protected function initialize()
+    {
+        $this->types = SystemBase::mk()->items($this->type);
+    }
+
+    /**
+     * 轮播图片管理
+     * @auth true
+     * @menu true
+     */
+    public function index()
+    {
+        $this->title = '轮播图片管理';
+        $this->fetch();
+    }
+
+    /**
+     * 编辑轮播图片
+     * @auth true
+     * @throws \think\db\exception\DataNotFoundException
+     * @throws \think\db\exception\DbException
+     * @throws \think\db\exception\ModelNotFoundException
+     */
+    public function edit()
+    {
+        $this->skey = input('get.type', '');
+        $this->base = $this->types[$this->skey] ?? [];
+        if (empty($this->base)) $this->error('未配置基础数据！');
+        $this->number = 10;
+        $this->sysdata();
+    }
+
+    /**
+     * 保存轮播图片
+     * @throws \think\db\exception\DataNotFoundException
+     * @throws \think\db\exception\DbException
+     * @throws \think\db\exception\ModelNotFoundException
+     */
+    private function sysdata()
+    {
+        if ($this->request->isGet()) {
+            $this->data = sysdata($this->skey);
+            $this->title = "{$this->base['name']}管理";
+            $this->fetch('form');
+        } else {
+            if (sysdata($this->skey, json_decode(input('data'), true))) {
+                $this->success("{$this->base['name']}保存成功！");
+            } else {
+                $this->error("{$this->base['name']}保存失败，请稍候再试!");
+            }
+        }
+    }
+}

app/data/view/base/pager/form.html

@@ -0,0 +1,35 @@
+{extend name="../../admin/view/main"}
+
+{block name='content'}
+<form action="{:sysuri()}?type={$get.type|default=''}" class="layui-card layui-form" data-auto="true" method="post">
+    <div class="layui-card-body">
+
+        <label class="layui-form-item relative block">
+            <span class="help-label"><b>页面名称</b>Page Name</span>
+            <input class="layui-input" name="name" placeholder="请输入页面名称" required value='{$data.name|default=$base.name}'>
+        </label>
+
+        <div class="layui-form-item label-required-prev">
+            <span class="help-label"><b>页面内容</b>Page Content</span>
+            <label class="relative block">
+                <textarea class="layui-hide" name="content">{$data.content|default=$base.content}</textarea>
+            </label>
+        </div>
+
+        <div class="hr-line-dashed"></div>
+        <input type="hidden" name="type" value="{$get.type|default=''}">
+
+        <div class="layui-form-item text-center">
+            <button class="layui-btn" type="submit">保存数据</button>
+            <button class="layui-btn layui-btn-danger" data-confirm="确定要取消编辑吗？" data-history-back type='button'>取消编辑</button>
+        </div>
+
+    </div>
+</form>
+
+<script>
+    require(['ckeditor'], function () {
+        window.createEditor('[name=content]', {height: 533});
+    });
+</script>
+{/block}

app/data/view/base/pager/index.html

@@ -0,0 +1,30 @@
+{extend name="../../admin/view/main"}
+
+{block name='content'}
+<div class="think-box-notify">温馨提示：如需添加新内容，需要在系统管理的基础数据添加类似为 “<b>{$type|default=''}</b>” 的基础数据。</div>
+<div class="padding-10">
+    <div class="layui-row layui-col-space20 portal-block-container notselect">
+        {foreach $types as $key=>$type}
+        <div class="layui-col-sm4 layui-col-md4 layui-col-lg3">
+            <!--{if auth('edit')}-->
+            <div class="pointer" data-open="{:url('edit')}?type={$key}">
+                <div class="portal-block-item nowrap think-bg-violet">
+                    <div class="font-s14">编辑页面</div>
+                    <div class="font-s16">{$type.name|default=''}</div>
+                </div>
+                <i class="portal-block-icon layui-icon layui-icon-read"></i>
+            </div>
+            <!--{else}-->
+            <div>
+                <div class="portal-block-item nowrap think-bg-violet">
+                    <div class="font-s14">编辑页面</div>
+                    <div class="font-s16">{$type.name|default=''}</div>
+                </div>
+                <i class="portal-block-icon layui-icon layui-icon-read"></i>
+            </div>
+            <!--{/if}-->
+        </div>
+        {/foreach}
+    </div>
+</div>
+{/block}

app/data/view/base/slider/form.html

@@ -0,0 +1,141 @@
+{extend name="../../admin/view/main"}
+
+{block name="content"}
+<style>
+    [data-upload-image] + .uploadimage {
+        width: 100px;
+        height: 100px;
+        margin: 0 !important;
+    }
+</style>
+
+<div class="think-box-shadow">
+    <form id="DataForm" class='layui-form' autocomplete='off' action="{:sysuri()}?type={$get.type|default=''}" onsubmit="return false" style="width:850px">
+        <div class="text-center padding-top-10">
+            <b class="color-text font-s16">{$title|default='轮播图片管理'}</b>
+            <div class="color-desc font-s12">{$base.content|default='图片尺寸：1080px * 1882px'}</div>
+            <!--{if $app->isDebug() && !empty($skey)}-->
+            <i class="color-desc pull-right">{$skey}</i>
+            <!--{/if}-->
+        </div>
+        <div class="hr-line-dashed margin-bottom-25"></div>
+        <div class="layui-form-item" data-item-box>
+            <div class="layui-form-item text-center">
+                <a class="layui-btn layui-btn-normal" data-item-add>添加选项</a>
+            </div>
+        </div>
+        <div class="hr-line-dashed"></div>
+        <div class="layui-form-item text-center">
+            <button class="layui-btn" data-submit>保存数据</button>
+        </div>
+    </form>
+</div>
+
+<div data-item-tpl class="layui-hide">
+    <div class="layui-form-item" style="padding-left:80px" data-news-item>
+        <div class="layui-input-inline text-center" style="width:140px">
+            <input data-upload-image name="img[]" type="hidden">
+        </div>
+        <div class="nowrap margin-bottom-5">
+            <label class="inline-block relative text-middle">
+                <span class="color-green font-s13 margin-right-5">图标标题</span>
+                <input class="layui-input inline-block" style="width:280px" name="title[]" value="#" required placeholder="请输入图标标题">
+            </label>
+            <div class="inline-block margin-left-5">
+                <a data-item-up class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-up"></i></a>
+                <a data-item-dn class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-down"></i></a>
+                <a data-item-rm class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-close"></i></a>
+            </div>
+        </div>
+        <div class="nowrap margin-bottom-5">
+            <label class="inline-block relative">
+                <span class="color-green font-s13 margin-right-5">跳转规则</span>
+                <input class="layui-input inline-block" style="width:280px" name="url[]" value="#" required placeholder="请输入跳转规则">
+            </label>
+            <div class="inline-block margin-left-5">
+                <select class="layui-select" name="type[]" lay-filter="TypeSelect" data-item-rule lay-ignore>
+                    {foreach $rules as $k=>$v}
+                    <option value="{$k}">{$k} - {$v}</option>
+                    {/foreach}
+                </select>
+            </div>
+            <div class="help-block">若要跳转页面，请选择对应的数据或填写跳转的 URL 地址，不跳转请填写 “#” 号占位。</div>
+        </div>
+    </div>
+</div>
+
+<label class="layui-hide">
+    <textarea id="DefaultData">{$data|default=[]|json_encode}</textarea>
+</label>
+
+<script>
+    $(function () {
+
+        /*! 默认数据处理 */
+        var defas = JSON.parse($('#DefaultData').val()), idx;
+        if (defas.length > 0) for (idx in defas) addItem(defas[idx]); else addItem({});
+
+        /*! 跳转规则选择器 */
+        layui.form.on('select(TypeSelect)', function (data) {
+            var input = $(data.elem).parent().prev('label').find('input');
+            var title = data.elem.options[data.elem.selectedIndex].innerText.split(' - ').pop();
+            window.setItemValue = function (id, name) {
+                input.val(data.value + '#' + (id || '0') + '#' + (name || title));
+            }, this.openModel = function (url) {
+                return $.form.modal(url, {}, title, null, true, null, '840px', '5%');
+            };
+            if (data.value === '#') return input.val('#');
+            if (data.value === 'LK') return /^https?:\/\//.test(input.val()) || input.val('#').focus();
+            if (data.value === 'NS') return this.openModel('{:url("data/base.news/select")}');
+            return window.setItemValue();
+        });
+
+        /*! 表单元素操作 */
+        $('form#DataForm').on('click', '[data-item-add]', function () {
+            addItem({});
+        }).on('click', '[data-item-rm]', function () {
+            $(this).parents('[data-news-item]').remove();
+            setAddButton();
+        }).on('click', '[data-item-up]', function () {
+            var item = $(this).parents('[data-news-item]');
+            var prev = item.prev('[data-news-item]');
+            if (item.index() > 0) item.insertBefore(prev);
+        }).on('click', '[data-item-dn]', function () {
+            var item = $(this).parents('[data-news-item]');
+            var next = item.next('[data-news-item]');
+            if (next) item.insertAfter(next);
+        }).vali(function (form, data) {
+            for (idx in form.img) {
+                if (!form.img[idx]) return $.msg.tips('需要上传图片文件哦！');
+                data.push({img: form.img[idx], url: form.url[idx], type: form.type[idx], title: form.title[idx]});
+            }
+            $.form.load(this.action, {data: JSON.stringify(data)}, 'post');
+        });
+
+        /*! 添加图片数据项 */
+        function addItem(data) {
+            data.url = data.url || '#';
+            var $html = $($('[data-item-tpl]').html());
+            for (idx in data) $html.find('[name^=' + idx + ']').val(data[idx]);
+            $html.find('select').removeAttr('lay-ignore').find('option').each(function () {
+                if (data.url === '#' && this.value === data.url) this.selected = true;
+                else if (this.value === data.url.split('#')[0]) this.selected = true;
+            }), $('[data-item-add]').parent().before($html), setAddButton();
+            /*! 初始化插件绑定 */
+            $.form.reInit($html).find('input[data-upload-image]').uploadOneImage();
+        }
+
+        /*! 检查并操作按钮 */
+        function setAddButton() {
+            this.limit = parseInt('{$number|default=0}');
+            this.laster = $('[data-item-box] [data-item-add]').parent();
+            this.number = $('[data-item-box] [data-news-item]').size();
+            if (this.number >= this.limit && this.limit > 0) {
+                this.laster.addClass('layui-hide');
+            } else {
+                this.laster.removeClass('layui-hide');
+            }
+        }
+    });
+</script>
+{/block}

app/data/view/base/slider/index.html

@@ -0,0 +1,30 @@
+{extend name="../../admin/view/main"}
+
+{block name='content'}
+<div class="think-box-notify">温馨提示：如需添加新内容，需要在系统管理的基础数据添加类似为 “<b>{$type|default=''}</b>” 的基础数据。</div>
+<div class="padding-10">
+    <div class="layui-row layui-col-space20 portal-block-container notselect">
+        {foreach $types as $key=>$type}
+        <div class="layui-col-sm4 layui-col-md4 layui-col-lg3">
+            <!--{if auth('edit')}-->
+            <div class="pointer" data-open="{:url('edit')}?type={$key}">
+                <div class="portal-block-item nowrap think-bg-violet">
+                    <div class="font-s14">编辑页面</div>
+                    <div class="font-s16">{$type.name|default=''}</div>
+                </div>
+                <i class="portal-block-icon layui-icon layui-icon-read"></i>
+            </div>
+            <!--{else}-->
+            <div>
+                <div class="portal-block-item nowrap think-bg-violet">
+                    <div class="font-s14">编辑页面</div>
+                    <div class="font-s16">{$type.name|default=''}</div>
+                </div>
+                <i class="portal-block-icon layui-icon layui-icon-read"></i>
+            </div>
+            <!--{/if}-->
+        </div>
+        {/foreach}
+    </div>
+</div>
+{/block}