fe / yohobuy-portal-fe2 · Commits

Go to a project

Authored by leo
Commit ae459357cb1cacd7a542942f4932c61979141ea6 1 parent 4b7c8980

Update: 增加推荐商品自动、手动选择项

Inline Side-by-side
Showing 3 changed files with 196 additions and 84 deletions
... ... @@ -222,6 +222,53 @@
</ul>
</div>
</script>
<script type="text-template" id="recommend-product-display-type">
<div class="form-group">
<div class="col-sm-1 title">展示类型: </div>
<div class="col-sm-1">
<input type="radio" name="displayType" value="0" class="recommend-product-radio" id="displayTypeRadio1" data-index="[[index]]">
<label for="displayTypeRadio1" class="title">自动</label>
</div>
<div class="col-sm-2">
<input type="radio" name="displayType" value="1" class="recommend-product-radio" id="displayTypeRadio2" data-index="[[index]]">
<label for="displayTypeRadio2" class="title">手工选品</label>
</div>
<!-- 此处的id要与radio的name一致，用于初始化数据绑定 -->
<input type="hidden" value="[[displayType]]" id="displayType" for="radio" required/>
</div>
</script>
<script type="text-template" id="autoselect-recommend-product">
<div>
<div class="content">
一行展示四件商品，展示
<select class="form-control line-number observe" data-bind="lineNumber">
<option value="-1">行数</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
行
</div>
<div class="content">排序类型:
<select class="form-control sort-type observe" data-bind="sortType">
<option value="-1">排序类型</option>
<option value="1">新品</option>
<option value="2">价格</option>
<option value="3">销量</option>
</select>
</div>
<div class="content">排序方式:
<select class="form-control sort-pattern observe" data-bind="sortPattern">
<option value="-1">排序方式</option>
<option value="1">新品</option>
<option value="2">价格</option>
</select>
</div>
</div>
</script>
<%include 'templates/app-template'%>
<%include 'templates/pc-template'%>
</body>
... ...
... ... @@ -363,6 +363,101 @@ var Bll = {
}
},
/**
* 初始化 推荐商品模块 弹出框
*/
initRecommendProduct: function(selector) {
// 手动选择商品
if(Bll.recommendProductDisplayType === 1) {
$('.editor-dialog').show();
$('.editorTitle').html(common.util.__template2($("#recommend-product-filter").html()));
var tabTree = new common.tabTree("#sortTree");
tabTree.init();
$('.selectedProductsNum').text(Bll.recommendProductList.length);
// 设置dialog边框
$('.editor-dialog').css({padding: "20px 20px 60px", border: "1px solid #ddd", background: "#FFFFFF"});
Bll.moduleGrid = new grid({
hash: false,
el: selector,
parms: function() {
let params = {
shopId: Bll.shopId,
productSKN: common.util.__input("productSKN"),
productName: common.util.__input("productName"),
maxSortId: tabTree.selected[0] ? tabTree.selected[0].id : "",
middleSortId: tabTree.selected[1] ? tabTree.selected[1].id : "",
smallSortId: tabTree.selected[2] ? tabTree.selected[2].id : "",
status: common.util.__input("status-select"),
size: 12
};
if(Bll.recommendProductTab === 1) {
// 注意：如果recommendProductList为空数组，不能直接传递Bll.recommendProductList.toString()，因为接口框架会忽略空字符。
// 这时，在传递至后台接口时，映射的参数会是null，而非空字符串
params.productSKNList = Bll.recommendProductList.length === 0 ? " " : Bll.recommendProductList.toString();
}
return params;
},
columns: [
{
display: '商品图片',
render: function(item) {
let pic = item.productPic;
if(item.productPic && item.productPic.length > 0) {
pic = pic.substring(0, pic.indexOf('?')) + '?imageView2/0/w/40/h/60';
return '<img src="' + pic + '">'
} else {
return '';
}
}
},
{
display: 'SKN',
name: 'productSKN'
},
{
display: '商品名称',
name: 'productName'
},
{
display: '销售价(元)',
name: 'salePrice'
},
{
display: '上下架状态',
render: function(item) {
return Bll.base.getProductStatus(item.status);
}
},
{
display: '可售库存',
name: 'storage'
},
{
display: '分类',
name: 'productSort'
},
{
display: '操作',
render: function(item) {
// 当前SKN在选中列表中
if($.inArray(item.productSKN, Bll.recommendProductList) > -1) {
return '<a href="javascript:;" data-product-skn="' + item.productSKN + '" class="btn btn-xs unselect-product">取消选择</a>';
}
return '<a href="javascript:;" data-product-skn="' + item.productSKN + '" class="btn btn-xs select-product">选择</a>';
}
}
]
});
Bll.moduleGrid.init("/shop/selectAllProduct");
} else {
$('.editor-dialog').hide();
$('.editorTitle').html(common.util.__template2($('#autoselect-recommend-product').html()));
}
},
// 初始化编辑弹出框内容，selector: 组件标识，index: 模块索引
initEditorGrid: function(selector, index) {
var module = Bll.moduleDataList[index];
... ... @@ -799,92 +894,21 @@ var Bll = {
Bll.moduleGrid.init(Bll.moduleGrid.__rows);
break;
case "RecommendProduct":
$('.editorTitle').append(common.util.__template2($("#recommend-product-filter").html()));
var tabTree = new common.tabTree("#sortTree");
tabTree.init();
// 渲染 "展示类型" 选择组件
Bll.recommendProductDisplayType = Bll.getRecommendProductDisplayType(module);
Bll.recommendProductList = Bll.getModuleData(module); // 临时保存选中的SKN
$('.selectedProductsNum').text(Bll.recommendProductList.length);
// 设置dialog边框
$('.editor-dialog').css({padding: "20px 20px 60px", border: "1px solid #ddd", background: "#FFFFFF"});
Bll.moduleGrid = new grid({
hash: false,
el: selector,
parms: function() {
let params = {
shopId: Bll.shopId,
productSKN: common.util.__input("productSKN"),
productName: common.util.__input("productName"),
maxSortId: tabTree.selected[0] ? tabTree.selected[0].id : "",
middleSortId: tabTree.selected[1] ? tabTree.selected[1].id : "",
smallSortId: tabTree.selected[2] ? tabTree.selected[2].id : "",
status: common.util.__input("status-select"),
size: 12
};
if(Bll.recommendProductTab === 1) {
// 注意：如果recommendProductList为空数组，不能直接传递Bll.recommendProductList.toString()，因为接口框架会忽略空字符。
// 这时，在传递至后台接口时，映射的参数会是null，而非空字符串
params.productSKNList = Bll.recommendProductList.length === 0 ? " " : Bll.recommendProductList.toString();
}
return params;
},
columns: [
{
display: '商品图片',
render: function(item) {
let pic = item.productPic;
if(item.productPic && item.productPic.length > 0) {
pic = pic.substring(0, pic.indexOf('?')) + '?imageView/0/w/40/h/60';
return '<img src="' + pic + '">'
} else {
return '';
}
}
},
{
display: 'SKN',
name: 'productSKN'
},
{
display: '商品名称',
name: 'productName'
},
{
display: '销售价(元)',
name: 'salePrice'
},
{
display: '上下架状态',
render: function(item) {
return Bll.base.getProductStatus(item.status);
}
},
{
display: '可售库存',
name: 'storage'
},
{
display: '分类',
name: 'productSort'
},
{
display: '操作',
render: function(item) {
// 当前SKN在选中列表中
if($.inArray(item.productSKN, Bll.recommendProductList) > -1) {
return '<a href="javascript:;" data-product-skn="' + item.productSKN + '" class="btn btn-xs unselect-product">选择</a>';
}
return '<a href="javascript:;" data-product-skn="' + item.productSKN + '" class="btn btn-xs select-product">选择</a>';
}
}
]
});
Bll.moduleGrid.init("/shop/selectAllProduct");
$('.editor-header').html(common.util.__template2($('#recommend-product-display-type').html(), {displayType: Bll.recommendProductDisplayType}));
Bll.initRecommendProduct(selector);
break;
};
var e = new common.edit('.editorTitle',{bucket:"yhb-img02"});
// editorTitle区域 input组件自动选中
let e = new common.edit('.editorTitle',{bucket:"yhb-img02"});
e.init();
// editor-header区域，input组件自动选中
let e2 = new common.edit('.editor-header');
e2.init();
},
// 设置当前模块与下个模块间的间隔，对于"店招"模块不涉及，没有间距
... ... @@ -901,13 +925,22 @@ var Bll = {
// 获取是否设置模块间间距，默认是1
getModuleMargin: function(module) {
if(module.moduleData && module.moduleData.properties) {
var isModuleMargin = module.moduleData.properties.isModuleMargin;
let isModuleMargin = module.moduleData.properties.isModuleMargin;
return +isModuleMargin;
}
return 1;
},
getRecommendProductDisplayType: function(module) {
if(module.moduleData && module.moduleData.properties) {
let isModuleMargin = module.moduleData.properties.isModuleMargin;
return +isModuleMargin;
}
return 0;
},
// 初始化编辑弹出框底部Tips，selector: 选择器标识，index：模块索引
initGridTips: function(selector, index) {
var moduleType = Bll.moduleDataList[index].moduleType;
... ... @@ -933,7 +966,7 @@ var Bll = {
editEvent: function(index, moduleTitle) {
var option = {
title: moduleTitle,
content: '<div class="editorTitle"></div><div class="editor-dialog"></div><hr><div class="editorTip"></div>',
content: '<div class="editor-header"></div><div class="editor-body"><div class="editorTitle"></div><div class="editor-dialog"></div><hr><div class="editorTip"></div></div>',
width: '70%',
button: [
{
... ... @@ -1861,6 +1894,13 @@ $(document).on('click', '.display-type-radio', function() {
$('.editorTip').html('<p>' + Bll.getTripleImageTips(+displayType) + '</p>');
});
$(document).on('change', '.recommend-product-radio', function() {
let displayType = $(this).val();
Bll.recommendProductDisplayType = +displayType;
Bll.initRecommendProduct('.editor-dialog');
});
// 轮播图、导航中删除数据
$(document).on('click', '.del-moduledata-btn', function() {
var index = $(this).data('index');
... ... @@ -2009,4 +2049,15 @@ $(document).on("click", ".nav-tabs li", function () {
curTab = $(this).index();
Bll.recommendProductTab = curTab;
Bll.moduleGrid.reload(1);
});
$(document).on('change', '.observe', function() {
if(Bll.recommendProduct === undefined) {
Bll.recommendProduct = {};
}
let prop = $(this).data("bind");
let value = +$(this).val();
Bll.recommendProduct[prop] = value;
});
\ No newline at end of file
... ...
... ... @@ -437,7 +437,21 @@
font-style: italic;
}
.editorTitle .title {
.editorTitle .content {
font-family: microsoft yahei;
font-size: 16px;
padding: 0;
text-align: left;
margin-bottom: 24px;
}
.editorTitle .observe {
width: 100px;
display: inline-block;
padding: 7px;
}
.editor-header .title {
font-family: microsoft yahei;
font-size: 14px;
padding: 0;
... ...