liujiankang
/
static


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
							<!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+'" style="margin-top: 15px;"><img class="mui-media-object" src="'+this.colorImg+'"><div class="pro-name">'+this.productName+'</div><h6 style="margin-top: 5px;">'+this.colorName+'</h6><div class="pro-price" style="margin-top: 10px;">¥'+(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>