Prechádzať zdrojové kódy

购物车计算逻辑优化2

chao 4 rokov pred
rodič
commit
1a519da1a9

+ 2 - 63
src/main/resources/static/css/shopping/cart.css

@@ -63,7 +63,8 @@ li{list-style:none}
     .listWrap .del:hover{color:#f94b4b}
     .listWrap .del:hover .tips{opacity:1}
     .listWrap .price{position:relative;display:inline-block;line-height:24px;}
-    .listWrap .price em{font-style:normal;font-size: 16px}
+    .listWrap .price em{font-style:normal;font-size:16px;display:inline-block;width:100%;}
+    .listWrap .price del{font-size:16px;display:inline-block;width:100%;}
     .invalidTit{height:44px;line-height:44px;padding-top:16px;font-size:16px}
     .invalidTit .tit{color:#22272e;float:left}
     .invalidTit .delAll{color:#e15616;float:right;cursor:pointer;}
@@ -84,68 +85,6 @@ li{list-style:none}
 
 
 
-
-
-    .colorprice{color: #9AA5B5}
-    .gouxuan{background: url("/img/cart/gouxuan.png");}
-    .tips-text{
-        bottom:10px;
-        height: 24px;
-        line-height: 24px;
-        position: absolute;
-        color: #E15616;
-        font-size: 12px;
-        text-align: center;
-        width: 190px
-    }
-    .Boxtext{
-    text-align: left;
-    line-height: 25px;
-    color: #333333;
-    padding-bottom: 5px;
-}
-.item-tips{
-    width: 312px;
-    height: auto;
-    padding: 12px;
-    border: 1px solid rgba(225,86,22,0.30196078431372547);
-    background: #ffffff;
-    position: absolute;
-    top: 28px;
-    left: 93px;
-}
-.tip-tr{
-    width: 100%;
-    height: 42px;
-    border-bottom: 1px solid rgba(225,86,22,0.30196078431372547);
-}
-.tips-content{
-    width: 294px;
-    height: auto;
-    border: 1px solid rgba(225,86,22,0.30196078431372547);
-    border-radius: 5px;
-    margin: auto;
-}
-.tip-td{
-    width: 146px;
-    height: 100%;
-    float: left;
-    line-height: 42px;
-    font-size: 14px;
-    color: #E15616;
-    text-align: center;
-}
-.tip-tr:last-child{
-    border-bottom: none;
-}
-.tip-td:nth-child(1){
-    border-right: 1px solid rgba(225,86,22,0.30196078431372547);
-}
-.active{
-    display: block;
-}
-
-
 }
 
 /**

+ 1 - 1
src/main/resources/static/js/base.js

@@ -363,7 +363,7 @@ function tokenAjax(type, url, params, callback){
         },
         data: params,
         headers:{
-            'Content-Type':'application/json;charset=utf8',
+            'Content-Type': type=='post'?'application/x-www-form-urlencoded':'application/json;charset=utf8',
             'X-Token':REV_TOKEN_DEV
         },
         success : function (res) {

+ 34 - 125
src/main/resources/static/js/shopping/cart.js

@@ -13,17 +13,6 @@ var shoppingCart = new Vue({
         allChecked: true,
         submitIds: [],//去结算商品Ids
 
-        cartList:[],
-        ischecked:false,
-        isCheckAll:false,
-        isStock:'',
-        allPrice:0,//每个店铺下的总价
-        tipsName:false,
-        fromMessage:'',//提示文字
-        isShow:false,
-        ladderPriceslist:[],//阶梯价
-        showIndex:''
-
     },
     computed: {
 
@@ -138,122 +127,42 @@ var shoppingCart = new Vue({
                 _self.totalCount = totalCount;
             });
         },
-
-
-
-
-
-
-
-
-
-
-
-        changeCountAdd:function(item,pros){//商品数量加加
-         var _this = this;
-        console.log(item,pros)
-				if(pros.step === 2){
-					pros.isStep = false;
-					pros.number += pros.min;
-					_this.isStock = false
-				}else{
-					pros.number++;
-					_this.isStock = false
-				}
-			   _this.totalPeice(item)
-			},
-		changeCountSub:function(item,pros){//商品数量减减
-		        var _this = this;
-				if(pros.number<=pros.min){
-					pros.number= pros.min;
-					_this.tipsName = true;
-					_this.fromMessage = '该商品最小起批量为'+pros.min;
-					 setTimeout(function(){
-                         _this.tipsName = false;
-                    },1000);
-					return
-				}else{
-					if(pros.step === 2){
-						pros.isStep = false;
-						pros.number -= pros.min
-					}else{
-						pros.number--
-					}
-					 _this.tipsName = false;
-					 _this.totalPeice(item)
-				}
-			},
-	 totalPeice:function(item){	//计算总价格,每次调用此方法,将初始值为0,遍历价格并累加
-				var prosPrice=0;
-				var productsList=item.cartList;
-				productsList.forEach(function(pros){
-					prosPrice+=pros.price*pros.number;
-					item.allPrice = prosPrice;
-				})
-			},
-	changeNnmber:function($event,item,pros){//输入商品数量更新
-				var _value = event.target.value;
-				var _this = this;
-				if(!_value){
-					pros.number = pros.min;
-				}else if(_value < pros.min){
-				    _this.tipsName = true;
-					_this.fromMessage = '该商品最小起批量为'+pros.min;
-					setTimeout(function(){
-                     _this.tipsName = false;
-                },1000);
-					pros.number = pros.min;
-				}else{
-				    _this.tipsName = false;
-					pros.number = parseInt(_value)
-				}
-				_this.totalPeice(item)
-			},
-        checkShop:function (item) {
-        var _this = this;
-          item.checked = !item.checked;
-          _this.setProductChecked(item);
-          _this.updateCheckAllBtn();
-            console.log(item)
+        cartNumberSub: function(cart){
+            cart.number -= cart.step;
+            if (cart.number<cart.min){
+                cart.number = cart.min;
+            }
+            this.numberChange(cart);
+        },
+        cartNumberAdd: function(cart){
+            cart.number += cart.step;
+            this.numberChange(cart);
         },
-        setProductChecked:function(item) {
-				var products = item.cartList;
-				products.forEach(function (pros){
-					if(item.checked) {
-						// 有效
-						pros.productsChecked = true;
-					} else {
-						pros.productsChecked = false;
-					}
-				})
-			},
-		updateCheckAllBtn:function() {// 全选勾选判断
-		        var _this = this;
-				var goodsCheckedLength = 0,
-					disabledListLength = 0,
-					goodsList = _this.listData;
-				goodsList.forEach(function(item) {
-					if(item.checked) {
-						goodsCheckedLength++;
-					}
-				})
-				console.log(goodsCheckedLength)
-				_this.isCheckAll = goodsCheckedLength === goodsList.length - disabledListLength;
-				console.log(_this.isCheckAll)
-			},
-     showladder:function(index){
-         var _this = this;
-         _this.showIndex = index;
-         console.log(index)
-          _this.isShow = !_this.isShow;
-     },
-	 activity:function () {
-           var _this = this;
-           _this.isShow = !_this.isShow;
+        cartNumberChange: function(cart){
+            cart.number = Math.ceil(cart.number/cart.step)*cart.step;
+            this.numberChange(cart);
         },
-    activeBtn:function () {
-           var _this = this;
-            _this.isShow = false;
+        numberChange: function(cart){
+            if(cart.ladderFlag){
+                cart.ladderPrices.forEach(function(ladder){
+                    if(cart.number>=ladder.buyNum){
+                        cart.price = ladder.buyPrice;
+                    }
+                });
+            }
+            // 计算价格
+            this.computedPrice();
+            // 更新购物车
+            var _self = this;
+            this.$nextTick(function(){
+                tokenAjax("post", "/shoppingCart/update", {
+                    userID: this.userId,
+                    productID: cart.productId,
+                    productCount: cart.number
+                },function (res) {
+                    console.log(res);
+                });
+            });
         },
 
     },

+ 12 - 7
src/main/resources/templates/shopping/cart.html

@@ -69,10 +69,16 @@
                     </div>
                     <div class="c4">
                         <span class="price">
-                            <em v-text="'¥'+toFloat(cart.price)"></em>
+                            <template v-if="cart.actStatus==1 && cart.promotions && cart.promotions.type==1 && cart.promotions.mode==1">
+                                <del v-text="'¥'+toFloat(cart.originalPrice)"></del>
+                            </template>
+                            <template v-else>
+                                <em v-text="'¥'+toFloat(cart.price)"></em>
+                            </template>
                             <!-- 促销活动 -->
-                            <span v-if="cart.actStatus==1" class="priceTag">
-                                <i class="tag icon mIcon" v-text="cart.promotions?cart.promotions.name:''"></i>
+                            <span v-if="cart.actStatus==1 && cart.promotions" class="priceTag">
+                                <i v-if="cart.promotions.type==1 && cart.promotions.mode==1" class="tag" v-text="cart.promotions.name+':¥'+toFloat(cart.price)"></i>
+                                <i v-else class="tag icon mIcon" v-text="cart.promotions?cart.promotions.name:''"></i>
                             </span>
                             <!-- 阶梯价 -->
                             <span v-else-if="cart.ladderFlag" class="priceTag">
@@ -92,11 +98,10 @@
                     </div>
                     <div class="c5">
                         <span class="number">
-                            <em class="sub" @click="changeCountSub(supplier,cart)">-</em>
-                            <input type="number" :value="cart.number" v-model="cart.number" @blur="changeNnmber($event,supplier,cart)">
-                            <em class="add" @click="changeCountAdd(supplier,cart)">+</em>
+                            <em class="sub" @click="cartNumberSub(cart)">-</em>
+                            <input type="number" :value="cart.number" v-model="cart.number" @change="cartNumberChange(cart)">
+                            <em class="add" @click="cartNumberAdd(cart)">+</em>
                         </span>
-                        <p class="tips-text" v-if="tipsName">{{fromMessage}}</p>
                         <input type="hidden" :value="cart.step"></div>
                         <div v-if="isPC" class="c6"><span v-text="'¥'+toFloat(cart.price*cart.number)"></span></div>
                         <div v-if="isPC" class="c7"><span class="del">×<em class="tips">删除</em></span></div>