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

目录

    • 1 购物车功能
      • 1.1 功能说明
      • 1.2 功能分析
      • 1.3 添加购物车商品
        • 1.3.1 service
          • CartItem.java
          • CartService.java
          • CartServiceImpl.java
        • 1.3.2 controller
          • CartController.java
        • 1.3.3 添加购物车成功页面
          • cartSuccess.jsp
          • base.css
          • initcart20150123.css
          • 测试
      • 1.4 展示购物车商品
        • 1.4.1 server
          • CartService.java
          • CartServiceImpl.java
        • 1.4.2 controller
          • CartController.java
          • 测试
            • cart.jsp
          • CartController.java
      • 1.5 修改商品数量
        • cart.jsp
        • cart.js
      • 1.6 删除购物车商品
        • 1.6.1 server
          • CartService.java
          • CartServiceImpl.java
        • 1.6.2 controller
          • CartController.java
          • 测试
        • 1.7 购物车存在的问题
    • 2 订单系统实现
      • 2.1 订单表结构
        • 订单表tb_order
        • 订单商品表:tb_order_item
        • 物流表:tb_order_shipping
      • 2.2订单系统功能
      • 2.3 taotao-order
        • 2.3.1 框架整合
          • SqlMapConfig.xml
          • db.properties
          • resource.properties
          • applicationContext-dao.xml
          • applicationContext-jedis.xml
          • applicationContext-service.xml
          • applicationContext-trans.xml
          • springmvc.xml
          • pom.xml
          • web.xml
      • 2.4 创建订单接口
        • 2.4.1 接口说明
        • 2.4.2 dao
        • 2.4.3 server
          • OrderService.java
          • OrderServiceImpl.java
          • resource.properties
        • 2.4.4 controller
          • Order.java
          • OrderController.java
    • 3 前端系统实现下单功能
      • 3.1下单流程
      • 3.2 购物车“去结算”按钮
        • cart.jsp
        • OrderController.java
      • 3.3 订单确认界面
        • 3.3.1要求用户登录
          • springmvc.xml
        • 3.3.2 根据用户ID查询用户的收货地址列表
        • 3.3.3 在此页面展示购物车的商品列表
          • OrderController.java
          • order-cart.jsp
      • 3.4 提交订单
        • 3.4.1 需求分析
          • order-cart.jsp
        • 3.4.2 server
          • Order.java
          • OrderService.java
          • OrderServiceImpl.java
          • resource.properties
        • 3.4.3 controller
          • OrderController.java

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
URLhttp://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";
		}
	}
	
}


测试

热门文章

暂无图片
编程学习 ·

那些年让我们目瞪口呆的bug

程序员一生与bug奋战&#xff0c;可谓是杀敌无数&#xff0c;见怪不怪了&#xff01;在某知识社交平台中&#xff0c;一个“有哪些让程序员目瞪口呆的bug”的话题引来了6700多万的阅读&#xff0c;可见程序员们对一个话题的敏感度有多高。 1、麻省理工“只能发500英里的邮件” …
暂无图片
编程学习 ·

redis的下载与安装

下载redis wget http://download.redis.io/releases/redis-5.0.0.tar.gz解压redis tar -zxvf redis-5.0.0.tar.gz编译 make安装 make install快链方便进入redis ln -s redis-5.0.0 redis
暂无图片
编程学习 ·

《大话数据结构》第三章学习笔记--线性表(一)

线性表的定义 线性表&#xff1a;零个或多个数据元素的有限序列。 线性表元素的个数n定义为线性表的长度。n为0时&#xff0c;为空表。 在比较复杂的线性表中&#xff0c;一个数据元素可以由若干个数据项组成。 线性表的存储结构 顺序存储结构 可以用C语言中的一维数组来…
暂无图片
编程学习 ·

对象的扩展

文章目录对象的扩展属性的简洁表示法属性名表达式方法的name属性属性的可枚举性和遍历可枚举性属性的遍历super关键字对象的扩展运算符解构赋值扩展运算符AggregateError错误对象对象的扩展 属性的简洁表示法 const foo bar; const baz {foo}; baz // {foo: "bar"…
暂无图片
编程学习 ·

让程序员最头疼的5种编程语言

世界上的编程语言&#xff0c;按照其应用领域&#xff0c;可以粗略地分成三类。 有的语言是多面手&#xff0c;在很多不同的领域都能派上用场。大家学过的编程语言很多都属于这一类&#xff0c;比如说 C&#xff0c;Java&#xff0c; Python。 有的语言专注于某一特定的领域&…
暂无图片
编程学习 ·

