第十一天-购物车订单系统的实现

1 购物车功能

1.1 功能说明

1、商品加入购物车时，不是必须要求登录。

2、计算购物车中商品的总价。当商品数量发生变化时需要重新计算。

3、用户可以删除购物车中的商

4、用户下单后，删除购物车的功能。

1.2 功能分析

1、在用户不登陆的清空下也可以使用购物车，那么就需要把购物车信息放入cookie中。

2、可以把商品信息，存放到pojo中，然后序列化成json存入cookie中。

3、取商品信息可以从cookie中把json数据取出来，然后转换成java对象即可。

4、此功能只需要操作cookie不需要数据库的支持，所以只需要在taotao-portal中实现即可。

5、购物车分有四种动作

​ a) 添加商品

​ b) 修改商品数量

​ c) 删除购物车中的商品

​ d) 展示购物车商品列表

1.3 添加购物车商品

1.3.1 service

功能：

1、接收controller传递过来的商品id，根据商品id查询商品信息。

2、从cookie中取出购物车信息，转换成商品pojo列表。

3、把商品信息添加到商品列表中。

参数：

1、商品id

2、Request

3、response

返回值：

TaoTaoResult

CartItem.java

/taotao-portal/src/main/java/com/taotao/portal/pojo/CartItem.java

创建购物车商品pojo:

package com.taotao.portal.pojo;

public class CartItem {

	private long id;
	private String title;
	private Integer num;
	private long price;
	private String image;
	
	
	public long getId() {
		return id;
	}
	public void setId(long id) {
		this.id = id;
	}
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public Integer getNum() {
		return num;
	}
	public void setNum(Integer num) {
		this.num = num;
	}
	public long getPrice() {
		return price;
	}
	public void setPrice(long price) {
		this.price = price;
	}
	public String getImage() {
		return image;
	}
	public void setImage(String image) {
		this.image = image;
	}
}

CartService.java

/taotao-portal/src/main/java/com/taotao/portal/service/CartService.java

package com.taotao.portal.service;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.taotao.common.utill.TaotaoResult;
/**
 * 购物车
 * @author Lenovo
 *
 */
public interface CartService {
	/**
	 * 添加购物车商品
	 * @param itemId
	 * @param num
	 * @return
	 */
	TaotaoResult addCartItem(long itemId,int num,HttpServletRequest request, HttpServletResponse response);
}

CartServiceImpl.java

/taotao-portal/src/main/java/com/taotao/portal/service/impl/CartServiceImpl.java

package com.taotao.portal.service.impl;

import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;

import com.taotao.common.utill.CookieUtils;
import com.taotao.common.utill.HttpClientUtil;
import com.taotao.common.utill.JsonUtils;
import com.taotao.common.utill.TaotaoResult;
import com.taotao.pojo.TbItem;
import com.taotao.portal.pojo.CartItem;
import com.taotao.portal.service.CartService;

/**
 * 购物车Service
 * <p>Title: CartServiceImpl</p>
 * <p>Description: </p>
 * <p>Company: www.itcast.com</p> 
 * @author	入云龙
 * @date	2015年9月15日下午2:39:19
 * @version 1.0
 */
@Service
public class CartServiceImpl implements CartService{
	
	@Value("${REST_BASE_URL}")
	private String REST_BASE_URL;
	@Value("${ITEM_INFO_URL}")
	private String ITEM_INFO_URL;
	

	/**
	 * 添加购物车商品
	 * <p>Title: addCartItem</p>
	 * <p>Description: </p>
	 * @param itemId
	 * @param num
	 * @return
	 * @see com.taotao.portal.service.CartService#addCartItem(long, int)
	 */
	@Override
	public TaotaoResult addCartItem(long itemId, int num, 
			HttpServletRequest request, HttpServletResponse response) {
		//取商品信息
		CartItem cartItem = null;
		//取购物车商品列表
		List<CartItem> itemList = getCartItemList(request);
		//判断购物车商品列表中是否存在此商品
		for (CartItem cItem : itemList) {
			//如果存在此商品
			if (cItem.getId() == itemId) {
				//增加商品数量
				cItem.setNum(cItem.getNum() + num);
				cartItem = cItem;
				break;
			}
		}
		if (cartItem == null) {
			cartItem = new CartItem();
			//根据商品id查询商品基本信息。
			String json = HttpClientUtil.doGet(REST_BASE_URL + ITEM_INFO_URL + itemId); 
			//把json转换成java对象
			TaotaoResult taotaoResult = TaotaoResult.formatToPojo(json, TbItem.class);
			if (taotaoResult.getStatus() == 200) {
				TbItem item = (TbItem) taotaoResult.getData();
				cartItem.setId(item.getId());
				cartItem.setTitle(item.getTitle());
				cartItem.setImage(item.getImage() == null ? "":item.getImage().split(",")[0]);
				cartItem.setNum(num);
				cartItem.setPrice(item.getPrice());
			}
			//添加到购物车列表
			itemList.add(cartItem);
		}
		//把购物车列表写入cookie
		CookieUtils.setCookie(request, response, "TT_CART", JsonUtils.objectToJson(itemList), true);
		
		return TaotaoResult.ok();
	}
	/**
	 * 从cookie中取商品列表
	 * <p>Title: getCartItemList</p>
	 * <p>Description: </p>
	 * @return
	 */
	private List<CartItem> getCartItemList(HttpServletRequest request) {
		//从cookie中取商品列表
		String cartJson = CookieUtils.getCookieValue(request, "TT_CART", true);
		if (cartJson == null) {
			return new ArrayList<>();
		}
		//把json转换成商品列表
		try {
			List<CartItem> list = JsonUtils.jsonToList(cartJson, CartItem.class);
			return list;
		} catch (Exception e) {
			e.printStackTrace();
		}
		return new ArrayList<>();
	}
	
	
	@Override
	public List<CartItem> getCartItemList(HttpServletRequest request, HttpServletResponse response) {
		List<CartItem> itemList = getCartItemList(request);
		return itemList;
	}
	/**
	 * 删除购物车商品
	 * <p>Title: deleteCartItem</p>
	 * <p>Description: </p>
	 * @param itemId
	 * @return
	 * @see com.taotao.portal.service.CartService#deleteCartItem(long)
	 */
	@Override
	public TaotaoResult deleteCartItem(long itemId, HttpServletRequest request, HttpServletResponse response) {
		//从cookie中取购物车商品列表
		List<CartItem> itemList = getCartItemList(request);
		//从列表中找到此商品
		for (CartItem cartItem : itemList) {
			if (cartItem.getId() == itemId) {
				itemList.remove(cartItem);
				break;
			}
				 
		}
		//把购物车列表重新写入cookie
		CookieUtils.setCookie(request, response, "TT_CART", JsonUtils.objectToJson(itemList), true);
		
		return TaotaoResult.ok();
	}
	
	

}

1.3.2 controller

接受商品id和商品数量，商品数量如果为空默认为1，调用service向购物车添加商品。展示添加成功的页面

CartController.java

/taotao-portal/src/main/java/com/taotao/portal/controller/CartController.java

package com.taotao.portal.controller;


import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import com.taotao.common.utill.TaotaoResult;
import com.taotao.portal.service.CartService;

/**
 * 购物车Controller
 * 
 */
@Controller
@RequestMapping("/cart")
public class CartController {

	@Autowired
	private CartService cartService;
	
	@RequestMapping("/add/{itemId}")
	public String addCartItem(@PathVariable Long itemId, 
			@RequestParam(defaultValue="1")Integer num, 
			HttpServletRequest request, HttpServletResponse response) {
		TaotaoResult result = cartService.addCartItem(itemId, num, request, response);
		return "cartSuccess";
	}
	
	
}

1.3.3 添加购物车成功页面

cartSuccess.jsp

/taotao-portal/src/main/webapp/WEB-INF/jsp/cartSuccess.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="format-detection" content="telephone=no">

<link rel="stylesheet" type="text/css"
	href="/css/base.css">
<link href="/css/initcart20150123.css" type="text/css"
	rel="stylesheet">
<title>商品已成功加入购物车</title>
<style id="style-1-cropbar-clipper">
/* Copyright 2014 Evernote Corporation. All rights reserved. */
.en-markup-crop-options {
	top: 18px !important;
	left: 50% !important;
	margin-left: -100px !important;
	width: 200px !important;
	border: 2px rgba(255, 255, 255, .38) solid !important;
	border-radius: 4px !important;
}

.en-markup-crop-options div div:first-of-type {
	margin-left: 0px !important;
}
</style>
</head>
<body class="root61">

    <jsp:include page="commons/header.jsp" />
	<!--main start-->
	<div class="w main">
		<div class="left">
			<div class="m" id="succeed">

				<div class="corner tl"></div>
				<div class="corner tr"></div>
				<div class="corner bl"></div>
				<div class="corner br"></div>
				<div class="success">
					<div class="success-b">
						<h3>商品已成功加入购物车！</h3>
						<span id="flashBuy" style="display: none">商品数量有限，请您尽快下单并付款！</span>
					</div>
					<span id="initCart_next_go"> <a class="btn-1"
						href="/cart/cart.html"
						id="GotoShoppingCart">去购物车结算</a> <span class="ml10">您还可以 <a
							class="ftx-05" href="javascript:history.back();">继续购物</a></span>
					</span>
				</div>
			</div>
			<!--succeed end-->

		</div>
	</div>
   <jsp:include page="commons/footer.jsp" />


</body>
</html>

base.css

/taotao-portal/src/main/webapp/css/base.css

/* 
 Copyright @ JD.COM 
 Date: 2014-09-23 3:24:26 [PM] 
 */
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
	pre, a, address, big, cite, code, del, em, font, img, ins, small,
	strong, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form,
	label, legend {
	margin: 0;
	padding: 0
}

ol, ul {
	list-style: none
}

:focus {
	outline: 0
}

a img {
	border: 0
}

img {
	vertical-align: middle
}

table {
	empty-cells: show
}

ins {
	text-decoration: none
}

del {
	text-decoration: line-through
}

em {
	font-style: normal
}

button::-moz-focus-inner, input[type=reset]::-moz-focus-inner, input[type=button]::-moz-focus-inner,
	input[type=submit]::-moz-focus-inner, input[type=file]>input[type=button]::-moz-focus-inner
	{
	border: 0;
	padding: 0
}

.red{
	color: red;
}

.g-0 {
	width: 100%
}

.g-8 {
	width: 150px
}

.g-a {
	width: 190px
}

.g-a1 {
	width: 210px
}

.g-a5 {
	width: 290px
}

.g-b1 {
	width: 410px
}

.g-b4 {
	width: 470px
}

.g-b8 {
	width: 550px
}

.g-b9 {
	width: 570px
}

.g-c9 {
	width: 770px
}

.g-d {
	width: 790px
}

.g-e {
	width: 990px
}

.g-0, .g-8, .g-a, .g-a1, .g-a5, .g-b1, .g-b4, .g-b8, .g-b9, .g-c9, .g-d,
	.g-e {
	float: left
}

.g-8, .g-a, .g-a1, .g-a5, .g-b1, .g-b4, .g-b8, .g-b9, .g-c9, .g-d, .g-e
	{
	position: relative;
	z-index: 1
}

.g-80, .c-80 {
	margin-left: 160px
}

.g-a0, .c-a0 {
	margin-left: 200px
}

.g-a10, .c-a10 {
	margin-left: 220px
}

.g-a50, .c-a50 {
	margin-left: 300px
}

.g-b10, .c-b10 {
	margin-left: 420px
}

.g-b40, .c-b40 {
	margin-left: 480px
}

.g-b80, .c-b80 {
	margin-left: 560px
}

.g-b90, .c-b90 {
	margin-left: 580px
}

.g-c90, .c-c90 {
	margin-left: 780px
}

.g-d0, .c-d0 {
	margin-left: 800px
}

.g-e0, .c-e0 {
	margin-left: 1000px
}

* html .g-80, * html .g-a0, * html .g-a10, * html .g-a50, * html .g-b10,
	* html .g-b40, * html .g-b80, * html .g-b90, * html .g-c90, * html .g-d0,
	* html .g-e0 {
	float: right;
	margin-left: 10px
}

.g-08, .c-08 {
	margin-right: 160px
}

.g-0a, .c-0a {
	margin-right: 200px
}

.g-0a1, .c-0a1 {
	margin-right: 220px
}

.g-0a5, .c-0a5 {
	margin-right: 300px
}

.g-0b1, .c-0b1 {
	margin-right: 420px
}

.g-0b4, .c-0b4 {
	margin-right: 480px
}

.g-0b8, .c-0b8 {
	margin-right: 560px
}

.g-0b9, .c-0b9 {
	margin-right: 580px
}

.g-0c9, .c-0c9 {
	margin-right: 780px
}

.g-0d, .c-0d {
	margin-right: 800px
}

.g-0e, .c-0e {
	margin-right: 1000px
}

* html .g-08, * html .g-0a, * html .g-0a1, * html .g-0a5, * html .g-0b1,
	* html .g-0b4, * html .g-0b8, * html .g-0b9, * html .g-0c9, * html .g-0d,
	* html .g-0e {
	float: left;
	margin-right: 10px
}

.c-0 {
	margin-left: -100%
}

.c-080 {
	margin-left: -150px
}

.c-0a0 {
	margin-left: -190px
}

.c-0a10 {
	margin-left: -210px
}

.c-0a50 {
	margin-left: -290px
}

.c-0b10 {
	margin-left: -410px
}

.c-0b40 {
	margin-left: -470px
}

.c-0b80 {
	margin-left: -550px
}

.c-0b90 {
	margin-left: -570px
}

.c-0c90 {
	margin-left: -770px
}

.c-0d0 {
	margin-left: -790px
}

.c-0e0 {
	margin-left: -990px
}

* html .c-0 {
	filter: ""
}

.fl {
	float: left
}

.fr {
	float: right
}

.fn {
	float: none
}

.al {
	text-align: left
}

.ac {
	text-align: center
}

.ar {
	text-align: right
}

.clr {
	display: block;
	overflow: hidden;
	clear: both;
	height: 0;
	line-height: 0;
	font-size: 0
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden
}

.clearfix {
	display: inline-table
}

