规格快捷操作

feat/task1-c-wallet
devil_gong 2019-09-11 21:06:04 +08:00
parent daf255910a
commit 896f57788d
5 changed files with 311 additions and 45 deletions

View File

@ -42,6 +42,9 @@
<li>
<a href="#goods-nav-seo">SEO</a>
</li>
<li class="am-text-center am-padding-xs nav-shrink-submit">
<i class="am-icon-angle-double-right am-icon-sm"></i>
</li>
</ul>
</nav>
@ -165,9 +168,68 @@
<!-- 规格 -->
<div id="goods-nav-operations" class="division-block" data-spec-add-max-number="{{:MyC('common_spec_add_max_number', 3, true)}}">
<label class="block nav-detail-title">商品规格</label>
<div class="spec-quick am-margin-bottom-lg">
<span class="business-operations-submit quick-spec-title-add">+快捷操作</span>
<span class="business-operations-submit am-margin-left-sm am-icon-gg quick-spec-created">生成规格</span>
<div class="goods-specifications">
<table class="am-table am-table-bordered am-table-centered">
<thead>
<tr>
<th class="spec-quick-th-title">规格名</th>
<th class="spec-quick-th-value">规格值</th>
</tr>
</thead>
<tbody>
<tr>
<td class="am-text-middle">
<i class="am-close am-close-spin quick-title-remove" data-index="168">×</i>
<input type="text" name="spec_quick_title_0" placeholder="规格名" />
</td>
<td class="spec-quick-td-value am-cf">
<div class="am-fl am-margin-xs value-item">
<input type="text" class="am-fl" name="spec_quick_value_0" placeholder="规格值" />
<i class="am-close am-close-spin quick-value-remove" data-index="168">×</i>
</div>
<div class="am-fl am-margin-xs value-item">
<input type="text" class="am-fl" name="spec_quick_value_0" placeholder="规格值" />
<i class="am-close am-close-spin quick-value-remove" data-index="168">×</i>
</div>
<div class="am-fl am-margin-xs value-item am-text-left">
<span class="business-operations-submit quick-spec-value-add">+添加规格值</span>
</div>
</td>
</tr>
<tr>
<td class="am-text-middle">
<i class="am-close am-close-spin quick-title-remove" data-index="168">×</i>
<input type="text" name="spec_quick_title_0" placeholder="规格名" />
</td>
<td class="spec-quick-td-value am-cf">
<div class="am-fl am-margin-xs value-item">
<input type="text" class="am-fl" name="spec_quick_value_0" placeholder="规格值" />
<i class="am-close am-close-spin quick-value-remove" data-index="168">×</i>
</div>
<div class="am-fl am-margin-xs value-item">
<input type="text" class="am-fl" name="spec_quick_value_0" placeholder="规格值" />
<i class="am-close am-close-spin quick-value-remove" data-index="168">×</i>
</div>
<div class="am-fl am-margin-xs value-item am-text-left">
<span class="business-operations-submit quick-spec-value-add">+添加规格值</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<span class="business-operations-submit specifications-nav-title-add">+添加规格</span>
<div class="goods-specifications">
<table class="am-table am-table-bordered am-table-centered specifications-table m-t-10 m-b-10">
<table class="am-table am-table-bordered am-table-centered specifications-table am-margin-bottom-sm">
<thead class="title-nav">
<tr>
{{if !empty($specifications['type'])}}

View File

