fe / yohobuy-portal-fe · Commits

Go to a project

Authored by liuyue
Commit 6752362c8cffa78683f05d626faef1b216419934 1 parent d38cfca4

封面 搭配 悬浮导航修改

Inline Side-by-side
Showing 6 changed files with 194 additions and 91 deletions
... ... @@ -192,4 +192,11 @@ $('.floatnav').on('click', 'li', function() {
$(window).scrollTop(scrollTop);
return false;
});
//导航样式
$('.floatnav').on('mouseenter', function() {
$('.floatnav').addClass('show');
}).on('mouseleave', function() {
$('.floatnav').removeClass('show');
});
\ No newline at end of file
... ...
... ... @@ -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;
$.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;
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;
}
});
$(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;
... ...
... ... @@ -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;
... ...
... ... @@ -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">
... ...
... ... @@ -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>
... ...
<div class="panel panel-default">
<div class="panel-heading">
<a class="netsale-position" href="javascript:;" name="position3"></a>
<div class="panel-btns" style="display: none;">
<a href="" class="panel-minimize tooltips" data-toggle="tooltip" title=""><i class="fa fa-minus"></i></a>
</div>
<h2 class="panel-title">封面设置</h2>
</div>
<div class="panel-body nopadding" id="fenmianWrap">
</div>
<div class="panel-footer">
<button class="btn btn-primary" id="fenMainSave">保存</button>
<div class="panel-heading">
<a class="netsale-position" href="javascript:;" name="position3"></a>
<div class="panel-btns" style="display: none;">
<a href="" class="panel-minimize tooltips" data-toggle="tooltip" title=""><i class="fa fa-minus"></i></a>
</div>
<h2 class="panel-title">封面设置</h2>
</div>
<div class="panel-body nopadding" id="fenmianWrap">
</div>
<div class="panel-footer">
<button class="btn btn-primary" id="fenMainSave">保存</button>
</div>
</div>
<script type="text/template" id="fenmianTemp">
[[each goodsList as item index]]
<div class="form-group">
<div class="col-sm-2">
<div class="goods-img">
<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>
<div class="col-sm-10">
<ul class="cover-image-list col-sm-12" 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>
</div>
</li>
[[/each]]
<li class="cover-image-item fileinput-button">
<div class="goods-img">
<a class="fileinput-button-icon" href="javascript:void(0);">+</a>
<input type="file" class="goods-img-upload fenmianfile" name="fenmianfile" data-index=[[index]]>
</div>
</li>
</ul>
<div class="cover-color">颜色封面：</div>
</div>
<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]]
<li class="cover-image-item fileinput-button">
<div class="goods-img">
<a class="fileinput-button-icon" href="javascript:void(0);">+</a>
<input type="file" class="goods-img-upload fenmianfile" name="fenmianfile" data-index=[[index]]>
</div>
</li>
</ul>
</div>
<div class="form-group">
<!-- <div class="form-group">
<div class="col-sm-2">
<div class="height40">颜色封面：</div>
</div>
... ... @@ -56,55 +75,53 @@
[[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>
[[/each]]
[[/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>
<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>
<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>
</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>
<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>
\ No newline at end of file
</script> -->
\ No newline at end of file
... ...