表格列表展示优化

feat/task1-c-wallet
devil 2020-02-29 18:06:30 +08:00
parent 4da6d7bb35
commit 10b7ca28be
6 changed files with 301 additions and 148 deletions

View File

@ -134,169 +134,177 @@
<!-- top operation end -->
<!-- list start -->
<table class="am-table am-table-striped am-table-hover am-text-middle am-margin-top-sm goods-list">
<thead>
<tr>
<th>编号</th>
<th>标题名称</th>
<th class="am-hide-sm-only">销售价格(元)</th>
<th>上下架</th>
<th class="am-hide-sm-only">首页推荐</th>
<th class="am-hide-sm-only">库存数量</th>
<th class="am-hide-sm-only">商品型号</th>
<th class="am-hide-sm-only">品牌</th>
<th>更多</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{{if !empty($data_list)}}
{{foreach $data_list as $v}}
<tr id="data-list-{{$v.id}}" {{if $v['is_shelves'] eq 0}}class="am-active"{{/if}}>
<td>{{$v.id}}</td>
<td>
<a href="{{$v.goods_url}}" target="_blank" title="{{$v.title}}">
<img src="{{$v['images']}}" class="am-img-thumbnail am-radius goods-images am-hide-sm-only" />
</a>
<a href="{{$v.goods_url}}" target="_blank" title="{{$v.title}}" {{if !empty($v['title_color'])}} style="color:{{$v.title_color}};" {{/if}} >{{$v.title}}</a>
{{if !empty($v['simple_desc'])}}
<p class="cr-red am-hide-md-down">{{$v.simple_desc}}</p>
{{/if}}
</td>
<td class="am-hide-sm-only">
{{$v.price}}
{{if !empty($v['original_price']) and $v['original_price'] gt 0}}
<br /><span class="am-badge am-radius">原价 {{$v.original_price}}</span>
{{/if}}
</td>
<td>
<a href="javascript:;" class="am-icon-btn am-icon-check submit-state {{if $v['is_shelves'] eq 1}}am-success{{else /}}am-default{{/if}}" data-url="{{:MyUrl('admin/goods/statusshelves')}}" data-id="{{$v.id}}" data-state="{{$v['is_shelves']}}" data-is-update-status="1"></a>
</td>
<td class="am-hide-sm-only">
<a href="javascript:;" class="am-icon-btn am-icon-check submit-state {{if $v['is_home_recommended'] eq 1}}am-success{{else /}}am-default{{/if}}" data-url="{{:MyUrl('admin/goods/statushomerecommended')}}" data-id="{{$v.id}}" data-state="{{$v['is_home_recommended']}}" data-is-update-status="0"></a>
</td>
<td class="am-hide-sm-only">{{$v.inventory}} {{$v.inventory_unit}}</td>
<td class="am-hide-sm-only">{{$v.model}}</td>
<td class="am-hide-sm-only">{{$v.brand_name}}</td>
<td>
<span class="am-icon-caret-down c-p" data-am-modal="{target: '#my-popup{{$v.id}}'}"> 查看更多</span>
<div class="am-popup am-radius" id="my-popup{{$v.id}}">
<div class="am-popup-inner">
<div class="am-popup-hd">
<h4 class="am-popup-title">详情内容</h4>
<span data-am-modal-close
class="am-close">&times;</span>
</div>
<div class="am-popup-bd">
<dl class="dl-content">
<dt>标题名称</dt>
<dd>{{$v.title}}</dd>
<div class="am-scrollable-horizontal am-table-scrollable-horizontal am-margin-top-sm">
<table class="am-table am-table-striped am-table-hover am-text-middle am-table-bordered am-table-centered am-text-nowrap am-table-td-fixed-last goods-list">
<thead>
<tr>
<th>编号</th>
<th>标题名称</th>
<th>销售价格(元)</th>
<th>上下架</th>
<th>首页推荐</th>
<th>库存数量</th>
<th>商品型号</th>
<th>品牌</th>
<th>更多</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{{if !empty($data_list)}}
{{foreach $data_list as $v}}
<tr id="data-list-{{$v.id}}" {{if $v['is_shelves'] eq 0}}class="am-active"{{/if}}>
<td>{{$v.id}}</td>
<td>
<a href="{{$v.goods_url}}" target="_blank" title="{{$v.title}}">
<img src="{{$v['images']}}" class="am-img-thumbnail am-radius goods-images" />
</a>
<a href="{{$v.goods_url}}" target="_blank" title="{{$v.title}}" {{if !empty($v['title_color'])}} style="color:{{$v.title_color}};" {{/if}} >{{$v.title}}</a>
{{if !empty($v['simple_desc'])}}
<p class="cr-red am-hide-md-down">{{$v.simple_desc}}</p>
{{/if}}
</td>
<td>
{{$v.price}}
{{if !empty($v['original_price']) and $v['original_price'] gt 0}}
<br /><span class="am-badge am-radius">原价 {{$v.original_price}}</span>
{{/if}}
</td>
<td>
<a href="javascript:;" class="am-icon-btn am-icon-check submit-state {{if $v['is_shelves'] eq 1}}am-success{{else /}}am-default{{/if}}" data-url="{{:MyUrl('admin/goods/statusshelves')}}" data-id="{{$v.id}}" data-state="{{$v['is_shelves']}}" data-is-update-status="1"></a>
</td>
<td>
<a href="javascript:;" class="am-icon-btn am-icon-check submit-state {{if $v['is_home_recommended'] eq 1}}am-success{{else /}}am-default{{/if}}" data-url="{{:MyUrl('admin/goods/statushomerecommended')}}" data-id="{{$v.id}}" data-state="{{$v['is_home_recommended']}}" data-is-update-status="0"></a>
</td>
<td>{{$v.inventory}} {{$v.inventory_unit}}</td>
<td>{{$v.model}}</td>
<td>{{$v.brand_name}}</td>
<td>
<span class="am-icon-caret-down c-p" data-am-modal="{target: '#my-popup{{$v.id}}'}"> 查看更多</span>
<div class="am-popup am-radius" id="my-popup{{$v.id}}">
<div class="am-popup-inner">
<div class="am-popup-hd">
<h4 class="am-popup-title">详情内容</h4>
<span data-am-modal-close
class="am-close">&times;</span>
</div>
<div class="am-popup-bd">
<dl class="dl-content">
<dt>标题名称</dt>
<dd>{{$v.title}}</dd>
<dt>商品简述</dt>
<dd>{{$v.simple_desc}}</dd>
<dt>商品简述</dt>
<dd>{{$v.simple_desc}}</dd>
<dt>销售价格(元)</dt>
<dd>
{{$v.price}}
{{if !empty($v['original_price']) and $v['original_price'] gt 0}}
<br /><span class="am-badge am-radius">原价 {{$v.original_price}}</span>
{{/if}}
</dd>
<dt>销售价格(元)</dt>
<dd>
{{$v.price}}
{{if !empty($v['original_price']) and $v['original_price'] gt 0}}
<br /><span class="am-badge am-radius">原价 {{$v.original_price}}</span>
{{/if}}
</dd>
<dt>上下架</dt>
<dd>{{:lang('common_is_shelves_list')[$v['is_shelves']]['name']}}</dd>
<dt>上下架</dt>
<dd>{{:lang('common_is_shelves_list')[$v['is_shelves']]['name']}}</dd>
<dt>库存数量</dt>
<dd>{{$v.inventory}} {{$v.inventory_unit}}</dd>
<dt>库存数量</dt>
<dd>{{$v.inventory}} {{$v.inventory_unit}}</dd>
<dt>最低起购数量</dt>
<dd>{{$v.buy_min_number}} {{$v.inventory_unit}}</dd>
<dt>最低起购数量</dt>
<dd>{{$v.buy_min_number}} {{$v.inventory_unit}}</dd>
<dt>单次最大购买数量</dt>
<dd>{{if $v['buy_max_number'] eq 0}}<span class="cr-ddd">不限</span>{{else /}}{{$v.buy_max_number}} {{$v.inventory_unit}}{{/if}}</dd>
<dt>单次最大购买数量</dt>
<dd>{{if $v['buy_max_number'] eq 0}}<span class="cr-ddd">不限</span>{{else /}}{{$v.buy_max_number}} {{$v.inventory_unit}}{{/if}}</dd>
<dt>商品型号</dt>
<dd>{{$v.model}}</dd>
<dt>商品型号</dt>
<dd>{{$v.model}}</dd>
<dt>品牌</dt>
<dd>{{$v.brand_name}}</dd>
<dt>品牌</dt>
<dd>{{$v.brand_name}}</dd>
<dt>生产地</dt>
<dd>{{$v.place_origin_name}}</dd>
<dt>生产地</dt>
<dd>{{$v.place_origin_name}}</dd>
<dt>商品分类</dt>
<dd>{{$v.category_text}}</dd>
<dt>商品分类</dt>
<dd>{{$v.category_text}}</dd>
<dt>购买赠送积分</dt>
<dd>{{$v.give_integral}}</dd>
<dt>购买赠送积分</dt>
<dd>{{$v.give_integral}}</dd>
<dt>扣减库存</dt>
<dd>{{:lang('common_is_text_list')[$v['is_deduction_inventory']]['name']}}</dd>
<dt>扣减库存</dt>
<dd>{{:lang('common_is_text_list')[$v['is_deduction_inventory']]['name']}}</dd>
<dt>访问次数</dt>
<dd>{{$v.access_count}}</dd>
<dt>访问次数</dt>
<dd>{{$v.access_count}}</dd>
<dt>电脑端详情</dt>
<dd>
<div class="am-scrollable-vertical web-content">{{$v.content_web|raw}}</div>
</dd>
<dt>电脑端详情</dt>
<dd>
<div class="am-scrollable-vertical web-content">{{$v.content_web|raw}}</div>
</dd>
<dt>虚拟商品展示数据</dt>
<dd>
<div class="am-scrollable-vertical fictitious-goods-value">{{$v.fictitious_goods_value|raw}}</div>
</dd>
<dt>虚拟商品展示数据</dt>
<dd>
<div class="am-scrollable-vertical fictitious-goods-value">{{$v.fictitious_goods_value|raw}}</div>
</dd>
<dt>SEO标题</dt>
<dd>{{$v.seo_title}}</dd>
<dt>SEO标题</dt>
<dd>{{$v.seo_title}}</dd>
<dt>SEO关键字</dt>
<dd>{{$v.seo_keywords}}</dd>
<dt>SEO关键字</dt>
<dd>{{$v.seo_keywords}}</dd>
<dt>SEO描述</dt>
<dd>{{$v.seo_desc}}</dd>
<dt>SEO描述</dt>
<dd>{{$v.seo_desc}}</dd>
<dt>创建时间</dt>
<dd>{{$v.add_time}}</dd>
<dt>创建时间</dt>
<dd>{{$v.add_time}}</dd>
<dt>更新时间</dt>
<dd>{{$v.upd_time}}</dd>
</dl>
</div>
</div>
</div>
</td>
<td class="view-operation">
<a href="{{:MyUrl('admin/goods/saveinfo', array_merge($params, ['id'=>$v['id']]))}}">
<button class="am-btn am-btn-secondary am-btn-xs am-radius am-icon-edit"> 编辑</button>
</a>
<button class="am-btn am-btn-danger am-btn-xs am-radius am-icon-trash-o submit-delete" data-url="{{:MyUrl('admin/goods/delete')}}" data-id="{{$v.id}}"> 删除</button>
<dt>更新时间</dt>
<dd>{{$v.upd_time}}</dd>
</dl>
</div>
</div>
</div>
</td>
<td class="view-operation">
<a href="{{:MyUrl('admin/goods/saveinfo', array_merge($params, ['id'=>$v['id']]))}}">
<button class="am-btn am-btn-secondary am-btn-xs am-radius am-btn-block">
<i class="am-icon-edit"></i>
<span>编辑</span>
</button>
</a>
<button class="am-btn am-btn-danger am-btn-xs am-radius am-margin-top-xs am-btn-block submit-delete" data-url="{{:MyUrl('admin/goods/delete')}}" data-id="{{$v.id}}">
<i class="am-icon-trash-o"></i>
<span>删除</span>
</button>
<!-- 商品列表操作钩子 -->
{{if isset($shopxo_is_develop) and $shopxo_is_develop eq true and (!isset($is_footer) or $is_footer eq 1)}}
<div class="plugins-tag">
<span>plugins_view_admin_goods_list_operation</span>
</div>
{{/if}}
{{php}}
$hook_name = 'plugins_view_admin_goods_list_operation';
$hook_data = Hook::listen($hook_name, ['hook_name'=>$hook_name, 'is_backend'=>true, 'id'=>$v['id'], 'data'=>$v]);
if(!empty($hook_data) && is_array($hook_data))
{
foreach($hook_data as $hook)
<!-- 商品列表操作钩子 -->
{{if isset($shopxo_is_develop) and $shopxo_is_develop eq true and (!isset($is_footer) or $is_footer eq 1)}}
<div class="plugins-tag">
<span>plugins_view_admin_goods_list_operation</span>
</div>
{{/if}}
{{php}}
$hook_name = 'plugins_view_admin_goods_list_operation';
$hook_data = Hook::listen($hook_name, ['hook_name'=>$hook_name, 'is_backend'=>true, 'id'=>$v['id'], 'data'=>$v]);
if(!empty($hook_data) && is_array($hook_data))
{
if(is_string($hook) || is_int($hook))
foreach($hook_data as $hook)
{
echo htmlspecialchars_decode($hook);
if(is_string($hook) || is_int($hook))
{
echo htmlspecialchars_decode($hook);
}
}
}
}
{{/php}}
</td>
</tr>
{{/foreach}}
{{/if}}
</tbody>
</table>
{{/php}}
</td>
</tr>
{{/foreach}}
{{/if}}
</tbody>
</table>
</div>
{{if empty($data_list)}}
<div class="table-no"><i class="am-icon-warning"></i> 没有相关数据</div>
{{/if}}

