fe / yohobuy-portal-fe2 · Commits

Go to a project

Authored by leo
Commit 5fe3fb2943fc3c4dfb259fab15bba9415be99d52 1 parent addf23a2

Update: PC端增加轮播图模块

Inline Side-by-side
Showing 7 changed files with 250 additions and 111 deletions
... ... @@ -37,10 +37,10 @@
<!-- 轮播图 -->
[[if item.moduleType == 'CarouselImage']]
[[if item.moduleData]]
<div class="app-carousel-image modular-editor" data-type="CarouselImage" data-title="编辑轮播图模块" data-index="[[index]]"
<div class="app-carousel-image modular-editor carouse-animation" data-type="CarouselImage" data-title="编辑轮播图模块" data-index="[[index]]"
style="[[item.moduleData.properties.isModuleMargin == 0 ? 'margin-bottom: 0;' : '']]">
[[each item.moduleData.data as data _index]]
<img src="[[data.pic]]" alt="#" class="img-item" style="[[_index == 0 ? 'display: block;' : '']]">
<img src="[[data.pic]]" alt="#" class="img-item" style="[[_index == 0 ? 'display: inline;' : '']]">
[[/each]]
</div>
[[else]]
... ...
<!-- PC模板渲染 -->
<script type="text/template" id="pc-template">
<div class="pc-template-area">
<div class="pc-template">
<!-- 1150区域 -->
[[each data as item index]]
<!-- 店招 -->
[[if item.moduleType == 'ShopBanner']]
[[if item.moduleData]]
<div class="modular-editor pc-shop-banner" non-delete="true" non-added="true" data-type="ShopBanner" data-title="编辑店招模块" data-index="[[index]]">
<img src="[[item.moduleData.data[0].pic]]" alt="#" class="img-item">
</div>
[[else]]
<div class="modular-editor pc-shop-banner" non-delete="true" non-added="true" data-type="ShopBanner" data-title="编辑店招模块" data-index="[[index]]">
<img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
</div>
[[/if]]
<div class="pc-template">
<!-- 1150区域 -->
[[each data as item index]]
<!-- 店招 -->
[[if item.moduleType == 'ShopBanner']]
[[if item.moduleData]]
<div class="modular-editor pc-shop-banner" non-delete="true" non-added="true" data-type="ShopBanner" data-title="编辑店招模块" data-index="[[index]]">
<img src="[[item.moduleData.data[0].pic]]" alt="#" class="img-item">
</div>
[[else]]
<div class="modular-editor pc-shop-banner" non-delete="true" non-added="true" data-type="ShopBanner" data-title="编辑店招模块" data-index="[[index]]">
<img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
</div>
[[/if]]
<!-- 导航 -->
[[if item.moduleType == 'ShopNavbar']]
<div class="pc-shop-navbar modular-editor" non-delete="true" non-added="true" data-type="ShopNavbar" data-title="编辑导航条" data-index="[[index]]">
<ul>
<li><a href="javascript:;">店铺首页</a></li>
<li><a href="javascript:;">全部商品</a></li>
<li><a href="javascript:;">人气单品</a></li>
<li><a href="javascript:;">新品上架</a></li>
[[if item.moduleData]]
[[each item.moduleData.data as data _index]]
<li><a href="javascript:;">[[data.text]]</a></li>
[[/each]]
[[/if]]
</ul>
</div>
[[/if]]
<!-- 导航 -->
[[if item.moduleType == 'ShopNavbar']]
<div class="pc-shop-navbar modular-editor" non-delete="true" non-added="true" data-type="ShopNavbar" data-title="编辑导航条" data-index="[[index]]">
<ul>
<li><a href="javascript:;">店铺首页</a></li>
<li><a href="javascript:;">全部商品</a></li>
<li><a href="javascript:;">人气单品</a></li>
<li><a href="javascript:;">新品上架</a></li>
[[if item.moduleData]]
[[each item.moduleData.data as data _index]]
<li><a href="javascript:;">[[data.text]]</a></li>
[[/each]]
[[/if]]
</ul>
</div>
[[/if]]
[[/each]]
<!-- 160区域 -->
<div class="left-area">
[[each data as item index]]
[[if item.moduleType == 'ProductSort']]
<div class="product-sort">
<img src="/static/assets/images/decorator/product-sort.png" alt="#">
</div>
[[/if]]
[[/each]]
<!-- 160区域 -->
<div class="left-area">
<div class="product-sort">
<img src="/static/assets/images/decorator/product-sort.png" alt="#">
<!-- 可拖拽区域 -->
<div id="pc-dragable-160" data-style-area="1">
[[each data as item index]]
<!-- 整图 -->
[[if item.moduleType == 'ImageSet']]
<div class="modular-editor pc-image-set" data-type="ImageSet" data-title="编辑整图模块" data-index="[[index]]">
[[if item.moduleData]]
[[each item.moduleData.data as data _index]]
<img src="[[data.pic]]" alt="#" class="img-item">
[[/each]]
[[else]]
<img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
[[/if]]
</div>
<!-- 可拖拽区域 -->
<div id="pc-dragable-160" data-style-area="1">
[[each data as item index]]
<!-- 整图 -->
[[if item.moduleType == 'ImageSet']]
<div class="modular-editor pc-image-set" data-type="ImageSet" data-title="编辑整图模块" data-index="[[index]]">
[[if item.moduleData]]
[[each item.moduleData.data as data _index]]
[[/if]]
<!-- 小图文 -->
[[if item.moduleType == 'Teletext']]
<div class="modular-editor pc-tele-text" data-type="Teletext" data-title="编辑小图文模块" data-index="[[index]]">
[[if item.moduleData]]
[[each item.moduleData.data as data _index]]
<div class="tele-text-item">
<div class="classic-name">
<div class="title">[[data.text]]</div>
</div>
<img src="[[data.pic]]" alt="#" class="img-item">
[[/each]]
[[else]]
<img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
[[/if]]
</div>
[[/if]]
<!-- 小图文 -->
[[if item.moduleType == 'Teletext']]
<div class="modular-editor pc-tele-text" data-type="Teletext" data-title="编辑小图文模块" data-index="[[index]]">
[[if item.moduleData]]
[[each item.moduleData.data as data _index]]
<div class="tele-text-item">
<div class="classic-name">
<div class="title">[[data.text]]</div>
</div>
<img src="[[data.pic]]" alt="#" class="img-item">
[[/each]]
[[else]]
<div class="tele-text-item">
<div class="classic-name">
<div class="title">文字内容</div>
</div>
[[/each]]
[[else]]
<div class="tele-text-item">
<div class="classic-name">
<div class="title">文字内容</div>
</div>
<div class="img-area">
<img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
</div>
<div class="img-area">
<img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
</div>
[[/if]]
</div>
[[/if]]
[[/each]]
</div>
<div class="btn add-modular-area" title="添加模块" data-style-area="1">
<span class="glyphicon glyphicon-plus" style="top: -4px;"></span>
</div>
[[/if]]
[[/each]]
</div>
<div class="btn add-modular-area" title="添加模块" data-style-area="1">
<span class="glyphicon glyphicon-plus" style="top: -4px;"></span>
</div>
</div>
<!-- 975区域 -->
<div class="right-area" data-style-area="2">
<!-- 可拖拽区域 -->
<div id="pc-dragable-975">
</div>
<div class="btn add-modular-area" title="添加模块" data-style-area="2">
<span class="glyphicon glyphicon-plus" style="top: -4px;"></span>
<!-- 975区域 -->
<div class="right-area" data-style-area="2">
<!-- 可拖拽区域 -->
<div id="pc-dragable-975">
[[each data as item index]]
[[if item.moduleType == 'PCCarouselImage']]
<div class="modular-editor pc-carouse-image" data-type="PCCarouselImage" data-title="编辑轮播图模块" data-index="[[index]]">
[[if item.moduleData]]
<div class="left carouse-animation">
[[each item.moduleData.data as data _index]]
[[if _index > 1]]
<img src="[[data.pic]]" alt="#" class="img-item" style="[[_index == 2 ? 'display: inline;' : '']]">
[[/if]]
[[/each]]
</div>
<div class="right">
<img src="[[item.moduleData.data[0].pic]]" alt="#">
<img src="[[item.moduleData.data[1].pic]]" alt="#" class="img-item">
</div>
[[else]]
<img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
[[/if]]
</div>
[[/if]]
[[/each]]
</div>
<div class="btn add-modular-area" title="添加模块" data-style-area="2">
<span class="glyphicon glyphicon-plus" style="top: -4px;"></span>
</div>
</div>
</div>
... ...
... ... @@ -25,7 +25,7 @@ var defaultModuleData = [
moduleType: "ShopNavbar"
},
{
dataValid: false,
dataValid: true,
moduleType: "ProductSort"
}
];
... ... @@ -71,6 +71,7 @@ var Bll = {
} else {
Bll.renderDecoratorAppTemplate();
}
Bll.handleCarouseAnimation();
Bll.addEditorIcon();
// 注册模块校验器
... ... @@ -90,13 +91,17 @@ var Bll = {
Bll.renderDecoratorAppTemplate();
}
Bll.handleCarouseAnimation();
Bll.addEditorIcon();
// 调整焦点位置
var editor = $('.modular-editor').get(index - 1);
var offset = $(editor).offset();
if(+t.active) {
// 处理PC
$('.pc-template').animate({
scrollTop: offset.top
}, 0);
} else {
$('.app-template').animate({
scrollTop: offset.top
... ... @@ -221,22 +226,22 @@ var Bll = {
}
});
// 处理轮播图
$('.modular-editor').each(function() {
let type = $(this).data('type');
if(type == 'CarouselImage') {
var imgs = $(this).find('img');
if(imgs.length > 1) {
let index = 0;
setInterval(function() {
index++;
index %= imgs.length;
$(imgs).eq(index).fadeIn().siblings().fadeOut();
$(imgs).eq(index).css('display', 'block'); // 解决删除模块后，img的display被设置为"inline"的问题
}, 3000)
}
}
});
},
/**
* 给轮播图模块增加动画效果
*/
handleCarouseAnimation: function() {
let carouseIamges = $('.carouse-animation').find('img');
if(carouseIamges && carouseIamges.length > 1) {
let index = 0;
setInterval(function() {
$(carouseIamges).eq(index).css('display', 'none');
index++;
index %= carouseIamges.length;
$(carouseIamges).eq(index).fadeIn().siblings().fadeOut();
}, 3000)
}
},
/**
... ... @@ -714,6 +719,68 @@ var Bll = {
Bll.moduleGrid.__rows = Bll.getModuleData(module);
Bll.moduleGrid.init(Bll.moduleGrid.__rows);
break;
case "PCCarouselImage":
// 添加一行
$('.editorTitle').append('<div><a class="btn btn-primary add-moduledata-btn" javascript=":;" data-limit="7" tips="最多只能添加五张轮播图!">添加一行</div>');
Bll.moduleGrid = new grid({
hash: false,
el: selector,
columns: [
{
display: '',
render: function(item) {
if(item.__index === 0) {
return '小图';
} else if(item.__index === 2) {
return '轮播图';
} else {
return '';
}
}
},
{
display: '关联类型',
render: function(item) {
return common.util.__template2($('#link-type-template').html(), {data: item, index: item.__index});
}
},
{
display: '关联到',
render: function(item) {
return common.util.__template2($('#link-resource-template').html(), {data: item, index: item.__index, categoryList: Bll.shopCategoryList});
}
},
{
display: '图片地址',
render: function(item) {
return common.util.__template2($('#upload-image-template').html(), {item: item});
}
},
{
display: '操作',
render: function(item) {
if(item.__index < 3) {
return '';
} else {
return '<a href="javascript:;" class="del-moduledata-btn" data-index="' + item.__index+ '" title="删除数据"><span class="glyphicon glyphicon-remove"></span></a>';
}
}
}
],
onBodyLoad: function() {
$('.upload-image').each(function(index) {
if(index < 2) {
$(this).attr('spec', '300*174');
} else {
$(this).attr('spec', '660*358');
}
});
}
});
Bll.moduleGrid.__rows = Bll.getModuleData(module);
Bll.moduleGrid.init(Bll.moduleGrid.__rows);
break;
};
var e = new common.edit('.editorTitle',{bucket:"yhb-img02"});
... ... @@ -988,6 +1055,7 @@ var Bll = {
};
break;
// 三张图
case "PCCarouselImage":
case "TripleImage":
moduleData = {
data: [
... ... @@ -1109,6 +1177,8 @@ var Bll = {
return "请上传尺寸为320*480，大小不超过500KB的图片，最多12张，支持GIF、JPG、JPEG格式!";
case "Teletext":
return "请上传尺寸为150*150，大小不超过500KB的图片，最多12张，支持GIF、JPG、JPEG格式!";
case "PCCarouselImage":
return "小图模块图片尺寸为300*174，轮播图模块图片尺寸为660*358，最多五张。图片大小均不超过500KB，支持GIF、JPG、JPEG格式!";
}
},
... ... @@ -1462,6 +1532,7 @@ var publishDecoratorTemplate = function() {
});
};
// 点击"应用"，切换模板
var switchTemplate = function() {
if(Bll.changedModuleMonitor > 0) {
common.dialog.confirm('温馨提示', '装修内容有更新，是否保存为模板?',
... ... @@ -1627,8 +1698,12 @@ $(document).on('change', '.title-text', function() {
// 添加一行 事件
$(document).on('click', '.add-moduledata-btn', function() {
let limit = $(this).data('limit');
let tips = $(this).attr('tips');
if(Bll.moduleGrid.__rows.length >= limit) {
common.util.__tip('最多只能添加' + limit + '条数据!', 'warning');
if(tips === undefined) {
tips = '最多只能添加' + limit + '条数据!'
}
common.util.__tip(tips, 'warning');
return false;
}
Bll.moduleGrid.__rows.push({pic: "", text: "", resource: "", linkType: ""});
... ...
... ... @@ -55,6 +55,13 @@ base.prototype = {
description: '添加图片+文字模块，最多12张，一列展示。',
type: 'Teletext'
}
],
2: [
{
name: '轮播图',
description: '添加一张或者多张轮播图，以及两张小图，左右展示。',
type: 'PCCarouselImage'
}
]
},
... ...
... ... @@ -183,7 +183,6 @@
width: 375px;
height: 117px;
display: none;
position: absolute;
}
/* 轮播图中删除按钮样式 */
... ...
... ... @@ -146,6 +146,7 @@
background: #FFFFFF;
border: 1px solid #E7E7E7;
box-shadow: 0px 0px 15px rgba(0,0,0,.2);
overflow: hidden;
}
.left-footer .save-btn {
... ... @@ -265,13 +266,12 @@
}
.pc-template {
/*margin-top: 38px;*/
margin-top: 38px;
width: 1150px;
height: 800px;
overflow-y: auto;
height: 1800px;
background: #F0F0F0;
border: 1px dashed;
/*box-shadow: 0px 0px 15px rgba(0,0,0,.8);*/
}
/* 适配笔记本电脑 */
... ... @@ -279,12 +279,20 @@
.app-template {
height: 680px;
}
.pc-template {
height: 680px;
}
}
@media screen and (max-device-height: 800px) {
.app-template {
height: 600px;
}
.pc-template {
height: 800px;
}
}
@media screen and (max-device-width: 1920px) {
... ...
/* 模块化装修，PC端样式 */
.pc-template-area {
margin-top: 38px;
height: 100%;
overflow-y: auto;
}
.pc-template .pc-shop-banner {
height: 150px;
margin-bottom: 0;
... ... @@ -130,4 +123,38 @@
margin-top: 5px;
height: 50px;
background: #F5F5F5;
}
/* 轮播图 */
.right-area .pc-carouse-image {
width: 100%;
height: 358px;
text-align: center;
}
/* 左侧轮播区域 */
.pc-carouse-image .left {
width: 660px;
height: 100%;
float: left;
}
.pc-carouse-image .left .img-item {
width: 660px;
height: 100%;
display: none;
}
.pc-carouse-image .right {
width: 300px;
height: 100%;
float: right;
}
.pc-carouse-image .right .img-item {
margin-top: 10px;
}
.pc-carouse-image .logo {
top: 170px !important;
}
\ No newline at end of file
... ...