cookie做订单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=utf-8"%>
<%@ include file="/WEB-INF/jsp/include.jsp"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>爱玛客微信订货</title>
<link href="${rootUrl }css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="${rootUrl }css/font-awesome.min.css" />
<link href="${rootUrl }css/an-app.css" rel="stylesheet" />
<script src="${rootUrl }js/jquery/jquery.js" type="text/javascript"></script>
<style>

.mui-row.mui-fullscreen>[class*="mui-col-"] {
height: 100%;
}
.mui-col-xs-3,
.mui-control-content {
overflow-y: auto;
height: 100%;
}
.mui-segmented-control .mui-control-item {
100%;
}
.mui-search .mui-placeholder .mui-icon {
color: #f7f7f7;
}
.an-top-bg .mui-search:before{ margin-top:-10px;}
.an-top-bg{ height:110px;}
.an-order-main{top:110px;}
.an-top-select{display: inline-block; margin-top: 5px; text-align: center; auto;
right: 50px; left: 10px; position: absolute;}
.an-top-select input[type=search]{ margin:6px 0; height:29px; background-color:rgba(0,0,0,0.2);}
.an-top-bg .mui-input-row.mui-search .mui-icon-clear{top:10px;}
.mui-search .mui-placeholder .mui-icon{padding-top:10px; padding-bottom:10px;}
.an-top-bg .mui-btn-link{color: #FFFFFF;margin-top: 5px; line-height:44px; font-size:16px; padding:0 10px;}
</style>
</head>
<body>

<div class="an-order">

<div class="mui-inner-wrap">
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-icon-left-nav mui-pull-left goBack"></a>
<h1 class="mui-title">
<img class="an-logo" src="${rootUrl }img/logo.png" />
<span>${school.nameZH } </span>
</h1>
<a class="mui-icon mui-pull-right searchGo"><i class="fa fa-search" aria-hidden="true"></i></a>
</header>

<div class="an-index-banner">
<div id="slider" class="mui-slider" >
<div class="mui-slider-group mui-slider-loop">


<input name="openid" value="${member.openid }" type="text" id="openid"/>
<input name="kongxc_wx_fen_diancanUrl" value="${kongxc_wx_fen_diancanUrl }" type="text" id="kongxc_wx_fen_diancanUrl"/>
<c:forEach items="${themeList }" var="vo">
<div class="mui-slider-item">
<a href="javascript:void (0);" onclick="theme(this,'${vo.id}');">
<img src="${rootUrl }attachFiles/theme/${school.code }/${vo.themeImg}" height="173px"/>
</a>
</div>
</c:forEach>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
</div>
</div>
</div>



<div>
<div id="segmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted an-order-topnav">
<a class="mui-control-item mui-active" href="#item1"></a>
</div>
</div>
<div>
<div id="item1" class="mui-control-content mui-active">
<div class="an-order-dc" id="an-heig">
<div class="mui-content mui-row mui-fullscreen">
<div class="mui-col-xs-3">
<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
<c:forEach items="${list }" var="vo" varStatus="voStatus">
<a class="mui-control-item <c:if test="${voStatus.count == 1}">mui-active</c:if>" href="#'${vo.id }'" id="${vo.id }" >${vo.nameZH }</a>
</c:forEach>
</div>
</div>
<div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;">
<c:forEach items="${list }" var="vo" varStatus="voStatus">
<div id="'${vo.id }'" class="mui-control-content <c:if test="${voStatus.count == 1}">mui-active</c:if>">
<ul class="mui-table-view">
<c:forEach items="${vo.foodBaseInfo }" var="food">
<li class="mui-table-view-cell">

<div class="an-cai clearfix">
<a class="an-cai-left clickPhoto" href="javascript:void (0);" data-option="${food.id }" data-option_price="${food.priceStr }" onclick="detail(this,'${food.id }',${food.priceStr });">
<img src="${rootUrl }attachFiles/food/${food.foodPic }" />
</a>
<div class="an-cai-body">
<h4 style="font-size: 12px;">
<a href="javascript:void (0);" onclick="detail(this,'${food.id }',${food.priceStr });">${food.nameZH }</a>
<c:if test="${food.foodType != null && food.foodType !=''&& food.foodType =='2'}">
<img src="${rootUrl }attachFiles/productLogo/xp.jpg" height="25px" width="25px" />
</c:if>
<c:if test="${food.foodType != null && food.foodType !=''&& food.foodType =='3'}">
<img src="${rootUrl }attachFiles/productLogo/bm.jpg" height="25px" width="25px" />
</c:if>
</h4>
<div class="clearfix">
<div class="an-pull-left">
<p style="font-size: 8px;"><s>￥${food.marketPriceStr }</s>  <c:if test="${food.maxNumStr !='0' }"></c:if>库存量:${food.maxNumStr }</p>
<p class="color-1" style="font-weight:bold;">￥${food.priceStr }</p>
</div>
<div class="an-order-number-add">
<c:if test="${food.maxNumStr !='0' }">
<div class="mui-numbox" data-numbox-min='0' data-numbox-max='99'>
<button class="mui-btn mui-btn-numbox-minus jian" type="button" onclick="getJian('${food.id }','${food.nameZH }',${food.priceStr });"><span class="mui-icon mui-icon-minus"></span></button>
<input class="mui-input-numbox number" id="foodNumber" data="${food.id }" type="number" readonly="readonly" name="${food.id }" value=""/>
<button class="mui-btn mui-btn-numbox-plus jia" type="button" onclick="getJia('${food.id }','${food.nameZH }',${food.priceStr });"><i class="fa fa-plus-circle" aria-hidden="true"></i></button>
</div>
</c:if>
<c:if test="${food.maxNumStr =='0' }">
<p style="font-size: 8px; color: red;font-weight: bold;" align="right">已售完</p></c:if>
</div>
</div>
</div>
</div>

</li>
</c:forEach>
</ul>
</div>
</c:forEach>
<c:if test="${orderTime eq null || orderTime.status !='1'}">
<br />
<br />
<font color="red" size="5" >商家还未开启售货</font><br /><br /></c:if>
</div>
</div>
</div>
</div>
</div>



<div id="an-order-car" class="an-order-busket mui-card">
<div class="mui-card-header">购物车
<%-- <h4 class="color-1" >总金额：￥<span class="an-order-number" id="totalMoney2">${totalMoney }</span></h4> --%>
<a class="mui-badge" id="delAll"><i class="fa fa-trash-o" aria-hidden="true"></i> 清空</a>
</div>
<div class="mui-card-content">
<div class="mui-card-content-inner">
<div class="an-order-busket-items">
<form class="mui-input-group" id="myCar">
</form>
</div>
</div>
</div>
</div>


<div class="an-order-bot">
<div class="an-bott-hang">
<div class="an-order-gwc">
<i class="fa shopping-cart" aria-hidden="true">
<span class="an-order-number" id="totalNum">${totalQuantity }</span>
</i>
</div>
<div class="an-order-bot-txt">
<h4 class="color-1" >￥<span class="an-order-number" id="totalMoney">${totalMoney }</span></h4>
<p>配送费以订单为准</p>
</div>
</div>
<div class="an-order-btn">
<a href="" class="settlement" id="settlement">提交订单</a>

</div>
</div>


</div>

<script src="${rootUrl }js/mui.min.js"></script>
<script type="text/javascript">

function detail(obj , id , priceStr ){
var openid = $("#openid").val();
$(obj).attr("href","${rootUrl }app/common/wx/product/getCoudetail?id="+id+"&price="+priceStr+"&openid="+openid);
document.location.href=obj.href;
}
function theme(obj , id ){
var openid = $("#openid").val();
$(obj).attr("href","${rootUrl }app/common/wx/product/theme?id="+id+"&openid="+openid);
document.location.href=obj.href;
}
</script>

<script type="text/javascript">
window.onload=function(){
//给主体div框架高度赋值
map_height=document.documentElement.clientHeight;//获取页面可见高度
document.getElementById("an-heig").style.height= map_height - 192 + "px";
//初始化map
ProIDList = cookie.Get("carList"); //车内商品ID列表
var _TotaPri = 0.0;
if(ProIDList != null && ProIDList != 'null' && ProIDList != ''){
if(ProIDList.lastIndexOf("&") != -1) {
var _arr = ProIDList.split("&");
for(var i = 0 ; i< _arr.length; i++){
var arr_Eve = _arr[i].split("|");
var _id = arr_Eve[0].substr(0,_arr[0].indexOf("="));
var _Num = arr_Eve[1];
var _PriOne = arr_Eve[4];
var _TempPri = parseFloat(_PriOne)*parseInt(_Num);
_TotaPri += parseFloat(_TempPri);
map.put(_id,_Num);
var nameList = document.getElementsByName(_id);
for(var len = 0; len < nameList.length ; len++){
nameList[len].value = _Num;
};
};
}else{
var arrOne = ProIDList.split("|");
var _id = arrOne[0].substr(0,arrOne[0].indexOf("="));
var _Num = arrOne[1];
var _PriOne = arrOne[4];
var _TempPri = parseFloat(_PriOne)*parseInt(_Num);
_TotaPri += parseFloat(_TempPri);
map.put(_id,_Num);
var nameList = document.getElementsByName(_id);
for(var len = 0; len < nameList.length ; len++){
nameList[len].value = _Num;
};
};
};

//-------对商品总价进行操作----------
$("#totalMoney").text(_TotaPri.toFixed(2));
//-------对商品总数进行操作----------
var TotalPro = cookie.Get("TotalPro"); //当前车内含有商品的总数
if(TotalPro != null && TotalPro != 'null' && TotalPro != '' ){
$("#totalNum").text(TotalPro);
}else{
$("#totalNum").text(0);
};
};
</script>
<script type="text/javascript">
mui('body').on('tap','#delAll',function(){
cookie.Del("carList","/");
cookie.Set("TotalPro",0,2,"/");//更新购物车清单
var totalNum = cookie.Get("TotalPro");
$("#totalNum").text(totalNum);
});

// 点击其他地方，隐藏购物车
mui('body').on('tap','.mui-backdrop-action',function(){
var myCar = $('#myCar');
myCar.empty();
document.getElementById("an-order-car").style.display="none";
document.getElementById("an-order-ying").style.display="none";
});

mui('body').on('tap','a',function(){
if($(this).hasClass('searchGo')){
var openid = $('#openid').val();
$(this).attr("href","${rootUrl }app/common/wx/product/searchName?openid="+openid);
document.location.href=this.href;
}
if($(this).hasClass('goBack')){
var kongxc_wx_fen_diancanUrl = $('#kongxc_wx_fen_diancanUrl').val();
var openid = $('#openid').val();
$(this).attr("href",kongxc_wx_fen_diancanUrl+"/app/common/wx/index/manage?openid="+openid);
document.location.href=this.href;
};
if($(this).hasClass('settlement')){

var totalMoney= $("#totalMoney").text();
if(totalMoney > 0){

// ----------
ProIDList = cookie.Get("carList"); //车内商品ID列表
var _detl ='' ;
if(ProIDList != null && ProIDList != 'null' && ProIDList != ''){
if(ProIDList.lastIndexOf("&") != -1) {
var _arr = ProIDList.split("&");
for(var i = 0 ; i< _arr.length; i++){
var arr_Eve = _arr[i].split("|");
var _id = arr_Eve[0].substr(0,_arr[0].indexOf("="));
var _Num = arr_Eve[1];
if(i == 0){
_detl = _id+","+_Num;
}else{
_detl += "@"+_id+","+_Num;
};
};
}else{
var arrOne = ProIDList.split("|");
var _id = arrOne[0].substr(0,arrOne[0].indexOf("="));
var _Num = arrOne[1];
_detl = _id+","+_Num;
};
};

var openid = $('#openid').val();
map.put("totalMoney",totalMoney);
$(this).attr("href","${rootUrl }app/common/wx/product/submit?openid="+openid+"&ProIDList="+_detl+"&totalMoney="+totalMoney);
cookie.Del("carList","/");
cookie.Set("TotalPro",0,2,"/");//更新购物车清单
document.location.href=this.href;
}else{
mui.toast("你还未下单");
};
};
document.location.href=this.href;
});

mui('body').on('tap','.clickPhoto',function(){
var id = this.getAttribute("data-option");
var priceStr = this.getAttribute("data-option_price");
var openid = $("#openid").val();
var uri = "${rootUrl }app/common/wx/product/getCoudetail?id="+id+"&price="+priceStr+"&openid="+openid;
setInterval(function (){
document.location.href=uri;
},500);
});

document.getElementById("an-heig").addEventListener("swipeup",function(){
console.log("你正在向上滑动");
});

var map = new Map();
function getJia(id ,name ,price){

if(Common.checkHasOne(id)){//如果cookie内没有
Common.intoCar(id,'1',name,'i',price);
}else{

ProIDList = cookie.Get("carList"); //车内商品ID列表
if(ProIDList.lastIndexOf("&") != -1) {
var _arr = ProIDList.split("&");
var _SubInd = Common.getSubPlace(ProIDList,id);//获取该物品在COOKIE数组中的下标位置
var arr_ = _arr[_SubInd].split("|");
var _Num = parseInt(arr_[1]);
var _AftNum = _Num + 1;
Common.updateQuantity(id,_AftNum);
}else{
var arrOne = ProIDList.split("|");
var _Num = parseInt(arrOne[1]) ;
var _AftNum = _Num +1;
Common.updateQuantity(id,_AftNum);
};
var TotalPro = cookie.Get("TotalPro");
cookie.Set("TotalPro",parseInt(TotalPro)+1,2,"/");//更新Cookies中的个数
};
//-----------对总价操作-------------------
var _TemPri = $("#totalMoney").text();
var _TotPri = parseFloat(_TemPri);
_TotPri += price;
$("#totalMoney").text(_TotPri.toFixed(2));
//--------对map进行操作,对加减的显示框进行操作----

var _NamList = document.getElementsByName(id);
if(map.containsKey(id)){
var _AftNum = parseInt(map.get(id))+1;
map.remove(id);
map.put(id,_AftNum);
for(var len = 0; len < _NamList.length ; len++){
_NamList[len].value = _AftNum;
};
}else{
map.put(id,1);
for(var len = 0; len < _NamList.length ; len++){
_NamList[len].value = 1;
};
};
//-----------对总量进行操作-----------------
var totalNum = cookie.Get("TotalPro"); //当前车内含有商品的总数
$("#totalNum").text(totalNum);

}

//----------------------减--------------------------
function getJian(id ,name,price){
if(!Common.checkHasOne(id)){
ProIDList = cookie.Get("carList"); //车内商品ID列表
var TotalPro = cookie.Get("TotalPro"); //当前车内含有商品的总数
//----------------对价格进行操作---------------
var totalPrice = 0.0;
var totalMoney = $("#totalMoney").text();
totalPrice = parseFloat(totalMoney) - parseFloat(price);
$("#totalMoney").text(totalPrice.toFixed(2));

if(ProIDList.lastIndexOf("&") != -1) {
var _arr = ProIDList.split("&");
var _SubInd = Common.getSubPlace(ProIDList,id);//获取该物品在COOKIE数组中的下标位置
var arr_Eve = _arr[_SubInd].split("|");
var _AftNum = parseInt(arr_Eve[1])-1;
if(_AftNum == 0){
Common.reMoveOne(id);
}else{
cookie.Set("TotalPro",parseInt(TotalPro)-1,2,"/");//更新Cookies中的个数
Common.updateQuantity(id,_AftNum);
};
}else{
//如果cookie内有
var arrOne = ProIDList.split("|");
var _AftNum = parseInt(arrOne[1])-1;
if(_AftNum == 0){
Common.reMoveOne(id);
}else{
cookie.Set("TotalPro",parseInt(TotalPro)-1,2,"/");//更新Cookies中的个数
Common.updateQuantity(id,_AftNum);
};
};

//----------------对map进行操作,对input输入框操作----------------------
var _AftNum = parseInt(map.get(id))-1;
map.remove(id);
map.put(id,_AftNum);
var _NamList = document.getElementsByName(id);
for(var len = 0; len < _NamList.length;len++){
_NamList[len].value =_AftNum;
};
//-------------对总数进行操作---------------
var totalNum = cookie.Get("TotalPro"); //当前车内含有商品的总数
$("#totalNum").text(totalNum);

};

};
//----------------------购物车--------------------------
// 点击购物车图标出现购物车内容
mui('.an-order-bot').on('tap','.an-order-gwc',function(){
var sty = document.getElementById("an-order-car").style.display;
if(sty =="" ||sty =='none'){
ProIDList = cookie.Get("carList"); //车内商品ID列表

if(ProIDList != null && ProIDList !='null' && ProIDList != ''){
var myCar = $('#myCar');
if(ProIDList.lastIndexOf("&") != -1) {
var json = ProIDList.split("&");
for(var i = 0 ; i< json.length; i++){
var detail = json[i].split("|");
myCar.append(
'<div class="mui-input-row">'+
'<label>'+unescape(detail[2])+'</label>'+
'<div class="an-order-busket-money">￥'+detail[4]+'</div>'+
"<div class='mui-numbox' data-numbox-min='0' data-numbox-max='99' >" +
"<button class='mui-btn mui-btn-numbox-minus jian' type='button' onclick='getJian("+'"'+detail[0].substr(0,detail[0].indexOf("="))+'"'+","+'"'+detail[2]+'"'+","+detail[4]+");' >-</button>" +
"<input class='mui-input-numbox' type='number' value='"+detail[1]+"' name='"+detail[0].substr(0,detail[0].indexOf("="))+"'readonly='readonly' />" +
"<button class='mui-btn mui-btn-numbox-plus jia' type='button' onclick='getJia("+'"'+detail[0].substr(0,detail[0].indexOf("="))+'"'+","+'"'+detail[2]+'"'+","+detail[4]+");' >+</button>" +
"</div>"+
"</div>");
mui('.mui-numbox').numbox();
};
}else{
var detail = ProIDList.split("|");
myCar.append(
'<div class="mui-input-row">'+
'<label>'+unescape(detail[2])+'</label>'+
'<div class="an-order-busket-money">￥'+detail[4]+'</div>'+
"<div class='mui-numbox' data-numbox-min='0' data-numbox-max='99' >" +
"<button class='mui-btn mui-btn-numbox-minus jian' type='button' onclick='getJian("+'"'+detail[0].substr(0,detail[0].indexOf("="))+'"'+","+'"'+detail[2]+'"'+","+detail[4]+");' >-</button>" +
"<input class='mui-input-numbox' type='number' value='"+detail[1]+"' name='"+detail[0].substr(0,detail[0].indexOf("="))+"'readonly='readonly' />" +
"<button class='mui-btn mui-btn-numbox-plus jia' type='button' onclick='getJia("+'"'+detail[0].substr(0,detail[0].indexOf("="))+'"'+","+'"'+detail[2]+'"'+","+detail[4]+");' >+</button>" +
"</div>"+
"</div>");
mui('.mui-numbox').numbox();
};
}
document.getElementById("an-order-car").style.display="block";
document.getElementById("an-order-ying").style.display="block";
}
if(sty == 'block'){
var myCar = $('#myCar');
myCar.empty();
document.getElementById("an-order-car").style.display="none";
document.getElementById("an-order-ying").style.display="none";
};
});

//----------------------Map--------------------------
function Map(){
this.elements = new Array();
//删除MAP所有元素
this.clear = function() {
this.elements = new Array();
}

//向MAP中增加元素（key, value)
this.put = function(_key, _value) {
this.elements.push( {
key : _key,
value : _value
});
}

//删除指定KEY的元素，成功返回True，失败返回False
this.remove = function(_key) {
var bln = false;
try {
for (var i = 0; i < this.elements.length; i++) {
if (this.elements[i].key == _key) {
this.elements.splice(i, 1);
return true;
};
};
} catch (e) {
bln = false;
}
return bln;
}

//获取指定KEY的元素值VALUE，失败返回NULL
this.get = function(_key) {
try {
for (var i = 0; i < this.elements.length; i++) {
if (this.elements[i].key == _key) {
return this.elements[i].value;
};
};
} catch (e) {
return null;
};
}

//判断MAP中是否含有指定KEY的元素
this.containsKey = function(_key) {
var bln = false;
try {
for (var i = 0; i < this.elements.length; i++) {
if (this.elements[i].key == _key) {
bln = true;
};
};
} catch (e) {
bln = false;
}
return bln;
}

//获取MAP中所有VALUE的数组（ARRAY）
this.values = function() {
var arr = new Array();
for (var i = 0; i < this.elements.length; i++) {
arr.push(this.elements[i].value);
}
return arr;
}

//获取MAP中所有KEY的数组（ARRAY）
this.keys = function() {
var arr = new Array();
for (var i = 0; i < this.elements.length; i++) {
arr.push(this.elements[i].key);
}
return arr;
};
};
</script>
<div id="an-order-ying" class="mui-backdrop mui-active mui-backdrop-action" style=" display: none;"></div>
</body>
</html>

};

