模块化1

<sly data-sly-use.logic="logic.js">
<div class="content"
data-path="${properties.interfacePath}"
data-ignoredomain="${properties.ignoreDomain}"
data-dataObject="${logic.dataObject}"
data-emptyMessage="${properties.emptyMessage}"
data-errorMessage="${properties.errorMessage}"

data-imgmappingrewardsbenefits="[${logic.imgmapping}]"
data-cardconfig="[${logic.cardconfig}]"
>
<div class="${logic.mgnCls} ">
<div class="vitality">
<div class="">
<div class="row ">
<div class="content">
<div class="col-xs-12 col-md-offset-2 col-md-8 clearfix margin-bottom-m">
<h4 class="p3 margin-bottom-xs">${logic.title1 @ context='html'}<span class="vitality-rewards-and-benefits-total">-</span> <a href="${logic.seeAllLink}" class="lk1 pull-right">${logic.seeAllLabel} <span class="link-arrow"></span></a></h4>
<p class="bt3">You have <span class="vitality-rewards-and-benefits-voucherCard">-</span> vouchers you can use right now.</p>
<p class="bt3">Also, your <strong class="gold">Gold</strong> status gives you access to <span class="vitality-rewards-and-benefits-benefitsCard">-</span> types of rewards and benefits.</p>
</div>
<div class="col-xs-12 col-md-offset-2 col-md-8 ">
<div class="row">
<div class="content vitality-template-body-t" >
<!-- <div class="col-xs-12 col-sm-6 voucher-col">
<a href="${logic.linkURL1}">
<div class="voucher-card voucher">
<div class="background ">
<svg height="80" width="356" viewbox="0 0 356 80" preserveaspectratio="xMinYMin meet">
<defs></defs>
<path d="M8 0 L 347 0 C 347 0 355 0 355 8 L 355 8 L 355 29.5L355 29.5 C 349.47715250169205 29.5 345 33.97715250169206 345 39.5L345 39.5 C 345 45.02284749830794 349.47715250169205 49.5 355 49.5 L 355 71 C 355 71 355 79 347 79 L 347 79 L 8 79 C 8 79 0 79 0 71 L 0 71 L 0 49.5L0 49.5 C 5.522847498307936 49.5 10 45.02284749830794 10 39.5L10 39.5 C 10 33.97715250169206 5.522847498307936 29.5 0 29.5 L 0 8 C 0 8 0 0 8 0 L 8 0Z" transform="matrix(1,0,0,1,0.5,0.5)" class="bg"></path>
</svg>
</div>

<div class="content">
<h3>Voucher</h3>
<h4>$5</h4>
<p class="date"></p>
<p class="alert">Expiring Today</p>
<div class="image">
<p></p>
<div class="canvas">
${logic.img1 @ context='html'}
</div>
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 voucher-col">
<a href="${logic.linkURL2}">
<div class="voucher-card voucher">
<div class="background ">
<svg height="80" width="356" viewbox="0 0 356 80" preserveaspectratio="xMinYMin meet">
<defs></defs>
<path d="M8 0 L 347 0 C 347 0 355 0 355 8 L 355 8 L 355 29.5L355 29.5 C 349.47715250169205 29.5 345 33.97715250169206 345 39.5L345 39.5 C 345 45.02284749830794 349.47715250169205 49.5 355 49.5 L 355 71 C 355 71 355 79 347 79 L 347 79 L 8 79 C 8 79 0 79 0 71 L 0 71 L 0 49.5L0 49.5 C 5.522847498307936 49.5 10 45.02284749830794 10 39.5L10 39.5 C 10 33.97715250169206 5.522847498307936 29.5 0 29.5 L 0 8 C 0 8 0 0 8 0 L 8 0Z" transform="matrix(1,0,0,1,0.5,0.5)" class="bg"></path>
</svg>
</div>
<div class="content">
<h3>Voucher</h3>
<h4>$5</h4>
<p class="date"></p>
<p class="alert">Expiring Tomorrow</p>
<div class="image">
<p></p>
<div class="canvas">
${logic.img2 @ context='html'}

</div>
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 voucher-col">
<a href="${logic.linkURL3}">
<div class="reward insurance">
<div class="content">
<h4>6% <small>off</small></h4>
<p>Insurance Premium Discount</p>
<h5></h5>
<div class="image">
<div class="canvas">
${logic.img3 @ context='html'}

</div>
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 voucher-col">
<a href="${logic.linkURL4}">
<div class="reward travel">
<div class="content">
<h4>35% <small>off</small></h4>
<p>On Air Asia Airlines</p>
<h5></h5>
<div class="image">
<div class="canvas">
${logic.img4 @ context='html'}

