js代码:
<script type="text/javascript"> //全选、付款总金额 function checkAll(checked){ var allCheckBoxs = document.getElementsByName("shouldSum"); var allSum = document.getElementsByName("paySum"); var totalSum = document.getElementById("totalSum"); var sum = 0.0; for (var i=0;i<allCheckBoxs.length ;i++){ if(allCheckBoxs[i].type=="checkbox"){ allCheckBoxs[i].checked=checked; } } for(var i=0;i<allSum.length;i++){ sum += parseFloat(allSum[i].innerHTML); } totalSum.innerHTML = sum; if(!checked){ totalSum.innerHTML = "0"; } } //多选、单选 function oddCheck(){ var sum = 0.0; var totalSum = document.getElementById("totalSum"); for( var i=0;i<document.getElementsByName("shouldSum").length;i++) { if(document.getElementsByName("shouldSum")[i].checked && document.getElementsByName("shouldSum")[i].type == "checkbox") { sum += parseFloat(document.getElementsByName("paySum")[i].innerHTML); } } totalSum.innerHTML = sum; } //去逛逛 function toShopping(){ window.location.href="#"; } //付款 function toPay(){ window.location.href="#"; } //给待付款、待发货、已发货、已签收添加单击事件 function nopay(){ document.getElementById("noPay").style.display=""; document.getElementById("waitDeliverGoods").style.display="none"; document.getElementById("alreadlyDeliverGoods").style.display="none"; document.getElementById("alreadlySignFor").style.display="none"; } function waitdelivergoods(){ document.getElementById("waitDeliverGoods").style.display=""; document.getElementById("noPay").style.display="none"; document.getElementById("alreadlyDeliverGoods").style.display="none"; document.getElementById("alreadlySignFor").style.display="none"; } function alreadlydelivergoods(){ document.getElementById("alreadlyDeliverGoods").style.display=""; document.getElementById("noPay").style.display="none"; document.getElementById("waitDeliverGoods").style.display="none"; document.getElementById("alreadlySignFor").style.display="none"; } function alreadlysignfor(){ document.getElementById("alreadlySignFor").style.display=""; document.getElementById("noPay").style.display="none"; document.getElementById("waitDeliverGoods").style.display="none"; document.getElementById("alreadlyDeliverGoods").style.display="none"; } </script>
html代码:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>会员中心</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- css样式-->
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,th,td
{
margin: 0;
padding: 0;
background-color: #f9f9f9;
}
.viptitle {
}
.viptitlecon {
padding-left: 10px;
margin-top: -30px;
color: #fff;
}
.vipstatu {
width: 90%;
margin: 5px auto 0px;
height: 70px;
background: #fff;
border-bottom: 1px solid #d3d3d3;
}
.vipstatu ul {
list-style-type: none;
padding: 20px;
background: #fff;
text-align: center;
}
.vipstatu ul li {
float: left;
width: 25%;
text-align: center;
background: #fff;
}
.allorder {
width: 90%;
margin: auto;
height: 30px;
background-color: #fff;
padding-top: 10px;
border-bottom: 1px solid #d3d3d3;
}
.ordernum {
padding: 5px;
background-color: transparent;
}
#orderkong {
text-align: center;
margin: 40px 0px;
}
.searchsc {
margin-top: 20px;
}
.qgg {
width: 100px;
height: 30px;
border: 1px solid #999;
background-color: #fff;
color: #00a9a4;
}
.orderlist {
border: 1px solid #d6d6d6;
background-color: #fff;
}
.orderlistcon {
width: 95%;
margin: auto;
background-color: transparent;
}
.orderlistcon ul {
list-style-type: none;
}
.orderlistcon ul li {
padding-bottom: 20px;
padding-top: 10px;
background-color: #fff;
height: 120px;
}
.js {
font-size: 14px;
width: 72%;
margin-left: 105px;
margin-top: -95px;
background-color: transparent;
}
.delete {
text-align: right;
background-color: transparent;
margin-top: 35px;
}
.delete a:link,a:visited {
text-decoration: none;
color: #e36c09;
}
.qxjg {
height: 30px;
background-color: #fff;
border: 1px solid #d3d3d3;
margin-top: 30px;
padding-top: 12px;
}
.paybtn {
margin: 20px 0px;
text-align: center;
}
.paybtns {
width: 100px;
height: 41px;
background: url(${pageContext.request.contextPath}/common/images/tinywebsite_images/gwc.png) no-repeat;
border: none;
color: #fff;
}
</style>
</head>
<body>
<div class="viptitle">
<img src="${pageContext.request.contextPath}/common/images/tinywebsite_images/vip.png" width="100%" />
</div>
<!--viptitle-->
<div class="viptitlecon">${user.nickname} 商城积分:${user.integral}</div>
<!--viptitlecon-->
<div class="vipstatu">
<ul>
<li><c:set var="index" value="0" /> <c:forEach
items="${myOrderList}" var="ordList">
<c:if test="${ordList.status==1}">
<c:set var="index" value="${index+1}" />
</c:if>
</c:forEach>
待付款<div id="onpay" class="ordernum" οnclick="nopay()">${index}</div>
</li>
<li><c:set var="index1" value="0" /> <c:forEach
items="${myOrderList}" var="ordList">
<c:if test="${ordList.status==2}">
<c:set var="index1" value="${index1+1}" />
</c:if>
</c:forEach>
待发货<div id="waitdelivergoods" class="ordernum" οnclick="waitdelivergoods()">${index1}</div>
</li>
<li><c:set var="index2" value="0" /> <c:forEach
items="${myOrderList}" var="ordList">
<c:if test="${ordList.status==3}">
<c:set var="index2" value="${index2+1}" />
</c:if>
</c:forEach>
已发货<div id="alreadlydelivergoods" class="ordernum" οnclick="alreadlydelivergoods()">${index2}</div>
</li>
<li><c:set var="index3" value="0" /> <c:forEach
items="${myOrderList}" var="ordList">
<c:if test="${ordList.status==4}">
<c:set var="index3" value="${index3+1}" />
</c:if>
</c:forEach>
已签收<div id="alreadlysignfor" class="ordernum" οnclick="alreadlysignfor()">${index3}</div>
</li>
</ul>
</div>
<!--vipstatu-->
<div class="allorder"> 全部订单</div>
<!--allorder-->
<c:if test="${myOrderList == null}">
<div id="orderkong" >
<h3>居然还没有订单</h3>
<div class="searchsc">
<input type="button" name="qgg" value="去逛逛" class="qgg" οnclick="toShopping()"/>
</div>
</div>
</c:if>
<div id="onPay" >
<div class="orderlist">
<div class="orderlistcon">
<ul>
<c:forEach items="${myOrderList}" var="ord">
<c:if test="${ord.status==1}">
<li><input type="checkbox" id="shouldSum" name="shouldSum" value="" οnclick="oddCheck()"/>
<img src="${pageContext.request.contextPath}/common/images/tinywebsite_images/orderlist.jpg" style="width:100px; height:100px;"/>
<div class="js">
商品金额:${ord.goodssum} 包裹数量:${ord.packagenumber} 商品数量:${ord.commoditynumber}<br />
应付金额:¥<span id="paySum" name="paySum" style="color:#c70c0b; font-size:16px;">${ord.payable}</span>
</div>
<div class="delete">
<a href="${pageContext.request.contextPath}/order/delete?id=${ord.id}">删除</a>
</div>
</li>
</c:if>
</c:forEach>
</ul>
</div>
<!--orderlistcon-->
</div>
<!-- orderlist-->
<div class="qxjg">
<div class="orderlistcon">
<input type="checkbox" name="chk" value="" οnclick="checkAll(this.checked)"/> <span
style="color:#00a9a4;">全选</span>
<span style="float:right; color:#666;">商品总价:
¥<span id="totalSum" style="color:#c70c0b;">0</span>
</span>
</div>
</div>
<div class="paybtn">
<input type="button" name="paybtn" class="paybtns" value="付款" οnclick="toPay()"/>
</div>
</div>
<!--waitDeliverGoods-->
<div id="waitDeliverGoods" style="display:none;">
<div class="orderlist">
<div class="orderlistcon">
<ul>
<c:forEach items="${myOrderList}" var="ord">
<c:if test="${ord.status==2}">
<li><input type="checkbox" name="chk" value="" checked />
<img src="${pageContext.request.contextPath}/common/images/tinywebsite_images/orderlist.jpg" style="width:100px; height:100px;"/>
<div class="js">
商品金额:${ord.goodssum} 包裹数量:${ord.packagenumber} 商品数量:${ord.commoditynumber}<br />
应付金额:<span style="color:#c70c0b; font-size:16px;">¥${ord.payable}</span>
</div>
<div class="delete">
<a href="${pageContext.request.contextPath}/order/delete?id=${ord.id}">删除</a>
</div>
</li>
</c:if>
</c:forEach>
</ul>
</div>
<!--orderlistcon-->
</div>
<!-- orderlist-->
</div>
<!--waitDeliverGoods-->
<!--alreadlyDeliverGoods-->
<div id="alreadlyDeliverGoods" style="display:none;" >
<div class="orderlist">
<div class="orderlistcon">
<ul>
<c:forEach items="${myOrderList}" var="ord">
<c:if test="${ord.status==3}">
<li><input type="checkbox" name="chk" value="" checked />
<img src="${pageContext.request.contextPath}/common/images/tinywebsite_images/orderlist.jpg" style="width:100px; height:100px;"/>
<div class="js">
商品金额:${ord.goodssum} 包裹数量:${ord.packagenumber} 商品数量:${ord.commoditynumber}<br />
应付金额:<span style="color:#c70c0b; font-size:16px;">¥${ord.payable}</span>
</div>
<div class="delete">
<a href="${pageContext.request.contextPath}/order/delete?id=${ord.id}">删除</a>
</div>
</li>
</c:if>
</c:forEach>
</ul>
</div>
<!--orderlistcon-->
</div>
<!-- orderlist-->
</div>
<!--alreadlyDeliverGoods-->
<!--alreadlySignFor-->
<div id="alreadlySignFor" style="display:none;" >
<div class="orderlist">
<div class="orderlistcon">
<ul>
<c:forEach items="${myOrderList}" var="ord">
<c:if test="${ord.status==4}">
<li><input type="checkbox" name="chk" value="" checked />
<img src="${pageContext.request.contextPath}/common/images/tinywebsite_images/orderlist.jpg" style="width:100px; height:100px;"/>
<div class="js">
商品金额:${ord.goodssum} 包裹数量:${ord.packagenumber} 商品数量:${ord.commoditynumber}<br />
应付金额:<span style="color:#c70c0b; font-size:16px;">¥${ord.payable}</span>
</div>
<div class="delete">
<a href="${pageContext.request.contextPath}/order/delete?id=${ord.id}">删除</a>
</div>
</li>
</c:if>
</c:forEach>
</ul>
</div>
<!--orderlistcon-->
</div>
<!-- orderlist-->
</div>
<!--alreadlySignFor-->
</body>
</html>