* html .clearfix {
	height: 1%
}

.clearfix {
	display: block
}

*+html .clearfix {
	min-height: 1%
}

.overflow {
	overflow: hidden
}

.m, .mt, .mc, .mb, .sm, .smt, .smc, .smb {
	overflow: hidden;
	zoom: 1
}

.m, .sm {
	margin-bottom: 10px
}

.mt, .smt {
	cursor: default
}

.mt h2, .smt h3 {
	font-family: "microsoft yahei"
}

.m .mt .extra a:link, .m .mt .extra a:visited, .sm .smt .extra a:link,
	.sm .smt .extra a:visited {
	color: #005EA7
}

.form label, .form input, .form select, .form textarea, .form button,
	.form .label {
	float: left;
	font-size: 12px
}

.block {
	display: block;
	overflow: hidden
}

.hide {
	display: none
}

.invisible {
	visibility: hidden
}

.tab {
	overflow: hidden;
	zoom: 1
}

.tab li, .tab a, .tab-item {
	float: left;
	text-align: center
}

.btn-img, .button {
	display: inline-block;
	margin: 0;
	padding: 0;
	border: 0;
	text-align: center;
	cursor: pointer
}

.btn-text {
	margin: 0;
	padding: 0;
	text-align: center;
	cursor: pointer
}

body {
	font: 12px/150% Arial, Verdana, "\5b8b\4f53";
	color: #666;
	background: #fff;
	_background-image: url(about:blank);
	_background-attachment: fixed
}

h1 {
	font: 20px "microsoft yahei", "\5b8b\4f53"
}

h2, h3 {
	font-size: 14px
}

h4, h5, h6 {
	font-size: 12px
}

a {
	color: #666;
	text-decoration: none
}

a:hover {
	color: #E4393C;
	text-decoration: underline
}

.w {
	width: 990px;
	margin: 0 auto
}

.w1 {
	margin-bottom: 10px
}

.root61 .w {
	width: 1210px
}

.lh {
	overflow: hidden;
	zoom: 1
}

.lh li, .lh dl, .lh .item {
	float: left
}

.ld {
	position: relative;
	zoom: 1
}

.ld s, .ld b, .ld .block {
	position: absolute;
	overflow: hidden
}

.p-img, .p-name, .p-price, .p-market, .p-detail {
	overflow: hidden
}

.p-img {
	padding: 5px 0
}

.p-img a:link, .p-img a:visited {
	text-decoration: none
}

.p-img .pi {
	cursor: pointer
}

.p-name, .p-detail {
	word-break: break-all;
	word-wrap: break-word
}

.p-price {
	color: #999
}

.p-price strong, .p-market strong {
	color: #E4393C
}

.pi {
	position: absolute;
	top: 0;
	right: 0;
	top: 10px;
	width: 52px;
	height: 40px;
	padding: 12px 0 0;
	background-image:
		url(../images/20130330C.png);
	background-repeat: no-repeat;
	font-family: "microsoft yahei";
	color: #fff;
	line-height: 31px;
	overflow: hidden;
	font-size: 16px;
	zoom: 1
}

.pix0 {
	background-position: 0 -40px
}

.pix1 {
	background-position: 0 -100px
}

.pif1 {
	font-size: 22px
}

.pif4 {
	width: 36px;
	height: 42px;
	padding-top: 10px;
	padding-left: 8px;
	padding-right: 8px;
	font-size: 14px;
	line-height: 16px
}

.pt {
	display: inline-block;
	overflow: hidden
}

.ptx1 {
	
}

img.err-product, img.err-poster {
	background: url(../images/error-jd.gif)
		no-repeat 50% 50%
}

img.err-price {
	width: 81px;
	height: 22px;
	background: url(../images/error-3.gif)
		no-repeat 50% 50%
}

.loading-style1 b, .loading-style2 {
	background: url(../images/loading-jd.gif)
		no-repeat 50% 50%
}

.loading-style1 {
	width: 126px;
	margin: 0 auto;
	text-align: center;
	color: #999
}

.loading-style1 b {
	display: block;
	width: 43px;
	height: 24px;
	margin: 0 auto 5px
}

.slide {
	position: relative;
	background: url(../images/loading-jd.gif)
		no-repeat center center
}

.slide .slide-itemswrap {
	position: relative;
	overflow: hidden
}

.slide .slide-items {
	position: absolute;
	overflow: hidden
}

.slide-controls span {
	display: inline-block;
	margin: 0 1px;
	background: #999;
	text-align: center;
	cursor: default;
	color: #fff;
	border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px
}

.slide-controls a:link, .slide-controls a:visited {
	display: inline-block;
	width: 100%;
	color: #fff;
	font-weight: 700
}

.slide-controls .curr {
	background: #E4393C
}

#toppanel {
	position: relative;
	z-index: 1000
}

#sidepanel {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 1000
}

#sidepanel a, #sidepanel b {
	background-image:
		url(../images/20130330A_2.png);
	background-repeat: no-repeat
}

#sidepanel a {
	display: block;
	position: relative;
	width: 17px;
	height: 66px;
	padding: 28px 4px 0;
	margin: 5px 0;
	text-align: center;
	line-height: 14px;
	text-decoration: none
}

#sidepanel b {
	position: absolute;
	top: 9px;
	left: 4px;
	width: 17px;
	height: 16px;
	overflow: hidden
}

#sidepanel a:link, #sidepanel a:visited {
	background-position: -85px -149px
}

#sidepanel a:hover, #sidepanel a:active {
	background-position: -50px -149px
}

#sidepanel .gotop:link b, #sidepanel .gotop:visited b {
	background-position: -21px -219px
}

#sidepanel .gotop:hover b, #sidepanel .gotop:active b {
	background-position: -21px -200px
}

#sidepanel .research:link b, #sidepanel .research:visited b {
	background-position: 0 -219px
}

#sidepanel .research:hover b, #sidepanel .research:active b {
	background-position: 0 -200px
}

* html #sidepanel {
	position: absolute;
	top: expression(documentElement.scrollTop +
		documentElement.clientHeight-this.offsetHeight);
	overflow: visible
}

.da0x150 {
	width: 310px;
	height: 150px;
	background: #efefef
}

.da0x100 {
	width: 310px;
	height: 100px;
	background: #efefef
}

.pagin a, .pagin span {
	float: left;
	height: 20px;
	padding: 3px 10px;
	border: 1px solid #ccc;
	margin-left: 2px;
	font-family: arial;
	line-height: 20px;
	font-size: 14px;
	overflow: hidden;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px
}

.pagin .text, .pagin .current {
	border: 0;
	padding: 4px 11px
}

.pagin a:link, .pagin a:visited {
	color: #005aa0
}

.pagin a:hover, .pagin a:active {
	background: #005aa0;
	color: #fff;
	text-decoration: none
}

.pagin .current, .pagin .current:link, .pagin .current:visited {
	color: #f60;
	font-weight: 700
}

.pagin b {
	display: block;
	position: absolute;
	top: 9px;
	width: 5px;
	height: 9px;
	background-image:
		url(../images/bg_hotsale.gif);
	background-repeat: no-repeat;
	overflow: hidden
}

.pagin .prev, .pagin .next, .pagin .prev-disabled, .pagin .next-disabled
	{
	position: relative;
	padding-top: 5px;
	height: 18px;
	line-height: 18px
}

.pagin .prev-disabled, .pagin .next-disabled {
	color: #ccc;
	cursor: default
}

.pagin .prev, .pagin .prev-disabled {
	padding-left: 12px
}

.pagin .prev b {
	left: 3px;
	background-position: -68px -608px
}

.pagin .prev-disabled b {
	left: 3px;
	background-position: -80px -608px
}

.pagin .next, .pagin .next-disabled {
	padding-right: 12px
}

.pagin .next b {
	right: 3px;
	background-position: -62px -608px
}

.pagin .next-disabled b {
	right: 3px;
	background-position: -74px -608px
}

.pagin-m a, .pagin-m span {
	height: 14px;
	line-height: 14px;
	font-size: 12px
}

.pagin-m b {
	top: 5px
}

.pagin-m .prev, .pagin-m .next, .pagin-m .prev-disabled, .pagin-m .next-disabled
	{
	padding-top: 3px;
	height: 14px;
	line-height: 14px;
	*line-height: 16px
}

.thickframe {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000000;
	width: 100%;
	height: 100%;
	background: #000;
	border: 0;
	filter: alpha(opacity = 0);
	opacity: 0
}

.thickdiv {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000001;
	width: 100%;
	height: 100%;
	background: #000;
	border: 0;
	filter: alpha(opacity = 15);
	opacity: .15
}

.thickbox {
	position: absolute;
	z-index: 10000002;
	overflow: hidden;
	padding: 0;
	border: 4px solid rgba(0, 0, 0, .1);
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px
}

.thicktitle {
	height: 27px;
	padding: 0 10px;
	border: solid #C4C4C4;
	border-width: 1px 1px 0;
	background: #F3F3F3;
	line-height: 27px;
	font-family: arial, "\5b8b\4f53";
	font-size: 14px;
	font-weight: 700;
	color: #333
}

.thickwrap .thicktitle {
	height: 31px;
	padding: 0 10px;
	background: #f5f5f5;
	line-height: 31px;
	font-family: arial, "\5b8b\4f53";
	font-size: 14px;
	font-weight: 700;
	color: #333;
	border: 0
}

.thickclose:link, .thickclose:visited {
	display: block;
	position: absolute;
	z-index: 100000;
	top: 7px;
	right: 12px;
	overflow: hidden;
	width: 15px;
	height: 15px;
	background:
		url(../images/bg_thickbox.gif)
		no-repeat 0 -18px;
	font-size: 0;
	line-height: 100px
}

.thickwrap .thickclose:link, .thickwrap .thickclose:visited {
	display: block;
	position: absolute;
	z-index: 100000;
	top: 5px;
	right: 10px;
	overflow: hidden;
	width: 21px;
	height: 21px;
	background:
		url(../images/thickbox_close.png)
		no-repeat 0 0;
	font-size: 0;
	line-height: 100px
}

.thickcon {
	overflow: auto;
	background: #fff;
	padding: 10px
}

.thickwrap {
	border: 1px solid #c4c4c4
}

.thickwrap .thickcon {
	background: 0
}

.thickwrap {
	border: 1px solid #c4c4c4;
	background: #fff
}

.thickloading {
	background: url(../images/loading-jd.gif)
		#fff no-repeat center center
}

.thickcountdown {
	height: 20px;
	padding-right: 6px;
	margin-top: -20px;
	text-align: right;
	color: #999
}

* html .thickframe {
	position: absolute
}

* html .thickdiv {
	position: absolute
}

#thicktitler {
	
}

#thickcloser:link, #thickcloser:visited {
	
}

#thickconr iframe {
	display: block
}

.compare {
	width: 200px;
	border: 1px solid #C4C4C4;
	background: #fff;
	display: none
}

.compare .mt {
	background: #F3F3F3;
	padding: 3px 5px;
	height: 18px;
	line-height: 18px;
	overflow: hidden;
	zoom: 1
}

.compare h5 {
	float: left
}

.compare .extra {
	float: right;
	margin-top: 2px;
	width: 13px;
	height: 13px;
	background:
		url(../images/bg_hotsale.gif)
		no-repeat -51px -632px;
	cursor: pointer
}

.compare .mc {
	padding: 2px
}

.compare .mc li {
	border: 1px solid #E5E5E5;
	padding: 4px 12px 4px 4px;
	margin-bottom: 2px
}

.compare .mb {
	text-align: center;
	padding: 5px 0
}

.compare .btn {
	cursor: pointer
}

.crumb {
	padding: 0 5px 8px
}

.breadcrumb {
	height: 20px;
	padding: 0 0 4px 6px;
	margin-bottom: 10px;
	overflow: hidden;
	line-height: 20px;
	vertical-align: baseline
}

.breadcrumb strong, .breadcrumb h1 {
	display: inline;
	font-weight: 700;
	line-height: 20px;
	font-size: 18px;
	font-family: "microsoft yahei"
}

.breadcrumb span {
	font-family: "\5b8b\4f53"
}

.iloading {
	width: 140px;
	height: 30px;
	padding-left: 22px;
	background: url(../images/loading.gif)
		no-repeat 0 center;
	margin: 0 auto;
	line-height: 30px;
	color: #999
}

.norecode {
	color: #999
}

.model-prompt .con {
	position: relative;
	zoom: 1
}

.model-prompt .con b {
	position: absolute;
	background-image:
		url(../images/bg_prompt.gif);
	background-repeat: no-repeat
}

#model-collect .con {
	padding: 20px 0 0 60px;
	color: #999
}

#model-collect .con a {
	text-decoration: underline;
	color: #999
}

#model-collect .success {
	top: 20px;
	left: 10px;
	width: 34px;
	height: 30px;
	background-position: 0 0
}

#model-collect .failed {
	top: 20px;
	left: 10px;
	width: 34px;
	height: 30px;
	background-position: 0 -32px
}

#css-error {
	display: none
}

.jtip {
	position: absolute;
	z-index: 3;
	padding: 4px 15px 4px 5px;
	background: #FFFCEE;
	border: 1px solid #F6E09C;
	-moz-box-shadow: 0 0 5px #DDD;
	-webkit-box-shadow: 0 0 5px #DDD;
	box-shadow: 0 0 5px #DDD
}

.jtip-content {
	color: #F60
}

.jtip-arrow {
	position: absolute;
	left: -5px;
	width: 5px;
	height: 16px;
	overflow: hidden
}

.jtip-arrow1 {
	position: absolute;
	top: 0;
	left: -8px;
	width: 0;
	height: 0;
	border-width: 8px;
	border-style: dashed solid dashed dashed;
	border-color: transparent #F6E09C transparent transparent;
	overflow: hidden
}

.jtip-arrow2 {
	position: absolute;
	top: 0;
	left: -7px;
	z-index: 1;
	width: 0;
	height: 0;
	border-width: 8px;
	border-style: dashed solid dashed dashed;
	border-color: transparent #FFFCEE transparent transparent;
	overflow: hidden
}

.jtip-close {
	position: absolute;
	top: 3px;
	right: 5px;
	line-height: 14px;
	cursor: pointer;
	font-size: 14px
}

