增加悬浮购物车

aiberle/css/main.css

@@ -98,6 +98,8 @@ p{color: #999;font-size: 12px;}
 .details-title{padding: 14px 0 0 0;text-align: left;}
 .details-title .icon-liwu{font-size: 16px;margin-right: 5px;color: #ff4b4b;}
 .pro-price{color: #ff3b3b;text-align: left;padding: 0 0 5px 0;}
+.fixed-cart{position: fixed;right: 10px;bottom:80px;line-height: 50px;text-align: center; border-radius: 50%;background-color:rgba(0,0,0,.1);width: 50px;height:50px;}
+.my-badge-danger{position: absolute;top: 6px;right: 4px;background-color: #f00;color: #fff;display: none;}
 .mui-table-view.mui-grid-view .mui-col-xs-5 .mui-media-object{width: 90%;padding-top: 3%;}
 .my-picker{position: fixed;bottom: 0;padding-top: 0;max-height: 500px; left: 0;width: 100%;z-index: 999; background-color: #fff; -webkit-transform: translateY(100%);transform: translateY(100%); -webkit-transition: .5s;transition: .5s;}
 .my-picker.active{-webkit-transform: translateY(0%);transform: translateY(0%);}

aiberle/pro-details.html

@@ -16,7 +16,11 @@
 		<footer class="mui-bar mui-bar-tab">
 			<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed my-grid-view-no">
 				<li class="mui-table-view-cell">
-					<div class="mui-table"><div class="mui-table-cell mui-col-xs-4 table-middle add-gouwuche ico-gouwuche"><span class="iconfont icon-gouwuche"></span></div><div class="mui-table-cell mui-col-xs-8 table-middle div-btn-buy-know">立即购买</div></div>
+					<div class="mui-table">
+						<div class="mui-table-cell mui-col-xs-4 table-middle go-index"><img style="width: 60%;vertical-align: middle;" src="images/logo.png" /></div>
+						<div class="mui-table-cell mui-col-xs-4 table-middle add-gouwuche" style="background-color: #ccc;color: #fff;font-size: 18px;">加入购物车</div>
+						<div class="mui-table-cell mui-col-xs-4 table-middle div-btn-buy-know">立即购买</div>
+					</div>
 				</li>
 			</ul>
 		</footer>
@@ -80,6 +84,10 @@
 		        </li>-->
 		   </ul>
 		</div>
+		<div class="fixed-cart">
+			<span class="iconfont icon-gouwuche"></span>
+			<span class="mui-badge my-badge-danger">0</span>
+		</div>
 		<!-- 加载ing -->
 		<div class="loading covers">
 			<div class="loading-bj"></div>
@@ -162,6 +170,7 @@
 		                						+zen+'</br>'	
 		                						+'<a><img class="mui-media-object" src="'+productInfo.productIntroduceImg+'"></a>';
 								table.appendChild(li);
+								getCartNumber();//获取购物车数量
 								fenxiang();
 								$(".loading").hide().css("opacity", "0");
 							} else {
@@ -212,6 +221,7 @@
 								} else {
 									if(dt.status) {
 										th.parent().attr("cartid", dt.data);
+										getCartNumber()
 										console.log("增加数量成功！");
 									} else {
 										mui.alert("增加数量失败！");
@@ -259,6 +269,7 @@
 							} else {
 								if(dt.status) {
 									console.log("减少数量数量成功！");
+									getCartNumber()
 								} else {
 									mui.alert("减少数量数量失败！");
 								}
@@ -316,7 +327,7 @@
 								if(count > 0) {
 									$(".my-btn-buy-know").removeAttr("disabled"); //激活结算按钮
 								}
-								if(th.hasClass("ico-gouwuche")) {
+								if(th.hasClass("add-gouwuche")) {
 									$(".my-btn-buy-know").attr("cart", "cart");
 								}
 								mui(".mui-numbox").numbox(); //激活加减按钮组合
@@ -369,6 +380,44 @@
 					}
 				}
 			});
+			$(document).on('tap', '.go-index', function() {
+				location.href='index.html';
+			});	
+			$(document).on('tap', '.fixed-cart', function() {
+				location.href='shopping-cart.html';
+			});
+			//获取购物车数量
+			function getCartNumber(){
+				$.ajax(base_path + '/wechat/cart/getCartNumByCartOpenId?dates=' + new Date().getTime(), {
+						data: {},
+						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) {
+									if(dt.data>0){
+										$(".fixed-cart .my-badge-danger").text(dt.data).show();
+									}else{
+										$(".fixed-cart .my-badge-danger").text(dt.data).hide();
+									}
+								} else {
+									mui.alert("获取购物车数量失败！");
+								}
+							}
+						},
+						error: function(xhr, type, errorThrown) {
+							console.log(xhr);
+							mui.alert("获取购物车数量失败！网络错误");
+						}
+					});
+			}
 			//分享			
 			function fenxiang(){
 				var src = location.href;

aiberle/pro-list.html

@@ -20,7 +20,7 @@
 				<a class="mui-control-item" href="#item3">电动牙刷</a>-->
 			</div>
 		</header>
-		<!--<footer class="mui-bar mui-bar-tab">
+		<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>
@@ -37,7 +37,7 @@
 				<span class="iconfont icon-wode"></span>
 				<span class="mui-tab-label">我的</span>
 			</a>
-		</footer>-->
+		</footer>
 		<div class="mui-content">
 			<!--<div class="index-title">
 				<strong>选购</strong>