<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>产品列表</title>
<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script>
//屏蔽分享
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
WeixinJSBridge.call('hideOptionMenu');
});
</script>
</head>
<body>
<!--底部菜单开始-->
<footer class="mui-bar mui-bar-tab" id="footer-bar-tab">
<a class="mui-tab-item">
<span class="iconfont icon-shouye"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item mui-active">
<span class="iconfont icon-liebiao"></span>
<span class="mui-tab-label">列表</span>
</a>
<a class="mui-tab-item">
<span class="iconfont icon-gouwuche"></span>
<span class="mui-tab-label">购物车</span>
</a>
<a class="mui-tab-item">
<span class="iconfont icon-huiyuan"></span>
<span class="mui-tab-label">会员</span>
</a>
</footer>
<!--底部菜单结束-->
<!--内容开始-->
<div>
<!--头部选项卡-->
<div id="pro-top-menu" class="mui-segmented-control">
<!--(默认选中哪个就加上mui-active)，其他不加-->
<!--<a class="mui-control-item mui-active">声波牙刷</a>
<a class="mui-control-item">刷头</a>-->
</div>
</div>
<!--下拉刷新容器-->
<div id="pullrefresh_pro_list" class="mui-content mui-scroll-wrapper" style="top: 44px;">
<div class="mui-scroll">
<ul class="mui-table-view mui-grid-view my-grid-view-no my-table-pull">
<!--<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a>
<img class="mui-media-object" src="images/pro-bai.png">
<div class="pro-name">柔性声波牙刷</div>
<h6>极光白</h6>
<div class="pro-price">¥199.00</div>
</a>
</li>-->
</ul>
</div>
</div>
<!--内容结束-->
<!-- 加载ing begin-->
<div class="loading covers">
<div class="loading-bj"></div>
<p>正在加载...</p>
</div>
<!-- 加载ing end -->
<script src="js/mui.min.js"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/main.js"></script>
<!--<script src="js/wechat-utils-1.0.js"></script>-->
<script>
window.addEventListener('pageshow', function(e) {
// 通过persisted属性判断是否存在 BF Cache
if(e.persisted) {
location.reload();
}
});
var typeId = getParam("typeId");//从URL带过来的产品类型id
var pageNumber = 0,pagesize = 10;//pageNumber第几页，pagesize每页条数
mui.init({
pullRefresh: {
container: '#pullrefresh_pro_list',//上拉加载容器
down: {
//callback: pulldownRefresh
},
up: {
contentrefresh: '正在加载...',//上拉加载时显示的文字
callback: pullupRefresh//上拉加载的回调方法
}
}
});
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
++pageNumber;//每次上拉页数+1
$.ajax(base_path + '/wechat/product/listProductColorByTypeId?dates=' + new Date().getTime(), {
data: {
"typeId":typeId,//产品类型id
"pageNo":pageNumber,//pageNo第几页
"pageSize":pagesize//pageSize每页条数
},
dataType: 'json',
xhrFields: {
withCredentials: true
},
crossDomain: true,
type: 'get',
timeout: 15000,
success: function(dt) {
if(dt.isRedirect) {
location.href = dt.redirectURL;
} else {
if(dt.status) {//判断接口返回状态status
var table = document.body.querySelector('.my-table-pull');//table是插入数据li的父级容器
mui('#pullrefresh_pro_list').pullRefresh().endPullupToRefresh(dt.data.productColorList.length<pagesize);//endPullupToRefresh(ture)表示没有更多数据了，停止上拉加载
mui.each(dt.data.productColorList, function(index) {
var li = document.createElement('li');//创建li标签
li.className='mui-table-view-cell mui-media mui-col-xs-6';//給li标签className
li.innerHTML = '<a name="'+this.colorId+'"><img class="mui-media-object" src="'+this.colorImg+'"><div class="pro-name">'+this.productName+'</div><h6>'+this.colorName+'</h6><div class="pro-price">¥'+(this.colorDiscount/100).toFixed(2)+'</div></a>';
table.appendChild(li);//将li插入table
});
} else {
mui.alert("获取产品列表失败！");
}
}
},
error: function(xhr, type, errorThrown) {
console.log(xhr);
mui.alert("获取产品列表失败！网络错误");
}
});
}
mui.ready(function() {//ready事件
//获取产品类型
$.ajax(base_path + '/wechat/product/listProductType?dates=' + new Date().getTime(), {
data: {},// ajax参数 没有则不写
dataType: 'json',
xhrFields: {
withCredentials: true
},
crossDomain: true,
type: 'get',
timeout: 15000,
success: function(dt) {
if(dt.isRedirect) {//先判断isRedirect，然后跳转redirectURL
location.href = dt.redirectURL;
} else {
if(dt.status) {//判断接口返回状态status
var table = document.body.querySelector("#pro-top-menu");//table是插入数据li的父级容器
//mui.each()循环
mui.each(dt.data, function(index) {
var li = document.createElement('a');//创建a元素标签
if(typeId != null) {//判断产品类型id不为null
if(typeId == this.typeId) { //判断产品类型相等则选中
li.className = 'mui-control-item mui-active';//选中的样式为mui-active
} else {
li.className = 'mui-control-item';
}
} else {
if(index == 0) {//URL没有产品id则默认选中第0个
li.className = 'mui-control-item mui-active';
typeId=this.typeId;
} else {
li.className = 'mui-control-item';
}
}
li.setAttribute("name",this.typeId);//防止页面id重复，所以把typeId放在name里面
li.innerHTML=this.typeName;
table.appendChild(li);//将li插入table
});
mui('#pullrefresh_pro_list').pullRefresh().pullupLoading();
$(".loading").hide().css("opacity", "0"); //隐藏（正在加载...）
} else {
mui.alert("获取产品类型失败！");
}
}
},
error: function(xhr, type, errorThrown) {
console.log(xhr);
mui.alert("获取产品类型失败！网络错误");
}
});
});
//头部选项卡点击事件
$(document).on('tap', '#pro-top-menu>a', function() {
typeId=$(this).attr("name");//当前点击的类型id
pageNumber=0;//页数归零
$('.my-table-pull').empty();//清空产品列表
mui('#pullrefresh_pro_list').pullRefresh().pullupLoading();//重新加载数据
mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,500);//500毫秒滚动到顶
});
//跳转产品详情
$(document).on('tap', '.my-table-pull>li>a', function() {
location.href='pro-details.html?colorId='+$(this).attr("name");
});
</script>
</body>
</html>