View File

@ -48,6 +48,8 @@
var __price_symbol__ = '{{$price_symbol}}';
</script>
<body>
{{include file="public/page_loading" /}}
<!-- 公共顶部钩子 -->
{{if !empty($plugins_admin_view_common_top_data) and is_array($plugins_admin_view_common_top_data) and (!isset($is_header) or $is_header eq 1)}}
{{foreach $plugins_admin_view_common_top_data as $hook}}

View File

@ -0,0 +1,3 @@
<div class="am-modal am-page-loading">
<span class="am-icon-spinner am-icon-pulse am-icon-lg"></span>
</div>

View File

@ -46,26 +46,26 @@ return array (
2 => 'app\\plugins\\distribution\\Hook',
3 => 'app\\plugins\\membershiplevelvip\\Hook',
),
'plugins_service_buy_order_insert_begin' =>
array (
0 => 'app\\plugins\\excellentbuyreturntocash\\Hook',
),
'plugins_service_buy_order_insert_end' =>
array (
0 => 'app\\plugins\\excellentbuyreturntocash\\Hook',
1 => 'app\\plugins\\distribution\\Hook',
),
'plugins_service_order_aftersale_audit_handle_end' =>
array (
0 => 'app\\plugins\\excellentbuyreturntocash\\Hook',
1 => 'app\\plugins\\distribution\\Hook',
),
'plugins_service_order_status_change_history_success_handle' =>
array (
0 => 'app\\plugins\\excellentbuyreturntocash\\Hook',
1 => 'app\\plugins\\coupon\\Hook',
2 => 'app\\plugins\\distribution\\Hook',
),
'plugins_service_buy_order_insert_begin' =>
array (
0 => 'app\\plugins\\excellentbuyreturntocash\\Hook',
),
'plugins_service_order_aftersale_audit_handle_end' =>
array (
0 => 'app\\plugins\\excellentbuyreturntocash\\Hook',
1 => 'app\\plugins\\distribution\\Hook',
),
'plugins_css' =>
array (
0 => 'app\\plugins\\coupon\\Hook',

View File

@ -400,4 +400,68 @@ button.colorpicker-submit:active {
-webkit-box-orient: vertical;
line-height: 18px;
height: 35px;
}
}
/**
* view
*/
.am-page-loading {
opacity: 1;
background: #f5f5f5;
display: block;
}
/**
*
*/
.am-table-scrollable-horizontal {
border: 1px solid #ddd;
}
.am-table-scrollable-horizontal .am-table {
border-collapse: collapse;
border: 0;
margin: 0;
}
.am-table-scrollable-horizontal .am-table tr th:first-child,
.am-table-scrollable-horizontal .am-table tr td:first-child {
border-left: 0;
}
.am-table-scrollable-horizontal .am-table tr th {
background: #e0e0e0;
}
.am-table-scrollable-horizontal .am-table-td-fixed-first th:nth-child(2),
.am-table-scrollable-horizontal .am-table-td-fixed-first td:nth-child(2) {
padding-left: 110px;
}
.am-table-scrollable-horizontal .am-table-td-fixed-last th:nth-last-child(2),
.am-table-scrollable-horizontal .am-table-td-fixed-last td:nth-last-child(2) {
padding-right: 110px;
}
.am-table-scrollable-horizontal .am-table-td-fixed-first th:first-child,
.am-table-scrollable-horizontal .am-table-td-fixed-first td:first-child,
.am-table-scrollable-horizontal .am-table-td-fixed-last th:last-child,
.am-table-scrollable-horizontal .am-table-td-fixed-last td:last-child {
position: absolute;
width: 100px;
height: auto;
text-align: center;
}
.am-table-scrollable-horizontal .am-table-td-fixed-first td:first-child,
.am-table-scrollable-horizontal .am-table-td-fixed-last td:last-child {
background: #fff;
}
.am-table-scrollable-horizontal .am-table-td-fixed-first th:first-child,
.am-table-scrollable-horizontal .am-table-td-fixed-first td:first-child {
-webkit-box-shadow: 5px 0px 10px rgba(136, 136, 136, 0.3);
-moz-box-shadow: 5px 0px 10px rgba(136, 136, 136, 0.3);
box-shadow: 5px 0px 10px rgba(136, 136, 136, 0.3);
left: 0;
}
.am-table-scrollable-horizontal .am-table-td-fixed-last th:last-child,
.am-table-scrollable-horizontal .am-table-td-fixed-last td:last-child {
-webkit-box-shadow: -5px 0px 10px rgba(136, 136, 136, 0.3);
-moz-box-shadow: -5px 0px 10px rgba(136, 136, 136, 0.3);
box-shadow: -5px 0px 10px rgba(136, 136, 136, 0.3);
right: 0;
}