</script>

/**//*
by 码农.KEN (2007-11-9)
*/
var cookie={
//读取COOKIES,n为COOKIE名
Get:function(n){
var re=new RegExp(n+'=([^;]*);?','gi');
var r=re.exec(document.cookie)||[];
return (r.length>1?r[1]:null);
},
Get1:function(n){
var re=new RegExp(n+'=([^;]*);?','gi');
var r=re.exec(document.cookie)||[];
return unescape(r.length>1?r[1]:null);
},
//写入COOKIES,n为Cookie名，v为value
Set:function(n,v,e,p,d,s){
// alert(n+"========="+v);
var t=new Date;
if(e){
// 8.64e7 一天 3.6e6 一小时
t.setTime(t.getTime() + (e*3.6e6));
}
document.cookie=n+'='+v+'; '+(!e?'':'; expires='+t.toUTCString())+(!p?'':'; path='+p)+(!d?'':'; domain='+d)+(!s?'':'; secure'); // Set cookie
// var ProIDList3 = cookie.Get("carList");
// alert(ProIDList3+"--00");
},
Set1:function(n,v,e,p,d,s){
var t=new Date;
if(e){
// 8.64e7 一天 3.6e6 一小时
t.setTime(t.getTime() + (e*8.64e7));

}
document.cookie=n+'='+escape(v)+'; '+(!e?'':'; expires='+t.toUTCString())+(!p?'':'; path='+p)+(!d?'':'; domain='+d)+(!s?'':'; secure'); // Set cookie
},
Del:function(n,p,d){
var t=cookie.Get(n);
document.cookie=n+'='+(!p?'':'; path='+p)+(!d?'':'; domain='+d)+'; expires=Thu, 01-Jan-70 00:00:01 GMT';
return t;
},
DelCookie:function(NameOfCookie){
if (cookie.getCookie(NameOfCookie))
{
document.cookie = NameOfCookie+"="+";expires=Thu, 01-Jan-70 00:00:01 GMT";
// document.cookie = NameOfCookie+"="+";expires=Thu, 01-Jan-70 00:00:01 GMT";
var ProIDList3 = cookie.Get("carList");
alert(ProIDList3+"--00");
var ProIDList4 = cookie.Get("TotalPro");
alert(ProIDList4+"--11");
}
},
getCookie:function (NameOfCookie) {
if (document.cookie.length > 0)
{
begin = document.cookie.indexOf(NameOfCookie+"=");
if (begin != -1)
{
begin += NameOfCookie.length+1;//cookie值的初始位置
end = document.cookie.indexOf(";", begin);//结束位置
if (end == -1) end = document.cookie.length;//没有;则end为字符串结束位置
// document.write(document.cookie.substring(begin, end));
return unescape(document.cookie.substring(begin, end));
}
}
return null;
}
};
//var TotalPro = cookie.Get("TotalPro"); //当前车内含有商品的总数

</script>