<!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 type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
<script>
//屏蔽分享
// document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
// WeixinJSBridge.call('hideOptionMenu');
// });
</script>
</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="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>
<!-- 加载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>
window.addEventListener('pageshow', function(e) {
// 通过persisted属性判断是否存在 BF Cache
if(e.persisted) {
location.reload(); //刷新页面
}
});
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");
}
}
mui.ready(function() {
//页面首次加载区分
if(search_data != null) {
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 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
}
var table1 = document.body.querySelector('#item' + items + ' .pro-table-pull');
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)
$.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>';
}
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">¥' + (this.productColorList[0].colorDiscount / 100).toFixed(2) + '</p><div class="mui-text-right"><span class="add-cart" name="' + this.productId + '"><span class="iconfont icon-gouwuche"></span></span><button type="button" class="btn-buy-now" name="' + this.productId + '">立即购买</button></div></a></li></ul>' + zen;
table1.appendChild(li);
});
} else {
mui.alert("获取商品菜单失败！");
}
}
},
error: function(xhr, type, errorThrown) {
console.log(xhr);
mui.alert("获取商品菜单失败！网络错误");
}
});
}
//头部菜单点击事件
$(document).on('tap', '#pro-menu .mui-control-item', function() {
if(!window.sessionStorage) {
mui.alert("您的浏览器不支持sessionStorage");
} else {
//如果点击头部的菜单，则删除其他页面带过来的sessionStorage
sessionStorage.removeItem('search_data');
}
//根据类型获取产品列表
getProlist($(this).attr("name"), $(this).attr("href"));
});
//callback为用户点击蒙版时自动执行的回调；
var mask = mui.createMask(function() {
$(".my-picker").remove();//移除颜色列表
});
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"><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").remove(); //移除选择颜色列表
} else {
var cartidList = ''; //购物项id集合
$.each($(".my-picker .mui-numbox"), function(index) {
var th = $(this);
if(typeof(th.attr("cartid")) != "undefined") {
var a = '';
if(index != 0) {
a = '-' + th.attr("cartid"); //组装购物项id
} else {
a = th.attr("cartid");
}
cartidList += a;
}
});
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'; //跳转结算页面
}
}
});
</script>
</body>
</html>