购物车

最新推荐文章于 2025-05-24 15:24:14 发布

chenweibi5276

最新推荐文章于 2025-05-24 15:24:14 发布

阅读量78

点赞数

文章标签： javascript java ViewUI

原文链接：https://my.oschina.net/u/2411775/blog/490838

版权

在index.html首页点击购物车（在header中加入initcart方法返回到cart-1）

在hearder.html

<p class="cartbar nobox mt25 yh"><a th:href="@{initCart}"><i class="ico"></i>购物车<i class="num"></i></a>

在cart-1.html中

利用js来进行自增减、单选、圈选、小计
<script type="text/javascript">
	function addNum(inputId) {
		document.getElementById(inputId).value = parseInt(document
				.getElementById(inputId).value) + 1;
		var sumCount = document.getElementById("single" + inputId).innerText * document.getElementById(inputId).value;
		document.getElementById("sum" + inputId).innerText = sumCount.toFixed(2);这个是固定它的长度
		check();
	}
	
	function subNum(inputId) {
		if (document.getElementById(inputId).value == "1") {
			return;
		}
		document.getElementById(inputId).value = parseInt(document
				.getElementById(inputId).value) - 1;
		var sumCount = document.getElementById("single" + inputId).innerText * document.getElementById(inputId).value;
		document.getElementById("sum" + inputId).innerText = sumCount.toFixed(2);
		check();
	}
	
	function count(obj) {
		var sumCount = document.getElementById("single" + obj.id).innerText * document.getElementById(obj.id).value;
		document.getElementById("sum" + obj.id).innerText = sumCount.toFixed(2);
		check();
	}
	
	function checkAll(obj) {
		var el = document.getElementsByTagName('input');
		if(obj.checked == true) {
			var sumXiaoji = 0;
			var sumCount = 0;
			var xiaojiLen = document.getElementsByName("xiaoji");
			for(var xiaoji in xiaojiLen) {
				if (xiaojiLen[xiaoji].tagName == 'SPAN') {
					sumXiaoji = sumXiaoji + parseFloat(xiaojiLen[xiaoji].innerText);
					sumCount = sumCount + 1;
				}
			}
			document.getElementById("sumCount").innerText = sumCount;
			document.getElementById("sumMoney").innerText = sumXiaoji.toFixed(2);
			for (var key in el) {
				if (el[key].type == 'checkbox') {
					el[key].checked = true;
				}
			}
		} else {
			document.getElementById("sumCount").innerText = 0;
			document.getElementById("sumMoney").innerText = 0;
			for (var key in el) {
				if (el[key].type == 'checkbox') {
					el[key].checked = false;
				}
			}
		}
	}

	function check() {
		var el = document.getElementsByTagName('input');
		var xiaojiLen = document.getElementsByName("xiaoji");
		var xiaojiArray=new Array();
		var xiaojiInt = 0;
		var allCheckFlag = true;
		for (var key in el) {
			if (el[key].type == 'checkbox') { 
				if(el[key].id !="checkAllId") {
					xiaojiArray[xiaojiInt] = el[key].checked;
					xiaojiInt++;
					if (el[key].checked == false) {
						allCheckFlag = false;
					}
				}
			}
		}
		document.getElementById("checkAllId").checked = allCheckFlag;
		var sumXiaoji = 0;
		var sumCount = 0;
		for(var xiaoji in xiaojiLen) {
			if (xiaojiLen[xiaoji].tagName == 'SPAN') {
				if(xiaojiArray[xiaoji] == true) {
					sumXiaoji = sumXiaoji + parseFloat(xiaojiLen[xiaoji].innerText);
					sumCount = sumCount + 1;
				}
			}
		}
		document.getElementById("sumCount").innerText = sumCount;
		document.getElementById("sumMoney").innerText = sumXiaoji.toFixed(2);
	}
</script>

在cart-1的一些关键地方写入