#shortcut-2013 .fl b, #shortcut-2013 .fr b {
	background-image:
		url(../images/20130330A_2.png);
	background-repeat: no-repeat
}

#shortcut-2013, #shortcut-2013 .w {
	height: 30px;
	background: #F7F7F7
}

#shortcut-2013 {
	width: 100%;
	border-bottom: 1px solid #eee;
	line-height: 30px
}

#shortcut-2013 li {
	height: 30px;
	padding: 0 11px 0 12px
}

#shortcut-2013 li s {
	top: 9px;
	left: 0;
	width: 0;
	height: 12px;
	border-left: 1px solid #DDD;
	overflow: hidden
}

#shortcut-2013 b {
	transition: transform .2s ease-in 0s;
	-webkit-transition: -webkit-transform .2s ease-in 0s
}

#shortcut-2013 .fl {
	overflow: visible
}

#shortcut-2013 .fl .fore1 {
	padding-left: 16px;
	z-index: 13
}

#shortcut-2013 .fl b {
	top: 8px;
	left: 0;
	width: 13px;
	height: 13px;
	background: url(../images/20130725.png)
		no-repeat 0 0;
	cursor: pointer
}

#shortcut-2013 .fl li:hover b {
	transform: rotate(720deg);
	-webkit-transform: rotate(720deg)
}

#shortcut-2013 .fl .jtip {
	left: 68px;
	top: 6px;
	width: 120px;
	line-height: 16px
}

#shortcut-2013 .fr {
	height: 30px;
	overflow: visible
}

#shortcut-2013 .fr b {
	top: 13px;
	right: 8px;
	width: 7px;
	height: 4px;
	background-position: -95px -55px
}

#shortcut-2013 .menu {
	width: 60px;
	z-index: 12
}

#shortcut-2013 .dd {
	display: none
}

#shortcut-2013 .hover .outline, #shortcut-2013 .hover .dd {
	position: absolute;
	border: 1px solid #DDD;
	background: #fff;
	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .12);
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .12);
	box-shadow: 0 0 10px rgba(0, 0, 0, .12)
}

#shortcut-2013 .hover .outline {
	z-index: -1;
	left: 5px;
	top: 3px;
	width: 73px;
	height: 28px
}

#shortcut-2013 .hover .blank {
	position: absolute;
	z-index: 1;
	top: 23px;
	left: 6px;
	width: 73px;
	height: 8px;
	overflow: hidden;
	background: #fff
}

#shortcut-2013 .hover .dd {
	display: block;
	top: 30px
}

#shortcut-2013 .fr .hover b {
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2)
}

#biz-service.hover .dd {
	left: 5px;
	width: 73px
}

#biz-service.hover .dd div {
	padding-left: 6px;
	line-height: 22px
}

#site-nav .dd {
	left: -172px;
	width: 250px
}

#site-nav .dd dt {
	padding: 4px 0 4px 9px;
	line-height: 20px;
	font-weight: 700
}

#site-nav .dd dl {
	float: none;
	width: auto
}

#site-nav .dd dl dd {
	margin: 0 9px;
	line-height: 22px;
	overflow: hidden;
	padding-bottom: 3px;
	border-bottom: 1px solid #f2f2f2;
	*zoom: 1
}

#site-nav .dd dl div {
	float: left;
	margin-right: 10px;
	display: inline
}

#site-nav .dd .fore3 dd {
	border-bottom: 0
}

#site-nav .dd .fore3 {
	padding-bottom: 4px
}

#site-nav .dd .fore1 div {
	width: 58px;
	margin-right: 0
}

#header-2013 {
	height: 60px;
	padding: 15px 0
}

#logo-2013 {
	float: left;
	width: 330px
}

#logo-2013 a:link b, #logo-2013 a:visited b {
	top: 12px;
	left: 168px;
	width: 100px;
	height: 38px;
	cursor: pointer
}

#logo-2013 a:hover b, #logo-2013 a:active b {
	display: none;
	background:
		url(../images/20130330A_2.png) #fff
		no-repeat 0 -312px
}

.root61 #logo {
	width: 350px
}

#search-2013 {
	float: left;
	width: 330px;
	padding: 4px 86px 0 0
}

#search-2013 input {
	margin: 0;
	padding: 0;
	height: 30px;
	border: 0
}

#search-2013 .i-search {
	z-index: 11;
	width: 304px;
	height: 30px;
	margin-bottom: 3px;
	border: 3px solid #E4393C
}

#search-2013 .form {
	height: 30px;
	overflow: hidden
}

#search-2013 .text {
	width: 216px;
	height: 20px;
	padding: 5px;
	background-position: 0 -360px;
	background-color: #fff;
	background-repeat: repeat-x;
	line-height: 20px;
	color: #999;
	font-family: arial, "\5b8b\4f53";
	font-size: 14px
}

#search-2013 .button {
	width: 78px;
	background: #E4393C;
	font-size: 14px;
	font-weight: 700;
	color: #fff
}

#search-2013 .text, #search-2013 .button {
	-webkit-appearance: none;
	-webkit-border-radius: 0
}

#search-2013 #shelper {
	overflow: hidden;
	position: absolute;
	top: 32px;
	left: -3px;
	width: 308px;
	border: 1px solid #E4393C;
	background: #fff;
	-moz-box-shadow: 0 0 5px #999;
	-webkit-box-shadow: 0 0 5px #999;
	box-shadow: 0 0 5px #999
}

#search-2013 #shelper li.close:hover {
	background: 0
}

#search-2013 .text:focus {
	background-color: #fcfcfc;
	-webkit-box-shadow: 2px 2px 3px #d2d2d2 inset;
	-moz-box-shadow: 2px 2px 3px #d2d2d2 inset;
	box-shadow: 2px 2px 3px #d2d2d2 inset
}

.root61 #search-2013 #shelper {
	width: 418px
}

#shelper li {
	overflow: hidden;
	padding: 1px 6px;
	line-height: 22px;
	cursor: pointer
}

#shelper .search-item {
	float: left;
	width: 190px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden
}

#shelper li.fore1 .search-item {
	width: 170px
}

#shelper .search-count {
	overflow: hidden;
	color: #aaa;
	text-align: right;
	*zoom: 1
}

#shelper .close {
	border-top: 1px solid #efefef;
	text-align: right
}

#shelper .item3 {
	cursor: default
}

#shelper .item3 a {
	float: left;
	margin-right: 10px;
	white-space: nowrap
}

#shelper li.fore1 {
	width: 100%;
	padding: 0;
	border-bottom: 1px solid #ddd
}

#shelper li.fore1 .item1 {
	float: none;
	width: auto;
	height: 22px;
	padding: 1px 2px 1px 20px;
	overflow: hidden;
	zoom: 1
}

#shelper li.fore1 div.fore1 {
	padding: 0 6px
}

#shelper li.fore1 strong {
	color: #C00
}

#shelper li.fore1 .fore1 strong {
	color: #333
}

#shelper li.fore1 .item1 {
	float: none;
	width: auto;
	padding: 1px 6px 1px 20px
}

#shelper li.fore1 .item2 {
	float: none;
	width: auto;
	padding: 1px 6px 1px 20px
}

#shelper li.fore1 .item3 {
	float: none;
	width: auto;
	color: #9C9A9C
}

#shelper li.fore1 span {
	float: left
}

#shelper li:hover {
	background: #FFDFC6
}

#shelper li.fore1:hover, #shelper li.close:hover {
	background: 0
}

#shelper li.fore1 div:hover {
	background: #FFDFC6
}

#shelper-2013 {
	overflow: hidden;
	position: absolute;
	top: 32px;
	left: -3px;
	width: 648px;
	padding: 10px 10px 10px 0;
	border: 1px solid #E4393C;
	background: #fff;
	-moz-box-shadow: 0 0 5px #999;
	-webkit-box-shadow: 0 0 5px #999;
	box-shadow: 0 0 5px #999
}

#shelper-2013 .i-shelper {
	overflow: hidden
}

#shelper-2013 .list-text {
	width: 312px;
	padding: 0 0 200px;
	margin-bottom: -200px;
	border-right: 1px solid #EEE
}

#shelper-2013 .list-text li {
	overflow: hidden;
	padding: 1px 15px 1px 10px;
	line-height: 22px;
	cursor: pointer;
	*zoom: 1
}

#shelper-2013 .list-text .search-item {
	float: left;
	width: 190px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden
}

#shelper-2013 .list-text li.fore1 .search-item {
	width: 190px
}

#shelper-2013 .list-text .search-count {
	overflow: hidden;
	color: #aaa;
	text-align: right
}

#shelper-2013 .list-text .item3 {
	cursor: default
}

#shelper-2013 .list-text .item3 a {
	float: left;
	margin-right: 10px;
	white-space: nowrap
}

#shelper-2013 .list-text li.fore1 {
	width: 100%;
	padding: 0;
	border-bottom: 1px solid #EEE
}

#shelper-2013 .list-text li.fore1 div.fore1 {
	padding: 0 15px 0 10px
}

#shelper-2013 .list-text li.fore1 strong {
	color: #E4393C
}

#shelper-2013 .list-text li.fore1 .fore1 strong {
	color: #333
}

#shelper-2013 .list-text li.fore1 .item1 {
	float: none;
	width: auto;
	padding: 1px 15px 1px 20px
}

#shelper-2013 .list-text li.fore1 .item2 {
	float: none;
	width: auto;
	padding: 1px 15px 1px 20px
}

#shelper-2013 .list-text li.fore1 .item3 {
	float: none;
	width: auto;
	color: #9C9A9C
}

#shelper-2013 .list-text li.fore1 span {
	float: left
}

#shelper-2013 .list-text .hover {
	background: #F3F3F3
}

#shelper-2013 .list-text .resultful {
	background-image: url(../images/8.png);
	background-repeat: no-repeat;
	background-position: 302px 8px
}

#shelper-2013 .list-word {
	width: 320px;
	padding-left: 4px;
	border-top: 1px solid #F1F1F1;
	padding: 8px 0;
	color: #999;
	font-family: "\5b8b\4f53"
}

#shelper-2013 .list-word strong {
	color: #E4393C
}

#shelper-2013 .list-word a:link, #shelper-2013 .list-word a:visited {
	float: left;
	white-space: nowrap;
	margin-right: 16px;
	color: #005EA7;
	text-decoration: underline
}

#shelper-2013 .list-img {
	width: 324px;
	padding-bottom: 8px
}

#shelper-2013 .list-img .item {
	width: 100px;
	border: 1px solid #fff;
	padding: 0 3px
}

#shelper-2013 .list-img .p-name {
	height: 3em
}

#shelper-2013 .list-img .p-price {
	color: #E4393C
}

#shelper-2013 .list-img .item:hover {
	border-color: #7ABD54
}

#shelper-2013 .list-word {
	padding-bottom: 0
}

#hotwords {
	height: 18px;
	color: #999;
	overflow: hidden
}

#hotwords span, #hotwords strong {
	float: left;
	font-weight: 400
}

#hotwords a:link, #hotwords a:visited {
	float: left;
	margin-right: 10px;
	color: #999
}

#hotwords a:hover, #hotwords a:active {
	color: #E4393C
}

.root61 #search-2013 {
	width: 510px;
	padding-right: 126px
}

.root61 #search-2013 .i-search {
	width: 494px
}

.root61 #search-2013 .text {
	width: 406px
}

#my360buy-2013 dt, #my360buy-2013 dl.hover dt {
	background-image:
		url(../images/20130330A_2.png);
	background-repeat: no-repeat
}

#my360buy-2013 {
	float: left;
	position: relative;
	z-index: 9;
	width: 106px;
	height: 30px;
	margin-top: 12px
}

#my360buy-2013 dt {
	position: absolute;
	z-index: 1;
	width: 50px;
	height: 30px;
	padding: 0 24px 0 30px;
	border: 1px solid #EFEFEF;
	background-position: -116px -24px;
	background-color: #F7F7F7;
	text-align: center;
	line-height: 27px;
	cursor: pointer;
	*line-height: 30px
}

#my360buy-2013 dt span {
	font-family: "\5b8b\4f53";
	color: #005EA7
}

#my360buy-2013 dt b {
	top: 12px;
	right: 8px;
	width: 0;
	height: 0;
	border-style: solid dashed dashed;
	border-width: 5px;
	border-color: #CCC transparent transparent;
	overflow: hidden
}

#my360buy-2013 dd {
	display: none;
	position: absolute;
	top: 32px;
	right: 0;
	width: 310px;
	border: 1px solid #E3E3E3;
	background: #fff
}

#my360buy-2013 dl.hover dt {
	height: 32px;
	border: 1px solid #E3E3E3;
	border-bottom: 0;
	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .12);
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .12);
	box-shadow: 0 0 10px rgba(0, 0, 0, .12);
	background-position: -115px -53px;
	background-color: #fff
}

#my360buy-2013 dl.hover dd {
	display: block;
	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .12);
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .12);
	box-shadow: 0 0 10px rgba(0, 0, 0, .12)
}

#my360buy-2013 dl.hover s {
	position: absolute;
	bottom: -10px;
	left: -10px;
	width: 114px;
	height: 10px;
	background: #fff
}

#my360buy-2013 dl.hover dt b {
	top: 7px;
	border-style: dashed dashed solid;
	border-color: transparent transparent #CCC
}

#my360buy-2013 .prompt a, #my360buy-2013 .orderlist a {
	color: #005EA7
}

#my360buy-2013 .prompt {
	padding: 6px 6px 6px 9px;
	border-bottom: 1px solid #EEE;
	line-height: 25px;
	overflow: hidden;
	zoom: 1
}

#my360buy-2013 .prompt .btn-login {
	display: block;
	width: 73px;
	height: 25px;
	text-align: center;
	line-height: 25px;
	background: #E4393C;
	color: #fff;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px
}

#my360buy-2013 .smt h4 {
	float: left;
	padding-left: 4px;
	font-weight: 400
}

#my360buy-2013 .smt .extra {
	float: left
}

#my360buy-2013 .orderlist {
	width: 300px;
	padding: 8px 5px;
	border-bottom: 1px solid #E6E6E6
}

#my360buy-2013 .orderlist li {
	overflow: hidden;
	border-top: 1px dotted #ccc;
	zoom: 1
}

