sileya-ai
/
vr-shopxo-source
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

商品规格新增高级操作

feat/task1-c-wallet
devil_gong 2019-09-24 13:56:08 +08:00
parent bf6792fa24
commit ed916f866b
3 changed files with 149 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
application/admin/view/default/goods/save_info.html
View File

@ -175,7 +175,7 @@
</div>
<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" {{if empty($data['spec_base'])}}style="display: none;"{{/if}}>
<div class="goods-specifications business-form-group" {{if empty($data['spec_base'])}}style="display: none;"{{/if}}>
<table class="am-table am-table-bordered am-table-centered">
<thead>
<tr>
@ -213,35 +213,44 @@
<!-- 规格常规操作 -->
<span class="business-operations-submit specifications-nav-title-add">+添加规格</span>
<span class="business-operations-submit am-margin-left-sm specifications-nav-set-all" data-am-modal="{target: '#spec-popup-all-operation'}">+批量设置</span>
<div class="goods-specifications am-padding-top-sm">
<span class="business-operations-submit am-margin-left-sm specifications-nav-set-all am-icon-cogs" data-am-modal="{target: '#spec-popup-all-operation'}"> 高级批量设置</span>
<div class="goods-specifications business-form-group am-padding-top-sm">
<!-- 所有规格批量操作弹层 -->
<div class="am-popup" id="spec-popup-all-operation">
<div class="am-popup-inner">
<div class="am-popup-hd">
<h4 class="am-popup-title">批量设置</h4>
<h4 class="am-popup-title">高级批量设置</h4>
<span data-am-modal-close class="am-close">&times;</span>
</div>
<div class="am-popup-bd">
<div class="am-form-group">
<label class="block">颜色</label>
<select class="chosen-select am-radius" data-placeholder="全部">
<option value="0">全部</option>
<option value="1">hello</option>
<option value="2">world</option>
</select>
</div>
<div class="am-form-group">
<label class="block">尺码</label>
<select class="chosen-select am-radius" data-placeholder="全部">
<option value="0">全部</option>
<option value="1">hello</option>
<option value="2">world</option>
</select>
</div>
<div class="am-alert am-alert-secondary spec-title-container"></div>
<div class="am-form-group">
<label class="block">销售价格</label>
<input type="text" name="specifications_price[]" placeholder="价格" class="am-radius" pattern="^([0-9]{1}\d{0,6})(\.\d{1,2})?$" required />
<input type="text" placeholder="价格" class="am-radius popup_all_price" pattern="^([0-9]{1}\d{0,6})(\.\d{1,2})?$" data-validation-message="请填写有效的销售金额" />
</div>
<div class="am-form-group">
<label class="block">库存</label>
<input type="number" placeholder="库存" class="am-radius popup_all_number" min="0" max="100000000" pattern="^-?(?:\d+|\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$" data-validation-message="库存数量 0~100000000" />
</div>
<div class="am-form-group">
<label class="block">重量</label>
<input type="number" placeholder="重量" class="am-radius popup_all_weight" maxlength="80" min="0.00" max="100000000.00" step="0.01" data-validation-message="规格重量 0.00~100000000.00" />
</div>
<div class="am-form-group">
<label class="block">编码</label>
<input type="text" placeholder="编码" class="am-radius popup_all_coding" maxlength="80" data-validation-message="规格编码最多80个字符" />
</div>
<div class="am-form-group">
<label class="block">条形码</label>
<input type="text" placeholder="条形码" class="am-radius popup_all_barcode" maxlength="80" data-validation-message="条形码最多80个字符" />
</div>
<div class="am-form-group">
<label class="block">原价</label>
<input type="text" placeholder="原价" class="am-radius popup_all_original_price" pattern="^([0-9]{1}\d{0,6})(\.\d{1,2})?$" data-validation-message="请填写有效的原价" />
</div>
<div class="am-form-group am-form-group-refreshing am-text-center">
<button class="am-btn am-btn-warning am-radius am-btn-sm am-margin-right-lg" type="button" data-am-modal-close>取消</button>
<button class="am-btn am-btn-secondary am-radius am-btn-sm am-margin-left-lg" type="button">确认</button>
</div>
</div>
</div>
@ -392,7 +401,7 @@
<div class="am-alert am-alert-warning am-radius" data-am-alert>
规格名称与规格值保持一致，相同规格名称添加一次即可，重复添加则后面覆盖前面，顺序不影响前端展示效果。
<span class="business-operations-submit specifications-line-images-add">+添加规格图片</span>
<span class="business-operations-submit specifications-line-images-auto-add am-margin-left-sm">+第<input type="text" class="am-inline-block am-text-center am-margin-horizontal-xs am-radius" value="1" />列规格自动生成</span>
<span class="business-operations-submit specifications-line-images-auto-add am-margin-left-sm am-icon-dot-circle-o"> 第<input type="text" class="am-inline-block am-text-center am-margin-horizontal-xs am-radius" value="1" />列规格自动生成</span>
</div>
{{if !empty($specifications['type'])}}
{{foreach $specifications.type as $type}}
@ -457,7 +466,7 @@
<!-- app内容 -->
<div id="goods-nav-app" class="division-block">
<label class="block nav-detail-title">手机端详情</label>
<ul class="content-app-items" data-max-count="10" data-required="1" data-images-name="content_app_images" data-content-name="content_app_text" data-images-text="图片" data-content-text="文本内容" data-delete-text="删除" data-drag-sort-text="拖拽排序">
<ul class="content-app-items business-form-group" data-max-count="10" data-required="1" data-images-name="content_app_images" data-content-name="content_app_text" data-images-text="图片" data-content-text="文本内容" data-delete-text="删除" data-drag-sort-text="拖拽排序">
{{if !empty($data['content_app'])}}
{{foreach $data.content_app as $v}}
<li>