<tr>
<th class="wp7_5"> 这是全选 利用onclick调用上面的js的checkall
<input type="checkbox" id="checkAllId" onclick="checkAll(this);" class="vm" /> 全选</th>
<th class="wp40">商品详情</th>
<th class="wp15">单价</th><th class="wp15">数量</th><th class="wp15">小计</th>
<th class="wp7_5">操作</th></tr></thead>
<tbody th:each="cartsInfo,status:${cartList}">利用这句话作循环
<tr><td class="chk">									
<input type="hidden" th:name="${#strings.concat('listBean[').concat(status.index).concat('].commodityId')}" th:value="${cartsInfo.commodityId}"/>
<input type="hidden" th:name="${#strings.concat('listBean[').concat(status.index).concat('].cartId')}" th:value="${cartsInfo.cartId}"/>
<input type="checkbox" th:name="${#strings.concat('listBean[').concat(status.index).concat('].checkArray')}" onclick="check();"/></td><td>
<div class="cont cf">
<img th:src="@{showImage(pictureId=${cartsInfo.pictureId})}"alt="购物车详细情况" class="pic" />
<h4><span th:text="${cartsInfo.commodityName}"></span></h4>
<p class=" mt10">
规格：每<span th:text="${#strings.concat(cartsInfo.unit).concat(cartsInfo.specifications)}"></span>
</p>
<p>品牌：<span th:text="${cartsInfo.brandName}"></span></p></div></td>
<td><p class="price yh">
<span th:id="${#strings.concat('single').concat(cartsInfo.commodityId)}" th:text="${cartsInfo.retailPrice}"></span>元</p></td><td>
<div class="chooseAmount">
<a href="javascript:void(0);"这些地方是用来调用js自增减
th:onclick="${#strings.concat('subNum(').concat(cartsInfo.commodityId).concat(')')}"></a>
<input th:id="${cartsInfo.commodityId}" type="text" class="fl inp-t" th:name="${#strings.concat('listBean[').concat(status.index).concat('].countArray')}" th:value="${cartsInfo.count}" value="1" onblur="count(this);"/>
<a href="javascript:void(0);"
th:onclick="${#strings.concat('addNum(').concat(cartsInfo.commodityId).concat(')')}"></a></div></td>
<td><p class="price yh">
<span name="xiaoji" th:id="${#strings.concat('sum').concat(cartsInfo.commodityId)}" th:text="${cartsInfo.smallSumPrice}"></span>元</p></td>
<td><a class="button"th:href="@{delCart(cartId=${cartsInfo.cartId},count=${cartsInfo.count},commodityId=${cartsInfo.commodityId})}"><span>删除</span></a></td></tr>

在cartcontroller.java

 删除选中商品调用的 
 
   @RequestMapping(value = "alipayConfirm", method = RequestMethod.POST,params="delChoosedCart")
	public String executeDelChoosedCart(Model model, HttpSession session,
			CartForm cartForm, Device device) throws SQLException {
		log.info("删除选中购物车");
		UVO uvo = (UVO) session.getAttribute("UVO");
		if (uvo == null || StringUtils.isEmpty(uvo.getGuestId())) {
			return "redirect:/initGuestLogin";
		}
		List<ListBean> listBean = cartForm.getListBean();
		int b = listBean.size();
		for (int k = 0; k < b;k++) {				
			String check = listBean.get(k).getCheckArray();
			if (check != null) {
				cartForm.setCount(listBean.get(k).getCountArray());
				cartForm.setCommodityId(listBean.get(k).getCommodityId());
				cartForm.setCartId(listBean.get(k).getCartId());
				cartForm.setUpdateUser(uvo.getGuestName());
				Date date = new Date();
				SimpleDateFormat dateformat = new SimpleDateFormat(
						"yyyy-MM-dd HH:mm:ss");
				cartForm.setUpdateTime(dateformat.format(date));

				boolean result = cartService.delCart(cartForm);
				if (!result) {
					throw new SQLException("删除购物车失败！");
				}				
			}
		}
		cartForm.setGuestId(uvo.getGuestId());
		GoodsForm goodsForm = new GoodsForm();
		// goodsForm.setType("粮食");
		// model.addAttribute("goodsForm", goodsForm);
		List<GoodsForm> commodityType = goodsService.getType();
		goodsForm.setCommodityTypeId(commodityType.get(0).getCommodityTypeId());
		model.addAttribute("goodsForm", goodsForm);
		model.addAttribute("commodityType", commodityType);
		model.addAttribute("cartList", cartService.searchCartList(cartForm));
		model.addAttribute("list",cartService.searchAlipayHistoryList(cartForm));
    	cartForm.setGuestId(uvo.getGuestId());
    	List<CartForm> cartFormList=cartService.searchCartList(cartForm);
    	for(int i=0;i<cartFormList.size();i++){
    		cartFormList.get(i).setSmallSumPrice(Double.toString(Double.valueOf(cartFormList.get(i).getCount())*Double.valueOf(cartFormList.get(i).getRetailPrice())));
    	}
    	model.addAttribute("cartList", cartFormList);
		if (device.isNormal()) {
			return "shop/cart/cart-1";
		} else {
			return "mobile/cart/cart-1";
		}	
	}