#my360buy-2013 .orderlist .fore1 {
	border-top: 0
}

#my360buy-2013 .orderlist span {
	color: #F60
}

#my360buy-2013 .orderlist .p-img {
	padding-left: 4px
}

#my360buy-2013 .orderlist .p-img img, #my360buy-2013 .orderlist .more {
	float: left;
	border: 1px solid #ddd;
	margin-right: 3px
}

#my360buy-2013 .orderlist .more {
	width: 50px;
	height: 50px;
	background:
		url(../images/20130330A_2.png)
		no-repeat 0 -250px;
	overflow: hidden;
	line-height: 150px;
	margin-right: 0
}

#my360buy-2013 .orderlist .p-detail {
	padding-top: 2px
}

#my360buy-2013 .uclist {
	width: 310px;
	margin: 5px 0;
	overflow: hidden
}

#my360buy-2013 .uclist ul {
	width: 134px;
	padding: 0 10px
}

#my360buy-2013 .uclist .fore1 {
	border-right: 1px solid #F1F1F1
}

#my360buy-2013 .uclist a:link, #my360buy-2013 .uclist a:visited {
	display: block;
	height: 18px;
	overflow: hidden;
	padding: 5px;
	text-decoration: none;
	color: #005EA7
}

#my360buy-2013 .uclist a:hover, #my360buy-2013 .uclist a:active {
	background: #F5F5F5;
	color: #E4393C
}

#my360buy-2013 .viewlist {
	width: 305px;
	padding: 8px 0 8px 5px;
	background: #F3F3F3
}

#my360buy-2013 .viewlist span {
	padding-left: 4px
}

#my360buy-2013 .viewlist li {
	width: 52px;
	padding: 4px;
	line-height: 0;
	font-size: 0
}

#my360buy-2013 .viewlist a:link, #my360buy-2013 .viewlist a:visited {
	display: block;
	border: 1px solid #ddd
}

#my360buy-2013 .loading-style1 {
	margin: 10px auto
}

#settleup-2013 dt, #settleup-2013 dl.hover dt, #settleup-2013 .nogoods b
	{
	background-image:
		url(../images/20130330A_2.png);
	background-repeat: no-repeat
}

#settleup-2013 {
	float: right;
	position: relative;
	z-index: 9;
	width: 126px;
	height: 30px;
	margin-top: 12px
}

#settleup-2013 dt {
	position: absolute;
	z-index: 3;
	width: 74px;
	height: 30px;
	padding: 0 20px 0 30px;
	border: 1px solid #EFEFEF;
	background-position: -115px -84px;
	background-color: #F7F7F7;
	cursor: pointer;
	text-align: center
}

#settleup-2013 dt .shopping {
	position: absolute;
	top: -13px;
	left: 20px;
	background-image:
		url(../images/20130330A_2.png);
	background-position: -133px -279px;
	padding-left: 6px;
	color: #fff
}

#settleup-2013 dt .shopping span {
	float: left;
	display: block;
	height: 20px;
	padding-right: 6px;
	background-image:
		url(../images/20130330A_2.png);
	background-position: 100% -250px
}

#settleup-2013 dt a {
	line-height: 27px;
	*line-height: 30px
}

#settleup-2013 dt b {
	top: 9px;
	right: 4px;
	width: 0;
	height: 0;
	border-style: dashed dashed dashed solid;
	border-width: 5px;
	border-color: transparent transparent transparent #CCC;
	overflow: hidden
}

#settleup-2013 dd {
	display: none;
	position: absolute;
	top: 32px;
	right: 0;
	width: 350px
}

#settleup-2013 dl.hover dt {
	height: 32px;
	border: 1px solid #E3E3E3;
	border-bottom: 0;
	background-position: -115px -114px;
	background-color: #fff;
	-moz-box-shadow: 0 0 10px #DDD;
	-webkit-box-shadow: 0 0 10px #DDD;
	box-shadow: 0 0 10px #DDD
}

#settleup-2013 dl.hover s {
	position: absolute;
	bottom: -10px;
	left: -10px;
	width: 134px;
	height: 10px;
	background: #fff
}

#settleup-2013 dl.hover dd {
	display: block;
	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .12);
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .12);
	box-shadow: 0 0 10px rgba(0, 0, 0, .12)
}

#settleup-content {
	position: relative;
	left: 0;
	top: 0;
	z-index: 2;
	width: 350px;
	background: #fff
}

#settleup-iframe {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 350px;
	background: #000
}

#settleup-2013 .prompt {
	border: 1px solid #ddd;
	padding: 10px 15px;
	background: #fff
}

#settleup-2013 .nogoods {
	padding-left: 30px;
	height: 49px;
	line-height: 49px;
	overflow: hidden;
	color: #999
}

#settleup-2013 .nogoods b {
	float: left;
	width: 56px;
	height: 49px;
	background-position: 0 0
}

#settleup-2013 .sm {
	margin-bottom: 0
}

#settleup-2013 .smt {
	height: 25px;
	padding: 6px 8px;
	background-position: 0 -118px;
	background-repeat: repeat-x;
	border-style: solid;
	border-width: 1px;
	border-color: #DDD #DDD #EEE;
	line-height: 25px
}

#settleup-2013 .smt .extra {
	color: #999
}

#settleup-2013 .smc {
	border: solid #ddd;
	border-width: 0 1px;
	background: #fff;
	height: auto !important;
	height: 344px;
	max-height: 344px;
	overflow-y: auto
}

#settleup-2013 ul {
	margin-top: -1px
}

#settleup-2013 li {
	padding: 8px 10px;
	border-top: 1px dotted #ccc;
	overflow: hidden;
	line-height: 17px;
	vertical-align: bottom;
	*zoom: 1
}

#settleup-2013 li:hover, #settleup-2013 li.hover {
	background: #F5F5F5
}

#settleup-2013 .p-img {
	width: 50px;
	height: 50px;
	border: 1px solid #ddd;
	padding: 0;
	margin-right: 10px;
	font-size: 0
}

#settleup-2013 .p-name {
	width: 150px;
	height: 52px
}

#settleup-2013 .p-price {
	font-weight: 700
}

#settleup-2013 .delete {
	color: #005EA7
}

#settleup-2013 .smb {
	padding: 8px;
	background: #F5F5F5;
	border: solid #ddd;
	border-width: 0 1px 1px
}

#settleup-2013 .smb b {
	margin: 0 5px;
	color: #E4393C
}

#settleup-2013 .smb strong {
	font-size: 18px;
	color: #E4393C
}

#settleup-2013 .smb a {
	display: inline-block;
	width: 120px;
	height: 30px;
	margin-top: 6px;
	background: #E4393C;
	color: #fff;
	text-align: center;
	font-weight: 700;
	line-height: 30px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px
}

#settleup-2013 li .gift {
	height: 17px;
	width: 310px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

#settleup-2013 li .gift a, #settleup-2013 li .gift-jq {
	color: #999
}

#settleup-2013 .gift-jq {
	clear: both
}

* html #settleup-2013 .smc {
	height: 344px
}

* html #settleup-2013 li {
	font-family: "\5b8b\4f53"
}

* html #settleup-2013 dd {
	right: -1px
}

#settleup-2013 .dt {
	padding: 2px 10px
}

#settleup-2013 .dt-mz {
	color: #999;
	width: 310px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

#settleup-2013 .dt-mz a {
	color: #999
}

#settleup-2013 .dt-mz:hover {
	background: #fff
}

#mcart-suit .dt, #mcart-suit .dt:hover {
	background: #d3ebff
}

#mcart-mj .dt, #mcart-mz .dt, #mcart-mj .dt:hover, #mcart-mz .dt:hover {
	background: #bffab1
}

#settleup-content .fr .hl-green, #settleup-content .fr .hl-orange {
	margin-right: 0
}

#settleup-content .hl-green, #settleup-content .hl-orange {
	margin-right: 5px;
	color: #fff;
	display: inline-block;
	*zoom: 1;
	padding: 0 2px;
	font: 12px/16px simsun
}

#settleup-content .hl-green {
	background: #3b0
}

#settleup-content .hl-orange {
	background: #f60
}

#nav-2013 {
	position: relative;
	z-index: 6;
	height: 40px;
	padding-left: 210px;
	margin-bottom: 10px;
	background: #E4393C
}

#navitems-2013 {
	background: -moz-linear-gradient(top, #E64346, #E13335);
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#E64346),
		to(#E13335));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#E64346",
		endColorstr="#E13335");
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="
		#E64346 ", endColorstr=" #E13335 ")"
}

#navitems-2013, #navitems-2013 li, #navitems-2013 li a {
	height: 40px
}

#navitems-2013 li {
	float: left;
	position: relative;
	width: 83px
}

#navitems-2013 li a {
	position: absolute;
	top: 0;
	left: 0;
	width: 85px;
	text-align: center;
	color: #fff;
	font: 700 15px/40px "microsoft yahei";
	text-decoration: none
}

#navitems-2013 .curr, #navitems-2013 .hover {
	z-index: 1
}

#navitems-2013 .curr a, #navitems-2013 .hover a {
	background: #A40000
}

#treasure {
	position: absolute;
	right: 0;
	top: 0
}

#categorys-2013 .mt b, #categorys-2013 h3, #categorys-2013 s,
	#categorys-2013.hover .mt b {
	background-image:
		url(../images/20130330A_2.png);
	background-repeat: no-repeat
}

#categorys-2013 {
	position: absolute;
	top: 0;
	left: 0;
	width: 210px;
	height: 40px
}

#categorys-2013 .mt {
	background: #CD2A2C
}

#categorys-2013 .mt a {
	display: block;
	height: 40px;
	padding-left: 20px;
	line-height: 40px;
	color: #fff
}

#categorys-2013 .mt b {
	top: 10px;
	right: 10px;
	width: 20px;
	height: 20px;
	background-position: -65px 0
}

#categorys-2013 .mc {
	display: none;
	position: absolute;
	top: 40px;
	left: 0;
	width: 203px;
	height: 402px;
	padding: 3px 3px 3px 0;
	background: #FAFAFA;
	border: solid #E4393C;
	border-width: 0 2px 2px;
	overflow: visible
}

#categorys-2013 .item {
	width: 200px;
	height: 28px;
	border-top: 1px solid #FFF
}

#categorys-2013 .fore1 {
	border-top: 0
}

#categorys-2013 span {
	display: block;
	width: 203px;
	position: absolute;
	z-index: 1
}

#categorys-2013 h3 {
	width: 186px;
	height: 26px;
	line-height: 26px;
	padding-left: 13px;
	border-width: 1px 0;
	background-image: none;
	font-weight: 400
}

#categorys-2013 h3 a:link, #categorys-2013 h3 a:visited {
	color: #333
}

#categorys-2013 h3 a:hover, #categorys-2013 h3 a:active {
	color: #E4393C;
	font-weight: 700
}

#categorys-2013 s {
	display: block;
	position: absolute;
	top: 10px;
	left: 189px;
	width: 6px;
	height: 9px;
	background-position: -110px -45px
}

#categorys-2013 .item .i-mc {
	display: none;
	position: absolute;
	left: 198px;
	top: 3px;
	width: 705px;
	border: 1px solid #DDD;
	background: #fff;
	overflow: visible;
	-moz-box-shadow: 0 0 10px #DDD;
	-webkit-box-shadow: 0 0 10px #DDD;
	box-shadow: 0 0 10px #DDD
}

#categorys-2013 .item dt {
	padding: 3px 6px 0 0;
	font-weight: 700;
	color: #E4393C
}

#categorys-2013 .item dd {
	padding: 3px 0 0;
	overflow: hidden;
	zoom: 1
}

#categorys-2013 .subitem {
	float: left;
	width: 477px;
	min-height: 370px;
	padding: 0 4px 0 8px
}

#categorys-2013 .fore13 .subitem {
	min-height: 382px
}

#categorys-2013 .subitem dl {
	border-top: 1px solid #EEE;
	padding: 6px 0;
	overflow: hidden;
	zoom: 1
}

#categorys-2013 .subitem .fore1 {
	border-top: 0
}

#categorys-2013 .subitem dt {
	float: left;
	width: 54px;
	line-height: 22px;
	text-align: right
}

#categorys-2013 .subitem dd {
	overflow: hidden;
	*zoom: 1
}

#categorys-2013 .subitem em {
	float: left;
	height: 14px;
	margin: 4px 0;
	line-height: 14px;
	padding: 0 8px;
	border-left: 1px solid #ccc
}

#categorys-2013 .subitem dt a {
	color: #E4393C;
	text-decoration: underline
}

#categorys-2013 .subitem dd a {
	white-space: nowrap
}

#categorys-2013 .fr {
	width: 210px;
	padding-bottom: 2010px;
	margin-bottom: -2000px
}

#categorys-2013 .fr dl {
	width: 194px;
	padding: 6px 8px
}

#categorys-2013 .fr a {
	color: #666
}

#categorys-2013 .fr dd {
	padding-top: 6px;
	line-height: 20px;
	overflow: hidden
}

#categorys-2013 .fr img {
	margin-bottom: 4px
}

#categorys-2013 .categorys-brands li {
	float: left;
	width: 97px
}

#categorys-2013 .mc .extra {
	display: none
}

#categorys-2013 .close {
	position: absolute;
	top: -1px;
	left: 706px;
	z-index: 14;
	width: 26px;
	height: 26px;
	background: rgba(0, 0, 0, .6);
	text-align: center;
	line-height: 26px;
	color: #fff;
	cursor: pointer;
	font-size: 26px;
	background-color: transparent\9;
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1,
		startColorstr='#60000000', endColorstr='#60000000')
}

#categorys-2013 .loading-style1 {
	margin-top: 10px
}

#categorys-2013 .fore1 .categorys-brands li, #categorys-2013 .fore13 .categorys-brands li
	{
	width: 194px
}

#categorys-2013 .fore13 .i-mc {
	top: 23px
}

#categorys-2013 .fore13 .categorys-brands li {
	width: 97px
}

#categorys-2013 .fore14 .categorys-brands li {
	width: 194px
}

#categorys-2013 .hover span {
	z-index: 13;
	width: 160px
}