115
public/static/admin/default/js/goods.js
View File

@ -342,6 +342,121 @@ $(function()
$spec_modal.modal('close');
});
// 规格高级批量操作-弹层
var $spec_popup_all_operation = $('#spec-popup-all-operation');
$('.specifications-nav-set-all').on('click', function()
{
// 获取规格标题
var title = [];
$('.specifications-table th.table-title').each(function(k, v)
{
var value = $(this).find('input').val() || null;
if(value != null && title.indexOf(value) == -1)
{
title.push(value);
}
});
if(title.length < $('.specifications-table th.table-title').length)
{
Prompt('请填写规格名称');
return false;
}
// 获取规格值
var data = [];
for(var i in title)
{
data[i] = [];
$('.specifications-table tbody tr').each(function(k, v)
{
var value = $(this).find('td').eq(i).find('input').val() || null;
if(value != null && data[i].indexOf(value) == -1)
{
data[i].push(value);
}
});
}
// 拼接html
var html = '';
for(var i in data)
{
html += '<div class="am-form-group">';
html += '<label class="block">'+title[i]+'</label>';
html += '<select class="chosen-select am-radius" data-placeholder="全部">';
html += '<option value="">全部</option>';
for(var k in data[i])
{
html += '<option value="'+data[i][k]+'">'+data[i][k]+'</option>';
}
html += '</select>';
html += '</div>';
}
var $spec_container = $spec_popup_all_operation.find('.am-popup-bd .spec-title-container');
$spec_container.html(html);
if(data.length > 0)
{
$spec_container.show();
} else {
$spec_container.hide();
}
// select组件初始化
$spec_popup_all_operation.find('.chosen-select').chosen({
inherit_select_classes: true,
enable_split_word_search: true,
search_contains: true,
no_results_text: '没有匹配到结果'
});
// 所有input赋空
$spec_popup_all_operation.find('input').val('');
});
// 规格高级批量操作-赋值
$spec_popup_all_operation.find('button.am-btn-secondary').on('click', function()
{
// 获取规格值条件
var data = [];
$spec_popup_all_operation.find('.am-popup-bd .spec-title-container select.chosen-select').each(function(k, v)
{
data.push($(this).val() || null);
});
// 获取基础值
var price = $spec_popup_all_operation.find('.am-popup-bd input.popup_all_price').val() || '';
var number = $spec_popup_all_operation.find('.am-popup-bd input.popup_all_number').val() || '';
var weight = $spec_popup_all_operation.find('.am-popup-bd input.popup_all_weight').val() || '';
var coding = $spec_popup_all_operation.find('.am-popup-bd input.popup_all_coding').val() || '';
var barcode = $spec_popup_all_operation.find('.am-popup-bd input.popup_all_barcode').val() || '';
var original_price = $spec_popup_all_operation.find('.am-popup-bd input.popup_all_original_price').val() || '';
// 批量设置
var data_length = data.length;
$('.specifications-table tbody tr').each(function(k, v)
{
var count = 0;
for(var i in data)
{
if(data[i] == null || data[i] == ($(this).find('td').eq(i).find('input').val() || null))
{
count++;
}
}
var index = $(this).find('.value-start').index();
if(count >= data_length)
{
$(this).find('td').eq(index).find('input').val(price);
$(this).find('td').eq(index+1).find('input').val(number);
$(this).find('td').eq(index+2).find('input').val(weight);
$(this).find('td').eq(index+3).find('input').val(coding);
$(this).find('td').eq(index+4).find('input').val(barcode);
$(this).find('td').eq(index+5).find('input').val(original_price);
}
});
$spec_popup_all_operation.modal('close');
});
// 手机详情添加
$(document).on('click', '.content-app-items-add-sub', function()

21
public/static/common/css/common.css
View File

@ -79,11 +79,11 @@ iframe { width: 100%; height: 100%; border: 0; }
form.am-form .am-form-group:hover, .plug-file-upload-view:hover {
background: #f6f9fc;
}
form.am-form .am-form-group, .plug-images-list, .goods-specifications, .content-app-items, .plug-file-upload-view, .business-form-block {
form.am-form .am-form-group, .plug-file-upload-view, .business-form-group, .business-form-block {
border-bottom: 1px dashed #ccc;
padding: 10px 20% 10px 5px;
}
.am-popup form.am-form .am-form-group, .business-form-block {
.am-popup .am-form-group, .business-form-block {
padding: 10px 5px !important;
}
form.am-form .am-form-group-refreshing, .plug-file-upload-view, .content-app-items {
@ -140,23 +140,6 @@ iframe { width: 100%; height: 100%; border: 0; }
.am-form-file input.original-images-url-delete { padding-right: 35px !important; }
/**
* 公共多图上传插件
*/
.plug-images-list { padding: 0px; margin: 0px; overflow: hidden; }
.plug-images-list li { list-style-type: none; width: 150px; height: 200px; overflow: hidden; float: left; margin: 0 10px 10px 0; }
.plug-images-list li.plug-images-add-tag { border: 1px solid #eee; }
.plug-images-list li img { width: 100%; height: 150px; }
.plug-images-list .plug-images-add { text-align: center; width: 100%; }
.plug-images-list .plug-images-add .add-icon { color: #ccc; font-size: 80px; font-style: normal; height: 200px; line-height: 200px; cursor: pointer; display: block; }
.plug-images-list .plug-images-add .add-icon:hover { color: #b4b4b4; }
.plug-images-list li.plug-images-add-tag:hover { border: 1px solid #cfcfcf; }
.plug-images-list .plug-images-add input[type="file"] { margin-left: -10000px; position: absolute; }
@media only screen and (max-width: 641px) {
.plug-images-list li { width: calc( 50% - 10px) !important; }
.plug-images-list { width: 100%; }
}
/**
* 公共文件上传插件
*/