fe / yohobuy-portal-fe · Commits

Go to a project

Authored by dongjunjie
Commit 0cc6d9c6fd990cbb5f3920da41898d739cc80dec 1 parent 08f4337f

店铺装修

Inline Side-by-side
Showing 3 changed files with 128 additions and 85 deletions
... ... @@ -5,7 +5,7 @@ var $ = require('jquery'),
var g; //grid
var curDialogId; //当前打开的编辑弹层ID
var curPlatform = "shopWeb-pc"; //当前渲染页面用的模板名称
var curPlatform = "pc"; //当前渲染页面用的模板名称
var curTemplateType = "2"; //当前模板类型 1:基础模板，2:经典模板
var shopType = 1; //店铺类型 1：单品牌，2：多品牌
var shopOperate = 'view'; //操作 editor:可编辑， view：查看不可编辑
... ... @@ -28,6 +28,10 @@ var resourcesNew = {
"id":"",
"data": [{"shopSrc": defaultSrc, "detailSrc": defaultSrc, "isShowShopName": "N"}]
},
"shopTopBanner_base":{
"id":"",
"data": [{"shopSrc": defaultSrc, "detailSrc": defaultSrc, "isShowShopName": "N"}]
},
"navigationBar":{
"id":"",
"data": [{"name":"",url:""}, {"name":"",url:""}, {"name":"",url:""}]
... ... @@ -130,23 +134,32 @@ function getParams(){
$(".moduleTypeSelect").show().find("#templateSelect").removeAttr("disabled");
$(".moduleSubmite").show().siblings().hide();
}else if(shopOperate == 'view'){
$(".tabheader").hide();
$(".moduleTypeSelect").hide();
$(".moduleView").show().siblings().hide();
}else if(shopOperate == 'check'){
$(".tabheader").hide();
$(".moduleTypeSelect").show().find("#templateSelect").attr("disabled","disabled");
$(".moduleCheck").show().siblings().hide();
}
}
//json渲染模板
function showMain(){
// tab自动选中基础模板，经典模板
$('.tabheader .nav').find("li[data-toggle='"+ curTemplateType +"']").addClass("active");
// radio自动选中pc端或者app端
$('.moduleTypeView').find("input[name='brandLevel'][value='"+ curPlatform +"']").attr("checked","checked");
// 使用模板自动选择
$('#templateSelect').val(jsonMain.templateType);
$("input[name='brandLevel'][value='"+curTemplateType+"']").attr('checked',"checked");
if(curPlatform == "shopWeb-pc"){
//console.log(jsonMain);
$('#main').empty().html(common.util.__template2($("#"+curPlatform+"-"+curTemplateType).html(),jsonMain));
} else if(curPlatform == "shopWeb-app"){
$('#main').empty().html(common.util.__template2($("#"+curPlatform).html(),jsonMain));
//渲染装修模板
$('#main').empty().html(common.util.__template2($("#"+curTemplateType+"-"+curPlatform).html(),jsonMain));
//基础模板不显示pc端跟app端
if(curTemplateType == "1"){
$(".moduleTypeView").hide();
}else{
$(".moduleTypeView").show();
}
//单品牌，多品牌
if(shopType == 2){
... ... @@ -220,9 +233,14 @@ function findDecoration(){
common.util.__tip("店铺没有品牌，无法装修，请返回添加品牌！");
return;
}
//初始化模板类型
if(jsonMain.templateType && jsonMain.templateType != "0"){
curTemplateType = jsonMain.templateType;
}
//基础模板banner兼容
if(!jsonMain.resources.shopTopBanner_base){
jsonMain.resources.shopTopBanner_base = $.extend(true,{},resourcesNew.shopTopBanner_base);
}
//装修json克隆
jsonClone = $.extend(true,{},jsonMain);
... ... @@ -351,9 +369,36 @@ function checkDecoration(checkStatus,comment){
//弹层表单grid生成器
function gridInit(id){
switch (id){
//店铺顶部banner
//基础模板顶部banner
case "editor-banner-base":
g = new common.grid({
hash: false,
el:"#"+id,
columns:[
{display:"店铺banner图片", render:function(item){
return "<input type=file name='shopBannerImage' id='shopBannerImage_"+item.__index+"' value='"+item.shopSrc+"' />";
}},
{display:"是否显示店铺名称", render:function(item){
if(item.isShowShopName == "Y"){
return "<lable><input type='radio' name='isShowShopName' value='Y' checked='checked'>显示店铺名称</lable><br>" +
"<lable><input type='radio' name='isShowShopName' value='N'>不显示店铺名称</lable>";
}else{
return "<lable><input type='radio' name='isShowShopName' value='Y'>显示店铺名称</lable><br>" +
"<lable><input type='radio' name='isShowShopName' value='N' checked='checked'>不显示店铺名称</lable>";
}
}},
{display:"商品详情页banner图片", render:function(item){
return "<input type=file name='DetailbannerImage' id='DetailbannerImage_"+item.__index+"' value='"+item.detailSrc+"' />";
}}
]
});
g.__rows=""||jsonClone.resources.shopTopBanner_base.data;
g.init(g.__rows);
break;
//经典模板顶部banner
case "editor-banner":
if(curPlatform == "shopWeb-pc"){
if(curPlatform == "pc"){
g = new common.grid({
hash: false,
el:"#"+id,
... ... @@ -377,7 +422,7 @@ function gridInit(id){
});
g.__rows=""||jsonClone.resources.shopTopBanner.data;
}
if(curPlatform == "shopWeb-app"){
if(curPlatform == "app"){
g = new common.grid({
hash: false,
el:"#"+id,
... ... @@ -468,10 +513,10 @@ function gridInit(id){
}
]
});
if(curPlatform == "shopWeb-pc"){
if(curPlatform == "pc"){
g.__rows=""||jsonClone.resources.oneRowTwoColImages.data;
}
if(curPlatform == "shopWeb-app"){
if(curPlatform == "app"){
g.__rows=""||jsonClone.resources.oneRowTwoColImages_APP.data;
}
g.init(g.__rows);
... ... @@ -770,7 +815,7 @@ function gridInit(id){
}}
]
});
if(curPlatform == "shopWeb-pc"){
if(curPlatform == "pc"){
g.__rows=""||jsonClone.resources.hotProducts.data;
//右侧热销排名前20商品
if(jsonMain.resources.allHotProducts.data && jsonMain.resources.allHotProducts.data.length > 0){
... ... @@ -780,7 +825,7 @@ function gridInit(id){
$("#"+id+" .top20List").html("<font color='red'>*&nbsp;&nbsp;最新上架20条加载失败，请重新加载页面！</font>");
}
}
if(curPlatform == "shopWeb-app"){
if(curPlatform == "app"){
g.__rows=""||jsonClone.resources.hotProducts_APP.data;
//右侧热销排名前20商品
if(jsonMain.resources.allHotProducts_APP.data && jsonMain.resources.allHotProducts_APP.data.length > 0){
... ... @@ -800,29 +845,36 @@ function gridInit(id){
//弹层表单确定后刷新json数据，status参数：1：确定，0：取消
function freshJson(id,data,status){
switch (id){
case "editor-banner-base":
if(status == 1){
data[0].isShowShopName = $("input[name='isShowShopName']:checked").val();
cloneArr(data,jsonMain.resources.shopTopBanner_base.data);
}else if(status == 0){
cloneArr(jsonMain.resources.shopTopBanner_base.data,data);
}
break;
case "editor-banner":
if(status == 1){
data[0].isShowShopName = $("input[name='isShowShopName']:checked").val();
if(curPlatform == "shopWeb-app"){
jsonMain.resources.shopTopBanner_APP.isUsed = "Y"; // 用于提交审核时候校验app端是否维护店招
cloneArr(data,jsonMain.resources.shopTopBanner_APP.data);
}
if(curPlatform == "shopWeb-pc"){
if(curPlatform == "pc"){
cloneArr(data,jsonMain.resources.shopTopBanner.data);
/* app端与pc端单独配置，不取pc端的大图了
if(jsonMain.resources.shopTopBanner_APP.isUsed == "N"){
cloneArr(data,jsonMain.resources.shopTopBanner_APP.data);
cloneArr(data,jsonClone.resources.shopTopBanner_APP.data);
}
*/
}
}else if(status == 0){
if(curPlatform == "shopWeb-app"){
cloneArr(jsonMain.resources.shopTopBanner_APP.data,data);
if(curPlatform == "app"){
jsonMain.resources.shopTopBanner_APP.isUsed = "Y";
cloneArr(data,jsonMain.resources.shopTopBanner_APP.data);
}
if(curPlatform == "shopWeb-pc"){
}else if(status == 0){
if(curPlatform == "pc"){
cloneArr(jsonMain.resources.shopTopBanner.data,data);
}
if(curPlatform == "app"){
cloneArr(jsonMain.resources.shopTopBanner_APP.data,data);
}
}
break;
... ... @@ -844,24 +896,24 @@ function freshJson(id,data,status){
case "editor-smallPic":
if(status == 1){
if(curPlatform == "shopWeb-app"){
jsonMain.resources.oneRowTwoColImages_APP.isUsed = "Y";
cloneArr(sortJson(data,1),jsonMain.resources.oneRowTwoColImages_APP.data);
}
if(curPlatform == "shopWeb-pc"){
if(curPlatform == "pc"){
cloneArr(sortJson(data,1),jsonMain.resources.oneRowTwoColImages.data);
if(jsonMain.resources.oneRowTwoColImages_APP.isUsed == "N"){
cloneArr(sortJson(data,1),jsonMain.resources.oneRowTwoColImages_APP.data);
cloneArr(sortJson(data,1),jsonClone.resources.oneRowTwoColImages_APP.data);
}
}
}else if(status == 0){
if(curPlatform == "shopWeb-app"){
cloneArr(jsonMain.resources.oneRowTwoColImages_APP.data,data);
if(curPlatform == "app"){
jsonMain.resources.oneRowTwoColImages_APP.isUsed = "Y";
cloneArr(sortJson(data,1),jsonMain.resources.oneRowTwoColImages_APP.data);
}
if(curPlatform == "shopWeb-pc"){
}else if(status == 0){
if(curPlatform == "pc"){
cloneArr(jsonMain.resources.oneRowTwoColImages.data,data);
}
if(curPlatform == "app"){
cloneArr(jsonMain.resources.oneRowTwoColImages_APP.data,data);
}
}
break;
... ... @@ -925,24 +977,24 @@ function freshJson(id,data,status){
case "editor-hotProduct":
if(status == 1){
if(curPlatform == "shopWeb-app"){
jsonMain.resources.hotProducts_APP.isUsed = "Y";
cloneArr(sortJson(data,1),jsonMain.resources.hotProducts_APP.data);
}
if(curPlatform == "shopWeb-pc"){
if(curPlatform == "pc"){
cloneArr(sortJson(data,1),jsonMain.resources.hotProducts.data);
if(jsonMain.resources.hotProducts_APP.isUsed == "N"){
cloneArr(sortJson(data,1),jsonMain.resources.hotProducts_APP.data);
cloneArr(sortJson(data,1),jsonClone.resources.hotProducts_APP.data);
}
}
}else if(status == 0){
if(curPlatform == "shopWeb-app"){
cloneArr(jsonMain.resources.hotProducts_APP.data,data);
if(curPlatform == "app"){
jsonMain.resources.hotProducts_APP.isUsed = "Y";
cloneArr(sortJson(data,1),jsonMain.resources.hotProducts_APP.data);
}
if(curPlatform == "shopWeb-pc"){
}else if(status == 0){
if(curPlatform == "pc"){
cloneArr(jsonMain.resources.hotProducts.data,data);
}
if(curPlatform == "app"){
cloneArr(jsonMain.resources.hotProducts_APP.data,data);
}
}
break;
... ... @@ -954,28 +1006,31 @@ function freshJson(id,data,status){
function editorTipInit(id){
var tipHtml = "";
switch (id){
case "editor-banner-base":
tipHtml = "<span>提示：请上传像素1150*200的图片，图片大小不能超过500KB。</span>";
break;
case "editor-banner":
if(curPlatform == "shopWeb-pc"){
tipHtml = "<span>提示：请上传像素1150*150的图片，图片大小不能大于500KB。</span>";
if(curPlatform == "pc"){
tipHtml = "<span>提示：请上传像素1150*200的图片，图片大小不能超过500KB。</span>";
}
if(curPlatform == "shopWeb-app"){
tipHtml = "<span>提示：请上传像素640*200的图片，图片大小不能大于500KB。</span>";
if(curPlatform == "app"){
tipHtml = "<span>提示：请上传像素640*200的图片，图片大小不能超过500KB。</span>";
}
break;
case "editor-nav":
tipHtml = "<span>提示：标题名称最多5个汉字。</span>";
break;
case "editor-largePic":
tipHtml = "<span>提示：请上传像素660*358的图片，图片大小不能大于500KB，该图片会适配到APP端。</span>";
tipHtml = "<span>提示：请上传像素660*358的图片，图片大小不能超过500KB，该图片会适配到APP端。</span>";
break;
case "editor-largePic-app":
tipHtml = "<span>提示：由PC端适配，修改请到PC端修改。</span>";
break;
case "editor-smallPic":
if(curPlatform == "shopWeb-app"){
tipHtml = "<span>提示：请上传像素275*160的图片，图片大小不能大于500KB。</span>";
if(curPlatform == "app"){
tipHtml = "<span>提示：请上传像素275*160的图片，图片大小不能超过500KB。</span>";
}else{
tipHtml = "<span>提示：请上传像素300*174的图片，图片大小不能大于500KB。</span>";
tipHtml = "<span>提示：请上传像素300*174的图片，图片大小不能超过500KB。</span>";
}
break;
case "editor-brand":
... ... @@ -985,16 +1040,16 @@ function editorTipInit(id){
tipHtml = "<span>提示：【品牌一览】由PC端【品牌集合】适配，修改请到PC端【品牌集合】修改。</span>";
break;
case "editor-recommend":
tipHtml = "<span>提示：请上传像素150*150的图片，图片大小不能大于500KB，图片和标题会适配到APP的【热门品类】中。</span>";
tipHtml = "<span>提示：请上传像素150*150的图片，图片大小不能超过500KB，图片和标题会适配到APP的【热门品类】中。</span>";
break;
case "editor-recommend-app":
tipHtml = "<span>提示：【热门品类】由PC端【经典推荐】适配，修改请到PC端【经典推荐】修改。</span>";
break;
case "editor-signboard":
tipHtml = "<span>提示：请上传像素160*240的图片，图片大小不能大于500KB。</span>";
tipHtml = "<span>提示：请上传像素160*240的图片，图片大小不能超过500KB。</span>";
break;
case "editor-hotRecommend":
tipHtml = "<span>提示：请上传像素160*240的图片，图片大小不能大于500KB。</span>";
tipHtml = "<span>提示：请上传像素160*240的图片，图片大小不能超过500KB。</span>";
break;
case "editor-newGoodTab":
tipHtml = "<span>提示：最多编辑5个标签，标题名称最多5个汉字。</span>";
... ... @@ -1293,17 +1348,13 @@ function checkdate(startDate,endDate){
//pc跟app的tab选项事件
$(document).on("click",".tabheader .nav-tabs li",function(){
$(this).addClass('active').siblings('li').removeClass('active');
curPlatform = $(this).attr("data-toggle");
if(curPlatform == "shopWeb-app"){
$(".moduleTypeView").hide();
}else{
$(".moduleTypeView").show();
}
curTemplateType = $(this).attr("data-toggle");
curPlatform = "pc";
showMain();
})
//基础模板，经典模板切换
$(document).on("click","input[name=brandLevel]",function(){
curTemplateType = $("input[name=brandLevel]:checked").val();
curPlatform = $("input[name=brandLevel]:checked").val();
showMain();
})
//选择使用模板
... ... @@ -1317,14 +1368,6 @@ $(document).on("click","#saveModule",function(){
})
//提交审核
$(document).on("click","#submitModule",function(){
if(jsonMain.resources.shopTopBanner.data[0].shopSrc == defaultSrc){
common.util.__tip("PC端没有维护顶部banner！");
return;
}
if(jsonMain.resources.shopTopBanner_APP.isUsed == "N"){
common.util.__tip("APP端没有维护顶部banner！");
return;
}
if(jsonMain.templateType == "0"){
common.util.__tip("请选择展示使用模板！");
$("#templateSelect").focus().addClass("error");
... ...
... ... @@ -22,13 +22,13 @@ app端店铺模板css
/*------------------------banner--------------------------*/
.contentpanel-app .model-banner{
width: 100%;
height: 150px;
height: 200px;
position: relative;
overflow: hidden;
}
.contentpanel-app .model-banner img{
position: absolute;
clip: rect(0,640px,150px,0);
clip: rect(0,640px,200px,0);
}
.contentpanel-app .model-banner h1{
position: absolute;
... ...
<div class="tabheader">
<ul class="nav nav-tabs">
<li data-toggle="shopWeb-pc" class="active"><a href="javascript:">店铺装修(PC端)</a></li>
<li data-toggle="shopWeb-app"><a href="javascript:">店铺装修(移动端)</a></li>
<li data-toggle="1"><a href="javascript:">基础模板</a></li>
<li data-toggle="2"><a href="javascript:">经典模板</a></li>
</ul>
</div>
... ... @@ -12,24 +12,24 @@
</div>
<div class="media-body">
<ul class="breadcrumb">
<li><a href=""><i class="glyphicon glyphicon-home"></i></a></li>
<li><a href="">店铺管理</a></li>
<li><a href="javascript:"><i class="glyphicon glyphicon-home"></i></a></li>
<li><a href="javascript:">店铺管理</a></li>
<li>店铺装修管理</li>
</ul>
<div>
<div class="col-sm-3">
<h4>选择模板</h4>
<h4>装修模板</h4>
</div>
<div class="col-sm-3">
<div class="moduleTypeView">
<label class="radio-inline"><input type="radio" name="brandLevel" value="1">基础模板</label>
<label class="radio-inline"><input type="radio" name="brandLevel" value="2">经典模板</label>
<label class="radio-inline"><input type="radio" name="brandLevel" value="pc">PC端</label>
<label class="radio-inline"><input type="radio" name="brandLevel" value="app">APP端</label>
</div>
</div>
<div class="col-sm-3">
<div class="moduleTypeSelect" style="display: none; margin-top: -10px">
<label>PC端使用模板：</label>
<label>使用模板：</label>
<select id="templateSelect" style="width: 120px; display: inline-block" class="form-control">
<option value="0" selected="selected">--选择模板--</option>
<option value="1">基础模板</option>
... ... @@ -60,13 +60,13 @@
<div id="main" class="contentpanel"></div>
<!--pc端店铺基础模板-->
<script type="text/template" id="shopWeb-pc-1">
<script type="text/template" id="1-pc">
<div class="model-wrap contentpanel-pc">
<!--banner-->
<div class="model-banner model-editor" data-toggle="editor-banner" data-title="顶部图片编辑">
<img src="[[resources.shopTopBanner.data[0].shopSrc]]">
[[if resources.shopTopBanner.data[0].isShowShopName == "Y"]]
<div class="model-banner model-editor" data-toggle="editor-banner-base" data-title="顶部图片编辑">
<img src="[[resources.shopTopBanner_base.data[0].shopSrc]]">
[[if resources.shopTopBanner_base.data[0].isShowShopName == "Y"]]
<h1>[[shopName]]</h1>
[[/if]]
</div>
... ... @@ -95,7 +95,7 @@
</script>
<!--pc端店铺经典模板-->
<script type="text/template" id="shopWeb-pc-2">
<script type="text/template" id="2-pc">
<div class="model-wrap contentpanel-pc">
<!--banner-->
... ... @@ -260,7 +260,7 @@
</script>
<!--app端店铺模板-->
<script type="text/template" id="shopWeb-app">
<script type="text/template" id="2-app">
<div class="model-wrap contentpanel-app">
<!--banner-->
<div class="model-banner model-editor" data-toggle="editor-banner" data-title="顶部图片编辑">
... ...