封面搭配悬浮导航修改

liuyue
Commit 6752362c8cffa78683f05d626faef1b216419934 1 parent d38cfca4
Showing 6 changed files with 159 additions and 56 deletions
client/js/goods/netsale-edit.js
client/js/goods/partials/editor_recommend.js
client/sass/module/_edit.scss
server/views/pages/goods/netsale-edit.html
server/views/partials/netsale/close-match.html
server/views/partials/netsale/fenmian.html
--- a/client/js/goods/netsale-edit.js
View file @6752362
+++ b/client/js/goods/netsale-edit.js
View file @6752362
@@ -193,3 +193,10 @@ $('.floatnav').on('click', 'li', function() {
 	$(window).scrollTop(scrollTop);
 	return false;
 });
+
+//导航样式
+$('.floatnav').on('mouseenter', function() {
+	$('.floatnav').addClass('show');
+}).on('mouseleave', function() {
+	$('.floatnav').removeClass('show');
+});
--- a/client/js/goods/partials/editor_recommend.js
View file @6752362
+++ b/client/js/goods/partials/editor_recommend.js
View file @6752362
@@ -133,7 +133,7 @@ var Bll = {
 			var d = new common.dialog({
 				title: title,
-				width: '60%',
+				width: '800px',
 				content: common.util.__template2($("#wqt-template1").html(), item),
 				button: [{
 					value: "提交",
@@ -232,7 +232,7 @@ $(document).on("click", "#dapeiTable .edit", function() {
 		}
 	}, function(data) {
 		Bll.toast("添加搭配", data.data, "/netSale/updateCollocation");
-	});
+	}, true);
 	// item.infoStr=[{"top":223,"left":380,"id":"ffffff"},{"top":454,"left":309,"id":"ggggg"}];
 	// Bll.toast("添加搭配",item,"/netSale/updateCollocation");
 });
@@ -272,52 +272,67 @@ common.edit.ajaxfileupload(".fenmianfile", {
 			item.push(data);
 			goodsList[$(this).data("index")].goodsImagesList = item;
 			$(this).parents(".cover-image-item").before(common.util.__template2($("#fenmianImgTemp").html(), data));
-			$(this).parents(".form-group").next().find('.cover-color').append($($('#colorCoverTemp').html()));
 		} else {
 			common.util.__tip(response.message);
 		}
 	}
 });
