liujiankang
/
static


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
							<!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.lastPage?false:true);//endPullupToRefresh(ture)表示没有更多数据了，停止上拉加载
										mui.each(dt.data.list, 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+'" style="margin-top: 15px;">'
														+'<img class="mui-media-object" src="'+ this.productIntroduceImg +'"><div class="pro-name">'+this.productName+'</div>'
//														+'<h6 style="margin-top: 5px;">'+this.colorName+'</h6>'
														+'<div class="pro-price" style="margin-top: 10px;">¥'+ this.productShowPrice +'</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().refresh(true);
//				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>