View File

@ -1548,10 +1548,76 @@ function MapInit(lng, lat, level, point, is_dragend)
}
}
/**
* 表格容器处理
* @author Devil
* @blog http://gong.gg/
* @version 1.0.0
* @date 2020-02-29
* @desc description
*/
function TableContainerInit()
{
$('.am-table-scrollable-horizontal .am-table.am-table-td-fixed-first thead tr, .am-table-scrollable-horizontal .am-table.am-table-td-fixed-last thead tr').each(function(k, v)
{
// 第一列
if($(this).parents('.am-table').hasClass('am-table-td-fixed-first'))
{
$(this).find('th:first').css('left', $(this).parents('.am-table').offset().left);
}
// 最后一列
if($(this).parents('.am-table').hasClass('am-table-td-fixed-last'))
{
var $obj = $(this).parents('.am-table');
var width = $(document.body).width();
var left = $obj.offset().left;
var right = (width > $obj.width()) ? width-$obj.width()-left : width-$obj.parent().width()-left;
$(this).find('th:last').css('right', right);
}
});
$('.am-table-scrollable-horizontal .am-table.am-table-td-fixed-first tbody tr, .am-table-scrollable-horizontal .am-table.am-table-td-fixed-last tbody tr').each(function(k, v)
{
// 容器
var height = $(this).height();
if(height > 0)
{
$(this).find('td').css('height', height+'px');
}
// 第一列
if($(this).parents('.am-table').hasClass('am-table-td-fixed-first'))
{
$(this).find('td:first').css('left', $(this).parents('.am-table').offset().left);
}
// 最后一列
if($(this).parents('.am-table').hasClass('am-table-td-fixed-last'))
{
var $obj = $(this).parents('.am-table');
var width = $(document.body).width();
var left = $obj.offset().left;
var right = (width > $obj.width()) ? width-$obj.width()-left : width-$obj.parent().width()-left;
$(this).find('td:last').css('right', right);
}
});
}
// 公共数据操作
$(function()
{
// 浏览器窗口实时事件
$(window).resize(function()
{
// 表格初始化
TableContainerInit();
});
// 表格初始化
TableContainerInit();
// 全屏操作
$('.fullscreen-event').on('click', function()
{
@ -2219,4 +2285,14 @@ $(function()
}
});
/**
* 页面加载 loading
*/
if($('.am-page-loading').length > 0)
{
setTimeout(function() {
$('.am-page-loading').fadeOut(500);
}, 300);
}
});