-
-$('.cover-color').on("click", ".btn-metro", function() {
-	var index = $(this).parents(".form-group").prev().find('.cover-image-list').data("index");
-	var index1 = $(this).parents(".cover-color-box").index();
+//颜色封面点击事件
+$('.cover-image-list').on("click", ".btn-metro", function() {
+	var index = $(this).parents(".cover-image-list").data("index");
+	var index1 = $(this).parents(".cover-image-item").index();
 	var item = goodsList[index].goodsImagesList[index1];
-	var $groups = $(this).parents(".cover-color-box");
 	var colorIndex = $(this).index();
 	if ($(this).hasClass('info')) {
 		$(this).removeClass('info');
 	} else {
-		$groups.siblings('.cover-color-box').each(function() {
+		$(this).parents('.cover-image-item').siblings().each(function() {
 			$(this).find('.btn-metro').eq(colorIndex).removeClass('info');
 		});
-
 		$(this).siblings('.btn-metro').removeClass('info').end().addClass('info');
 	}
-	item.isDefault = $groups.find('.btn-metro').eq(0).hasClass('info') ? 'Y' : 'N';
+	var isDefault = $(this).parents('.cover-color').find('.btn-metro').eq(0).hasClass('info') ? 'Y' : 'N';
+	var genderCover = $(this).parents('.cover-color').find('.info').index() >= 0 ? $(this).parents('.cover-color').find('.info').index() : 0;
-	if ($groups.find('.btn-metro').eq(1).hasClass('info')) {
-		item.genderCover = 1;
-	} else if (item.genderCover = $groups.find('.btn-metro').eq(2).hasClass('info')) {
-		item.genderCover = 2;
-	} else {
-		item.genderCover = 0;
+	$.each(goodsList[index].goodsImagesList, function(i, value) {
+		if (value.genderCover == genderCover) {
+			value.genderCover = 0;
 		}
+		if (value.isDefault == isDefault) {
+			value.isDefault = 'N';
+		}
+	});
+
+	item.genderCover = genderCover;
+	item.isDefault = isDefault;
+
 });
-$(document).on("click", ".goods-color a", function() {
+//商品封面点击事件
+$(document).on("click", ".cover-goods a", function() {
 	var index = $(this).data("index");
 	var item = goodsList[index];
 	if ($(this).hasClass("info")) {
 		$(this).removeClass("info");
 	} else {
-		$('.goods-color a').removeClass("info");
+		$('.cover-goods a').removeClass("info");
 		$(this).addClass("info");
 	}
 	item.isDefault = $(this).hasClass("info") ? "Y" : "N";
 });
+
+//封面图删除
+$(document).on('click', '.remove-item-btn', function() {
+	var index = $(this).parents(".cover-image-list").data("index");
+	var index1 = $(this).parents(".cover-image-item").index();
+	$(this).parents('.cover-image-item').remove();
+	goodsList[index].goodsImagesList.splice(index1, 1);
+	console.log(goodsList[index].goodsImagesList);
+});
+
+//单独保存封面
 $(document).on("click", "#fenMainSave", function() {
 	var data = GOLABDATA.fire("fenmian");
@@ -333,8 +348,6 @@ GOLABDATA.on("fenmian", function() {
 		goodsImagesBoList: []
 	};
-
-
 	$.each(goodsList, function(index, item) {
 		if (item.isDefault == "Y") {
 			map.productSkc = item.productSkc;
--- a/client/sass/module/_edit.scss
View file @6752362
+++ b/client/sass/module/_edit.scss
View file @6752362
@@ -39,7 +39,7 @@ input[type=date], input[type=time], input[type=datetime-local], input[type=month
     .goods-img {
-        margin: 0 auto;
+        margin: 10px auto 0;
         border: 2px dashed #CCC;
     }
@@ -50,15 +50,24 @@ input[type=date], input[type=time], input[type=datetime-local], input[type=month
 }
 .cover-color {
-    .cover-color-box {
-        float: left;
-        width: 135px;
-    }
+    text-align: center;
+    height: 40px;
+    line-height: 40px;
     .btn {
         padding: 2px 5px;
     }
 }
+.fm-side {
+    width: 110px;
+    .cover-color {
+        text-align: left;
+    }
+    .goods-img {
+        margin: 10px 0 0;
+    }
+}
+
 .goods-img {
     position: relative;
     width: 110px;
@@ -76,6 +85,19 @@ input[type=date], input[type=time], input[type=datetime-local], input[type=month
             max-height: 100%;
         }
     }
+
+    .remove-item-btn {
+        position: absolute;
+        font-size: 20px;
+        top: -10px;
+        right: -10px;
+        cursor: pointer;
+        color: #ccc;
+
+        &:hover {
+            color: #000;
+        }
+    }
 }
 .poseditimg{
     position: relative;
@@ -96,6 +118,12 @@ input[type=date], input[type=time], input[type=datetime-local], input[type=month
         }
     }
 }
+
+#dapei-form {
+    label {
+        min-width: 60px;
+    }
+}
 .btn.info{
     color: #fff;
     background-color: #5bc0de;
@@ -105,9 +133,11 @@ input[type=date], input[type=time], input[type=datetime-local], input[type=month
 .floatnav{
     padding: 0;
     position: fixed;
-    right: 20px;
-    top: 20%;
+    right: 0;
+    top: 50%;
     z-index: 999;
+    margin: -280px 0 0;
+    transform: translateX(150px);
     ul {
         padding: 0;
@@ -152,8 +182,42 @@ input[type=date], input[type=time], input[type=datetime-local], input[type=month
         }
     }
+
+    .glyphicon {
+        position: absolute;
+        font-size: 20px;
+        width: 30px;
+        height: 40px;
+        background: #f2dede; 
+        border-radius: 10px 0 0 10px;
+        border: 1px solid #ebccd1;
+        left: -30px;
+        top: 50%;
+        margin: -20px 0 0 0;
+        color: #fff;
+        text-align: center;
+        line-height: 40px;
+        cursor: pointer;
+
+        &.glyphicon-chevron-right {
+            display: none;
+        }
+    }
 }
+.floatnav.show {
+    transform: translateX(0);
+    transition: transform .5s;
+    
+    .glyphicon-chevron-right {
+        display: inline;
+    }
+    .glyphicon-chevron-left {
+        display: none;
+    }
+    
+
+}
 .netsale-position {
     position: absolute;
--- a/server/views/pages/goods/netsale-edit.html
View file @6752362
+++ b/server/views/pages/goods/netsale-edit.html
View file @6752362
@@ -97,6 +97,8 @@
             </ul>
         </li>
     </ul>
+    <i class="glyphicon glyphicon-chevron-right"></i>
+    <i class="glyphicon glyphicon-chevron-left"></i>
 </div>
 <script type="text/template" id="picDialogTemp">
--- a/server/views/partials/netsale/close-match.html
View file @6752362
+++ b/server/views/partials/netsale/close-match.html
View file @6752362
@@ -37,20 +37,20 @@
         <div class="col-sm-4">
             <div class="rows" id="dapei-form">
                 <div class="form-group">
-                    <label for="endTime" class="col-sm-2 control-label"><i class="red">*</i> 介绍</label>
-                    <div class="col-sm-10">
+                    <label class="control-label pull-left"><i class="red">*</i> 介绍</label>
+                    <div class="pull-left" style="width: 160px;">
                         <input type="text" id="content" class="form-control panel-input hasDatepicker" placeholder="介绍" value="[[content]]" required>
                     </div>
                 </div>
                 <div class="form-group">
-                    <label for="endTime" class="col-sm-2 control-label"><i class="red">*</i> 图片</label>
-                    <div class="col-sm-10">
+                    <label class="control-label pull-left"><i class="red">*</i> 图片</label>
+                    <div class="pull-left" style="width: 160px;">
                         <input type="file" id="imageUrl" name="imageUrl" value="[[imageUrl]]" required/>
                     </div>
                 </div>
                 <div class="form-group">
-                    <label for="endTime" class="col-sm-2 control-label"><i class="red">*</i> 排序</label>
-                    <div class="col-sm-10">
+                    <label class="control-label pull-left"><i class="red">*</i> 排序</label>
+                    <div class="pull-left" style="width: 160px;">
                      <input type="number" id="orderBy" class="form-control panel-input hasDatepicker" placeholder="排序" value="[[orderBy]]" required>
                     </div>
                 </div>
--- a/server/views/partials/netsale/fenmian.html
View file @6752362
+++ b/server/views/partials/netsale/fenmian.html
View file @6752362
@@ -13,24 +13,44 @@
     <div class="panel-footer">
         <button class="btn btn-primary" id="fenMainSave">保存</button>
     </div>
-    </div>
+</div>
+
 <script type="text/template" id="fenmianTemp">
 [[each goodsList as item index]]
     <div class="form-group">
-        <div class="col-sm-2">
+        <div class="fm-side col-sm-2">
              <div class="goods-img">
                 <p>SKC: [[item.productSkc]]</p>
                 <p>[[item.goodsName]]：</p>
-                <p>[[item.factoryGoodsName]]</p>
+                <p>[[item.factoryGoodsName || '']]</p>
             </div>
-            
+            <div class="cover-color">颜色封面：</div>
         </div>
-        <div class="col-sm-10">
-            <ul class="cover-image-list col-sm-12" data-index=[[index]]>
+        <ul class="cover-image-list col-sm-10" style="padding: 0;margin: 0;" data-index=[[index]]>
             [[each item.goodsImagesList as _item _index]]
             <li class="cover-image-item fileinput-button" data-index=[[_index]]>
                 <div class="goods-img">
                    <a class="fileinput-button-icon" href="javascript:void(0);"><img src="[[_item.imageUrl]]"></a>
+                   <i class="remove-item-btn glyphicon glyphicon-remove-circle"></i>
+                </div>
+                <div class="cover-color">
+                    [[if _item.isDefault=="Y"]]
+                        <a href="javascript:;" class="btn btn-default btn-metro info">默认</a>
+                    [[else]]
+                        <a href="javascript:;" class="btn btn-default btn-metro">默认</a>
+                    [[/if]]
+
+                    [[if _item.genderCover==1]]
+                        <a href="javascript:;" class="btn btn-default btn-metro info">男封</a>
+                    [[else]]
+                        <a href="javascript:;" class="btn btn-default btn-metro">男封</a>
+                    [[/if]]
+
+                    [[if _item.genderCover==2]]
+                        <a href="javascript:;" class="btn btn-default btn-metro info">女封</a>
+                    [[else]]
+                        <a href="javascript:;" class="btn btn-default btn-metro">女封</a>
+                    [[/if]]
                 </div>
             </li>
             [[/each]]
@@ -42,8 +62,7 @@
             </li>    
         </ul>
     </div>
-    </div>
-    <div class="form-group">
+    <!-- <div class="form-group">
         <div class="col-sm-2">
             <div class="height40">颜色封面：</div>
         </div>
@@ -70,41 +89,39 @@
                     [[/if]]
                     </div>
                 [[/each]]         
-
-                        
-            </div>
             </div>
         </div>
+       </div> -->
     <div class="form-group">
-      <div class="col-sm-2">
-          <div class="goods-color height40">商品封面：</div>
-      </div>
-       <div class="col-sm-10">
-            <div class="goods-color">
+        <div class="fm-side col-sm-2">商品封面：</div>
+        <div class="cover-goods col-sm-10">
             [[if item.isDefault=="Y"]]
             <a href="javascript:;" class="btn btn-default btn-metro info" data-index=[[index]]>设置默认</a>
             [[else]]
             <a href="javascript:;" class="btn btn-default btn-metro" data-index=[[index]]>设置默认</a>
             [[/if]]
-                                <!-- <a href="javascript:;" class="btn btn-default btn-metro">调用图片</a> -->
-            </div>
         </div>
     </div>
 [[/each]]
-
 </script>
 <script type="text/template" id="fenmianImgTemp">
-     <li class="cover-image-item fileinput-button" data-index=[[__index]]>
+    <li class="cover-image-item fileinput-button" data-index=[[_index]]>
         <div class="goods-img">
             <a class="fileinput-button-icon" href="javascript:void(0);"><img src="[[imageUrl]]"></a>
+            <i class="remove-item-btn glyphicon glyphicon-remove-circle"></i>
+        </div>
+        <div class="cover-color">
+            <a href="javascript:;" class="btn btn-default btn-metro">默认</a>
+            <a href="javascript:;" class="btn btn-default btn-metro">男封</a>
+            <a href="javascript:;" class="btn btn-default btn-metro">女封</a>
         </div>
     </li>
 </script>
-<script type="text/template" id="colorCoverTemp">
+<!-- <script type="text/template" id="colorCoverTemp">
     <div class="cover-color-box height40">
         <a href="javascript:;" class="btn btn-default btn-metro">默认</a>
         <a href="javascript:;" class="btn btn-default btn-metro">男封</a>
         <a href="javascript:;" class="btn btn-default btn-metro">女封</a>
     </div>
-</script>
+</script> -->