#categorys-2013 .hover h3 {
	border: solid #DDD;
	border-width: 1px 0;
	background-color: #fff;
	overflow: hidden;
	-moz-box-shadow: 0 0 8px #DDD;
	-webkit-box-shadow: 0 0 8px #DDD;
	box-shadow: 0 0 8px #DDD
}

#categorys-2013 .hover s {
	left: 199px;
	top: -4px;
	width: 7px;
	height: 38px;
	background: #fff;
	overflow: hidden
}

#categorys-2013 .fore1.hover s {
	top: 1px
}

#categorys-2013 .hover .i-mc {
	display: block;
	z-index: 12
}

#categorys-2013.hover .mt b {
	background-position: -65px -23px
}

#categorys-2013.hover .mc {
	display: block
}

* html #categorys-2013 .item dd {
	padding-bottom: 6px
}

* html #categorys-2013 .subitem {
	height: 382px
}

* html #categorys-2013 .fore13 .subitem {
	height: 382px
}

#categorys-2013 .categorys-links {
	padding: 10px 8px
}

#categorys-2013 .categorys-links a {
	display: block;
	width: 194px;
	height: 30px;
	background-image: url(../images/28.png);
	background-repeat: no-repeat;
	line-height: 80px;
	overflow: hidden
}

#categorys-links-diy a {
	background-position: 0 0
}

#categorys-links-dpg a {
	background-position: 0 -30px
}

#categorys-links-cellphone a {
	background-position: 0 -60px
}

#categorys-links-jzc a {
	background-position: 0 -90px
}

#categorys-2013 .item-col2 .subitem {
	width: auto;
	padding: 0 8px
}

#categorys-2013 .sub-item-col {
	width: 334px
}

#categorys-2013 .sub-item-col .fore1 {
	padding-top: 0
}

#categorys-2013 .sub-item-col0 {
	border-right: 1px solid #eee;
	margin-right: 8px;
	margin-bottom: 8px;
	padding-right: 8px;
	min-height: 370px
}

#categorys-2013 .title-list {
	font-size: 14px;
	padding: 5px 10px;
	margin: 0 10px 10px;
	border-bottom: 1px solid #eee
}

#categorys-2013 .title-list li {
	padding-left: 30px;
	height: 28px;
	line-height: 28px;
	margin-right: 20px;
	background-image:
		url(../images/virtuals-cat-ico20140826.png);
	background-repeat: no-repeat
}

#categorys-2013 .title-list li.fore1 {
	background-position: 0 0
}

#categorys-2013 .title-list li.fore2 {
	background-position: 0 -48px
}

#categorys-2013 .title-list li.fore3 {
	background-position: 0 -99px
}

#categorys-2013 .title-list li.fore4 {
	background-position: 0 -144px
}

#categorys-2013 .title-list li.fore5 {
	background-position: 0 -191px
}

#categorys-2013 .title-list li.fore6 {
	background-position: 0 -241px
}

* html #categorys-2013 .sub-item-col0 {
	height: 370px
}

#service-2013 dl b {
	background-image:
		url(../images/20130330A_2.png);
	background-repeat: no-repeat
}

#service-2013 {
	padding: 10px 20px;
	margin-bottom: 20px;
	background: #FFF;
	border-top: 1px solid #DDD;
	border-bottom: 1px solid #F1F1F1
}

#service-2013 dl {
	float: left;
	width: 196px
}

#service-2013 dt {
	position: relative;
	padding: 6px 0 6px 44px;
	font: 14px "microsoft yahei";
	zoom: 1
}

#service-2013 dd {
	min-height: 120px;
	padding-left: 24px;
	margin-left: 20px;
	line-height: 20px
}

#service-2013 dt b {
	position: absolute;
	top: 5px;
	left: 0;
	width: 40px;
	height: 40px
}

#service-2013 dl.fore1 b {
	background-position: 0 -55px
}

#service-2013 dl.fore2 b {
	background-position: -50px -55px
}

#service-2013 dl.fore3 b {
	background-position: 0 -102px
}

#service-2013 dl.fore4 b {
	background-position: -50px -102px
}

#service-2013 dl.fore5 b {
	background-position: 0 -149px
}

#service-2013 dl.fore5 {
	width: 160px
}

#service-2013 .fr {
	display: none
}

* html #service-2013 dd {
	height: 120px
}

.root61 #service-2013 dl {
	width: 252px
}

.root61 #service-2013 dl.fore5 {
	width: 160px
}

#footer-2013 {
	padding-bottom: 30px;
	text-align: center
}

#footer-2013 .links a, #footer-2013 .links span {
	margin: 0 10px
}

#footer-2013 .links span a {
	margin: 0
}

#footer-2013 .copyright {
	margin: 10px 0
}

#footer-2013 .authentication a {
	margin: 0 5px
}

.footmark .m {
	padding: 0 9px;
	border: 1px solid #ddd;
	border-top: 2px solid #999
}

.footmark .mt {
	height: 30px;
	line-height: 30px
}

.footmark .title {
	width: 50%;
	float: left;
	font-weight: 400
}

.footmark .extra {
	width: 50%;
	float: right;
	text-align: right
}

.footmark .may-like .change {
	display: inline-block
}

.footmark .may-like .change .ico, .may-like .change .txt {
	display: inline-block;
	vertical-align: middle;
	*cursor: pointer
}

.footmark .may-like .change .ico {
	width: 16px;
	height: 16px;
	margin-right: 5px;
	background:
		url(../images/update.png)
		no-repeat
}

.footmark .may-like .mc {
	height: 246px;
	overflow: hidden
}

.footmark .may-like-list {
	padding-top: 15px;
	margin-right: -10px
}

.footmark .may-like-list li {
	width: 150px;
	height: 216px;
	float: left;
	margin: 0 8px 0 0;
	padding: 0 18px 15px;
	text-align: center
}

.footmark .may-like-list .p-img img {
	width: 130px;
	height: 130px
}

.footmark .may-like-list .p-name {
	height: 36px
}

.footmark .may-like-list .p-review {
	line-height: 20px
}

.footmark .may-like-list .p-review a {
	color: #005ea7
}

.footmark .may-like-list .p-price {
	line-height: 20px;
	color: #e3393c
}

.footmark .recent-view .mc {
	height: 126px;
	overflow: hidden
}

.footmark .recent-view-list {
	margin-right: -36px;
	padding-top: 14px
}

.footmark .recent-view-list li {
	width: 86px;
	float: left;
	margin: 0 2px 0 0;
	padding-bottom: 14px;
	text-align: center
}

.footmark .recent-view-list .p-img img {
	width: 70px;
	height: 70px
}

.footmark .recent-view-list .p-price {
	color: #e3393c
}

.root61 .footmark .may-like-list li {
	padding-left: 20px
}

.root61 .footmark .recent-view-list li {
	margin: 0 2px 0 3px;
	*display: inline
}

#shortcut-2013 #app-jd {
	padding-left: 37px
}

#app-jd i {
	position: absolute;
	z-index: 2;
	left: 14px;
	top: 5px;
	width: 13px;
	height: 22px;
	background-image:
		url(../images/20130330A_2.png);
	background-repeat: no-repeat;
	background-position: -128px -360px;
	-webkit-transition: all .2s ease;
	transition: all .2s ease
}

#app-jd.hover i {
	background-position: -128px -399px
}

#app-jd .dd {
	left: 5px;
	width: 210px;
	padding: 20px 0 20px 20px
}

#app-jd .dd .qr-code {
	position: relative;
	margin-bottom: 8px
}

#app-jd .dd .qr-code i {
	position: absolute;
	display: block;
	width: 49px;
	height: 23px;
	background:
		url(../images/20130330A_2.png)
		no-repeat 0 -438px;
	left: 88px;
	top: 5px
}

#app-jd .dd .qr-code .details {
	position: absolute;
	left: 103px;
	top: 28px
}

#app-jd .dd .qr-code .details em, #app-jd .dd .qr-code .details strong {
	display: block;
	line-height: 20px
}

#app-jd .dd .qr-code .details em {
	color: #999
}

#app-jd .dd .qr-code .details strong {
	color: #E4393C;
	font-size: 14px
}

#app-jd .app-btn {
	height: 29px;
	font-size: 0
}

#app-jd .btn-app-apple, #app-jd .btn-app-android {
	width: 97px;
	height: 29px;
	display: inline-block;
	line-height: 29px;
	background-image:
		url(../images/20130330A_2.png);
	background-repeat: no-repeat
}

#app-jd .btn-app-apple {
	background-position: 0 -360px;
	margin-right: 5px
}

#app-jd .btn-app-android {
	background-position: 0 -399px
}

#app-jd .qr-item {
	position: relative
}

#app-jd .qr-item.qr-jd-app {
	margin-bottom: 30px
}

#app-jd .qr-item .qr-img {
	position: absolute;
	left: 0;
	top: 10px
}

#app-jd .qr-item .qr-ext {
	padding-left: 92px
}

#app-jd .qr-item .qr-ext strong, #app-jd .qr-item .qr-ext a {
	display: block;
	margin: 0
}

#app-jd .qr-item .qr-ext strong {
	line-height: 20px;
	margin-bottom: 7px;
	color: #E4393C
}

#app-jd .qr-item .qr-ext .btn-app-apple {
	margin-bottom: 7px
}

#shortcut-2013 #app-jd.hover .outline, #shortcut-2013 #app-jd.hover .blank
	{
	width: 98px
}

#app-jd .qr-info {
	display: none
}

#app-jd .dd {
	padding-top: 60px;
	padding-left: 30px;
	padding-right: 10px
}

#app-jd .qr-info {
	display: block;
	position: absolute;
	top: 24px;
	left: 8px;
	width: 220px;
	height: 65px;
	background:
		url(../images/537b084eN94336622.png)
}

#shortcut-2013 #jd-vip {
	padding-left: 38px
}

#jd-vip:hover i {
	background-position: 0 -15px
}

#jd-vip i {
	position: absolute;
	left: 10px;
	top: 9px;
	display: block;
	width: 24px;
	height: 11px;
	overflow: hidden;
	background: url(../images/vip.png)
}

initcart20150123.css

/taotao-portal/src/main/webapp/css/initcart20150123.css

