表格列表展示优化

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

View File

@ -48,6 +48,8 @@
var __price_symbol__ = '{{$price_symbol}}'; var __price_symbol__ = '{{$price_symbol}}';
</script> </script>
<body> <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)}} {{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}} {{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', 2 => 'app\\plugins\\distribution\\Hook',
3 => 'app\\plugins\\membershiplevelvip\\Hook', 3 => 'app\\plugins\\membershiplevelvip\\Hook',
), ),
'plugins_service_buy_order_insert_begin' =>
array (
0 => 'app\\plugins\\excellentbuyreturntocash\\Hook',
),
'plugins_service_buy_order_insert_end' => 'plugins_service_buy_order_insert_end' =>
array ( array (
0 => 'app\\plugins\\excellentbuyreturntocash\\Hook', 0 => 'app\\plugins\\excellentbuyreturntocash\\Hook',
1 => 'app\\plugins\\distribution\\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' => 'plugins_service_order_status_change_history_success_handle' =>
array ( array (
0 => 'app\\plugins\\excellentbuyreturntocash\\Hook', 0 => 'app\\plugins\\excellentbuyreturntocash\\Hook',
1 => 'app\\plugins\\coupon\\Hook', 1 => 'app\\plugins\\coupon\\Hook',
2 => 'app\\plugins\\distribution\\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' => 'plugins_css' =>
array ( array (
0 => 'app\\plugins\\coupon\\Hook', 0 => 'app\\plugins\\coupon\\Hook',

View File

@ -400,4 +400,68 @@ button.colorpicker-submit:active {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
line-height: 18px; line-height: 18px;
height: 35px; 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() $(function()
{ {
// 浏览器窗口实时事件
$(window).resize(function()
{
// 表格初始化
TableContainerInit();
});
// 表格初始化
TableContainerInit();
// 全屏操作 // 全屏操作
$('.fullscreen-event').on('click', function() $('.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);
}
}); });