mirror of
https://gitee.com/zoujingli/ThinkAdmin.git
synced 2025-04-06 03:58:04 +08:00
362 lines
16 KiB
PHP
362 lines
16 KiB
PHP
{extend name='extra@admin/content' /}
|
||
|
||
{block name="style"}
|
||
<style>
|
||
.mail-body {
|
||
overflow: auto !important
|
||
}
|
||
|
||
.mail-body img {
|
||
width: 100% !important
|
||
}
|
||
|
||
.mail-body p {
|
||
margin: 0
|
||
}
|
||
|
||
.news-box hr {
|
||
margin: 4px
|
||
}
|
||
|
||
.news-box .table-hover {
|
||
margin-bottom: 0;
|
||
margin-top: 10px;
|
||
border-top: none
|
||
}
|
||
|
||
.news-box .news-item {
|
||
position: relative;
|
||
border: 1px solid #cecece;
|
||
border-radius: 2px;
|
||
overflow: hidden;
|
||
cursor: pointer
|
||
}
|
||
|
||
.news-box .news-item.active {
|
||
box-shadow: 1px 0px 10px #0099CC;
|
||
border-color: #0099CC
|
||
}
|
||
|
||
.news-box .news-image {
|
||
text-align: center;
|
||
height: 120px;
|
||
width: 100%;
|
||
overflow: hidden
|
||
}
|
||
|
||
.news-box .news-image img {
|
||
margin-top: -5%;
|
||
min-width: 100%;
|
||
min-height: 100%
|
||
}
|
||
|
||
.news-box .news-image .fa,
|
||
.news-box .article-add .fa {
|
||
font-size: 6em;
|
||
color: #efefef;
|
||
height: 80px;
|
||
width: 100%;
|
||
line-height: 1em;
|
||
margin: 5px 0
|
||
}
|
||
|
||
.news-box .article-add {
|
||
display: block;
|
||
text-align: center;
|
||
font-size: 1em;
|
||
color: #cecece;
|
||
padding: 3px;
|
||
position: relative;
|
||
cursor: pointer
|
||
}
|
||
|
||
.news-box .news-title {
|
||
position: absolute;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
color: #fff;
|
||
padding: 2px;
|
||
margin: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden
|
||
}
|
||
|
||
.upload-multiple-close {
|
||
position: absolute;
|
||
font-weight: 400;
|
||
top: 0;
|
||
right: 0;
|
||
text-align: center;
|
||
color: #fff;
|
||
background: #999;
|
||
border-radius: 50%;
|
||
height: 20px;
|
||
width: 20px;
|
||
line-height: 20px;
|
||
border: 1px solid #fff;
|
||
}
|
||
</style>
|
||
{/block}
|
||
|
||
{block name='content'}
|
||
<div class="row">
|
||
<div class="col-xs-3" style='padding-right:0'>
|
||
<div class="portlet light bordered pinned">
|
||
<div class="portlet-title">
|
||
<div class="caption">
|
||
<h5 class='text-center' style='margin-top:0;display:block'>图文列表</h5>
|
||
</div>
|
||
</div>
|
||
<div class="portlet-body form">
|
||
<div class="news-box">
|
||
{if empty($vo['articles']) eq FALSE}
|
||
{foreach $vo.articles as $key=>$value}
|
||
<div class="news-item transition-min" data-id="{$value.id}">
|
||
<a href="javascript:void(0)" class="upload-multiple-close hide"><i class="fa fa-close"></i></a>
|
||
<div class="news-image">
|
||
<img alt="image" class="img-responsive"
|
||
src="{$value.local_url}?imageView2/1/w/338/h/190/interlace/1"/>
|
||
</div>
|
||
<span class="news-title">{$value.title}</span>
|
||
</div>
|
||
<hr/>
|
||
{/foreach}
|
||
{else}
|
||
<div class="news-item transition-min">
|
||
<div class="news-image">
|
||
<img alt="image" class="img-responsive"
|
||
src="__ROOT__/static/plugs/uploader/theme/image.png"/>
|
||
</div>
|
||
<span class="news-title" style='display:none'>标题</span>
|
||
</div>
|
||
<hr/>
|
||
{/if}
|
||
<div class='article-add' data-text-tip="添加图文">
|
||
<i class="fa fa-plus"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-xs-9" style='padding-right:0'>
|
||
<div class="portlet light bordered">
|
||
<div class="portlet-title">
|
||
<div class="caption">
|
||
<h5 class='text-center' style='margin-top:0;display:block'>图文内容编辑</h5>
|
||
</div>
|
||
</div>
|
||
<div class="portlet-body form">
|
||
<form class="form-horizontal" role="form" name="news" onsubmit="return false;">
|
||
<div class="form-body">
|
||
|
||
<div class="form-group">
|
||
<div class="col-md-12">
|
||
<div class="input-group">
|
||
<span class="input-group-addon">标题</span>
|
||
<input maxlength="64" required="" title="标题不能为空哦！" type="text" name='title'
|
||
class="form-control" placeholder="请在这里输入标题">
|
||
<input type="hidden" name="id">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="col-md-12">
|
||
<div class="input-group">
|
||
<span class="input-group-addon">作者</span>
|
||
<input maxlength="8" required="" title="作者不能为空哦" type="text" name='author'
|
||
class="form-control" placeholder="请输入作者">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="col-md-12">
|
||
<div class="form-control" style="height:auto">
|
||
<label>图文封面大图片</label>
|
||
<div class="row">
|
||
<div class="col-xs-3">
|
||
<div style="width: 112px;height:112px;overflow:hidden">
|
||
<input onchange="$(this).next().attr('src', this.value), $('.news-item.active').find('img').attr('src', this.value)"
|
||
value="__ROOT__/static/plugs/uploader/theme/image.png"
|
||
type="hidden" name="local_url">
|
||
<img data-tips-image
|
||
style="min-height:112px;min-width:112px;width:100%;height:100%"
|
||
src="__ROOT__/static/plugs/uploader/theme/image.png">
|
||
</div>
|
||
</div>
|
||
<div class="col-xs-8">
|
||
<br>
|
||
<a data-file="" data-one="true" data-type="image" data-field="local_url"
|
||
class="btn btn-transparent green btn-outline btn-circle btn-sm">上传图片</a>
|
||
<a data-iframe="{'@wechat/news/media'|app_url}&field=local_url"
|
||
class="btn btn-transparent green btn-outline btn-circle btn-sm">从图库中选择图片</a>
|
||
<br>
|
||
<br>
|
||
<label class="mt-checkbox mt-checkbox-outline"
|
||
style="margin-left:0px;padding-left:24px">
|
||
<input data-auto-none type="checkbox" value="1" name="show_cover_pic">
|
||
在正文显示此图片
|
||
<span></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<p class="help-block" style="margin-top:10px">封面大图片建议尺寸：900像素 * 500像素</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="col-md-12">
|
||
<textarea name='content'></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="col-md-12">
|
||
<label>摘要选填，如果不填写会默认抓取正文前54个字</label>
|
||
<textarea resize="false" name="digest" class="form-control"
|
||
style="height:80px"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="col-md-12">
|
||
<label>原文链接选填，填写之后在图文左下方会出现此链接</label>
|
||
<input maxlength="200" type="text" name='content_source_url' class="form-control"
|
||
placeholder="请输入原文链接">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-actions">
|
||
<div class="row">
|
||
<div class="col-md-offset-3 col-md-9">
|
||
<button data-submit type="button" class="btn green">保存图文</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/block}
|
||
|
||
|
||
{block name='script'}
|
||
<script>
|
||
$(function () {
|
||
|
||
var editDdata = $.parseJSON('{$vo.articles|default=[]|json_encode}');
|
||
for (var i in editDdata) {
|
||
$('.news-item').eq(i).data('item', editDdata[i]);
|
||
}
|
||
|
||
require(['ueditor'], function () {
|
||
|
||
/*! 实例富文本编辑器 */
|
||
var editor, $preItem;
|
||
|
||
/*! 默认编辑第一篇图文 */
|
||
editor = window.createEditor('[name="content"]', 'basic');
|
||
editor.ready(function () {
|
||
var $form = $('form[name="news"]');
|
||
// 表单验证
|
||
function verify(callback) {
|
||
$form.validate(function (ret) {
|
||
ret.content = editor.getContent();
|
||
if (ret.content.length < 1) {
|
||
return $.msg.tips('请输入图文内容！');
|
||
}
|
||
$('.news-item.active').data('item', ret);
|
||
callback.call(this.ret);
|
||
}).submit();
|
||
}
|
||
|
||
// 数据提交
|
||
$form.find('button[data-submit]').on('click', function () {
|
||
verify(function () {
|
||
var data = [];
|
||
$('.news-item').map(function () {
|
||
data.push($(this).data('item'));
|
||
});
|
||
$.form.load('__SELF__', {data: data}, "POST");
|
||
});
|
||
});
|
||
// 输入标题显示
|
||
$form.find('[name="title"]').on('keyup', function () {
|
||
if ($preItem) {
|
||
if (this.value.length > 0) {
|
||
$preItem.find('.news-title').html(this.value).show();
|
||
} else {
|
||
$preItem.find('.news-title').html(this.value).hide();
|
||
}
|
||
}
|
||
});
|
||
/*! 显示编辑器 */
|
||
function showEditor() {
|
||
var $item = $('.news-item.active');
|
||
// 处理上一个编辑器
|
||
$preItem = $item;
|
||
// 读取对象数据
|
||
this.get = function () {
|
||
var data = $item.data('item') || {};
|
||
data.title = data.title || '';
|
||
data.local_url = data.local_url || '__ROOT__/static/plugs/uploader/theme/image.png';
|
||
data.content = data.content || '';
|
||
data.author = data.author || '小编';
|
||
data.show_cover_pic = data.show_cover_pic || 0;
|
||
return data;
|
||
};
|
||
$form.get(0).reset();
|
||
var data = this.get();
|
||
for (var i in data) {
|
||
if (i !== 'content' && i !== 'show_cover_pic') {
|
||
$form.find('[name="' + i + '"]').val(data[i]).trigger('change');
|
||
}
|
||
}
|
||
if (parseInt(data.show_cover_pic) === 1) {
|
||
$form.find('[name="show_cover_pic"]').get(0).checked = true;
|
||
}
|
||
editor.setContent(data.content);
|
||
}
|
||
|
||
/*! jQuery事件绑定 */
|
||
$('body').on('click', '.news-box .article-add', function () {
|
||
/*! 添加新图文 */
|
||
var $html = $('<div class="news-item transition-min"><a href="javascript:void(0)" class="upload-multiple-close hide"><i class="fa fa-close"></i></a><div class="news-image"><img alt="image" class="img-responsive" src="__ROOT__/static/plugs/uploader/theme/image.png"/></div><span class="news-title" style="display:none"></span></div><hr />');
|
||
$html.insertBefore(this).trigger('click');
|
||
if ($('.news-item').size() >= 7) {
|
||
return $(this).hide();
|
||
}
|
||
}).off('click', '.news-item').on('click', '.news-item', function () {
|
||
var self = this;
|
||
|
||
function init() {
|
||
$(self).siblings().removeClass('active');
|
||
$(self).addClass('active');
|
||
showEditor();
|
||
}
|
||
|
||
$('.news-item.active').size() > 0 ? verify(init) : init.call(this);
|
||
}).off('mouseleave').on('mouseleave', '.news-item', function () {
|
||
/*! 隐藏删除按钮 */
|
||
$(this).find('.upload-multiple-close').addClass('hide');
|
||
}).off('mouseenter', '.news-item').on('mouseenter', '.news-item', function () {
|
||
/*! 显示删除按钮 */
|
||
$('.upload-multiple-close').addClass('hide');
|
||
$(this).find('.upload-multiple-close').removeClass('hide');
|
||
}).off('click', '.upload-multiple-close').on('click', '.upload-multiple-close', function () {
|
||
/*! 删除操作图文 */
|
||
$(this).parents('.news-item').remove();
|
||
if ($('.news-item').size() < 7) {
|
||
$('.news-box .article-add').show();
|
||
}
|
||
});
|
||
/*! 默认显示第一个 */
|
||
$('.news-box .news-item:first').trigger('click');
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
{/block} |