<!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>
<div class="loading-bg">
<div class="mui-loading">
<div class="mui-spinner">
</div>
加载中...
</div>
</div>
<footer class="mui-bar mui-bar-tab" id="footer-bar-tab" style="display: none;">
<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-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="gwc_null">
<img width="130px" src="images/cart-null.png">
<h4 style="margin: 10px 0 20px 0;">购物车还是空的</h4>
<a href="javascript:;" class="mui-btn my-btn-danger go_web_shop" style="width: 150px;padding: 10px 10px;color: #666;">立即选购</a>
</div>
<div class="shopping-box">
<div class="shoping-tt">
<ul class="mui-table-view my-grid-view-no shopping-cart-list">
<!--<li class="mui-table-view-cell mui-media bg-f">
<a href="javascript:;">
<input name="checkbox" type="checkbox" class="mui-pull-left mt-mr-che" />
<img class="mui-media-object mui-pull-left wh-100 bd-all-1" src="images/image-7.jpg">
<div class="mui-media-body">
<div class="wt-space gwc_tit">水时代净水机-Watero-N1</div>
<small class="gwc_pp">水时代</small>
<div class="price"><span class="price_sp">¥55.02</span><small>小计：¥1999.00</small></div>
<p class="mui-ellipsis">
</p><div class="mui-numbox" data-numbox-min="1" data-numbox-max="999">
<button class="mui-btn mui-btn-numbox-minus" type="button" disabled="">-</button>
<input class="mui-input-numbox" type="number" value="1">
<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
</div>
<p></p>
</div>
</a>
<span class="mui-icon mui-icon-trash ft-24 del"></span>
<span class="jifen"><img src="images/corner_icon.png"> </span>
</li>
<li class="mui-table-view-cell mui-media bg-f">
<a href="javascript:;">
<input name="checkbox" type="checkbox" class="mui-pull-left mt-mr-che" />
<img class="mui-media-object mui-pull-left wh-100 bd-all-1" src="images/image-7.jpg">
<div class="mui-media-body">
<div class="wt-space gwc_tit">水时代净水机-Watero-N1</div>
<small class="gwc_pp">水时代</small>
<div class="price"><span class="price_sp">¥55.02</span><small>小计：¥1999.00</small></div>
<p class="mui-ellipsis">
</p><div class="mui-numbox" data-numbox-min="1" data-numbox-max="999">
<button class="mui-btn mui-btn-numbox-minus" type="button" disabled="">-</button>
<input class="mui-input-numbox" type="number" value="1">
<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
</div>
<p></p>
</div>
</a>
<span class="mui-icon mui-icon-trash ft-24 del"></span>
<span class="jifen"><img src="images/corner_icon.png"> </span>
</li>
<li class="mui-table-view-cell mui-media bg-f">
<a href="javascript:;">
<input name="checkbox" type="checkbox" class="mui-pull-left mt-mr-che" />
<img class="mui-media-object mui-pull-left wh-100 bd-all-1" src="images/image-7.jpg">
<div class="mui-media-body">
<div class="wt-space gwc_tit">水时代净水机-Watero-N1</div>
<small class="gwc_pp">水时代</small>
<div class="price"><span class="price_sp">¥55.02</span><small>小计：¥1999.00</small></div>
<p class="mui-ellipsis">
</p><div class="mui-numbox" data-numbox-min="1" data-numbox-max="999">
<button class="mui-btn mui-btn-numbox-minus" type="button" disabled="">-</button>
<input class="mui-input-numbox" type="number" value="1">
<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
</div>
<p></p>
</div>
</a>
<span class="mui-icon mui-icon-trash ft-24 del"></span>
</li>-->
</ul>
</div>
<div class="buy-footer1">
<table class="tb-clearing">
<tr>
<td class="quanxuan">
<input type="checkbox" name="checkbox" class="all_check" /> 全选
</td>
<td class="mui-text-center">合计:<span class="count_price_box">¥<span class="count_price">0.0</span></span>元</td>
<td>
<a id="go-clearing" class="mui-btn mui-pull-right add_gwc1 go-clearing">去结算(0)</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/main.js"></script>
<script>
mui.ready(function() {
$.ajax(base_path + '/wechat/cart/selectCartByOpenId?dates=' + new Date().getTime(), {
data: {},
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 table = document.body.querySelector('.shopping-cart-list');
if(dt.data.cartList.length==0){
$(".shopping-box,.buy-footer1").hide();
$(".gwc_null").show();
$("#footer-bar-tab").show();
}else{
mui.each(dt.data.cartList, function(index) {
var li = document.createElement("li");
li.className = 'mui-table-view-cell mui-media';
var num = this.cartNum;
var proStatus='',disabled='';
var zeng = '';
if(this.productStatus==1 && this.colorStatus == 1){
$.each(this.salesUserGiftList, function() {
zeng += this.giftName + '<span class="giftItems" count="'+this.userGiftCount+'">'+(num * this.userGiftCount) + '</span>件 ';
});
if(zeng != '') {
zeng = '<p class="gift">（赠品：' + zeng + '）</p> ';
}
}else{
proStatus='<div class="xiajia">已下架</div>';
disabled='disabled="disabled"';
}
li.innerHTML = '<div class="mui-slider-right mui-disabled"><a class="mui-btn mui-btn-red btn-del" name="' + this.cartColorId + '">删除</a></div> <div class="mui-slider-handle"><input name="checkbox" type="checkbox" class="mui-pull-left mt-mr-che" '+disabled+'/><span class="mui-media-object mui-pull-left wh-100"><img src="' + this.productIntroduceImg + '" /></span><div class="mui-media-body"><div class="wt-space gwc_tit">' + this.productName + '</div><p class="gwc_pp">颜色：' + this.productColor + '</p><div class="price"><span class="price_sp">¥' + (this.productPrice / 100).toFixed(2) + '</span></div><p class="mui-ellipsis"></p><div class="mui-numbox" data-numbox-min="1" data-numbox-max="99"><button class="mui-btn mui-btn-numbox-minus" type="button" colorid='+this.cartColorId+'>-</button><input class="mui-input-numbox" type="tel" value="' + this.cartNum + '" readonly="readonly" disabled="disabled" cartid="'+this.cartId+'"/><button class="mui-btn mui-btn-numbox-plus" type="button" colorid='+this.cartColorId+'>+</button></div></div>' + zeng +proStatus+ '</div>';
table.appendChild(li);
});
if($(".shopping-cart-list input[type='checkbox']:not(:disabled)").length>0){//判断购物车列表未下架的产品数量>0
$(".shopping-cart-list input[type='checkbox']:not(:disabled)").prop('checked', true); //选中所有未下架产品
$(".all_check").prop('checked', true);//全选按钮选中
$("#go-clearing").removeClass("add_gwc1").addClass("add_gwc").text('去结算('+$(".shopping-cart-list input[type=checkbox]:not(:disabled):checked").length+')');//点亮结算按钮
}
mui(".mui-numbox").numbox(); //激活加减按钮组合
// $(".shopping-box,.buy-footer1").show();
$(".gwc_null").hide();
calculator();
}
} else {
mui.alert("获取数据失败！");
}
document.querySelector('.loading-bg').style.display = 'none';
}
},
error: function(xhr, type, errorThrown) {
console.log(xhr);
mui.alert("获取数据失败！网络错误");
}
});
});
//拖拽后显示操作图标，点击删除；
mui('body').on('tap', '.btn-del', function(event) {
var btnArray = ['取消', '确定'];
var elem = this;
var li = elem.parentNode.parentNode;
mui.confirm('您确定要删除吗？', '提示', btnArray, function(e) {
if(e.index == 1) {
$.ajax(base_path + '/wechat/cart/deleteCartByProductId?dates=' + new Date().getTime(), {
data: {
"productColorId": elem.getAttribute("name")
},
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 == true) {
li.parentNode.removeChild(li);
if($(".shopping-cart-list>li").length < 1) {
$(".shopping-box,.buy-footer1").hide();
$(".gwc_null,#footer-bar-tab").show();
}
calculator();
mui.toast("删除成功");
} else {
alert(dt.message);
}
}
},
error: function(xhr, type, errorThrown) {
console.log(xhr);
}
});
} else {
//mui.toast("您取消了删除！");
setTimeout(function() {
mui.swipeoutClose(li);
}, 0);
}
});
});
//购物车数量加
$(document).on('tap', '.mui-btn-numbox-plus', function() {
var th = $(this);
var val = mui(th.parent()[0]).numbox().getValue(); //获取当前产品数量
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/addCart?dates=' + new Date().getTime(), {
data: parameter,
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) {
th.parent().attr("cartid", dt.data);
//每次增加数量同时将赠品数量增加
$.each($($(th).parent().parent().parent().find(".giftItems")),function(){
$(this).text(val*parseInt($(this).attr("count")));
});
console.log("增加数量成功！");
} else {
mui.alert("增加数量失败！");
}
}
},
error: function(xhr, type, errorThrown) {
console.log(xhr);
mui.alert("增加数量失败！网络错误");
}
});
} else {
mui.alert("没有获取到产品颜色id");
}
});
//购物车数量减
$(document).on('tap', '.mui-btn-numbox-minus', function() {
var th = $(this);
var val = mui(th.parent()[0]).numbox().getValue(); //获取当前产品数量
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) {
//每次减少数量同时将赠品数量减少
$.each($($(th).parent().parent().parent().find(".giftItems")),function(){
$(this).text(val*parseInt($(this).attr("count")));
});
console.log("减少数量数量成功！");
} else {
mui.alert("减少数量数量失败！");
}
}
},
error: function(xhr, type, errorThrown) {
console.log(xhr);
mui.alert("减少数量失败！网络错误");
}
});
} else {
mui.alert("没有获取到产品颜色id");
}
});
//全选/取消全选
$(document).on('click', 'input[type="checkbox"]', function(e) {
if($(this).hasClass("all_check")) {
if($(this).prop("checked") == true) {
console.log("全选")
if($(".shopping-cart-list input[type='checkbox']:not(:disabled)").length>0){
$(".shopping-cart-list input[type='checkbox']:not(:disabled)").prop('checked', true);
$("#go-clearing").removeClass('add_gwc1').addClass('add_gwc').text("去结算(" + $(".shopping-cart-list input[type='checkbox']:checked").length + ")");
}
} else {
console.log("取消全选")
$("input[type='checkbox']").prop('checked', false);
$("#go-clearing").removeClass('add_gwc').addClass('add_gwc1').text("去结算(" + $(".shopping-cart-list input[type='checkbox']:checked").length + ")");
}
} else {
$(".all_check").prop('checked', false);
if($(".shopping-cart-list input[type='checkbox']:checked").length > 0) {
$("#go-clearing").removeClass('add_gwc1').addClass('add_gwc').text("去结算(" + $(".shopping-cart-list input[type='checkbox']:checked").length + ")");
if(($("input[type='checkbox']:checked").length + 1) == $("input[type='checkbox']").length) {
$("input[type='checkbox']").prop('checked', true);
}
} else {
$("#go-clearing").removeClass('add_gwc').addClass('add_gwc1').text("去结算(" + $(".shopping-cart-list input[type='checkbox']:checked").length + ")");
}
}
calculator();
});
//跳转产品列表页面
mui('body').on('tap', '.go_web_shop', function() {
mui.openWindow({
url: 'pro-list.html'
});
});
//结算事件
mui('body').on('tap', '.go-clearing', function() {
if($(".shopping-cart-list input[type='checkbox']:checked").length > 0) {
var cartidList = ''; //购物项id集合
$.each($(".shopping-cart-list input[type='checkbox']:not(:disabled):checked"), function(index) {
var th = $(this).parent().find('.mui-input-numbox');
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'; //跳转结算页面
}
} else {
mui.alert('您还没有选中商品', '消息提醒', function() {
console.log("您关闭了警告框");
});
}
});
//监听加减框组合值
mui('body').on('change', '.mui-input-numbox', function() {
calculator();
});
//重新计算
function calculator() {
var count = 0;
var num = 0;
$(".mui-table-view li").each(function() {
if($(this).find("input[type='checkbox']:not(:disabled)").prop('checked') == true) {
num = parseFloat($(this).find(".price_sp").text().replace(/¥/g, "") * $(this).find(".mui-input-numbox").val()).toFixed(2);
count = accAdd(count, num);
}
});
$(".count_price").text(accAdd(count, 0).toFixed(2));
$("#go-clearing").text('去结算('+$(".shopping-cart-list input[type=checkbox]:not(:disabled):checked").length+')');
if($(".shopping-cart-list input[type='checkbox']:not(:disabled):checked").length<1){
$("#go-clearing").removeClass("add_gwc").addClass("add_gwc1");
}else{
$("#go-clearing").removeClass("add_gwc1").addClass("add_gwc");
}
}
</script>
</body>
</html>