fe / yohobuy-portal-fe2 · Commits

Go to a project

Authored by zhaoqing
Commit f2853ce5de3a0177a537ac20d86ebf74966f5a72 2 parents 687e7b96 8e453ee4

Merge branch 'dev_店铺装修模块化' of http://git.yoho.cn/fe/yohobuy-portal-fe2 into dev_店铺装修模块化

Inline Side-by-side
Showing 4 changed files with 109 additions and 32 deletions
... ... @@ -37,6 +37,7 @@
<!-- 左侧装修模板列表 -->
<div class="decorator-left">
<div class="template-list-parent">
<div class="template-list"></div>
</div>
<!-- 底部按钮组 -->
... ... @@ -54,6 +55,7 @@
<a href="javascript:;" class="btn btn-warning" id="applyBtn">应用</a>
</div>
</div>
</div>
<!-- 右侧装修内容 -->
<div class="decorator-right">
... ... @@ -241,7 +243,7 @@
<div>
<div class="content">
一行展示四件商品，展示
<select class="form-control line-number observe" data-bind="lineNumber">
<select class="form-control line-number observe" data-bind="lineNumber" value="[[data ? data.lineNumber : '']]">
<option value="-1">行数</option>
<option value="1">1</option>
<option value="2">2</option>
... ... @@ -253,7 +255,7 @@
行
</div>
<div class="content">排序类型:
<select class="form-control sort-type observe" data-bind="sortType">
<select class="form-control sort-type observe" data-bind="sortType" value="[[data ? data.sortType : '']]">
<option value="-1">排序类型</option>
<option value="1">新品</option>
<option value="2">价格</option>
... ... @@ -261,7 +263,7 @@
</select>
</div>
<div class="content">排序方式:
<select class="form-control sort-pattern observe" data-bind="sortPattern">
<select class="form-control sort-pattern observe" data-bind="sortPattern" value="[[data ? data.sortPattern : '']]">
<option value="-1">排序方式</option>
<option value="1">新品</option>
<option value="2">价格</option>
... ...
... ... @@ -370,13 +370,13 @@ var Bll = {
initRecommendProduct: function(selector) {
// 手动选择商品
if(Bll.recommendProductDisplayType === 1) {
if(Bll.recommendProduct.displayType === 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);
$('.selectedProductsNum').text(Bll.recommendProduct.sknList.length);
// 设置dialog边框
$('.editor-dialog').css({padding: "20px 20px 60px", border: "1px solid #ddd", background: "#FFFFFF"});
Bll.moduleGrid = new grid({
... ... @@ -394,9 +394,9 @@ var Bll = {
size: 12
};
if(Bll.recommendProductTab === 1) {
// 注意：如果recommendProductList为空数组，不能直接传递Bll.recommendProductList.toString()，因为接口框架会忽略空字符。
// 注意：如果Bll.recommendProduct.sknList为空数组，不能直接传递Bll.recommendProduct.sknList.toString()，因为接口框架会忽略空字符。
// 这时，在传递至后台接口时，映射的参数会是null，而非空字符串
params.productSKNList = Bll.recommendProductList.length === 0 ? " " : Bll.recommendProductList.toString();
params.productSKNList = Bll.recommendProduct.sknList.length === 0 ? " " : Bll.recommendProduct.sknList.toString();
}
return params;
... ... @@ -444,7 +444,7 @@ var Bll = {
display: '操作',
render: function(item) {
// 当前SKN在选中列表中
if($.inArray(item.productSKN, Bll.recommendProductList) > -1) {
if($.inArray(item.productSKN, Bll.recommendProduct.sknList) > -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>';
... ... @@ -455,7 +455,9 @@ var Bll = {
Bll.moduleGrid.init("/shop/selectAllProduct");
} else {
$('.editor-dialog').hide();
$('.editorTitle').html(common.util.__template2($('#autoselect-recommend-product').html()));
$('.editorTitle').html(common.util.__template2($('#autoselect-recommend-product').html(), {data: Bll.recommendProduct}));
let edit = new common.edit('.editorTitle');
edit.init();
}
},
... ... @@ -896,9 +898,8 @@ var Bll = {
break;
case "RecommendProduct":
// 渲染 "展示类型" 选择组件
Bll.recommendProductDisplayType = Bll.getRecommendProductDisplayType(module);
Bll.recommendProductList = Bll.getModuleData(module); // 临时保存选中的SKN
$('.editor-header').html(common.util.__template2($('#recommend-product-display-type').html(), {displayType: Bll.recommendProductDisplayType}));
Bll.recommendProduct = Bll.getRecommendProductData(module); // 临时保存装修数据
$('.editor-header').html(common.util.__template2($('#recommend-product-display-type').html(), {displayType: Bll.recommendProduct.displayType}));
Bll.initRecommendProduct(selector);
break;
case "AppRecommendProduct":
... ... @@ -940,13 +941,52 @@ var Bll = {
return 1;
},
getRecommendProductDisplayType: function(module) {
if(module.moduleData && module.moduleData.properties) {
let isModuleMargin = module.moduleData.properties.isModuleMargin;
return +isModuleMargin;
/**
* 获取 推荐商品 模块数据，数据格式为: {data: [{sknList: [], lineNumber: 2, sortType: 1, sortPattern: 2}], properties: {displayType: 0}}
*/
getRecommendProductData: function(module) {
let recommendProduct = {};
if(module.moduleData) {
if(module.moduleData.data) {
recommendProduct = module.moduleData.data[0];
}
if(module.moduleData.properties) {
recommendProduct.displayType = module.moduleData.properties.displayType;
}
}
return 0;
if(recommendProduct.sknList === undefined) {
recommendProduct.sknList = [];
}
if(recommendProduct.displayType === undefined) {
recommendProduct.displayType = 0;
}
return recommendProduct;
},
/**
* 保存 推荐商品 模块数据，装修数据临时保存在 Bll.recommendProduct中
* @param index 当前模块在装修模块列表中的索引
*/
saveRecommendProduct: function(index) {
let displayType = Bll.recommendProduct.displayType;
let data = {};
// 自动选品
if(displayType === 0) {
data.lineNumber = Bll.recommendProduct.lineNumber;
data.sortType = Bll.recommendProduct.sortType;
data.sortPattern = Bll.recommendProduct.sortPattern;
} else {
data.sknList = Bll.recommendProduct.sknList;
}
Bll.moduleDataList[index].moduleData.data = [];
Bll.moduleDataList[index].moduleData.data.push(data);
Bll.moduleDataList[index].moduleData.properties.displayType = displayType;
},
// 初始化编辑弹出框底部Tips，selector: 选择器标识，index：模块索引
... ... @@ -984,7 +1024,14 @@ var Bll = {
value: '确认',
css: 'btn-info',
callback: function() {
var validation = Bll.validator.validateModule(Bll.moduleDataList[index].moduleType, Bll.moduleGrid.__rows);
let validation = false;
let moduleType = Bll.moduleDataList[index].moduleType;
if(moduleType == 'RecommendProduct') {
validation = Bll.validator.validateModule(moduleType, Bll.recommendProduct);
} else {
validation = Bll.validator.validateModule(moduleType, Bll.moduleGrid.__rows);
}
if(! validation) {
return false;
}
... ... @@ -1000,7 +1047,11 @@ var Bll = {
Bll.moduleDataList[index].moduleData.properties = {};
}
if(moduleType == 'RecommendProduct') {
Bll.saveRecommendProduct(index);
} else {
Bll.moduleDataList[index].moduleData.data = Bll.moduleGrid.__rows;
}
// 处理模块数据，增加资源位标识，用于热点分析
$.each(Bll.moduleDataList[index].moduleData.data, function(index, item) {
... ... @@ -1904,7 +1955,7 @@ $(document).on('click', '.display-type-radio', function() {
$(document).on('change', '.recommend-product-radio', function() {
let displayType = $(this).val();
Bll.recommendProductDisplayType = +displayType;
Bll.recommendProduct.displayType = +displayType;
Bll.initRecommendProduct('.editor-dialog');
});
... ... @@ -2010,8 +2061,8 @@ $(document).on('click', '.select-product', function() {
let skn = +$(this).data('product-skn');
// 临时维护
if($.inArray(skn, Bll.recommendProductList) == -1) {
Bll.recommendProductList.push(skn);
if($.inArray(skn, Bll.recommendProduct.sknList) == -1) {
Bll.recommendProduct.sknList.push(skn);
}
// 将 "选择" 改为 "取消选择"
... ... @@ -2020,30 +2071,30 @@ $(document).on('click', '.select-product', function() {
$(this).addClass('unselect-product');
// 重置TAB页数字
$('.selectedProductsNum').text(Bll.recommendProductList.length);
$('.selectedProductsNum').text(Bll.recommendProduct.sknList.length);
});
// 取消选择SKN
$(document).on('click', '.unselect-product', function() {
let skn = +$(this).data('product-skn');
// 将SKN从临时数据中移除
Bll.recommendProductList.splice($.inArray(skn, Bll.recommendProductList), 1);
Bll.recommendProduct.sknList.splice($.inArray(skn, Bll.recommendProduct.sknList), 1);
$(this).text("选择");
$(this).removeClass('unselect-product');
$(this).addClass('select-product');
// 重置TAB页数字
$('.selectedProductsNum').text(Bll.recommendProductList.length);
$('.selectedProductsNum').text(Bll.recommendProduct.sknList.length);
});
// 全部取消选择SKN
$(document).on('click', '.clear-btn', function() {
// 清空临时保存数据
Bll.recommendProductList = [];
Bll.recommendProduct.sknList = [];
// 重置TAB页数字
$('.selectedProductsNum').text(Bll.recommendProductList.length);
$('.selectedProductsNum').text(Bll.recommendProduct.sknList.length);
// 重新加载页面，更改"选择"按钮
Bll.moduleGrid.reload(1);
... ...
... ... @@ -25,6 +25,8 @@ validator.prototype = {
return this.validateMultiImage(moduleData, '三张图模块');
case "Video":
return this.validateVideo(moduleData);
case "RecommendProduct":
return this.validateRecommendProduct(moduleData);
};
return true;
... ... @@ -217,6 +219,21 @@ validator.prototype = {
}, true);
return result;
},
// 校验 推荐商品模块，数据格式为: {sknList: [], lineNumber: 2, sortType: 1, sortPattern: 2, displayType: 0}
validateRecommendProduct: function(data) {
let displayType = data.displayType;
// 自选商品
if(displayType === 1) {
let sknList = data.sknList;
if(sknList === undefined || sknList.length === 0) {
common.util.__tip('推荐商品模块中，未选择SKN，请确认!', 'warning');
return false;
}
}
return true;
}
};
... ...
... ... @@ -131,9 +131,9 @@
position: absolute;
top: 60px;
background: #E7E7E7;
bottom: 60px;
bottom: 0;
width: 200px;
overflow-y: auto;
overflow: hidden;
box-shadow: 0px 0px 15px rgba(0,0,0,.2);
}
... ... @@ -146,15 +146,13 @@
background: #FFFFFF;
border: 1px solid #E7E7E7;
box-shadow: 0px 0px 15px rgba(0,0,0,.2);
overflow: hidden;
}
.left-footer .save-btn {
margin-left: 10px;
margin-top: 5px;
position: relative;
top: 50%;
transform: translateY(-50%);
top: 8px;
}
/*.left-footer .btn {
... ... @@ -178,10 +176,17 @@
color: #FFFFFF;
}
.template-list-parent {
position: absolute;
bottom: 60px;
top: 28px;
width: 100%;
overflow-y: auto;
}
/* 左侧模板列表 */
.template-list {
text-align: center;
margin-top: 28px;
}
.template-list .title {
... ... @@ -260,6 +265,7 @@
margin-left: 480px;
height: 800px;
overflow-y: auto;
overflow-x: hidden;
background: #F0F0F0;
border: 1px dashed;
box-shadow: 0px 0px 15px rgba(0,0,0,.8);
... ... @@ -270,6 +276,7 @@
width: 1150px;
height: 800px;
overflow-y: auto;
overflow-x: hidden;
background: #F0F0F0;
border: 1px dashed;
}
... ...