添加轮播图管理

This commit is contained in:
Anyon 2020-07-14 09:38:13 +08:00
parent 5183052cde
commit 6696b97ca8
3 changed files with 143 additions and 3 deletions

View File

@ -0,0 +1,36 @@
<?php
namespace app\data\controller;
use think\admin\Controller;
/**
* 应用参数配置
* Class Config
* @package app\data\controller
*/
class Config extends Controller
{
/**
* 首页轮播图片
* @menu true
* @auth true
* @throws \think\db\exception\DataNotFoundException
* @throws \think\db\exception\DbException
* @throws \think\db\exception\ModelNotFoundException
*/
public function slider()
{
if ($this->request->isGet()) {
$this->title = '轮播图管理';
$this->data = sysdata('slider');
$this->fetch();
} else {
if (sysdata('slider', json_decode(input('data'), true))) {
$this->success('轮播图保存成功!', '');
} else {
$this->error('轮播图保存失败,请稍候再试!');
}
}
}
}

View File

@ -2,12 +2,12 @@
{block name='content'} {block name='content'}
<div class="padding-25" data-select-container> <div class="padding-25" data-select-container>
{include file='attack_content/select_search'} {include file='article_content/select_search'}
<table class="layui-table margin-top-10" lay-skin="line"> <table class="layui-table margin-top-10" lay-skin="line">
{notempty name='list'} {notempty name='list'}
<thead> <thead>
<tr> <tr>
<th class="text-left nowrap">文章信息</th> <th class="text-left nowrap">文章标题</th>
<th class="text-left nowrap">文章状态</th> <th class="text-left nowrap">文章状态</th>
<th class="text-left nowrap">创建时间</th> <th class="text-left nowrap">创建时间</th>
<th class="text-left nowrap"></th> <th class="text-left nowrap"></th>
@ -36,7 +36,6 @@
{block name='script'} {block name='script'}
<script> <script>
$(function () { $(function () {
layui.form.render(); layui.form.render();
$('[data-article]').on('click', function () { $('[data-article]').on('click', function () {
top.setAttackId(this.getAttribute('data-article') || ''); top.setAttackId(this.getAttribute('data-article') || '');

View File

@ -0,0 +1,105 @@
{extend name="../../admin/view/main"}
{block name="content"}
<div class="think-box-shadow">
<form onsubmit="return false;" id="SliderForm" class='layui-form' autocomplete="off" style="width:750px">
<div class="text-center font-s14 font-w7">轮播图管理<span class="color-desc font-s12">建议尺寸690px 250px</span></div>
<div class="hr-line-dashed"></div>
<div class="padding-bottom-15" data-slider-box>
<div class="layui-form-item text-center">
<a data-item-add class="layui-btn layui-btn-primary">添加图片</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 padding-left-40 margin-left-40" data-slider-item>
<div class="layui-input-inline nowrap" style="width:120px">
<input data-upload-image name="img[]" type="hidden">
</div>
<label class="layui-input-inline nowrap relative margin-bottom-5" style="width:300px">
<span>图片标题 </span>
<input class="layui-input inline-block" style="width:240px" name="title[]" value="#" required placeholder="请输入图片标题">
<a data-item-up class="layui-btn layui-btn-primary margin-left-5"><i class="layui-icon layui-icon-up margin-0"></i></a>
<a data-item-dn class="layui-btn layui-btn-primary margin-left-5"><i class="layui-icon layui-icon-down margin-0"></i></a>
<a data-item-rm class="layui-btn layui-btn-primary margin-left-5"><i class="layui-icon layui-icon-close margin-0"></i></a>
</label>
<label class="layui-input-inline nowrap relative margin-bottom-5" style="width:300px">
<span>跳转活动 </span>
<input class="layui-input inline-block" style="width:240px" name="url[]" value="#" required placeholder="请输入跳转活动">
<a data-item-article class="layui-btn layui-btn-primary margin-left-5" style="margin-top:-3px">选择文章</a>
<span class="help-block block">若要跳转页面,请填写正确的 URL 地址,不跳转以“#”号表示。</span>
</label>
</div>
</div>
<label class="layui-hide">
<textarea id="default-data">{$data|default=[]|json_encode}</textarea>
</label>
<style>
[data-item-dn], [data-item-up], [data-item-rm], [data-item-goods], [data-item-cate] {
margin-top: -4px;
}
</style>
<script>
(function (data) {
/*! 默认数据处理 */
if (data.length < 1) addItem();
for (this.index in data) addItem(data[this.index]);
/*! 初始化上传插件 */
(function initUpload() {
$('[data-slider-box] input[data-upload-image]').map(function () {
if (!$(this).attr('inited')) $(this).attr('inited', true).uploadOneImage();
});
setTimeout(initUpload, 100);
})();
/*! 轮播选项操作 */
$('[data-slider-box]').on('click', '[data-item-article]', function ($that) {
$that = $(this), top.setAttackId = function (id) {
$that.prevAll('input').val('article#{v}'.replace('{v}', id));
};
$.form.iframe('{:url("data/article_content/select")}', '选择文章', ['930px', '600px']);
}).on('click', '[data-item-add]', function () {
addItem();
}).on('click', '[data-item-rm]', function () {
$(this).parents('[data-slider-item]').remove();
}).on('click', '[data-item-up]', function () {
this.item = $(this).parents('[data-slider-item]');
this.prev = this.item.prev('[data-slider-item]');
if (this.item.index() > 0) this.item.insertBefore(this.prev);
}).on('click', '[data-item-dn]', function () {
this.item = $(this).parents('[data-slider-item]');
this.next = this.item.next('[data-slider-item]');
if (this.next) this.item.insertAfter(this.next);
});
/*! 表单提交处理 */
$('form#SliderForm').vali(function (ret) {
this.data = [];
for (this.index in ret.img) {
if (!ret.img[this.index]) return $.msg.tips('请上传展示图片哦!');
this.data.push({img: ret.img[this.index], url: ret.url[this.index], title: ret.title[this.index]});
}
$.form.load('{$request->url()}', {data: JSON.stringify(this.data)}, 'post');
});
})(JSON.parse(document.getElementById('default-data').innerHTML || '[]') || []);
/*! 添加轮播项 */
function addItem(data) {
this.$html = $($('[data-item-tpl]').html());
if (data) for (this.index in data) this.$html.find('[name^="' + this.index + '"]').val(data[this.index]);
$('[data-item-add]').parent().before(this.$html), setTimeout(function () {
$.form.reInit();
}, 100);
}
</script>
{/block}