写论文注意事项

参考链接 给研究生修改了一篇论文后&#xff0c;该985博导几近崩溃…… 重点分析 摘要与结论几乎重合 这一条是我见过研究生论文中最常出现的事情&#xff0c;很多情况下&#xff0c;他们论文中摘要部分与结论部分重复率超过70%。对于摘要而言&#xff0c;首先要用一小句话引…
暂无图片
编程学习 ·

安卓 串口开发

上图&#xff1a; 上码&#xff1a; 在APP grable添加 // 串口 需要配合在项目build.gradle中的repositories添加 maven {url "https://jitpack.io" }implementation com.github.licheedev.Android-SerialPort-API:serialport:1.0.1implementation com.jakewhart…
暂无图片
编程学习 ·

2021-2027年中国铪市场调研与发展趋势分析报告

2021-2027年中国铪市场调研与发展趋势分析报告 本报告研究中国市场铪的生产、消费及进出口情况&#xff0c;重点关注在中国市场扮演重要角色的全球及本土铪生产商&#xff0c;呈现这些厂商在中国市场的铪销量、收入、价格、毛利率、市场份额等关键指标。此外&#xff0c;针对…
暂无图片
编程学习 ·

Aggressive cows题目翻译

描述&#xff1a; Farmer John has built a new long barn, with N (2 < N < 100,000) stalls.&#xff08;John农民已经新建了一个长畜棚带有N&#xff08;2<N<100000&#xff09;个牛棚&#xff09; The stalls are located along a straight line at positions…
暂无图片
编程学习 ·

剖析组建PMO的6个大坑︱PMO深度实践

随着事业环境因素的不断纷繁演进&#xff0c;项目时代正在悄悄来临。设立项目经理转岗、要求PMP等项目管理证书已是基操&#xff0c;越来越多的组织开始组建PMO团队&#xff0c;大有曾经公司纷纷建造中台的气质&#xff08;当然两者的本质并不相同&#xff0c;只是说明这个趋势…
暂无图片
编程学习 ·

Flowable入门系列文章118 - 进程实例 07

1、获取流程实例的变量 GET运行时/进程实例/ {processInstanceId} /变量/ {变量名} 表1.获取流程实例的变量 - URL参数 参数需要值描述processInstanceId是串将流程实例的id添加到变量中。变量名是串要获取的变量的名称。 表2.获取流程实例的变量 - 响应代码 响应码描述200指…
暂无图片
编程学习 ·

微信每天自动给女[男]朋友发早安和土味情话

微信通知&#xff0c;每天给女朋友发早安、情话、诗句、天气信息等~ 前言 之前逛GitHub的时候发现了一个自动签到的小工具&#xff0c;b站、掘金等都可以&#xff0c;我看了下源码发现也是很简洁&#xff0c;也尝试用了一下&#xff0c;配置也都很简单&#xff0c;主要是他有一…
暂无图片
编程学习 ·

C语言二分查找详解

二分查找是一种知名度很高的查找算法&#xff0c;在对有序数列进行查找时效率远高于传统的顺序查找。 下面这张动图对比了二者的效率差距。 二分查找的基本思想就是通过把目标数和当前数列的中间数进行比较&#xff0c;从而确定目标数是在中间数的左边还是右边&#xff0c;将查…
暂无图片
编程学习 ·

项目经理,你有什么优势吗?

大侠被一个问题问住了&#xff1a;你和别人比&#xff0c;你的优势是什么呢? 大侠听到这个问题后&#xff0c;脱口而出道&#xff1a;“项目管理能力和经验啊。” 听者抬头看了一下大侠&#xff0c;显然听者对大侠的这个回答不是很满意&#xff0c;但也没有继续追问。 大侠回家…
暂无图片
编程学习 ·

nginx的负载均衡和故障转移

#注&#xff1a;proxy_temp_path和proxy_cache_path指定的路径必须在同一分区 proxy_temp_path /data0/proxy_temp_dir; #设置Web缓存区名称为cache_one&#xff0c;内存缓存空间大小为200MB&#xff0c;1天没有被访问的内容自动清除&#xff0c;硬盘缓存空间大小为30GB。 pro…
暂无图片
编程学习 ·

业务逻辑漏洞

身份认证安全 绕过身份认证的几种方法 暴力破解 测试方法∶在没有验证码限制或者一次验证码可以多次使用的地方&#xff0c;可以分为以下几种情况︰ (1)爆破用户名。当输入的用户名不存在时&#xff0c;会显示请输入正确用户名&#xff0c;或者用户名不存在 (2)已知用户名。…