<!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" /> </head> <body> <header class="mui-bar mui-bar-nav"> <div id="pro-menu" class="mui-segmented-control"> <!--<a class="mui-control-item mui-active" href="#item1">净水机</a> <a class="mui-control-item" href="#item2">冲奶机</a> <a class="mui-control-item" href="#item3">电动牙刷</a>--> </div> </header> <!--<footer class="mui-bar mui-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"> <span class="iconfont icon-gouwuche"></span> <span class="mui-tab-label">购物车</span> </a> <a class="mui-tab-item"> <span class="iconfont icon-dingdan"></span> <span class="mui-tab-label">订单</span> </a> <a class="mui-tab-item"> <span class="iconfont icon-wode"></span> <span class="mui-tab-label">我的</span> </a> </footer>--> <div class="mui-content"> <!--<div class="index-title"> <strong>选购</strong> </div>--> <div id="item1" class="mui-control-content mui-active"> <ul class="pro-table-pull"> <!--产品列表区域--> </ul> <!--<div class="index-title"> <strong>配件选购</strong> </div>--> <!--<ul class="mui-table-view mui-grid-view my-view-no" style="padding-bottom: 0;"> <li class="mui-table-view-cell mui-media mui-col-xs-5"> <a href="#"><img class="mui-media-object" src="images/chanpin-2.jpg"></a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-7"> <a> <div class="pro-tit">Aiberle智能净水机滤芯配件 t1、t2、t3、t4</div> <h6 class="mui-text-left">4级ro净化、只喝净水</h6> <p class="pro-price">¥79.00~320.00</p> <div class="mui-text-right"> <span class="add-cart"><span class="iconfont icon-gouwuche"></span></span> <button type="button" class="btn-buy-now">立即购买</button> </div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-5"> <a href="#"><img class="mui-media-object" src="images/chanpin-3.jpg"></a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-7"> <a> <div class="pro-tit">Aiberle智能净水机水箱配件</div> <h6 class="mui-text-left">优质安全材质,放心使用</h6> <p class="pro-price">¥99.00</p> <div class="mui-text-right"> <span class="add-cart"><span class="iconfont icon-gouwuche"></span></span> <button type="button" class="btn-buy-now">立即购买</button> </div> </a> </li> </ul>--> </div> <div id="product-type"> </div> <!--<div id="item2" class="mui-control-content"> <ul class="pro-table-pull"> </ul> </div> <div id="item3" class="mui-control-content"> <ul class="pro-table-pull"> </ul> </div> <div id="item4" class="mui-control-content"> <ul class="pro-table-pull"> </ul> </div> <div id="item5" class="mui-control-content"> <ul class="pro-table-pull"> </ul> </div> <div id="item6" class="mui-control-content"> <ul class="pro-table-pull"> </ul> </div> <div id="item7" class="mui-control-content"> <ul class="pro-table-pull"> </ul> </div> <div id="item10" class="mui-control-content"> <ul class="pro-table-pull"> </ul> </div> <div id="item11" class="mui-control-content"> <ul class="pro-table-pull"> </ul> </div>--> </div> <!-- 加载ing --> <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> var search_data = null, typeId = ''; if(!window.sessionStorage) { mui.alert("您的浏览器不支持sessionStorage"); } else { //读取上一个页面带过来的sessionStorage search_data = JSON.parse(sessionStorage.getItem('search_data')); if(search_data != null) { typeId = search_data.text[0].typeId; //如果不为空就赋值給typeId(产品类型id) //$('#item'+typeId+']').addClass("mui-active").siblings().removeClass("mui-active"); }else{ typeId=getParam("productId"); } } var mao=getParam("childTypeId"),maodian=''; mui.ready(function() { //页面首次加载区分 if(typeId != '') { getProlist(typeId, null); } else { getProlist(null, null); } $(".loading").hide().css("opacity", "0"); //页面加载完成,隐藏loading }); //查询产品列表(items代表显示类型)(load值为null代表没有从其他页面带参数,并且是首次加载,其他值代表选中的区域) function getProlist(items, load) { console.log(items, load); var parameter = {}; if(items != null) { parameter["typeId"] = items; } $.ajax(base_path + '/wechat/product/productIndex?dates=' + new Date().getTime(), { data: parameter, dataType: 'json', xhrFields: { withCredentials: true }, crossDomain: true, type: 'post', timeout: 15000, success: function(dt) { if(dt.isRedirect) { location.href = dt.redirectURL; } else { console.log(dt) if(dt.status) { var productTypeList = dt.data.productTypeList; var typeHtml = ''; for(var k=0;k<productTypeList.length;k++){ var typeId = productTypeList[k].typeId; typeHtml += '<div id="item'+ typeId +'" class="mui-control-content">'; typeHtml += '<ul class="pro-table-pull">'; typeHtml += '</ul>'; typeHtml += '</div>'; } $("#product-type").html(typeHtml); var menu_data = dt.data.productTypeList; if(load == null) { var table = document.body.querySelector("#pro-menu"); mui(menu_data).each(function(index) { var li = document.createElement('a'); if(items != null) { if(items == this.typeId) { li.className = 'mui-control-item mui-active'; } else { li.className = 'mui-control-item'; } } else { if(index == 0) { li.className = 'mui-control-item mui-active'; } else { li.className = 'mui-control-item'; } } li.setAttribute("name", this.typeId); li.setAttribute("href", "#item" + (index + 1)); li.innerHTML = this.typeName; table.appendChild(li); }); } var pro_list = dt.data.productList; if(items == null) { items = 1 } $(".mui-control-content").removeClass("mui-active"); var table1 = document.body.querySelector('#item' + items + ' .pro-table-pull'); $("#item"+items).addClass("mui-active"); if(load != null) { document.body.querySelector(load + " .pro-table-pull"); table1.innerHTML = ''; } mui(pro_list).each(function(index) { var li = document.createElement('li'); li.setAttribute("name", this.productId); var zen = ''; console.log(this.productColorList) if(this.productColorList.length>0){ $.each(this.productColorList[0].salesUserGiftList, function() { zen += this.giftName + "、" }); } if(zen != '') { zen = '<div class="index-title"><p><span class="iconfont icon-liwu"></span>' + zen.substring(0, zen.length - 1) + '</p></div>'; } if(mao!=null && mao==this.productChildType){ li.setAttribute("id","mao-"+this.productId); maodian=this.productId; mao=null; } li.innerHTML = '<ul class="mui-table-view mui-grid-view my-view-no" style="padding-bottom: 0;"><li class="mui-table-view-cell mui-media mui-col-xs-5 mui-text-left"><a><img class="mui-media-object" src="' + this.productParameterImg + '"></a></li><li class="mui-table-view-cell mui-media mui-col-xs-7"><a><div class="pro-tit">' + this.productName + '</div><h6 class="mui-text-left">' + this.productAbbreviation + '</h6><p class="pro-price">¥' + accDiv(this.productColorList[0].colorDiscount,100) + '</p><div class="mui-text-right"><span class="add-cart" name="' + this.productId + '" cartIsSource="1"><span class="iconfont icon-gouwuche"></span></span><button type="button" class="btn-buy-now" name="' + this.productId + '" cartIsSource="1">立即购买</button></div></a></li></ul>' + zen; table1.appendChild(li); }); if(maodian!=''){ var t=$('#mao-' + maodian).offset().top; if(t>300){ $(window).scrollTop(t,500); } maodian=''; } } else { mui.alert("获取商品菜单失败!"); } } }, error: function(xhr, type, errorThrown) { console.log(xhr); mui.alert("获取商品菜单失败!网络错误"); } }); } //头部菜单点击事件 $(document).on('tap', '#pro-menu .mui-control-item', function() { var th=$(this); if(!window.sessionStorage) { mui.alert("您的浏览器不支持sessionStorage"); } else { //如果点击头部的菜单,则删除其他页面带过来的sessionStorage sessionStorage.removeItem('search_data'); } //根据类型获取产品列表 getProlist(th.attr("name"), th.attr("href")); var oldUrl=location.href;//原浏览器地址 var newUrl=jsUrlHelper.delUrlParam(oldUrl,"childTypeId");//删除url中的子类型参数 newUrl=jsUrlHelper.putUrlParam(newUrl,'productId',th.attr("name"));//修改url中的productId参数 history.pushState(oldUrl, '产品类型',newUrl);//无刷新删除修改url地址参数 console.log("url历史操作"+history.length+"次");//获取历史操作过url地址几次 mao=null; }); //监听浏览器前进后退 window.addEventListener("popstate", function() { var currentState = history.state; //根据类型获取产品列表 mao=getParam("childTypeId"),ref=''; $.each($("#pro-menu .mui-control-item"),function(){ if($(this).attr("name")==getParam("productId")){ ref=$(this).attr("href"); $(this).addClass("mui-active"); }else{ $(this).removeClass("mui-active"); } }) getProlist(getParam("productId"),ref); }); //callback为用户点击蒙版时自动执行的回调; var mask = mui.createMask(function() { $(".my-picker").removeClass("active"); setTimeout(function(){ $(".my-picker").remove(); //移除选择颜色列表 },500); }); var count = 0; //统计所有产品加减,数量默认0,当count<1的时候设置(结算)按钮失效 //购物车数量加 $(document).on('tap', '.mui-btn-numbox-plus', function() { ++count; //产品总数量 var th = $(this); var val = mui(th.parent()[0]).numbox().getValue(); //获取当前产品数量 if(count < 1) { $(".my-btn-buy-know").attr("disabled", "disabled"); //禁用结算按钮 } else { $(".my-btn-buy-know").removeAttr("disabled"); //激活结算按钮 } var parameter = {}; //ajax参数json集合 if(typeof(th.attr("productid")) != "undefined") { parameter["productId"] = th.attr("productid"); //产品id if(typeof(th.attr("colorid")) != "undefined") { parameter["productColorId"] = th.attr("colorid"); //颜色id parameter["cartNum"] = 1; //需要减的产品数量,每次都是1 $.ajax(base_path + '/wechat/cart/addProductToCart?dates=' + new Date().getTime(), { data: parameter, dataType: 'json', xhrFields: { withCredentials: true }, crossDomain: true, type: 'post', timeout: 15000, success: function(dt) { if(dt.isRedirect) { location.href = dt.redirectURL; } else { if(dt.status) { th.parent().attr("cartid", dt.data); console.log("增加数量成功!"); } else { mui.alert("增加数量失败!"); } } }, error: function(xhr, type, errorThrown) { console.log(xhr); mui.alert("增加数量失败!网络错误"); } }); } else { mui.alert("没有获取到产品颜色id"); } } else { mui.alert("没有获取到产品id"); } }); //购物车数量减 $(document).on('tap', '.mui-btn-numbox-minus', function() { --count; //产品总数量 var th = $(this); var val = mui(th.parent()[0]).numbox().getValue(); //获取当前产品数量 if(count < 1) { $(".my-btn-buy-know").attr("disabled", "disabled"); //禁用结算按钮 } else { $(".my-btn-buy-know").removeAttr("disabled"); //激活结算按钮 } var parameter = {}; //ajax参数json集合 if(typeof(th.attr("colorid")) != "undefined") { parameter["productColorId"] = th.attr("colorid"); //产品颜色id parameter["cartNum"] = 1; //需要减的产品数量,每次都是1 $.ajax(base_path + '/wechat/cart/deleteCart?dates=' + new Date().getTime(), { data: parameter, dataType: 'json', xhrFields: { withCredentials: true }, crossDomain: true, type: 'get', //减少数量后台限制用get timeout: 15000, success: function(dt) { if(dt.isRedirect) { location.href = dt.redirectURL; } else { if(dt.status) { console.log("减少数量数量成功!"); } else { mui.alert("减少数量数量失败!"); } } }, error: function(xhr, type, errorThrown) { console.log(xhr); mui.alert("减少数量失败!网络错误"); } }); } else { mui.alert("没有获取到产品颜色id"); } }); //立即购买-购物车按钮 获取颜色列表 $(document).on('tap', '.add-cart,.btn-buy-now', function() { var th = $(this); mask.show(); //显示遮罩层 //在body尾部增加-产品颜色列表父级ul $("body").append('<div class="my-picker"><br/><ul class="mui-table-view mui-table-view-striped mui-table-view-condensed my-grid-view-no"></ul><button class="mui-btn my-btn-block my-btn-buy-know" disabled="disabled">确定</button></div>'); $.ajax(base_path + '/wechat/product/selectProductColor?dates=' + new Date().getTime(), { data: { "productId": th.attr("name") //productId产品id }, dataType: 'json', xhrFields: { withCredentials: true }, crossDomain: true, type: 'post', timeout: 15000, success: function(dt) { if(dt.isRedirect) { location.href = dt.redirectURL; } else { if(dt.status) { console.log(dt) var data = dt.data.productColorList; var table = document.body.querySelector('.my-picker>ul'); //产品颜色列表父级ul table.innerHTML = ''; //循环遍历产品颜色数组 mui(data).each(function(index) { var li = document.createElement('li'); //创建li标签 li.className = 'my-table-view-cell'; //給li标签设置className //var val=index==0?1:0; li.innerHTML = '<div class="mui-table" ><div class="mui-table-cell mui-col-xs-3"><img class="my-media-object" src="' + this.colorProductPic + '" /></div><div class="mui-table-cell table-middle mui-col-xs-5">' + this.colorName + '<h6>极简生活、舒适百搭</h6></div><div class="mui-table-cell table-middle mui-col-xs-4"><div class="mui-numbox" data-numbox-min="0" data-numbox-max="99" cartid="' + this.cartId + '"><button class="mui-btn mui-btn-numbox-minus" type="button" productid="' + this.colorProductId + '" colorid="' + this.colorId + '">-</button><input class="mui-input-numbox" type="number" value="' + this.cartNum + '" readonly="readonly"/><button class="mui-btn mui-btn-numbox-plus" type="button" productid="' + this.colorProductId + '" colorid="' + this.colorId + '">+</button></div></div></div>'; table.appendChild(li); //将li标签加入到-产品颜色列表父级ul console.log(count) if(typeof(this.cartNum) != "undefined") { count += parseInt(this.cartNum); } }); $(".my-picker").addClass("active"); //显示产品颜色加减数量列表 console.log(count) if(count > 0) { $(".my-btn-buy-know").removeAttr("disabled"); //激活结算按钮 } if(th.hasClass("add-cart")) { $(".my-btn-buy-know").attr("cart", "cart"); } mui(".mui-numbox").numbox(); //激活加减按钮组合 } else { mui.alert("获取数据失败!"); } } }, error: function(xhr, type, errorThrown) { console.log(xhr); mui.alert("获取数据失败!网络错误"); } }); }); //确定事件 $(document).on('tap', '.my-btn-buy-know', function() { //判断是点立即购买还是加入购物车的 if($(this).attr("cart") == "cart") { $(".mui-backdrop").css("opacity", 0).remove(); //移除遮罩层 $(".my-picker").removeClass("active"); setTimeout(function(){ $(".my-picker").remove(); //移除选择颜色列表 },500); mui.toast("加入购物车成功!"); } else { var cartidList = ''; //购物项id集合 $.each($(".my-picker .mui-numbox"), function(index) { var th = $(this); if(th.attr("cartid") != "undefined") { // var a = ''; // if(index != 0) { // a = '-' + th.attr("cartid"); //组装购物项id // } else { // a = th.attr("cartid"); // } if(cartidList == ''){ cartidList += th.attr("cartid") ; }else{ cartidList += '-' + th.attr("cartid") ; } } }); if(!window.sessionStorage) { mui.alert("您的浏览器不支持sessionStorage"); } else { //自定义json数据 var obj = { text: [cartidList] }; //json格式化插入 购物项id集合 sessionStorage.setItem('pay_data', JSON.stringify(obj)); location.href = 'clearing.html'; //跳转结算页面 } } }); //产品详情 $(document).on('tap', '.pro-table-pull>li', function() { //location.href = 'pro-details.html?productId=' + $(this).attr("name") }); </script> </body> </html>