Browse Source

商品结算页面

chao 4 years ago
parent
commit
ceb5c677ae

+ 10 - 9
src/main/java/com/caimei/www/controller/authorized/ShoppingController.java

@@ -6,6 +6,7 @@ import com.caimei.www.pojo.order.CartItem;
 import com.caimei.www.service.page.ShoppingService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.ResponseBody;
 
@@ -22,6 +23,7 @@ import java.util.Map;
 public class ShoppingController extends BaseController {
 
 	private static final String SHOPPING_CART_PATH = "shopping/cart";
+	private static final String SHOPPING_CONFIRM_PATH = "shopping/confirm";
 
     private ShoppingService shoppingService;
     @Autowired
@@ -37,6 +39,14 @@ public class ShoppingController extends BaseController {
         return SHOPPING_CART_PATH;
     }
 
+    /**
+     * 确认订单页
+     */
+    @GetMapping("/shopping/confirm.html")
+    public String confirm() {
+        return SHOPPING_CONFIRM_PATH;
+    }
+
     /**
      * 顶部购物车数据
      * @return
@@ -47,14 +57,5 @@ public class ShoppingController extends BaseController {
         return shoppingService.getHeaderCart(userId);
     }
 
-    /**
-     * 购物车列表数据
-     * @return
-     */
-    @GetMapping("/cart/list")
-    @ResponseBody
-    public JsonModel<Map<String, Object>> getShoppingCarts(Integer userId) {
-        return shoppingService.getShoppingCarts(userId);
-    }
 
 }

+ 8 - 1
src/main/resources/static/js/shopping/cart.js

@@ -170,7 +170,14 @@ var shoppingCart = new Vue({
                 alert("test")
             })
         },
-
+        submitCart: function(){
+            if (this.submitIds.length>0){
+                var productIds = this.submitIds.join(",");
+                window.localStorage.setItem("shoppingProductIds", productIds);
+                // type:(1购物车提交[对应表cm_cart],2直接购买提交, 3协销下单)
+                window.location.href = '/shopping/confirm.html?type=1';
+            }
+        }
     },
     created: function () {
         if(globalUserData){

+ 76 - 0
src/main/resources/static/js/shopping/confirm.js

@@ -0,0 +1,76 @@
+var shoppingCart = new Vue({
+    el: "#shoppingCart",
+    data: {
+        userId: 0,
+        userIdentity: '',
+        userToken: '',
+        type: '',
+        listData: [],
+        kindCount: 0,
+        totalCount: 0,
+        totalPrice: 0
+    },
+    computed: {
+
+    },
+    methods: {
+        getConfirmList: function (productIds, productCount) {
+            var _self = this;
+            if(this.userId ===0){return;}
+            tokenAjax("get", "/order/confirm", {
+                userId: _self.userId,
+                count: productCount,
+                productIds: productIds
+            } ,function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.listData = r.data.list;
+                }
+            });
+        },
+        toggleThisLadder: function(event){
+            var el = event.currentTarget;
+            if($(el).hasClass("on")){
+                $(el).removeClass("on").siblings('.mFixed').hide();
+                if(!isPC){looseBody();}
+            }else{
+                $(el).addClass("on").siblings('.mFixed').show();
+                if(!isPC){fixedBody();}
+            }
+        },
+        hideThisLadder: function(event){
+            var el = event.currentTarget;
+            $(el).parents('.priceTag').find('.tag').removeClass("on").siblings('.mFixed').hide();
+            if(!isPC){looseBody();}
+        },
+        submitOrder: function(){
+
+        }
+    },
+    created: function () {
+        this.type = getUrlParam("type") ? getUrlParam("type")*1 : "";
+        if(globalUserData){
+            this.userId = globalUserData.userId;
+            this.userIdentity = globalUserData.identity;
+            this.userToken = globalUserData.token;
+            // type:(1购物车提交[对应表cm_cart],2直接购买提交, 3协销下单)
+            if(this.type === 1) {
+                var productIds = window.localStorage.getItem("shoppingProductIds");
+                // 获取列表数据
+                this.getConfirmList(productIds, null);
+            }
+        }
+    },
+    mounted: function () {
+        var _self = this;
+        var minAwayBtm = $("footer").height();
+        //处理滚动条控制底部提交fixed
+        $(window).scroll(function() {
+            var awayBtm = $(document).height() - $(window).scrollTop() - $(window).height();
+            if(minAwayBtm <= awayBtm){
+                $(".summaryWrap").addClass('fixed');
+            }else{
+                $(".summaryWrap").removeClass("fixed");
+            }
+        });
+    }
+});

+ 2 - 2
src/main/resources/templates/shopping/cart.html

@@ -2,7 +2,7 @@
 <html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="https://www.thymeleaf.org ">
 <head>
-    <title>采美365网-购物车列表</title>
+    <title>采美365网-我的购物车</title>
     <template th:replace="components/head-link"></template>
     <link th:href="@{/css/shopping/cart.css(v=${version})}" rel="stylesheet" type="text/css">
 </head>
@@ -173,7 +173,7 @@
             </div>
             <div class="right mfbt">
                 <div class="item">总价:<em v-text="'¥'+toFloat(totalPrice)"></em></div>
-                <a class="submit" href="javascript:void(0);">去结算</a>
+                <a class="submit" href="javascript:void(0);" @click="submitCart()">去结算</a>
             </div>
         </div>
     </div>

+ 53 - 0
src/main/resources/templates/shopping/confirm.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美365网-核对订单信息</title>
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/shopping/cart.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!-- 购物车列表 -->
+<div id="shoppingConfirm">
+    <!--列表-->
+    <div v-else class="wrap">
+        <div class="pageTitle">
+            <div class="step">
+                <span>我的购物车</span>
+                 <label class="line"></label>
+                <span class="on">核对订单信息</span>
+                 <label class="line"></label>
+                <span>成功提交订单</span>
+            </div>
+            <h1>核对订单信息</h1>
+        </div>
+    </div>
+
+    <div class="summaryWrap">
+        <div class="summary">
+            <div class="left mfbt">
+                <div class="item">
+                    <input class="check" type="checkbox" @change="ckeckAll()" v-model="allChecked">
+                    <span>全选</span>
+                    <a class="delete" href="javascript:void(0);">删除</a>
+                </div>
+                <div class="item">商品种类:<em v-text="kindCount"></em></div>
+                <div class="item">商品数量:<em v-text="totalCount"></em></div>
+            </div>
+            <div class="right mfbt">
+                <div class="item">总价:<em v-text="'¥'+toFloat(totalPrice)"></em></div>
+                <a class="submit" href="javascript:void(0);" @click="submitOrder()">去结算</a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/shopping/confirm.js(v=${version})}"></script>
+</body>
+</html>