/*publish time:2013-04-25 19:36*/
.left{float:left;width:770px;  }
.right-extra{float:right;width:210px;}
.p-name a:link,.p-name a:visited{color:#666;}
.p-name a:hover{color:#E4393C;}
/*succeed*/
#succeed{position:relative;overflow:visible;}
#succeed .corner{display:none;position:absolute;width:4px;height:4px;font-size:0;line-height:0;overflow:hidden;}
#succeed .tl{top:-1px;left:-1px;background-position:-17px 0;}
#succeed .tr{top:-1px;right:-1px;background-position:-21px 0;}
#succeed .bl{bottom:-1px;left:-1px;background-position:-17px -4px;}
#succeed .br{bottom:-1px;right:-1px;background-position:-21px -4px;}
#succeed .btn-pay,#succeed .btn-continue,#succeed .btn-append{background:#ccc url(i/20130425D.png) no-repeat;line-height:100px;overflow:hidden;display:block;}
#succeed .btn-pay{float:right;width:189px;height:36px;margin:0 25px 0 10px;_margin-right:12px;background-position:0 0;}
#succeed .btn-continue{float:right;background-position:-90px -37px;width:94px;height:36px;}
#succeed .btn-append{background-position:-41px 0;width:93px;height:23px;}
#succeed .success{overflow:hidden;height:65px;padding:31px 10px 16px 80px;zoom:1;}
#succeed .success b,#succeed .success-b{float:left;overflow:hidden;width:304px;height:40px;padding-left:56px;background:url(i/20130425D.png) no-repeat 0 -100px;font:normal 24px/40px \5fae\8f6f\96c5\9ed1;color:#7ABD54;}
#succeed .success-b{color:#999;font:12px/150% Arial,Verdana,"\5b8b\4f53";height:auto}
#succeed .success-b h3{font:normal 24px/40px \5fae\8f6f\96c5\9ed1;color:#7ABD54;}

.extend{overflow:hidden;margin-top:10px;width:565px;padding-left:35px;}
.extend li{zoom:1;overflow:hidden;line-height:23px;font-size:12px;margin-bottom:5px;}
.extend p{float:left;width:470px;overflow:hidden;}
.extend .font1{color:#f60204;}
/*m1*/
.m1{border:1px solid #ddd;}
.m1 .mt{height:30px;background:#f7f7f7;}
.m1 .mt h2{height:30px;padding-left:10px;font:normal 14px/31px \5fae\8f6f\96c5\9ed1;color:#333}
.m1 .mt .tl{display:none;}
.m1 .mc{overflow:hidden;width:758px;padding:2px 5px;}
.m1 .mc dl{float:left;width:33.3%;padding:10px 0;}
.m1 .mc dt{float:left;padding-left:5px;}
.m1 .mc dd{float:left;width:130px;padding:5px;}
.m1 .mc dd div{margin-bottom:5px;}
.m1 .p-name{height:1.5em;}
.m1 .mc dd .p-price{margin-bottom:5px;}
.m1 .p-price {height:18px; overflow:hidden; zoom:1;}
.m1 .p-price img {margin-top:1px; float:left;}
.m1 .p-price span {padding-left:4px; _padding-left:8px; float:left;}
.m1 .p-review a:link,.m1 .p-review a:visited{color:#005aa0;}
.m1 .btn-append{display:block;overflow:hidden;width:89px;height:21px;background:url(i/20130425D.png) #F6F6F6 no-repeat 0 -63px;text-align:center;text-decoration:none;line-height:21px;color:#333;}
.m1 .mb{display:none;}
/*promotion*/
#promotion .p-price span{color:red;font-weight:bold;}
/*mycart-detail*/
#mycart-detail{position:relative;overflow:visible;border-width:2px 1px 1px;border-style:solid;border-color:#999 #ddd #ddd;zoom:1;}
#mycart-detail .corner{display:none;}
#mycart-detail .mt{height:30px;background:#f7f7f7;}
#mycart-detail .mt h2{padding-left:9px;font:normal 14px/30px \5fae\8f6f\96c5\9ed1;color:#333;}
#mycart-detail .mt h2 s{float:left;width:20px;height:16px;margin:8px 8px 0 0;background:url(i/20130425D.png) no-repeat -90px -74px;}
#mycart-detail .mc{padding-top:6px;}
#mycart-detail h3{padding:0 10px;font-size:12px;font-weight:normal;color:#333;}
#mycart-detail dl{overflow:hidden;zoom:1;}
#mycart-detail dt{float:left;margin:0;}
#mycart-detail dd{float:right;width:110px;}
#mycart-detail .new{padding-bottom:8px;border-bottom:1px dotted #ddd;margin:10px 10px 8px;}
#mycart-detail .new .p-price span{font-family:verdana;font-size:12px;color:#E4393C;}
#mycart-detail .old{padding:10px;}
#mycart-detail .total{margin-top:10px;padding:10px;background:#F7F7F7;}
#mycart-detail .total strong{padding:0 3px;font-family:verdana;font-size:15px;color:#E4393C;}
#mycart-detail #skuCount{font-size:12px;}
#mycart-detail .btns{padding:0 10px 10px;background:#F7F7F7;}
#mycart-detail .btn-pay{display:block;overflow:hidden;width:189px;height:36px;background:url(i/20130425D.png) red no-repeat;line-height:100px;}
/*promotion*/
/*pt*/
.m1 .p-price .p-tag {
    float:none;
}
.m1 .p-price .p-tag a:hover {
    color:#fff;
    text-decoration:none;
}
.pt1,.pt2,.pt3,.pt4,.pt5{padding:1px 2px;margin:0 1px;margin-bottom:-3px;background:#E4393C;line-height:14px;text-align:center;font-size:12px;color:#fff;*zoom:1;}
/*
.pt1,.pt2,.pt3,.pt4{display:inline-block;width:28px;height:16px;margin:0 2px;overflow:hidden;background-image:url(http://misc.360buyimg.com/201007/skin/df/i/icon_promotion20110727.png);background-repeat:no-repeat;line-height:100px;font-size:0;margin-bottom:-3px;*margin-bottom:12px;}
.pt1{background-position:-71px -180px;}
.pt2{background-position:-100px -180px;}
.pt3{background-position:-42px -180px;}
.pt4{background-position:0 -180px;width:41px;}
*html .pi1,*html .pi2,*html .pi3,*html .pi4,*html .pi5,*html .pi6,*html .pi7,*html .pi8,*html .pi9,*html .pi10,*html .pi11,*html .pi12{background-image:url(http://misc.360buyimg.com/201007/skin/df/i/icon_promotion20110727.gif);}
*/
#cart_yb .extend {margin-bottom:5px;}
#cart_yb .extend-minimize {height:84px;}
#cart_yb .extend .item {overflow:hidden; line-height:23px;font-size:12px;margin-bottom:5px; zoom:1;}
#cart_yb .btn-append {float:left;}
#cart_yb .extend-more .inner {width:776px;}
.root61 #cart_yb .extend-more .inner {width:996px;}
#cart_yb .extend-more {height:18px; margin-bottom:5px; overflow:hidden;}
#cart_yb .extend-more .inner {width:900px; height:17px; border-top:1px solid #ccc; text-align:center;}
#extend-more-btn {width:60px; height:16px; margin:-1px auto 0; border:1px solid #ccc; border-top-color:#fff; position:relative; text-align:left; cursor:pointer; background:url(i/more-bg-1.gif) repeat-x;}
#extend-more-btn span, #extend-more-btn s {float:left; cursor:pointer;}
#extend-more-btn span {margin-right:5px; color:#666; line-height:16px;}
#extend-more-btn s {width:5px; height:7px; margin-top:4px; overflow:hidden; line-height:0; font-size:0; background:url(i/more-arrow-1.gif) no-repeat;}
#cart_yb .extend-more span {padding-left:15px;}
#cart_yb .extend-more .extend-collapse s {background-position:0 -6px;}
#mycart-detail .p-extend-service {color:#999;}
/*lq 20130411*/
#cart_yb2 .extend {margin-bottom:5px;}
#cart_yb2 .extend-minimize {height:84px;}
#cart_yb2 .extend .item {overflow:hidden; line-height:23px;font-size:12px;margin-bottom:5px; zoom:1;}
#cart_yb2 .btn-append {float:left;}
#cart_yb2 .extend-more .inner {width:776px;}
.root61 #cart_yb2 .extend-more .inner {width:996px;}
#cart_yb2 .extend-more {height:18px; margin-bottom:5px; overflow:hidden;}
#cart_yb2 .extend-more .inner {width:900px; height:17px; border-top:1px solid #ccc; text-align:center;}
#extend-more-btn {width:60px; height:16px; margin:-1px auto 0; border:1px solid #ccc; border-top-color:#fff; position:relative; text-align:left; cursor:pointer; background:url(i/more-bg-1.gif) repeat-x;}
#extend-more-btn span, #extend-more-btn s {float:left; cursor:pointer;}
#extend-more-btn span {margin-right:5px; color:#666; line-height:16px;}
#extend-more-btn s {width:5px; height:7px; margin-top:4px; overflow:hidden; line-height:0; font-size:0; background:url(i/more-arrow-1.gif) no-repeat;}
#cart_yb2 .extend-more span {padding-left:15px;}
#cart_yb2 .extend-more .extend-collapse s {background-position:0 -6px;}
#mycart-detail .p-extend-service {color:#999;}
#cart_yb2{position:relative;padding:10px 0 0 150px;/*border:1px solid #D0E4C2;background:#FCFFFA;*/}
#cart_yb2 .service-yb-tit{position:absolute;top:15px;left:84px;}
#cart_yb2 .service-type { padding-bottom:5px; overflow:hidden; *zoom:1; clear:both; }
#cart_yb2 .item { position:relative; float: left;margin: 2px 8px 2px 0}
#cart_yb2 .item a { padding:2px 5px 2px 22px;  border: 1px solid #ccc;display:block;white-space: nowrap;text-decoration: none;}
#cart_yb2 .selected b{position:absolute;bottom:0;right:0;overflow:hidden;width:12px;height:12px;background:url(i/20130425D.png) no-repeat -116px -75px;}
#cart_yb2 .item a:hover,
#cart_yb2 .selected a{padding:1px 4px 1px 21px;border:2px solid #E4393C;}
#cart_yb2 .item i { display:block; position:absolute; left:4px; top:4px; width:16px; height:16px;}
#cart_yb2 .service-yb-buy{display:block;overflow:hidden;width:89px;height:25px;margin-bottom:10px;background:url(i/20130425D.png) no-repeat 0 -37px;line-height:24px;text-align:center;text-decoration:none;color:#333;}
#cart_yb2  .item i{background-image:url(http://misc.360buyimg.com/purchase/skin/i/yb-icons.jpg);background-repeat:no-repeat;}
.yb-ico-t2,
.yb-ico-t3,
.yb-ico-t4 { background-position:0 0;}
.yb-ico-t6,
.yb-ico-t7 { background-position:-54px 0; }
.yb-ico-t9 { background-position:-18px 0;}
/*root61*/
.root61 .left{width:990px;}
.root61 .m1 .mc{width:978px;}
.root61 .m1 .mc dd{width:200px;}
.root61 #succeed .btn-pay{margin:0 150px 0 10px;_margin-right:75px;}
.root61 #succeed .success{padding:31px 10px 16px 140px;}

/* cellphone-reco */
#cellphone .tab-hd { padding:10px; margin:0 20px; border-bottom:1px solid #eee; overflow:hidden; *zoom:1;}
#cellphone .tab-hd a,
#cellphone .tab-hd li { color:#005ea7;}
#cellphone .tab-hd li.curr { color:#e4393c; cursor:default; font-weight:bold; }
#cellphone .tab-hd li.last { border:none; }

#cellphone .tab-hd ul { float:left; }
#cellphone .tab-hd .extra { float:right; }
#cellphone .tab-hd li { float:left; border-right:1px solid #ccc; cursor:pointer; margin-right:10px; padding-right:10px;}

/* similar-reco */
#similar .tab-hd { padding:10px; margin:0 20px; border-bottom:1px solid #eee; overflow:hidden; *zoom:1;}
#similar .tab-hd a,
#similar .tab-hd li { color:#005ea7;}
#similar .tab-hd li.curr { color:#e4393c; cursor:default; font-weight:bold; }
#similar .tab-hd li.last { border:none; }

#similar .tab-hd ul { float:left; }
#similar .tab-hd .extra { float:right; }
#similar .tab-hd li { float:left; border-right:1px solid #ccc; cursor:pointer; margin-right:10px; padding-right:10px;}
.ftx-05{color:#005ea7;}
.ml10{margin-left:10px;}
.btn-1{
	background-color: #e74649;
    background-image: -moz-linear-gradient(top,#e74649,#df3134);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e74649),color-stop(1,#df3134));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e74649', endColorstr='#df3134', GradientType='0');
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e74649', endColorstr='#df3134');
    background-image: linear-gradient(to top,#e74649 0,#df3134 100%);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    height: 18px;
    line-height: 18px;
    padding: 9px 30px;
    color: #fff;
    font-size:15px;
    font-weight:bold;
    font-family:'\5fae\8f6f\96c5\9ed1';
}
.btn-1:hover {
    background-color: #f05356;
    background-image: -moz-linear-gradient(top,#f05356,#eb3c3f);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#f05356),color-stop(1,#eb3c3f));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f05356', endColorstr='#eb3c3f', GradientType='0');
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f05356', endColorstr='#eb3c3f');
    background-image: linear-gradient(to top,#f05356 0,#eb3c3f 100%)
}

.btn-1:link,.btn-1:visited{
    color: #fff;
    text-decoration: none
}
.btn-9{
	background-color: #f7f7f7;
    background-image: -moz-linear-gradient(top,#f7f7f7,#f3f2f2);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#f7f7f7),color-stop(1,#f3f2f2));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#f3f2f2', GradientType='0');
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#f3f2f2');
    background-image: linear-gradient(to top,#f7f7f7 0,#f3f2f2 100%);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    height: 18px;
    line-height: 18px;
    border: 1px solid #ddd;
    padding: 8px 29px;
    color: #444;
    font-size:15px;
    font-weight:bold;
    font-family:'\5fae\8f6f\96c5\9ed1';
}
.btn-9:hover {
    background-color: #f8f8f8;
    background-image: -moz-linear-gradient(top,#f8f8f8,#f5f5f5);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#f8f8f8),color-stop(1,#f5f5f5));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='whitesmoke', GradientType='0');
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='whitesmoke');
    background-image: linear-gradient(to top,#f8f8f8 0,#f5f5f5 100%)
}

.btn-9:link,.btn-9:visited{
    color: #444;
    text-decoration: none
}
#succeed .success{padding-left:0;}
.root61 #succeed .success{padding-left:80px;}

测试

1.4 展示购物车商品

用户点击“我的购物车”展示购物车信息

需要展示购物车页面，没有参数

只需要把cookie中把商品列表取出来，展示到页面调用

1.4.1 server

从cookie中把购物车列表取出来，没有参数，返回购物车中的商品列表

CartService.java

/taotao-portal/src/main/java/com/taotao/portal/service/CartService.java

package com.taotao.portal.service;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.taotao.common.utill.TaotaoResult;
import com.taotao.portal.pojo.CartItem;
/**
 * 购物车
 * @author Lenovo
 *
 */
public interface CartService {
	/**
	 * 添加购物车商品
	 */
	TaotaoResult addCartItem(long itemId,int num,HttpServletRequest request, HttpServletResponse response);
	/**
	 * 展示购物车商品
	 */
	List<CartItem> getCartItemList(HttpServletRequest request, HttpServletResponse response);
	
}

CartServiceImpl.java

/taotao-portal/src/main/java/com/taotao/portal/service/impl/CartServiceImpl.java

package com.taotao.portal.service.impl;

import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;

import com.taotao.common.utill.CookieUtils;
import com.taotao.common.utill.HttpClientUtil;
import com.taotao.common.utill.JsonUtils;
import com.taotao.common.utill.TaotaoResult;
import com.taotao.pojo.TbItem;
import com.taotao.portal.pojo.CartItem;
import com.taotao.portal.service.CartService;

/**
 * 购物车
 * 
 * @author Lenovo
 *
 */
@Service
public class CartServiceImpl implements CartService {

	@Value("${REST_BASE_URL}")
	private String REST_BASE_URL;
	@Value("${ITME_INFO_URL}")
	private String ITME_INFO_URL;

	/**
	 * 添加购物车商品
	 * 
	 * @param itemId
	 * @param num
	 * @return
	 */
	@Override
	public TaotaoResult addCartItem(long itemId, int num, HttpServletRequest request, HttpServletResponse response) {

		// 取商品信息
		CartItem cartItem = null;

		// 取购物车商品列表
		List<CartItem> itemList = getCartItemList(request);
		// 判断购物车商品列表中是否存在此商品
		for (CartItem cItem : itemList) {
			// 如果存在此商品
			if (cItem.getId() == itemId) {
				// 增加商品数量
				cItem.setNum(cItem.getNum() + num);
				cartItem = cItem;
				break;
			}
		}
		if (cartItem == null) {
			cartItem = new CartItem();
			// 根据商品id查询商品基本信息。
			String json = HttpClientUtil.doGet(REST_BASE_URL + ITME_INFO_URL + itemId);
			// 把json转换成java对象
			TaotaoResult taotaoResult = TaotaoResult.formatToPojo(json, TbItem.class);
			if (taotaoResult.getStatus() == 200) {
				TbItem item = (TbItem) taotaoResult.getData();
				cartItem.setId(item.getId());
				cartItem.setTitle(item.getTitle());
				cartItem.setImage(item.getImage() == null ? "" : item.getImage().split(",")[0]);
				cartItem.setNum(num);
				cartItem.setPrice(item.getPrice());
			}
			// 添加到购物车列表
			itemList.add(cartItem);
		}
		// 把购物车列表写入cookie
		CookieUtils.setCookie(request, response, "TT_CART", JsonUtils.objectToJson(itemList), true);

		return TaotaoResult.ok();
	}

	/**
	 * 从cookie中取商品列表
	 */
	private List<CartItem> getCartItemList(HttpServletRequest request) {
		// 从cookie中取商品列表
		String cartJson = CookieUtils.getCookieValue(request, "TT_CART", true);
		if (cartJson == null) {
			return new ArrayList<>();
		}
		// 把json转换成商品列表
		try {
			List<CartItem> list = JsonUtils.jsonToList(cartJson, CartItem.class);
			return list;
		} catch (Exception e) {
			e.printStackTrace();
		}
		return new ArrayList<>();
	}

	/**
	 * 展示购物车商品
	 */
	@Override
	public List<CartItem> getCartItemList(HttpServletRequest request, HttpServletResponse response) {
		// TODO Auto-generated method stub
		List<CartItem> itemList = getCartItemList(request);
		return itemList;
	}

}

1.4.2 controller

调用service取购物车商品列表，把购物车商品传递给jsp，在购物车列表中展示商品。

请求的url:http://localhost:8082/cart/cart.html

返回的界面：cart.jsp

CartController.java

/taotao-portal/src/main/java/com/taotao/portal/controller/CartController.java

package com.taotao.portal.controller;


import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import com.taotao.common.utill.TaotaoResult;
import com.taotao.portal.pojo.CartItem;
import com.taotao.portal.service.CartService;

/**
 * 购物车Controller
 * 
 */
@Controller
@RequestMapping("/cart")
public class CartController {

	@Autowired
	private CartService cartService;
	
	@RequestMapping("/add/{itemId}")
	public String addCartItem(@PathVariable Long itemId, 
			@RequestParam(defaultValue="1")Integer num, 
			HttpServletRequest request, HttpServletResponse response) {
		TaotaoResult result = cartService.addCartItem(itemId, num, request, response);
		return "cartSuccess";
	}
	
	/**
	 * 展示购物车商品
	 */
	@RequestMapping("/cart")
	public String showCart(HttpServletRequest request, HttpServletResponse response, Model model) {
		List<CartItem> list = cartService.getCartItemList(request, response);
		model.addAttribute("cartList", list);
		return "cart";
	}
	
}

测试

http://localhost:8082/

报错：

cart.jsp

/taotao-portal/src/main/webapp/WEB-INF/jsp/cart.jsp

CartController.java

/taotao-portal/src/main/java/com/taotao/portal/controller/CartController.java

package com.taotao.portal.controller;


import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import com.taotao.common.utill.TaotaoResult;
import com.taotao.portal.pojo.CartItem;
import com.taotao.portal.service.CartService;

/**
 * 购物车Controller
 * 
 */
@Controller
@RequestMapping("/cart")
public class CartController {

	@Autowired
	private CartService cartService;
	
	@RequestMapping("/add/{itemId}")
	public String addCartItem(@PathVariable Long itemId, 
			@RequestParam(defaultValue="1")Integer num, 
			HttpServletRequest request, HttpServletResponse response) {
		TaotaoResult result = cartService.addCartItem(itemId, num, request, response);
		return "redirect:/cart/success.html";
	}
	
	@RequestMapping("/success")
	public String showSuccess() {
		return "cartSuccess";
	}
	
	/**
	 * 展示购物车商品
	 */
	@RequestMapping("/cart")
	public String showCart(HttpServletRequest request, HttpServletResponse response, Model model) {
		List<CartItem> list = cartService.getCartItemList(request, response);
		model.addAttribute("cartList", list);
		return "cart";
	}
	
}

1.5 修改商品数量

当点击购物车商品的“+”、“-”号时增加或减少商品数量。减少商品数量时，如果数量为“1”则不继续减少。

cart.jsp

/taotao-portal/src/main/webapp/WEB-INF/jsp/cart.jsp

cart.js

/taotao-portal/src/main/webapp/js/cart.js

购物车商品数量的修改

1.6 删除购物车商品

在购物车页面中，点击删除链接，接受要删除的商品id，从cookie中找到商品删除，重新写入cookie，重新展示购物车页面

1.6.1 server

CartService.java

/taotao-portal/src/main/java/com/taotao/portal/service/CartService.java

package com.taotao.portal.service;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.taotao.common.utill.TaotaoResult;
import com.taotao.portal.pojo.CartItem;
/**
 * 购物车
 * @author Lenovo
 *
 */
public interface CartService {
	/**
	 * 添加购物车商品
	 */
	TaotaoResult addCartItem(long itemId,int num,HttpServletRequest request, HttpServletResponse response);
	/**
	 * 展示购物车商品
	 */
	List<CartItem> getCartItemList(HttpServletRequest request, HttpServletResponse response);
	
	/**
	 * 删除购物车商品
	 */
	TaotaoResult deleteCartItem(long itemId, HttpServletRequest request, HttpServletResponse response);
}

CartServiceImpl.java

/taotao-portal/src/main/java/com/taotao/portal/service/impl/CartServiceImpl.java

package com.taotao.portal.service.impl;

import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;

import com.taotao.common.utill.CookieUtils;
import com.taotao.common.utill.HttpClientUtil;
import com.taotao.common.utill.JsonUtils;
import com.taotao.common.utill.TaotaoResult;
import com.taotao.pojo.TbItem;
import com.taotao.portal.pojo.CartItem;
import com.taotao.portal.service.CartService;

/**
 * 购物车
 * 
 * @author Lenovo
 *
 */
@Service
public class CartServiceImpl implements CartService {

	@Value("${REST_BASE_URL}")
	private String REST_BASE_URL;
	@Value("${ITME_INFO_URL}")
	private String ITME_INFO_URL;

	/**
	 * 添加购物车商品
	 * 
	 * @param itemId
	 * @param num
	 * @return
	 */
	@Override
	public TaotaoResult addCartItem(long itemId, int num, HttpServletRequest request, HttpServletResponse response) {

		// 取商品信息
		CartItem cartItem = null;

		// 取购物车商品列表
		List<CartItem> itemList = getCartItemList(request);
		// 判断购物车商品列表中是否存在此商品
		for (CartItem cItem : itemList) {
			// 如果存在此商品
			if (cItem.getId() == itemId) {
				// 增加商品数量
				cItem.setNum(cItem.getNum() + num);
				cartItem = cItem;
				break;
			}
		}
		if (cartItem == null) {
			cartItem = new CartItem();
			// 根据商品id查询商品基本信息。
			String json = HttpClientUtil.doGet(REST_BASE_URL + ITME_INFO_URL + itemId);
			// 把json转换成java对象
			TaotaoResult taotaoResult = TaotaoResult.formatToPojo(json, TbItem.class);
			if (taotaoResult.getStatus() == 200) {
				TbItem item = (TbItem) taotaoResult.getData();
				cartItem.setId(item.getId());
				cartItem.setTitle(item.getTitle());
				cartItem.setImage(item.getImage() == null ? "" : item.getImage().split(",")[0]);
				cartItem.setNum(num);
				cartItem.setPrice(item.getPrice());
			}
			// 添加到购物车列表
			itemList.add(cartItem);
		}
		// 把购物车列表写入cookie
		CookieUtils.setCookie(request, response, "TT_CART", JsonUtils.objectToJson(itemList), true);

		return TaotaoResult.ok();
	}

	/**
	 * 从cookie中取商品列表
	 */
	private List<CartItem> getCartItemList(HttpServletRequest request) {
		// 从cookie中取商品列表
		String cartJson = CookieUtils.getCookieValue(request, "TT_CART", true);
		if (cartJson == null) {
			return new ArrayList<>();
		}
		// 把json转换成商品列表
		try {
			List<CartItem> list = JsonUtils.jsonToList(cartJson, CartItem.class);
			return list;
		} catch (Exception e) {
			e.printStackTrace();
		}
		return new ArrayList<>();
	}

	/**
	 * 展示购物车商品
	 */
	@Override
	public List<CartItem> getCartItemList(HttpServletRequest request, HttpServletResponse response) {
		// TODO Auto-generated method stub
		List<CartItem> itemList = getCartItemList(request);
		return itemList;
	}

	/**
	 * 删除购物车商品
	 */
	@Override
	public TaotaoResult deleteCartItem(long itemId, HttpServletRequest request, HttpServletResponse response) {
		// 从cookie中取购物车商品列表
		List<CartItem> itemList = getCartItemList(request);
		// 从列表中找到此商品
		for (CartItem cartItem : itemList) {
			if (cartItem.getId() == itemId) {
				itemList.remove(cartItem);
				break;
			}

		}
		// 把购物车列表重新写入cookie
		CookieUtils.setCookie(request, response, "TT_CART", JsonUtils.objectToJson(itemList), true);

		return TaotaoResult.ok();
	}

}

1.6.2 controller

接受商品id，调用server删除购物车商品，返回购物车页面

请求的url:/cart/delete/${cart.id}.html

CartController.java

/taotao-portal/src/main/java/com/taotao/portal/controller/CartController.java

package com.taotao.portal.controller;


import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import com.taotao.common.utill.TaotaoResult;
import com.taotao.portal.pojo.CartItem;
import com.taotao.portal.service.CartService;

/**
 * 购物车Controller
 * 
 */
@Controller
@RequestMapping("/cart")
public class CartController {

	@Autowired
	private CartService cartService;
	
	/**
	 * 添加购物车商品
	 */
	@RequestMapping("/add/{itemId}")
	public String addCartItem(@PathVariable Long itemId, 
			@RequestParam(defaultValue="1")Integer num, 
			HttpServletRequest request, HttpServletResponse response) {
		TaotaoResult result = cartService.addCartItem(itemId, num, request, response);
		return "redirect:/cart/success.html";
	}
	
	@RequestMapping("/success")
	public String showSuccess() {
		return "cartSuccess";
	}
	
	/**
	 * 展示购物车商品
	 */
	@RequestMapping("/cart")
	public String showCart(HttpServletRequest request, HttpServletResponse response, Model model) {
		List<CartItem> list = cartService.getCartItemList(request, response);
		model.addAttribute("cartList", list);
		return "cart";
	}
	
	/**
	 * 删除购物车商品
	 */
	@RequestMapping("/delete/{itemId}")
	public String deleteCartItem(@PathVariable Long itemId, HttpServletRequest request, HttpServletResponse response) {
		cartService.deleteCartItem(itemId, request, response);
		return "redirect:/cart/cart.html";
	}
	
}

测试

1.7 购物车存在的问题

• 更换设备购物车不能同步
  • 不能将购物车保存到数据库
  • 要求用户登录才能同步信息
  • 可以把购物车信息保存到redis中，key是用户，value是购物车列表
  • 购物车商品合并问题
• 提交订单后的购物车商品需要清空

2 订单系统实现

2.1 订单表结构

订单表tb_order

订单商品表：tb_order_item

物流表：tb_order_shipping

2.2订单系统功能

• 下单功能
  • 下单功能一定要使用关系型数据库，保证数据的一致性
• 查看订单列表
• 根据订单号查看订单详情

2.3 taotao-order

2.3.1 框架整合

mybatis

spring

springmvc

jedis

SqlMapConfig.xml

保留

db.properties

保留

resource.properties

清空内容

applicationContext-dao.xml

保留

applicationContext-jedis.xml

applicationContext-service.xml

applicationContext-trans.xml

springmvc.xml

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>com.taotao</groupId>
		<artifactId>taotao-parent</artifactId>
		<version>0.0.1-SNAPSHOT</version>
	</parent>
	<groupId>com.taotao</groupId>
	<artifactId>taotao-order</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>

	<dependencies>
		<!-- 依赖taotao-manager-mapper工程 -->
		<dependency>
			<groupId>com.taotao</groupId>
			<artifactId>taotao-manager-mapper</artifactId>
			<version>0.0.1-SNAPSHOT</version>
		</dependency>
		<!-- MySql -->
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
		</dependency>
		<!-- 连接池 -->
		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>druid</artifactId>
		</dependency>
		<!-- Spring -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-context</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-beans</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-webmvc</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-jdbc</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-aspects</artifactId>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<scope>provided</scope>
		</dependency>
		<!-- Redis客户端 -->
		<dependency>
			<groupId>redis.clients</groupId>
			<artifactId>jedis</artifactId>
		</dependency>

	</dependencies>


	<build>
		<plugins>
			<!-- 配置Tomcat插件 -->
			<plugin>
				<groupId>org.apache.tomcat.maven</groupId>
				<artifactId>tomcat7-maven-plugin</artifactId>
				<configuration>
					<port>8085</port>
					<path>/</path>
				</configuration>
			</plugin>
		</plugins>
	</build>


</project>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	version="2.5">
	<display-name>taotao-order</display-name>
	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
		<welcome-file>index.htm</welcome-file>
		<welcome-file>index.jsp</welcome-file>
		<welcome-file>default.html</welcome-file>
		<welcome-file>default.htm</welcome-file>
		<welcome-file>default.jsp</welcome-file>
	</welcome-file-list>

	<!-- 加载spring容器 -->
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>classpath:spring/applicationContext-*.xml</param-value>
	</context-param>
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>
	<!-- 解决post乱码 -->
	<filter>
		<filter-name>CharacterEncodingFilter</filter-name>
		<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
		<init-param>
			<param-name>encoding</param-name>
			<param-value>utf-8</param-value>
		</init-param>
	</filter>
	<filter-mapping>
		<filter-name>CharacterEncodingFilter</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>
	<!-- springmvc的前端控制器 -->
	<servlet>
		<servlet-name>taotao-order</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<!-- contextConfigLocation不是必须的， 如果不配置contextConfigLocation， springmvc的配置文件默认在：WEB-INF/servlet的name+"-servlet.xml" -->
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>classpath:spring/springmvc.xml</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>taotao-order</servlet-name>
		<url-pattern>/order/*</url-pattern>
	</servlet-mapping>

</web-app>

2.4 创建订单接口

2.4.1 接口说明

用户使用portal创建订单、android、ios、微信商城提交订单时使用

请求方法	POST
URL	http://order.taotao.com/order/create
参数说明	提交的数据格式： { “payment”: 5288, “postFee”: 0, “userId”: “3”, “buyerMessage”: null, “buyerNick”: “zhang123”, “orderItems”: [ { “itemId”: “9”, “num”: 1, “title”: “苹果（Apple）iPhone 6 (A1586) 16GB 金色 移动联通电信4G手机3”, “price”: 5288, “totalFee”: 5288, “picPath”: “http://image.taotao.com/images/2015/03/06/2015030610045320609720.jpg” } ], “orderShipping”: { “receiverName”: “张三”, “receiverPhone”: “”, “receiverMobile”: “15800000000”, “receiverState”: “上海”, “receiverCity”: “上海”, “receiverDistrict”: “闵行区”, “receiverAddress”: “三鲁公路3279号 明浦广场 3号楼 205室”, “receiverZip”: “200000” } }
示例
返回值	{ status: 200 //200 成功 msg: “OK” // 返回信息消息 data: 100544// 返回订单号 }

2.4.2 dao

要对三个表进行操作，都是插入操作。可以使用逆向工程生成的代码

2.4.3 server

功能：接受三个参数，对应订单表的pojo。订单明细表对应的商品列表，每个元素是提交订单明细表的pojo。物流表对应的pojo

订单号的生成

**解决方案一：**使用mysql的自增长，不能使用

优点：不需要我们自己生成订单，mysql会自动生成

缺点：如果订单表数量太大时需要分库分表，此时订单号会重复，如果输数据备份后在回复，订单号会变

**解决方案二：**日期+随机数

采用毫秒+随机数

缺点：仍然有重复的可能，不建议采用此方案

在没有更好的解决方案之前可以使用

**解决方案三：**使用uuid

优点：不会重复

缺点：长、可读性差、不建议使用

**解决方案四：**可读性好、不能太长、一般订单都是全数字的

可以使用redis的incr命令生成订单号

优点：不会重复

缺点：需要搭建redis服务器

OrderService.java

/taotao-order/src/main/java/com/taotao/order/service/OrderService.java

package com.taotao.order.service;

import java.util.List;

import com.taotao.common.utill.TaotaoResult;
import com.taotao.pojo.TbOrder;
import com.taotao.pojo.TbOrderItem;
import com.taotao.pojo.TbOrderShipping;

public interface OrderService {
	/**
	 *  创建订单接口
	 */
	TaotaoResult createOrder(TbOrder order, List<TbOrderItem> itemList, TbOrderShipping orderShipping);
}

OrderServiceImpl.java

/taotao-order/src/main/java/com/taotao/order/service/impl/OrderServiceImpl.java

package com.taotao.order.service.impl;

import java.util.Date;
import java.util.List;

import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;

import com.taotao.common.utill.TaotaoResult;
import com.taotao.mapper.TbOrderItemMapper;
import com.taotao.mapper.TbOrderMapper;
import com.taotao.mapper.TbOrderShippingMapper;
import com.taotao.order.dao.JedisClient;
import com.taotao.order.service.OrderService;
import com.taotao.pojo.TbOrder;
import com.taotao.pojo.TbOrderItem;
import com.taotao.pojo.TbOrderShipping;

/**
 * 订单管理Service
 *  创建订单接口
 * @author Lenovo
 *
 */
@Service
public class OrderServiceImpl implements OrderService {

	@Autowired
	private TbOrderMapper orderMapper;
	@Autowired
	private TbOrderItemMapper orderItemMapper;
	@Autowired
	private TbOrderShippingMapper orderShippingMapper;
	@Autowired
	private JedisClient jedisClient;
	
	@Value("${ORDER_GEN_KEY}")
	private String ORDER_GEN_KEY;
	@Value("${ORDER_INIT_ID}")
	private String ORDER_INIT_ID;
	@Value("${ORDER_DETAIL_GEN_KEY}")
	private String ORDER_DETAIL_GEN_KEY;
	
	
	@Override
	public TaotaoResult createOrder(TbOrder order, List<TbOrderItem> itemList, TbOrderShipping orderShipping) {
		//向订单表中插入记录
		//获得订单号
		String string = jedisClient.get(ORDER_GEN_KEY);
		if (StringUtils.isBlank(string)) {
			jedisClient.set(ORDER_GEN_KEY, ORDER_INIT_ID);
		}
		long orderId = jedisClient.incr(ORDER_GEN_KEY);
		//补全pojo的属性
		order.setOrderId(orderId + "");
		//状态：1、未付款，2、已付款，3、未发货，4、已发货，5、交易成功，6、交易关闭
		order.setStatus(1);
		Date date = new Date();
		order.setCreateTime(date);
		order.setUpdateTime(date);
		//0：未评价 1：已评价
		order.setBuyerRate(0);
		//向订单表插入数据
		orderMapper.insert(order);
		//插入订单明细
		for (TbOrderItem tbOrderItem : itemList) {
			//补全订单明细
			//取订单明细id
			long orderDetailId = jedisClient.incr(ORDER_DETAIL_GEN_KEY);
			tbOrderItem.setId(orderDetailId + "");
			tbOrderItem.setOrderId(orderId + ""); 
			//向订单明细插入记录
			orderItemMapper.insert(tbOrderItem);
		}
		//插入物流表
		//补全物流表的属性
		orderShipping.setOrderId(orderId + "");
		orderShipping.setCreated(date);
		orderShipping.setUpdated(date);
		orderShippingMapper.insert(orderShipping);
		
		return TaotaoResult.ok(orderId);
	}

}

resource.properties

/taotao-order/src/main/resources/resource/resource.properties

#订单号生成的key
ORDER_GEN_KEY=ORDER_GEN_KEY
#初始化订单号
ORDER_INIT_ID=100544
#订单明细生成的key
ORDER_DETAIL_GEN_KEY=ORDER_DETAIL_GEN_KEY

2.4.4 controller

接受一个json格式的字符串作为参数，需要使用@RequestBody注解。需要使用一个pojo接受参数。创建一个对应json的pojo

Order.java

/taotao-order/src/main/java/com/taotao/order/pojo/Order.java

package com.taotao.order.pojo;

import java.util.List;

import com.taotao.pojo.TbOrder;
import com.taotao.pojo.TbOrderItem;
import com.taotao.pojo.TbOrderShipping;

public class Order extends TbOrder {

	private List<TbOrderItem> orderItems;
	private TbOrderShipping orderShipping;
	public List<TbOrderItem> getOrderItems() {
		return orderItems;
	}
	public void setOrderItems(List<TbOrderItem> orderItems) {
		this.orderItems = orderItems;
	}
	public TbOrderShipping getOrderShipping() {
		return orderShipping;
	}
	public void setOrderShipping(TbOrderShipping orderShipping) {
		this.orderShipping = orderShipping;
	}
	
	
}

OrderController.java

/taotao-order/src/main/java/com/taotao/order/controller/OrderController.java

package com.taotao.order.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.taotao.common.utill.ExceptionUtil;
import com.taotao.common.utill.TaotaoResult;
import com.taotao.order.pojo.Order;
import com.taotao.order.service.OrderService;

/**
 * 订单管理Service
 *  创建订单接口
 * @author Lenovo
 *
 */
@Controller
public class OrderController {

	@Autowired
	private OrderService orderService;
	
	@RequestMapping(value="/create", method=RequestMethod.POST)
	@ResponseBody
	public TaotaoResult createOrder(@RequestBody Order order) {
		try {
			TaotaoResult result = orderService.createOrder(order, order.getOrderItems(), order.getOrderShipping());
			return result;
		} catch (Exception e) {
			e.printStackTrace();
			return TaotaoResult.build(500, ExceptionUtil.getStackTrace(e));
		}
	}
}

3 前端系统实现下单功能

在 taotao-portal系统中添加商品至购物车中，点击提价订单调用taotao-order服务生成订单。向用户展示订单号，提示创建订单成功

3.1下单流程

3.2 购物车“去结算”按钮

cart.jsp

/taotao-portal/src/main/webapp/WEB-INF/jsp/cart.jsp

OrderController.java

/taotao-portal/src/main/java/com/taotao/portal/controller/OrderController.java

package com.taotao.portal.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 *  前端系统实现下单功能
 *  购物车“去结算”按钮
 * @author Lenovo
 *
 */
@Controller
@RequestMapping("/order")
public class OrderController {
	
	@RequestMapping("/order-cart")
	public String showOrderCart() {
		return "order-cart";
	}
	
}

3.3 订单确认界面

• 要求用户登录
• 根据用户ID查询用户的收货地址列表
• 在此页面展示购物车的商品列表
• 需要计算订单的总金额（包括运费）

3.3.1要求用户登录

修改springmvc.xml拦截所有以：/order/**形式的url。

springmvc.xml

/taotao-portal/src/main/resources/spring/springmvc.xml

3.3.2 根据用户ID查询用户的收货地址列表

在实际的商城中是必须要有此功能，需要taotao-rest发布服务，由taotao-portal根据用户查询用户的收货地址列表

在此，使用静态数据模拟

3.3.3 在此页面展示购物车的商品列表

需要从cookie中把购物车商品列表取出，传递给order-cart.jsp

可以直接使用购物车服务，

OrderController.java

/taotao-portal/src/main/java/com/taotao/portal/controller/OrderController.java

package com.taotao.portal.controller;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.taotao.portal.pojo.CartItem;
import com.taotao.portal.service.CartService;

/**
 *  前端系统实现下单功能
 *  购物车“去结算”按钮
 * @author Lenovo
 *
 */
@Controller
@RequestMapping("/order")
public class OrderController {
	
	@Autowired
	private CartService cartService;
	
	/*
	 * 显示订单确认画面
	 */
	@RequestMapping("/order-cart")
	public String showOrderCart(HttpServletRequest request, HttpServletResponse response, Model model) {
		//取购物车商品列表
		List<CartItem> list = cartService.getCartItemList(request, response);
		//传递给页面
		model.addAttribute("cartList", list);
		
		return "order-cart";
	}
	
}

运行

报错：

order-cart.jsp

/taotao-portal/src/main/webapp/WEB-INF/jsp/order-cart.jsp

3.4 提交订单

3.4.1 需求分析

点击提交订单按钮，把用户已经确认的订单信息提交给后台。提交一个隐藏的表单，其中包含订单基本信息，订单名称以及配送信息。需要使用一个包装的pojo接收表单中的内容

order-cart.jsp

/taotao-portal/src/main/webapp/WEB-INF/jsp/order-cart.jsp

提交的url:/order/create.html

参数：表单的内容。使用order接收表单的内容

order即/taotao-order/src/main/java/com/taotao/order/pojo/Order.java

返回值：返回一个jsp页面

3.4.2 server

接受order对象，调用taotao-order提供的服务，提交订单，需要把pojo转换成json数据，调用taotao-order提供的服务返回taotaoresult。包含订单号。

参数：order

返回者：string(订单号)

Order.java

/taotao-portal/src/main/java/com/taotao/portal/pojo/Order.java

OrderService.java

/taotao-portal/src/main/java/com/taotao/portal/service/OrderService.java

package com.taotao.portal.service;

import com.taotao.portal.pojo.Order;

public interface OrderService {
	/*
	 * 提交订单
	 */
	String createOrder(Order order);
}

OrderServiceImpl.java

/taotao-portal/src/main/java/com/taotao/portal/service/impl/OrderServiceImpl.java

package com.taotao.portal.service.impl;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;

import com.taotao.common.utill.HttpClientUtil;
import com.taotao.common.utill.JsonUtils;
import com.taotao.common.utill.TaotaoResult;
import com.taotao.portal.pojo.Order;
import com.taotao.portal.service.OrderService;

/*
 * 提交订单
 */
@Service
public class OrderServiceImpl implements OrderService {
	
	@Value("${ORDER_BASE_URL}")
	private String ORDER_BASE_URL;
	@Value("${ORDER_CREATE_URL}")
	private String ORDER_CREATE_URL;
	

	@Override
	public String createOrder(Order order) {
		//调用创建订单服务之前补全用户信息。
		//从cookie中后取TT_TOKEN的内容，根据token调用sso系统的服务根据token换取用户信息。
		
		//调用taotao-order的服务提交订单。
		String json = HttpClientUtil.doPostJson(ORDER_BASE_URL + ORDER_CREATE_URL, JsonUtils.objectToJson(order));
		//把json转换成taotaoResult
		TaotaoResult taotaoResult = TaotaoResult.format(json);
		if (taotaoResult.getStatus() == 200) {
			Object orderId = taotaoResult.getData();
			return orderId.toString();
		}
		return "";
	}

}

resource.properties

【/taotao-portal】—【/src/main/resources/】—【resource/】—【resource.properties】

#订单系统基础url
ORDER_BASE_URL=http://localhost:8085/order
#创建订单服务
ORDER_CREATE_URL=/create

3.4.3 controller

OrderController.java

/taotao-portal/src/main/java/com/taotao/portal/controller/OrderController.java

package com.taotao.portal.controller;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.joda.time.DateTime;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.taotao.pojo.TbUser;
import com.taotao.portal.pojo.CartItem;
import com.taotao.portal.pojo.Order;
import com.taotao.portal.service.CartService;
import com.taotao.portal.service.OrderService;

/**
 *  前端系统实现下单功能
 *  购物车“去结算”按钮
 * @author Lenovo
 *
 */
@Controller
@RequestMapping("/order")
public class OrderController {
	
	@Autowired
	private CartService cartService;
	
	@Autowired
	private OrderService orderService;
	
	/*
	 * 显示订单确认画面
	 */
	@RequestMapping("/order-cart")
	public String showOrderCart(HttpServletRequest request, HttpServletResponse response, Model model) {
		//取购物车商品列表
		List<CartItem> list = cartService.getCartItemList(request, response);
		//传递给页面
		model.addAttribute("cartList", list);
		
		return "order-cart";
	}
	
	
	/*
	 * 提交订单
	 */
	@RequestMapping("/create")
	public String createOrder(Order order, Model model, HttpServletRequest request) {
		try {
			//从Request中取用户信息
			TbUser user = (TbUser) request.getAttribute("user");
			//在order对象中补全用户信息
			order.setUserId(user.getId());
			order.setBuyerNick(user.getUsername());
			//调用服务
			String orderId = orderService.createOrder(order);
			model.addAttribute("orderId", orderId);
			model.addAttribute("payment", order.getPayment());
			model.addAttribute("date", new DateTime().plusDays(3).toString("yyyy-MM-dd"));
			return "success";
			
		} catch (Exception e) {
			e.printStackTrace();
			model.addAttribute("message", "创建订单出错。请稍后重试！");
			return "error/exception";
		}
	}
	
}

测试