结算调用的

@RequestMapping(value = "alipayConfirm", method = RequestMethod.POST,params="Go")
	public String alipayConfirm(Model model, HttpSession session,
			CartForm cartForm, Device device) throws SQLException {
		GoodsForm goodsForm = new GoodsForm();
		// goodsForm.setType("粮食");
		// model.addAttribute("goodsForm", goodsForm);
		List<GoodsForm> commodityType = goodsService.getType();
		goodsForm.setCommodityTypeId(commodityType.get(0).getCommodityTypeId());
		model.addAttribute("goodsForm", goodsForm);
		model.addAttribute("commodityType", commodityType);
		log.info("确认支付");
		// CartForm cartForm = new CartForm();
		UVO uvo = (UVO) session.getAttribute("UVO");
		if (uvo == null || StringUtils.isEmpty(uvo.getGuestId())) {
			return "redirect:/initGuestLogin";
		}

		List<ListBean> listBean = cartForm.getListBean();
		int b = listBean.size();
		String cartIds = "";
		for (int i = 0; i < b; i++) {
			cartForm.setUpdateUser(uvo.getGuestName());
			Date date = new Date();
			SimpleDateFormat dateformat = new SimpleDateFormat(
					"yyyy-MM-dd HH:mm:ss");
			cartForm.setUpdateTime(dateformat.format(date));
			cartForm.setCommodityId(listBean.get(i).getCommodityId());
			cartForm.setCount(listBean.get(i).getCountArray());
			cartForm.setGuestId(uvo.getGuestId());
			String check = listBean.get(i).getCheckArray();
			if (check != null) {
				cartForm.setCartId(listBean.get(i).getCartId());
				boolean result = cartService.editStockByCart(cartForm);
				if (!result) {
					throw new SQLException("库存不足！");
				}
				boolean hisResult = cartService.updateCart(cartForm);
				if (!hisResult) {
					throw new SQLException("添加支付宝失败");
				}
				cartIds = cartIds + ",'" + listBean.get(i).getCartId() + "'";
			}

		}
		cartForm.setCartId(cartIds.substring(1));
		// cartForm.setGuestId(uvo.getGuestId());
		List<CartForm> list = cartService.searchCartListForCartId(cartForm);
		AlipayForm alipayForm = new AlipayForm();
		String body = "您购买的商品如下：";
		Double price = 0d;
		for (CartForm item : list) {
			body = body
					+ "品名："
					+ item.getCommodityName()
					+ ", 数量："
					+ item.getCount()
					+ ", 总价："
					+ String.valueOf(Double.valueOf(item.getCount())
							* Double.valueOf(item.getRetailPrice())) + ";";
			price = price + Double.valueOf(item.getCount())
					* Double.valueOf(item.getRetailPrice());
		}
		alipayForm.setBody(body);
		alipayForm.setOutTradeNo(list.get(0).getCartId());
		// 不满88元加8元邮费
		if (price < 88) {
			price = price + 8;
			body = body + "(由于本次订单未满88元，加收您邮费8元)";
		}
		alipayForm.setCartFormList(list);
		alipayForm.setPrice(price.toString());
		alipayForm.setReceiveAddress(uvo.getAddress());
		alipayForm.setReceiveMobile(uvo.getMobile());
		alipayForm.setReceiveName(uvo.getGuestName());
		alipayForm.setReceivePhone(uvo.getPhone());
		alipayForm.setReceiveZip(uvo.getZip());
		String host = env.getProperty("host.web");
		alipayForm.setShowUrl(host + "/initCart");
		alipayForm.setSubject(body);
		model.addAttribute("alipayForm", alipayForm);
		cartForm.setGuestId(uvo.getGuestId());		
		model.addAttribute("cartList", cartService.searchCartList(cartForm));
		ReceiveForm receiveForm=new ReceiveForm();
		receiveForm.setGuestId(uvo.getGuestId());
		List<ReceiveForm> list1=receiveservice.searchlist(receiveForm);
      	model.addAttribute("list", list1);
		if (device.isNormal()) {
			return "shop/cart/cart-2";
		} else {
			return "mobile/alipay/cart-2";

删除

<a class="button"th:href="@{delCart(cartId=${cartsInfo.cartId},count=${cartsInfo.count},commodityId=${cartsInfo.commodityId)

转载于:https://my.oschina.net/u/2411775/blog/490838