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 @@ @@ -37,6 +37,7 @@
37 37
38 <!-- 左侧装修模板列表 --> 38 <!-- 左侧装修模板列表 -->
39 <div class="decorator-left"> 39 <div class="decorator-left">
  40 + <div class="template-list-parent">
40 <div class="template-list"></div> 41 <div class="template-list"></div>
41 </div> 42 </div>
42 <!-- 底部按钮组 --> 43 <!-- 底部按钮组 -->
@@ -54,6 +55,7 @@ @@ -54,6 +55,7 @@
54 <a href="javascript:;" class="btn btn-warning" id="applyBtn">应用</a> 55 <a href="javascript:;" class="btn btn-warning" id="applyBtn">应用</a>
55 </div> 56 </div>
56 </div> 57 </div>
  58 + </div>
57 59
58 <!-- 右侧装修内容 --> 60 <!-- 右侧装修内容 -->
59 <div class="decorator-right"> 61 <div class="decorator-right">
@@ -241,7 +243,7 @@ @@ -241,7 +243,7 @@
241 <div> 243 <div>
242 <div class="content"> 244 <div class="content">
243 一行展示四件商品，展示 245 一行展示四件商品，展示
244 - <select class="form-control line-number observe" data-bind="lineNumber"> 246 + <select class="form-control line-number observe" data-bind="lineNumber" value="[[data ? data.lineNumber : '']]">
245 <option value="-1">行数</option> 247 <option value="-1">行数</option>
246 <option value="1">1</option> 248 <option value="1">1</option>
247 <option value="2">2</option> 249 <option value="2">2</option>
@@ -253,7 +255,7 @@ @@ -253,7 +255,7 @@
253 行 255 行
254 </div> 256 </div>
255 <div class="content">排序类型: 257 <div class="content">排序类型:
256 - <select class="form-control sort-type observe" data-bind="sortType"> 258 + <select class="form-control sort-type observe" data-bind="sortType" value="[[data ? data.sortType : '']]">
257 <option value="-1">排序类型</option> 259 <option value="-1">排序类型</option>
258 <option value="1">新品</option> 260 <option value="1">新品</option>
259 <option value="2">价格</option> 261 <option value="2">价格</option>
@@ -261,7 +263,7 @@ @@ -261,7 +263,7 @@
261 </select> 263 </select>
262 </div> 264 </div>
263 <div class="content">排序方式: 265 <div class="content">排序方式:
264 - <select class="form-control sort-pattern observe" data-bind="sortPattern"> 266 + <select class="form-control sort-pattern observe" data-bind="sortPattern" value="[[data ? data.sortPattern : '']]">
265 <option value="-1">排序方式</option> 267 <option value="-1">排序方式</option>
266 <option value="1">新品</option> 268 <option value="1">新品</option>
267 <option value="2">价格</option> 269 <option value="2">价格</option>
@@ -370,13 +370,13 @@ var Bll = { @@ -370,13 +370,13 @@ var Bll = {
370 initRecommendProduct: function(selector) { 370 initRecommendProduct: function(selector) {
371 371
372 // 手动选择商品 372 // 手动选择商品
373 - if(Bll.recommendProductDisplayType === 1) { 373 + if(Bll.recommendProduct.displayType === 1) {
374 $('.editor-dialog').show(); 374 $('.editor-dialog').show();
375 375
376 $('.editorTitle').html(common.util.__template2($("#recommend-product-filter").html())); 376 $('.editorTitle').html(common.util.__template2($("#recommend-product-filter").html()));
377 var tabTree = new common.tabTree("#sortTree"); 377 var tabTree = new common.tabTree("#sortTree");
378 tabTree.init(); 378 tabTree.init();
379 - $('.selectedProductsNum').text(Bll.recommendProductList.length); 379 + $('.selectedProductsNum').text(Bll.recommendProduct.sknList.length);
380 // 设置dialog边框 380 // 设置dialog边框
381 $('.editor-dialog').css({padding: "20px 20px 60px", border: "1px solid #ddd", background: "#FFFFFF"}); 381 $('.editor-dialog').css({padding: "20px 20px 60px", border: "1px solid #ddd", background: "#FFFFFF"});
382 Bll.moduleGrid = new grid({ 382 Bll.moduleGrid = new grid({
@@ -394,9 +394,9 @@ var Bll = { @@ -394,9 +394,9 @@ var Bll = {
394 size: 12 394 size: 12
395 }; 395 };
396 if(Bll.recommendProductTab === 1) { 396 if(Bll.recommendProductTab === 1) {
397 - // 注意：如果recommendProductList为空数组，不能直接传递Bll.recommendProductList.toString()，因为接口框架会忽略空字符。 397 + // 注意：如果Bll.recommendProduct.sknList为空数组，不能直接传递Bll.recommendProduct.sknList.toString()，因为接口框架会忽略空字符。
398 // 这时，在传递至后台接口时，映射的参数会是null，而非空字符串 398 // 这时，在传递至后台接口时，映射的参数会是null，而非空字符串
399 - params.productSKNList = Bll.recommendProductList.length === 0 ? " " : Bll.recommendProductList.toString(); 399 + params.productSKNList = Bll.recommendProduct.sknList.length === 0 ? " " : Bll.recommendProduct.sknList.toString();
400 } 400 }
401 401
402 return params; 402 return params;
@@ -444,7 +444,7 @@ var Bll = { @@ -444,7 +444,7 @@ var Bll = {
444 display: '操作', 444 display: '操作',
445 render: function(item) { 445 render: function(item) {
446 // 当前SKN在选中列表中 446 // 当前SKN在选中列表中
447 - if($.inArray(item.productSKN, Bll.recommendProductList) > -1) { 447 + if($.inArray(item.productSKN, Bll.recommendProduct.sknList) > -1) {
448 return '<a href="javascript:;" data-product-skn="' + item.productSKN + '" class="btn btn-xs unselect-product">取消选择</a>'; 448 return '<a href="javascript:;" data-product-skn="' + item.productSKN + '" class="btn btn-xs unselect-product">取消选择</a>';
449 } 449 }
450 return '<a href="javascript:;" data-product-skn="' + item.productSKN + '" class="btn btn-xs select-product">选择</a>'; 450 return '<a href="javascript:;" data-product-skn="' + item.productSKN + '" class="btn btn-xs select-product">选择</a>';
@@ -455,7 +455,9 @@ var Bll = { @@ -455,7 +455,9 @@ var Bll = {
455 Bll.moduleGrid.init("/shop/selectAllProduct"); 455 Bll.moduleGrid.init("/shop/selectAllProduct");
456 } else { 456 } else {
457 $('.editor-dialog').hide(); 457 $('.editor-dialog').hide();
458 - $('.editorTitle').html(common.util.__template2($('#autoselect-recommend-product').html())); 458 + $('.editorTitle').html(common.util.__template2($('#autoselect-recommend-product').html(), {data: Bll.recommendProduct}));
  459 + let edit = new common.edit('.editorTitle');
  460 + edit.init();
459 } 461 }
460 }, 462 },
461 463
@@ -896,9 +898,8 @@ var Bll = { @@ -896,9 +898,8 @@ var Bll = {
896 break; 898 break;
897 case "RecommendProduct": 899 case "RecommendProduct":
898 // 渲染 "展示类型" 选择组件 900 // 渲染 "展示类型" 选择组件
899 - Bll.recommendProductDisplayType = Bll.getRecommendProductDisplayType(module);  
900 - Bll.recommendProductList = Bll.getModuleData(module); // 临时保存选中的SKN  
901 - $('.editor-header').html(common.util.__template2($('#recommend-product-display-type').html(), {displayType: Bll.recommendProductDisplayType})); 901 + Bll.recommendProduct = Bll.getRecommendProductData(module); // 临时保存装修数据
  902 + $('.editor-header').html(common.util.__template2($('#recommend-product-display-type').html(), {displayType: Bll.recommendProduct.displayType}));
902 Bll.initRecommendProduct(selector); 903 Bll.initRecommendProduct(selector);
903 break; 904 break;
904 case "AppRecommendProduct": 905 case "AppRecommendProduct":
@@ -940,13 +941,52 @@ var Bll = { @@ -940,13 +941,52 @@ var Bll = {
940 return 1; 941 return 1;
941 }, 942 },
942 943
943 - getRecommendProductDisplayType: function(module) {  
944 - if(module.moduleData && module.moduleData.properties) {  
945 - let isModuleMargin = module.moduleData.properties.isModuleMargin;  
946 - return +isModuleMargin; 944 + /**
  945 + * 获取 推荐商品 模块数据，数据格式为: {data: [{sknList: [], lineNumber: 2, sortType: 1, sortPattern: 2}], properties: {displayType: 0}}
  946 + */
  947 + getRecommendProductData: function(module) {
  948 + let recommendProduct = {};
  949 + if(module.moduleData) {
  950 + if(module.moduleData.data) {
  951 + recommendProduct = module.moduleData.data[0];
  952 + }
  953 +
  954 + if(module.moduleData.properties) {
  955 + recommendProduct.displayType = module.moduleData.properties.displayType;
  956 + }
947 } 957 }
948 958
949 - return 0; 959 + if(recommendProduct.sknList === undefined) {
  960 + recommendProduct.sknList = [];
  961 + }
  962 +
  963 + if(recommendProduct.displayType === undefined) {
  964 + recommendProduct.displayType = 0;
  965 + }
  966 +
  967 + return recommendProduct;
  968 + },
  969 +
  970 + /**
  971 + * 保存 推荐商品 模块数据，装修数据临时保存在 Bll.recommendProduct中
  972 + * @param index 当前模块在装修模块列表中的索引
  973 + */
  974 + saveRecommendProduct: function(index) {
  975 + let displayType = Bll.recommendProduct.displayType;
  976 + let data = {};
  977 +
  978 + // 自动选品
  979 + if(displayType === 0) {
  980 + data.lineNumber = Bll.recommendProduct.lineNumber;
  981 + data.sortType = Bll.recommendProduct.sortType;
  982 + data.sortPattern = Bll.recommendProduct.sortPattern;
  983 + } else {
  984 + data.sknList = Bll.recommendProduct.sknList;
  985 + }
  986 +
  987 + Bll.moduleDataList[index].moduleData.data = [];
  988 + Bll.moduleDataList[index].moduleData.data.push(data);
  989 + Bll.moduleDataList[index].moduleData.properties.displayType = displayType;
950 }, 990 },
951 991
952 // 初始化编辑弹出框底部Tips，selector: 选择器标识，index：模块索引 992 // 初始化编辑弹出框底部Tips，selector: 选择器标识，index：模块索引
@@ -984,7 +1024,14 @@ var Bll = { @@ -984,7 +1024,14 @@ var Bll = {
984 value: '确认', 1024 value: '确认',
985 css: 'btn-info', 1025 css: 'btn-info',
986 callback: function() { 1026 callback: function() {
987 - var validation = Bll.validator.validateModule(Bll.moduleDataList[index].moduleType, Bll.moduleGrid.__rows); 1027 + let validation = false;
  1028 + let moduleType = Bll.moduleDataList[index].moduleType;
  1029 + if(moduleType == 'RecommendProduct') {
  1030 + validation = Bll.validator.validateModule(moduleType, Bll.recommendProduct);
  1031 + } else {
  1032 + validation = Bll.validator.validateModule(moduleType, Bll.moduleGrid.__rows);
  1033 + }
  1034 +
988 if(! validation) { 1035 if(! validation) {
989 return false; 1036 return false;
990 } 1037 }
@@ -1000,7 +1047,11 @@ var Bll = { @@ -1000,7 +1047,11 @@ var Bll = {
1000 Bll.moduleDataList[index].moduleData.properties = {}; 1047 Bll.moduleDataList[index].moduleData.properties = {};
1001 } 1048 }
1002 1049
  1050 + if(moduleType == 'RecommendProduct') {
  1051 + Bll.saveRecommendProduct(index);
  1052 + } else {
1003 Bll.moduleDataList[index].moduleData.data = Bll.moduleGrid.__rows; 1053 Bll.moduleDataList[index].moduleData.data = Bll.moduleGrid.__rows;
  1054 + }
1004 1055
1005 // 处理模块数据，增加资源位标识，用于热点分析 1056 // 处理模块数据，增加资源位标识，用于热点分析
1006 $.each(Bll.moduleDataList[index].moduleData.data, function(index, item) { 1057 $.each(Bll.moduleDataList[index].moduleData.data, function(index, item) {
@@ -1904,7 +1955,7 @@ $(document).on('click', '.display-type-radio', function() { @@ -1904,7 +1955,7 @@ $(document).on('click', '.display-type-radio', function() {
1904 1955
1905 $(document).on('change', '.recommend-product-radio', function() { 1956 $(document).on('change', '.recommend-product-radio', function() {
1906 let displayType = $(this).val(); 1957 let displayType = $(this).val();
1907 - Bll.recommendProductDisplayType = +displayType; 1958 + Bll.recommendProduct.displayType = +displayType;
1908 1959
1909 Bll.initRecommendProduct('.editor-dialog'); 1960 Bll.initRecommendProduct('.editor-dialog');
1910 }); 1961 });
@@ -2010,8 +2061,8 @@ $(document).on('click', '.select-product', function() { @@ -2010,8 +2061,8 @@ $(document).on('click', '.select-product', function() {
2010 let skn = +$(this).data('product-skn'); 2061 let skn = +$(this).data('product-skn');
2011 2062
2012 // 临时维护 2063 // 临时维护
2013 - if($.inArray(skn, Bll.recommendProductList) == -1) {  
2014 - Bll.recommendProductList.push(skn); 2064 + if($.inArray(skn, Bll.recommendProduct.sknList) == -1) {
  2065 + Bll.recommendProduct.sknList.push(skn);
2015 } 2066 }
2016 2067
2017 // 将 "选择" 改为 "取消选择" 2068 // 将 "选择" 改为 "取消选择"
@@ -2020,30 +2071,30 @@ $(document).on('click', '.select-product', function() { @@ -2020,30 +2071,30 @@ $(document).on('click', '.select-product', function() {
2020 $(this).addClass('unselect-product'); 2071 $(this).addClass('unselect-product');
2021 2072
2022 // 重置TAB页数字 2073 // 重置TAB页数字
2023 - $('.selectedProductsNum').text(Bll.recommendProductList.length); 2074 + $('.selectedProductsNum').text(Bll.recommendProduct.sknList.length);
2024 }); 2075 });
2025 2076
2026 // 取消选择SKN 2077 // 取消选择SKN
2027 $(document).on('click', '.unselect-product', function() { 2078 $(document).on('click', '.unselect-product', function() {
2028 let skn = +$(this).data('product-skn'); 2079 let skn = +$(this).data('product-skn');
2029 // 将SKN从临时数据中移除 2080 // 将SKN从临时数据中移除
2030 - Bll.recommendProductList.splice($.inArray(skn, Bll.recommendProductList), 1); 2081 + Bll.recommendProduct.sknList.splice($.inArray(skn, Bll.recommendProduct.sknList), 1);
2031 2082
2032 $(this).text("选择"); 2083 $(this).text("选择");
2033 $(this).removeClass('unselect-product'); 2084 $(this).removeClass('unselect-product');
2034 $(this).addClass('select-product'); 2085 $(this).addClass('select-product');
2035 2086
2036 // 重置TAB页数字 2087 // 重置TAB页数字
2037 - $('.selectedProductsNum').text(Bll.recommendProductList.length); 2088 + $('.selectedProductsNum').text(Bll.recommendProduct.sknList.length);
2038 }); 2089 });
2039 2090
2040 // 全部取消选择SKN 2091 // 全部取消选择SKN
2041 $(document).on('click', '.clear-btn', function() { 2092 $(document).on('click', '.clear-btn', function() {
2042 // 清空临时保存数据 2093 // 清空临时保存数据
2043 - Bll.recommendProductList = []; 2094 + Bll.recommendProduct.sknList = [];
2044 2095
2045 // 重置TAB页数字 2096 // 重置TAB页数字
2046 - $('.selectedProductsNum').text(Bll.recommendProductList.length); 2097 + $('.selectedProductsNum').text(Bll.recommendProduct.sknList.length);
2047 2098
2048 // 重新加载页面，更改"选择"按钮 2099 // 重新加载页面，更改"选择"按钮
2049 Bll.moduleGrid.reload(1); 2100 Bll.moduleGrid.reload(1);
@@ -25,6 +25,8 @@ validator.prototype = { @@ -25,6 +25,8 @@ validator.prototype = {
25 return this.validateMultiImage(moduleData, '三张图模块'); 25 return this.validateMultiImage(moduleData, '三张图模块');
26 case "Video": 26 case "Video":
27 return this.validateVideo(moduleData); 27 return this.validateVideo(moduleData);
  28 + case "RecommendProduct":
  29 + return this.validateRecommendProduct(moduleData);
28 }; 30 };
29 31
30 return true; 32 return true;
@@ -217,6 +219,21 @@ validator.prototype = { @@ -217,6 +219,21 @@ validator.prototype = {
217 }, true); 219 }, true);
218 220
219 return result; 221 return result;
  222 + },
  223 +
  224 + // 校验 推荐商品模块，数据格式为: {sknList: [], lineNumber: 2, sortType: 1, sortPattern: 2, displayType: 0}
  225 + validateRecommendProduct: function(data) {
  226 + let displayType = data.displayType;
  227 + // 自选商品
  228 + if(displayType === 1) {
  229 + let sknList = data.sknList;
  230 + if(sknList === undefined || sknList.length === 0) {
  231 + common.util.__tip('推荐商品模块中，未选择SKN，请确认!', 'warning');
  232 + return false;
  233 + }
  234 + }
  235 +
  236 + return true;
220 } 237 }
221 }; 238 };
222 239
@@ -131,9 +131,9 @@ @@ -131,9 +131,9 @@
131 position: absolute; 131 position: absolute;
132 top: 60px; 132 top: 60px;
133 background: #E7E7E7; 133 background: #E7E7E7;
134 - bottom: 60px; 134 + bottom: 0;
135 width: 200px; 135 width: 200px;
136 - overflow-y: auto; 136 + overflow: hidden;
137 box-shadow: 0px 0px 15px rgba(0,0,0,.2); 137 box-shadow: 0px 0px 15px rgba(0,0,0,.2);
138 } 138 }
139 139
@@ -146,15 +146,13 @@ @@ -146,15 +146,13 @@
146 background: #FFFFFF; 146 background: #FFFFFF;
147 border: 1px solid #E7E7E7; 147 border: 1px solid #E7E7E7;
148 box-shadow: 0px 0px 15px rgba(0,0,0,.2); 148 box-shadow: 0px 0px 15px rgba(0,0,0,.2);
149 - overflow: hidden;  
150 } 149 }
151 150
152 .left-footer .save-btn { 151 .left-footer .save-btn {
153 margin-left: 10px; 152 margin-left: 10px;
154 margin-top: 5px; 153 margin-top: 5px;
155 position: relative; 154 position: relative;
156 - top: 50%;  
157 - transform: translateY(-50%); 155 + top: 8px;
158 } 156 }
159 157
160 /*.left-footer .btn { 158 /*.left-footer .btn {
@@ -178,10 +176,17 @@ @@ -178,10 +176,17 @@
178 color: #FFFFFF; 176 color: #FFFFFF;
179 } 177 }
180 178
  179 +.template-list-parent {
  180 + position: absolute;
  181 + bottom: 60px;
  182 + top: 28px;
  183 + width: 100%;
  184 + overflow-y: auto;
  185 +}
  186 +
181 /* 左侧模板列表 */ 187 /* 左侧模板列表 */
182 .template-list { 188 .template-list {
183 text-align: center; 189 text-align: center;
184 - margin-top: 28px;  
185 } 190 }
186 191
187 .template-list .title { 192 .template-list .title {
@@ -260,6 +265,7 @@ @@ -260,6 +265,7 @@
260 margin-left: 480px; 265 margin-left: 480px;
261 height: 800px; 266 height: 800px;
262 overflow-y: auto; 267 overflow-y: auto;
  268 + overflow-x: hidden;
263 background: #F0F0F0; 269 background: #F0F0F0;
264 border: 1px dashed; 270 border: 1px dashed;
265 box-shadow: 0px 0px 15px rgba(0,0,0,.8); 271 box-shadow: 0px 0px 15px rgba(0,0,0,.8);
@@ -270,6 +276,7 @@ @@ -270,6 +276,7 @@
270 width: 1150px; 276 width: 1150px;
271 height: 800px; 277 height: 800px;
272 overflow-y: auto; 278 overflow-y: auto;
  279 + overflow-x: hidden;
273 background: #F0F0F0; 280 background: #F0F0F0;
274 border: 1px dashed; 281 border: 1px dashed;
275 } 282 }