</div>
</div>
</div>
</div>
</a>
</div> -->

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="vitality-handlebars-template-t hidden">
{{#each this}}
{{#ifType type}}
<div class="col-xs-12 col-sm-6 voucher-col" style="height: 80px;">
{{!-- <a href=" "> --}}
{{{mappingCMlinkURL}}}
<div class="voucher-card voucher">
<div class="background ">
<svg height="80" width="356" viewbox="0 0 356 80" preserveaspectratio="xMinYMin meet">
<defs></defs>
<path d="M8 0 L 347 0 C 347 0 355 0 355 8 L 355 8 L 355 29.5L355 29.5 C 349.47715250169205 29.5 345 33.97715250169206 345 39.5L345 39.5 C 345 45.02284749830794 349.47715250169205 49.5 355 49.5 L 355 71 C 355 71 355 79 347 79 L 347 79 L 8 79 C 8 79 0 79 0 71 L 0 71 L 0 49.5L0 49.5 C 5.522847498307936 49.5 10 45.02284749830794 10 39.5L10 39.5 C 10 33.97715250169206 5.522847498307936 29.5 0 29.5 L 0 8 C 0 8 0 0 8 0 L 8 0Z" transform="matrix(1,0,0,1,0.5,0.5)" class="bg"></path>
</svg>
</div>

<div class="content">
<h3>{{title}}</h3>
<h4>{{value}}</h4>
<p class="date"></p>
<p class="alert">{{describe}}</p>
<div class="image" style=" margin-top: {{cMarginTop}};">
<p></p>
<div class="canvas" style=" {{cWidth}}; height: {{cHeight}}">
{{{mappingCMimageSize}}}
</div>
</div>
</div>
</div>
</a>
</div>
{{else}}
<div class="col-xs-12 col-sm-6 voucher-col" style="height: 80px;">
{{!-- <a href=" "> --}}
{{{mappingCMlinkURL}}}
<div class="reward insurance">
<div class="content">
<h4>{{title}} <small>off</small></h4>
<p>{{describe}}</p>
<h5></h5>
<div class="image" style=" margin-top: {{cMarginTop}};">
<div class="canvas" style=" {{cWidth}}; height: {{cHeight}}">
{{{mappingCMimageSize}}}
</div>
</div>
</div>
</div>
</a>
</div>
{{/ifType}}
{{/each}}
</div>
</sly>
<script>
(function($, commonInterface, Handlebars, window){
var T1 = new Date();
var vitalityRewardsAndBenefits = {
init :function (){
this.renderChallengeComponents();
},
renderChallengeComponents : function (){
var that = this;
$('.vitality-rewards-and-benefits').each(function(){

that.dom = $(this).find('>div').first();
var obj = that.dom;
var interfacePath = obj.data('path');// 设置的接口
var ignoreDomain = obj.data('ignoredomain') != null;
var dataObj = obj.data('dataObject');
console.log(obj);
console.log(interfacePath);
console.log(ignoreDomain);
console.log(dataObj);
/*取出卡片详细配置*/
that.cardDetails = that.dom.data('imgmappingrewardsbenefits');
/*取出卡片总数配置*/
that.allCardConfig = that.extractType();
console.log("cardDetails:");
console.log(that.cardDetails);

if(!obj) {
return true;
}
if (dataObj) {
$(document).on(dataObj,function(event, data) {
if(data.challengeList && data.challengeList instanceof Array && data.challengeList.length>0) {
that.successfulData = data;/*接口数据*/

/*生成DOM模型*/
that.renderchallenge();
}
});
}
else if(interfacePath && interfacePath.length>0) {
commonInterface.makeRequest(interfacePath, ignoreDomain).done(function(data) {
that.successfulData = data;/*接口数据*/

/*生成DOM模型*/
that.renderchallenge();
}).fail(function(err) {
alert('调用接口失败');
obj.find('.challenge-in-progress-body .error-message').show();
});
}
else{
var dataTest={
"data":{
"couponTotal":"5",/*优惠券总数*/
"rewardsAndBenefits":"19",/*奖励和福利*/
/*card集合*/
"cardList":
[
{ "cardName":"voucherCard",
"cardId":"1",
"type":"coupons",
"title":"test1",
"value":"$10",
/*截止时间*/
"describe":"Expiring Today",
},{
"cardName":"voucherCard",
"cardId":"2",
"type":"coupons",
"title":"test2",
"value":"$20",
"describe":"Expiring Tomorrow",
},{
"cardName":"voucherCard",
"cardId":"3",
"type":"coupons",
"title":"test3",
"value":"$30",
"describe":"Expiring Tomorrow",
},{
"cardName":"voucherCard",
"cardId":"4",
"type":"coupons",
"title":"test4",
"value":"$40",
"describe":"Expiring Today",
},
{
"cardName":"voucherCard",
"cardId":"5",
"type":"coupons",
"title":"test4",
"value":"$50",
"describe":"Expiring Today",
},
{
"cardName":"voucherCard",
"cardId":"6",
"type":"coupons",
"title":"test4",
"value":"$60",
"describe":"Expiring Today",
},
{
"cardName":"voucherCard",
"cardId":"7",
"type":"coupons",
"title":"test4",
"value":"$70",
"describe":"Expiring Today",
},
{
"cardName":"voucherCard",
"cardId":"8",
"type":"coupons",
"title":"test4",
"value":"$80",
"describe":"Expiring Today",
},
{
"cardName":"voucherCard",
"cardId":"9",
"type":"coupons",
"title":"test4",
"value":"$90",
"describe":"Expiring Today",
},
{
"cardName":"voucherCard",
"cardId":"10",
"type":"coupons",
"title":"test4",
"value":"$100",
"describe":"Expiring Today",
},

{
"cardName":"benefitsCard", /*折扣card*/
"cardId":"11",
"type":"discount",
"title":"10%",
"value":"",
/*描述*/
"describe":"Insurance Premium Discount",
},{
"cardName":"benefitsCard",
"cardId":"12",
"type":"discount",
"title":"20%",
"value":"",
"describe":"On Air Asia Airlines",
},{
"cardName":"benefitsCard",
"cardId":"13",
"type":"discount",
"title":"30%",
"value":"",
"describe":"On Air Asia Airlines",
},{
"cardName":"benefitsCard",
"cardId":"14",
"type":"discount",
"title":"40%",
"value":"",
"describe":"Insurance Premium Discount",
},{
"cardName":"benefitsCard",
"cardId":"15",
"type":"discount",
"title":"50%",
"value":"",
"describe":"Insurance Premium Discount",
},{
"cardName":"benefitsCard",
"cardId":"16",
"type":"discount",
"title":"60%",
"value":"",
"describe":"Insurance Premium Discount",
},{
"cardName":"benefitsCard",
"cardId":"17",
"type":"discount",
"title":"70%",
"value":"",
"describe":"Insurance Premium Discount",
},{
"cardName":"benefitsCard",
"cardId":"18",
"type":"discount",
"title":"80%",
"value":"",
"describe":"Insurance Premium Discount",
},{
"cardName":"benefitsCard",
"cardId":"19",
"type":"discount",
"title":"90%",
"value":"",
"describe":"Insurance Premium Discount",
},{
"cardName":"benefitsCard",
"cardId":"20",
"type":"discount",
"title":"100%",
"value":"",
"describe":"Insurance Premium Discount",
}
],

}
};
that.successfulData = dataTest;/*接口数据*/
/*生成DOM模型*/
that.renderchallenge();
}
});
},
/*
生成DOM模型
*/
renderchallenge : function (){
var that = this;
var templateObj=that.dom.next(".vitality-handlebars-template-t");/*获取模板节点*/
if(templateObj.length>0) {
that.registerHelper();/*模板规则*/
var template = Handlebars.compile(templateObj.html());/*生成*/
var challengeBody = that.dom.find('.vitality-template-body-t');/*创建插入点*/
var challengeObj = that.createChallengesObj(); /*构建数据*/
var rendered = template(challengeObj);/*导入数据*/
challengeBody.append(rendered);/*注入模板*/

console.log(buildData);
return buildData;
},
/*
功能: 载入默认配置
数据初始化
*/
initializeData : function (){
var that = this;
var data = [];
var cardList = that.successfulData.data.cardList;
/*默认配置*/
var defaultCardDetailsItem = that.cardDetails[0] || [];
console.log('cardList:');
console.log(cardList);
cardList.map(function(item){
/*载入默认配置*/
Object.keys(defaultCardDetailsItem).map(function(val){
if(!item[val]){/*判断冲突*/
if(val == "mappingCMimageSize"){
var dSty = defaultCardDetailsItem[val].split("x");
var dsrc = "http://placehold.it/200x200";
item[val] ='<img alt="" style="' + dSty[0] + 'px;height:' + dSty[1] + 'px;" src="'+ dsrc +'">';
// item[val] ='<img alt="" src="'+ dsrc +'">';
item['cWidth'] = dSty[0] + 'px';
item['cHeight'] = dSty[1] + 'px';
item['cMarginTop'] =(80 - dSty[1])/2 + 'px';

}
else if(val == "mappingCMlinkURL"){
item[val] ='<a href="#">';
}
else{
item[val] = defaultCardDetailsItem[val];
}
}else{
console.log("冲突的key:" + val);
}

});
});
},
/*
功能: 归类数据
输入: 约定的数据 /判断的key /目标的value 值
输出：目标对象
*/
dataClassification:function (key,value){
var that = this;
var data = [];
var cardList = that.successfulData.data.cardList;
cardList.map(function(item){
if(item[key] == value){
/*加载用户的配置*/
var completeItem = that.dataBinding(item);
data.push(completeItem);
}
});
return data;
},

/*
功能: 加载用户的配置
输入: 可供配置的数据
mappingCMcardId
mappingCMimageSize
mappingCMimageSrc
mappingCMlinkURL
100*40
100*60

66*40
24*40
*/
dataBinding : function (item){
var that = this;
var cardDetails = that.cardDetails;
for(var x=0; x<cardDetails.length; x++){/*增加配置关系*/
var cardDetailsItem = cardDetails[x];/*单个的卡片配置*/
if(item.cardId == cardDetailsItem.mappingCMcardId){/*载入配置数据根据IDmapping*/
Object.keys(cardDetailsItem).map(function(val){
if(val == "mappingCMimageSize"){
var sty = cardDetailsItem[val].split("x");
var src = cardDetailsItem['mappingCMimageSrc'];
src = (src == "undefined")?"http://placehold.it/200x200":src;
item[val] ='<img alt="" style="'+sty[0]+'px;height: '+sty[1]+'px;" src="'+src+'">';
// item[val] ='<img alt="" src="'+src+'">';
item['cWidth'] = sty[0] + 'px';
item['cHeight'] = sty[1] + 'px';
item['cMarginTop'] =(80 - sty[1])/2 + 'px';

}
else if(val == "mappingCMlinkURL"){
var url = cardDetailsItem['mappingCMlinkURL'];
url = (url == "undefined")?"#":url;
item[val] = '<a href="'+ url +'">';
// console.log( item[val]);
}
else{
item[val] = cardDetailsItem[val];
}
});
}

}
return item;
},
/*
功能: 加入用户配置
输入: 原数组对象 & 限定长度
输出: 目标数组对象
*/
processTheData : function (dataObj, length){
var that = this;

var data = [];
for(var i=0;i<Math.min(dataObj.length, length);i++){
var item = dataObj[i] || "" ;
var itemObj = {};
Object.keys(item).map(function(val){
itemObj[val] = item[val];
});
data.push(itemObj);
}
return data;
},

domCathe : function (){
var that = this;
var domCathe = {};
domCathe.objModuleTitle = that.dom.find('.vitality-rewards-and-benefits-total');/*绑定单独数据*/
domCathe.voucherCard = that.dom.find('.vitality-rewards-and-benefits-voucherCard');/*绑定单独数据*/
domCathe.benefitsCard = that.dom.find('.vitality-rewards-and-benefits-benefitsCard');/*绑定单独数据*/
return domCathe;
},
/*
需要单独处理的数据
*/
separateDataRendering : function (separateData){
var that = this;
if(that.cardType1Length <= 0 || that.cardType2Length <= 0){
return false;
}
var domCathe = that.domCathe();/*需要单独处理的数据*/
domCathe.objModuleTitle.text( ' (' + separateData.objModuleTitle + ')');
domCathe.voucherCard.text( ' ' + separateData.voucherCard + ' ');
domCathe.benefitsCard.text( ' ' + separateData.benefitsCard + ' ');
},
/*
名称: 提取配置的类型
功能: 去重&&取出最值
*/
extractType : function (){
var that = this;
var data = {
"type":{},
"length":{},
};
that.cardconfig = that.dom.data('cardconfig');
console.log("cardconfig:");
console.log(that.cardconfig);

that.cardconfig.map(function (item,index){
data.type[item.cardType] = item.cardType;/*去重*/
if(! data.length[item.cardType] || item.cardLength > data.length[item.cardType]){
data.length[item.cardType] = item.cardLength;/*取大值*/
}
});
console.log(data);
return data;
},
};
$(document).ready(vitalityRewardsAndBenefits.init());/*入口*/

})($, window.aiaInterface, Handlebars, window);

</script>

https://www.tongbiao.xyz/