@ -15,7 +15,7 @@
return [
// 开发模式
'is_develop' => false,
'is_develop' => true,
// 默认编码
'default_charset' => 'utf-8',

View File

@ -1,50 +1,134 @@
/**
*
*/
.form-keyword { width: 55% !important; display: initial !important; }
.more-submit input { display: none; }
.param-where, .param-date input { display: initial !important; }
.form-keyword {
width:55% !important;
display:initial !important;
}
.more-submit input {
display:none;
}
.param-where,.param-date input {
display:initial !important;
}
@media only screen and (max-width: 641px) {
.param-where { width: 100% !important; margin-left: 0px !important; }
.param-date input { width: 47% !important; }
.images-list li { width: calc( 50% - 10px) !important; }
.images-list { width: 100%; }
.view-list .am-table tr th:nth-child(1) { width: 150px; }
.param-where {
width:100% !important;
margin-left:0px !important;
}
.param-date input {
width:47% !important;
}
.images-list li {
width:calc( 50% - 10px) !important;
}
.images-list {
width:100%;
}
.view-list .am-table tr th:nth-child(1) {
width:150px;
}
}
@media only screen and (min-width: 641px) {
.param-where { width: 32% !important; float: left; }
.param-date input { width: 45% !important; }
.param-where:nth-child(1) { margin-left: 0px !important; }
.images-list { width: 75%; }
.view-list .am-table tr th:nth-child(1) { width: 300px; }
.param-where {
width:32% !important;
float:left;
}
.param-date input {
width:45% !important;
}
.param-where:nth-child(1) {
margin-left:0px !important;
}
.images-list {
width:75%;
}
.view-list .am-table tr th:nth-child(1) {
width:300px;
}
}
@media only screen and (max-width: 321px) {
.view-operation button { margin: 2px 0px; }
.view-operation button {
margin:2px 0px;
}
}
.goods-list.am-table .goods-images {
width:60px;
height:60px;
float:left;
margin-right:5px;
}
.goods-list.am-table .goods-images { width: 60px; height: 60px; float: left; margin-right: 5px; }
/**
*
*/
.goods-nav { background: #f5f5f5; top: 100px; right: 0; width: 110px; position: fixed; z-index: 1000; border: 1px solid #eee; border-right: 0px; }
.goods-nav ul { margin: 0; padding: 0; }
.goods-nav li { display: inline-block; border-bottom: 1px solid #eee; width: 100%; }
.goods-nav li:last-child { border-bottom: 0px; }
.goods-nav li a { color: #666; padding: 10px 15px; display: inline-block; width: 100%; }
.goods-nav li a:hover, .goods-nav-active { color: #333; background: #eee; }
.goods-nav {
background:#f5f5f5;
top:100px;
right:0;
width:110px;
position:fixed;
z-index:1000;
border:1px solid #eee;
border-right:0px;
}
.goods-nav ul {
margin:0;
padding:0;
}
.goods-nav li {
display:inline-block;
border-bottom:1px solid #eee;
width:100%;
}
.goods-nav li:last-child {
border-bottom:0px;
}
.goods-nav li a {
color:#666;
padding:10px 15px;
display:inline-block;
width:100%;
}
.goods-nav li a:hover,.goods-nav-active {
color:#333;
background:#eee;
}
.goods-nav li.nav-shrink-submit {
background: #eaeaea;
cursor: pointer;
}
.goods-nav-retract {
/*right: -110px;*/
}
.goods-nav-retract .nav-shrink-submit {
position: absolute;
/*left: -50px;*/
/*width: 50px;*/
}
/**
*
*/
.division-block { margin-bottom: 30px; }
.division-block .nav-detail-title { border-bottom: 3px ridge #c7c7c7; padding: 8px 5px 5px 5px; margin-bottom: 10px; background: #f3f3f3; font-weight: bold; }
.division-block {
margin-bottom:30px;
}
.division-block .nav-detail-title {
border-bottom:3px ridge #c7c7c7;
padding:8px 5px 5px 5px;
margin-bottom:10px;
background:#f3f3f3;
font-weight:bold;
}
/**
*
*/
.specifications-table .title-nav th {
.specifications-table .title-nav th,
.spec-quick table thead th {
background-color: #f5f7fa;
position: relative;
border-bottom: 0;
}
.specifications-table .title-nav th input {
width: calc(100% - 25px);
@ -85,14 +169,86 @@
*
* app
*/
i.drag-sort-submit { margin-left: 30px; }
ul { margin: 0px; padding: 0px; overflow: hidden; }
.content-app-items > li { border: 3px dashed #eee; padding: 10px; }
ul li { list-style-type: none; }
i.drag-sort-submit {
margin-left:30px;
}
ul {
margin:0px;
padding:0px;
overflow:hidden;
}
.content-app-items > li {
border:3px dashed #eee;
padding:10px;
}
ul li {
list-style-type:none;
}
/**
* app
*/
.content-app-left, .content-app-right { border-bottom: 0 !important; }
.content-app-items li { padding-bottom: 10px; margin-bottom: 20px; overflow: hidden; }
.content-app-left, .content-app-right { width: 45% !important; display: inline-table; margin-bottom: 5px; padding-right: 5px !important; }
.content-app-left,.content-app-right {
border-bottom:0 !important;
}
.content-app-items li {
padding-bottom:10px;
margin-bottom:20px;
overflow:hidden;
}
.content-app-left,.content-app-right {
width:45% !important;
display:inline-table;
margin-bottom:5px;
padding-right:5px !important;
}
/**
*
*/
.spec-quick table td,
.spec-quick table td.spec-quick-td-value .value-item {
position: relative;
}
.spec-quick table td.am-text-middle {
padding-right: 25px;
}
.spec-quick-td-value .value-item input {
width: calc(100% - 23px) !important;
}
.spec-quick table td.am-text-middle i.quick-title-remove,
.spec-quick table td.spec-quick-td-value i.quick-value-remove {
position: absolute;
top: 0px;
right: 0px;
z-index: 2;
}
.spec-quick table td.spec-quick-td-value i.quick-value-remove {
top: 2px;
}
.spec-quick .goods-specifications {
border-bottom: 0;
padding-bottom: 0;
}
@media only screen and (min-width: 641px) {
.spec-quick-th-title {
width: 150px;
}
.spec-quick-td-value .value-item {
width: calc(30% - 12px) !important;
}
}
@media only screen and (min-width: 1025px) {
.spec-quick-td-value .value-item {
width: calc(20% - 12px) !important;
}
}
@media only screen and (max-width: 641px) {
.spec-quick-th-title {
width: 20%;
}
.spec-quick-td-value .value-item {
width: calc(50% - 12px) !important;
}
}

View File

@ -8,7 +8,29 @@ $(function()
{
$('.goods-nav li a').removeClass('goods-nav-active');
$(this).addClass('goods-nav-active');
})
});
// 商品导航收缩
$('.goods-nav li.nav-shrink-submit').on('click', function()
{
if($(this).find('i').hasClass('am-icon-angle-double-right'))
{
$(this).find('i').removeClass('am-icon-angle-double-right');
$(this).find('i').addClass('am-icon-angle-double-left');
$(this).parents('.goods-nav').addClass('goods-nav-retract');
$('.goods-nav-retract').animate({right:'-110px'}, 500, function()
{
$('.goods-nav-retract li.nav-shrink-submit').animate({width: '50px', left:'-51px'});
});
} else {
$(this).find('i').removeClass('am-icon-angle-double-left');
$(this).find('i').addClass('am-icon-angle-double-right');
$(this).parents('.goods-nav').removeClass('goods-nav-retract');
$('.goods-nav').animate({right:'-0px'});
$('.goods-nav li.nav-shrink-submit').animate({width: '100%', left:'0px'});
}
});
// 规格列添加
$('.specifications-nav-title-add').on('click', function()
@ -197,4 +219,26 @@ $(function()
}
$extends_popup.modal();
});
// 快捷操作
// 规格列添加
$('.quick-spec-title-add').on('click', function()
{
var spec_max = $('#goods-nav-operations').data('spec-add-max-number') || 3;
if($('.spec-quick table tbody tr').length >= spec_max)
{
Prompt('最多添加'+spec_max+'列规格');
return false;
}
Prompt('hello');
});
// 生成规格
$('.quick-spec-created').on('click', function()
{
Prompt('world');
});
});

View File

@ -1,3 +1,13 @@
// 楼层聚合数据高度处理
function floor_resize_handle()
{
$('.floor').each(function(k, v)
{
var height = $(this).find('.goods-list').height();
$(this).find('.aggregation').css('height', ((window.innerWidth || $(window).width()) <= 640) ? 'auto' : height+'px');
});
}
$(function()
{
// 新闻轮播
@ -19,21 +29,15 @@ $(function()
}, 3000);
}
// 楼层聚合数据高度处理
function floor_resize_handle()
{
$('.floor').each(function(k, v)
{
var height = $(this).find('.goods-list').height();
$(this).find('.aggregation').css('height', ((window.innerWidth || $(window).width()) <= 640) ? 'auto' : height+'px');
});
}
floor_resize_handle();
// 浏览器窗口实时事件
$(window).resize(function()
{
floor_resize_handle();
});
});
$(window).load(function()
{
floor_resize_handle();
});