doT.js實現混合布局
數據結構
{
"status": "1",
"msg": "獲取成功",
"info": {
"id": "47",
"user_id": "1250000172",
"tmpl_id": "1",
"token": "xxfisw1465885805",
"category_id": "52",
"name": "一掃光零食量販",
"logo": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160621/6/57690a53051fa.png@350w",
"topbg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160623/c/576b36c8972b6.jpg@350w",
"qrcode": "./Uploads/Qrcode/Store/71c34224438b1f6290c2b53a47c805ff.png",
"slogan": "零食食小,開心事大",
"intro": "",
"postage": "0.00",
"free_postage": "168.00",
"total_pv": "46729",
"status": "1",
"addtime": "1465885805",
"pay_on_delivery": "0",
"isrecommend": "0001",
"store_pickup": "0",
"isshow": "1",
"type": "1",
"member_id": "0",
"category_goods": [
{
"goods": [
{
"id": "1279",
"name": " 阿婆家的 干吃湯圓小麻薯",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160615/f/5760ef149302b.jpg@350w",
"price": "2.00",
"salecount": "2",
"oprice": "2.00"
},
{
"id": "1276",
"name": "百野軒番茄、香辣海苔4.5克袋開袋即食",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160615/c/5760edbad7ccb.jpg@350w",
"price": "3.00",
"salecount": "29",
"oprice": "3.00"
},
{
"id": "1275",
"name": "驥洋山椒翅尖200g",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160615/d/5760ed69d1728.jpg@350w",
"price": "11.80",
"salecount": "5",
"oprice": "11.80"
},
{
"id": "1273",
"name": "ZEK迷你傳統海苔20克",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160615/0/5760ecbee92e0.jpg@350w",
"price": "15.80",
"salecount": "6",
"oprice": "15.80"
},
{
"id": "1272",
"name": "田園蔬果干70g 即食黃秋葵脆片",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160615/e/5760ec57ed2c3.jpg@350w",
"price": "15.80",
"salecount": "0",
"oprice": "15.80"
},
{
"id": "1267",
"name": "紅燈記肉松香辣味蠶豆",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160615/b/5760ea44e8a1b.jpg@350w",
"price": "6.80",
"salecount": "0",
"oprice": "6.80"
}
],
"id": "262",
"name": "休閑零食"
},
{
"goods": [
{
"id": "1220",
"name": "皇家爵士3合1 原味速溶咖啡",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160614/d/575fc26373fb4.jpg@350w",
"price": "1.50",
"salecount": "62",
"oprice": "1.50"
},
{
"id": "1219",
"name": "姜汁紅糖生姜茶、姜汁黑糖生姜茶",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160614/2/575fc1fb5e3e8.jpg@350w",
"price": "1.60",
"salecount": "10",
"oprice": "1.60"
}
],
"id": "267",
"name": "咖啡飲品"
},
{
"goods": [
{
"id": "1278",
"name": "四季之屋香烤椰片",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160615/a/5760eed8a56be.jpg@350w",
"price": "2.00",
"salecount": "47",
"oprice": "2.00"
},
{
"id": "1274",
"name": "美倫多榴蓮味夾心酥餅干",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160615/6/5760ed14a5639.jpg@350w",
"price": "24.80",
"salecount": "5",
"oprice": "24.80"
},
{
"id": "1235",
"name": "利男居特色金椰子菠蘿酥糕點零食100g",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160615/c/5760b764ef047.jpg@350w",
"price": "5.80",
"salecount": "0",
"oprice": "5.80"
},
{
"id": "1226",
"name": " 宜蓮居 芝麻脆條 新品糕點200g",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160615/8/5760ac73d5fa7.jpg@350w",
"price": "9.80",
"salecount": "10",
"oprice": "9.80"
}
],
"id": "271",
"name": "餅干蛋糕"
}
]
}
}
HTML
<div id="info_area"></div>
<script id="infotmpl" type="text/x-dot-template">
<div class="aui-card-list-content">
<img src="{{= it.topbg}}">
<div class="aui-row">
<div class="aui-col-xs-2">
<img style="border:1px solid #fff;margin:3px;" src="{{= it.logo}}">
</div>
<div class="aui-col-xs-4" style="padding-left: 5px;">
<div class="aui-grid-label">
<h4>{{= it.name}}</h4>
<img style="width:3rem;" src="../image/zyd.png">
<p>評分4.8分</p>
</div>
</div>
<div class="aui-col-xs-4" style="top:18px;">
<div class="aui-col-xs-5">
<div class="aui-grid-label">3.7萬</div>
<p>人在賣</p>
</div>
<div class="aui-col-xs-7" style="border-left: 1px solid;padding-left: 10px;">
<div class="aui-grid-label">2067</div>
<p>人關注</p>
</div>
</div>
<div class="aui-col-xs-2" style="text-align: right;right: -3px;top:5px;">
<div class="aui-btn aui-btn-warning">
<i class="aui-iconfont aui-icon-star" style="margin-right: 0;"></i>
<div class="aui-bar-tab-label">關注</div>
</div>
</div>
</div>
</div>
<div class="aui-tab" id="tab">
<div class="aui-tab-item aui-active" tapmode="" data-item-order="0">
<i class="aui-iconfont aui-icon-home"></i>
<div class="aui-bar-tab-label">店鋪首頁</div>
</div>
<div class="aui-tab-item" tapmode="" data-item-order="1">
<i class="aui-iconfont aui-icon-cart"></i>
<div class="aui-bar-tab-label">購買</div>
</div>
<div class="aui-tab-item" tapmode="" data-item-order="2">
<i class="aui-iconfont aui-icon-share"></i>
<div class="aui-bar-tab-label">代銷</div>
</div>
<div class="aui-tab-item" tapmode="" data-item-order="3">
<i class="aui-iconfont aui-icon-cert"></i>
<div class="aui-bar-tab-label">店鋪簡介</div>
</div>
</div>
{{~ it.category_goods:cval:ckey}}
<div class="aui-card-list ">
<div class="rxsp">
<div class="aui-pull-left"><h3>{{= cval.name}}</h3></div>
<a class="aui-pull-right ">
更多
<span class="aui-iconfont aui-icon-right"></span>
</a>
</div>
{{~ cval.goods:gval:gkey}}
{{? gkey%2 === 0}}
<div class="aui-list-item-inner" style="margin-bottom: 15px;">
<div class=" aui-row-padded">
{{?}}
<div class="aui-col-xs-6">
<img src="{{= gval.logoimg}}" style="height: 150px;" onclick="openWin('goods_detail')">
<p class="tit">{{= cutstr(gval.name,12)}}</p>
<h3 class="red">￥{{= gval.price}}</h3>
<div class="aui-info" style="padding-top:0">
<div class="aui-info-item">
<span style="text-decoration:line-through;">￥{{= gval.oprice}}</span>
</div>
<div class="jifen">銷量{{= gval.salecount}}件</div>
</div>
</div>
{{? gkey%2 === 1}}
</div>
</div>
{{?}}
{{~}}
</div>
<div style="clear:both;"></div>
{{~}}
</script>
1.第一層直接使用
{{= it.topbg}}
2.第二層使用
{{~ it.category_goods:cval:ckey}}
{{~}}
3.在第二層中繼續嵌套，調用第三層數據
{{~ cval.goods:gval:gkey}}
{{~}}
4.在第三層中使用取模和判斷
{{? gkey%2 === 0}}
{{?}}
5.在第三層中使用函數
{{= cutstr(gval.name,12)}}
JS
/**
* js截取字符串，中英文都能用
* @param str：需要截取的字符串
* @param len: 需要截取的長度
*/
function cutstr(str, len) {
var str_length = 0;
var str_len = 0;
str_cut = new String();
str_len = str.length;
for (var i = 0; i < str_len; i++) {
a = str.charAt(i);
str_length++;
if (escape(a).length > 4) {
//中文字符的長度經編碼之后大於4
str_length++;
}
str_cut = str_cut.concat(a);
if (str_length >= len) {
str_cut = str_cut.concat("...");
return str_cut;
}
}
//如果給定字符串小於指定長度，則返回源字符串；
if (str_length < len) {
return str;
}
}
apiready = function(){
api.parseTapmode();
var store_id = api.pageParam.store_id;
// 獲取商品相關信息
api.ajax({
url: 'http://zhudianbao.yunlutong.com/?g=Api&m=Store&a=getStoreInfo',
method: 'get',
data: {
values: {
store_id: store_id
}
}
}, function(json, err) {
if (json.status == '1') {
var interText = doT.template($("#infotmpl").text());
$("#info_area").html(interText(json.info));
} else {
var toast = new auiToast();
toast.fail({
title:json.msg,
duration:2000
});
}
});
}
小結
doT中可以使用js原生的內容，多多嘗試吧~
