促销

src/main/resources/static/css/base/init.css

@@ -22,7 +22,7 @@ table,td,th{border: 1px solid #EBECEF;}
 input[type=checkbox]{width:16px;height:16px;text-align:center;outline:none;cursor:copy;}
 input[type=checkbox]:focus{outline:none}
 input[type=checkbox]:after{width:100%;height:100%;top:0;content:" ";background-color:#FFF;color:#E15616;display:inline-block;visibility:visible;border:1px solid #b8bfca;border-radius:2px;}
-input[type=checkbox]:checked:after{content:"\2713";font-size:12px;background-color:#E15616;color:#FFF}
+input[type=checkbox]:checked:after{/*content:"\2713";*/font-size:12px;background: url("/img/cart/gouxuan.png");border: 1px solid #E15616;}
 input[type=checkbox][disabled=disabled]:after{width:100%;height:100%;top:0;content:" ";background-color:#f1f0f5;color:#FFF;display:inline-block;visibility:visible;border-radius:2px;border:1px solid #B8BFCA}
 input[type=checkbox][disabled=disabled]{cursor:default;}
 /* 定义动画效果 */

src/main/resources/static/css/product/detail.h5.css

@@ -12,7 +12,7 @@ li{list-style:none}
 .productBox .detailBox .crumbs a{color:#93979F}
 .productBox .detailBox .title{font-size:4.2vw;font-weight:bold;line-height:6.4vw;color:#4A4F58;margin-bottom:3.5vw}
 .productBox .detailBox .tags span{display:inline-block;height:4.2vw;line-height:4.2vw;padding:0 1vw;font-size:2.6vw;color:#FFF;background:#86B2FF;border-radius:2px;margin-right:2.7vw}
-.productBox .detailBox .detail{box-sizing:border-box;padding:2.8vw;font-size:3.4vw;line-height:7.5vw;color:#93979F;background:#F3F7FE;border-radius:2px;position:relative;margin:3.5vw 0}
+.productBox .detailBox .detail{box-sizing:border-box;padding:2.8vw;font-size:3.4vw;line-height:7.5vw;color:#93979F;background:#FDF8F6;border-radius:2px;position:relative;margin:3.5vw 0}
 .productBox .detailBox .detail hr{border:none;border-top:1px dashed #BEC2C9;margin:2vw 0}
 .productBox .detailBox .row>i{font-style:normal;margin-right:2vw}
 .productBox .detailBox .row em{font-style:normal;color:#4A4F58}

src/main/resources/static/css/product/detail.pc.css

@@ -55,7 +55,7 @@ li{list-style:none;}
 
 .recommendBox{margin-bottom:16px;overflow: hidden;}
 .recommendBox .hd{font-size:16px;color:#4A4F58;font-weight:bold;padding:16px 32px}
-#productRecommend{padding:10px;}
+#productRecommend{padding:10px;background: #fff}
 #productRecommend li{float:left;width:167px;height:205px;overflow:hidden;}
 #productRecommend li .item{width:153px;height:205px;margin:0 auto;line-height:22px}
 #productRecommend li .item a{display:block;width:100%;height:100%;color:#93979F}
@@ -68,7 +68,7 @@ li{list-style:none;}
 #productRecommend .swiper-pagination span:before{content:"";display:inline-block;width:100%;height:4px;background:#E15616;border-radius:2px}
 #productRecommend .swiper-pagination span.on{width:28px;opacity:1;}
 
-.wrap>.productInfo{float:left;box-sizing:border-box;padding:0 16px;width:884px;background:#FFF;height: 600px}
+.wrap>.productInfo{float:left;box-sizing:border-box;padding:0 16px;width:884px;background:#FFF;}
 .productInfo .tabTit{height:40px;line-height:40px;border-bottom:1px solid #E15621;font-size:16px;color:#333333}
 .productInfo .tabTit span{display:inline-block;box-sizing:border-box;min-width:130px;text-align:center;height:100%;padding:0 32px;cursor:pointer}
 .productInfo .tabTit span:hover{color:#E15621}

src/main/resources/static/css/shopping/cart.css

@@ -8,55 +8,56 @@ li{list-style:none}
     .empty{box-sizing:border-box;padding:100px 0;text-align:center;color:#4A4F58;line-height:30px;font-size:16px}
     .empty img{width:180px;height:180px}
     .empty a{color:#E15616}
-    .pageTitle{height:44px;line-height:44px;padding-top:16px}
+    .pageTitle{height:57px;line-height:57px;padding-top:16px}
     .pageTitle h1{color:#2D3036;font-size:16px;font-weight:bold;float:left}
-    .pageTitle .step{float:right;color:#9AA5B5;font-size:14px;height:44px;line-height:44px}
-    .pageTitle .step span{display:inline-block;height:20px;line-height:20px;vertical-align:middle;position:relative;padding-left:55px}
+    .pageTitle .step{float:right;color:#999999;font-size:14px;height:44px;line-height:44px}
+    .pageTitle .step span{display:inline-block;height:20px;line-height:20px;vertical-align:middle;position:relative;}
     .pageTitle .step span:before{font-style:normal;font-size:20px;vertical-align:text-top;margin-right:5px}
     .pageTitle .step span:nth-of-type(1):before{content:'\2776'}
     .pageTitle .step span:nth-of-type(2):before{content:'\2777'}
     .pageTitle .step span:nth-of-type(3):before{content:'\2778'}
-    .pageTitle .step span:after{position:absolute;left:0;top:10px;content:'';width:50px;border-top:1px solid #9AA5B5}
+    .pageTitle .step span:after{position:absolute;left:0;top:10px;content:'';width:50px;}
     .pageTitle .step span:first-child{padding-left:0}
     .pageTitle .step span:first-child:after{display:none}
     .pageTitle .step span.on{color:#E15616}
     .listWrap{width:1184px}
     .listWrap .cartTit,.listWrap .supplierItem{box-sizing:border-box;padding:0 14px;text-align:center;width:100%;background:#FFF;margin-bottom:8px;box-shadow:0px 3px 6px rgba(0,0,0,0.07)}
     .listWrap .supplierItem.disable{background:#f1f0f5}
-    .listWrap .cartTit,.listWrap .supplierInfo{height:40px;line-height:40px}
-    .listWrap .cartTit{color:#627386}
+    .listWrap .cartTit,.listWrap .supplierInfo{height:60px;line-height:60px}
+    .listWrap .cartTit{color:#333333}
     .listWrap .supplierItem,.listWrap .supplierInfo{color:#22272E}
-    .listWrap .supplierInfo{border-top:1px solid #F7F7F7}
-    .listWrap .cartItem{width:100%;height:100px;line-height:100px;margin-top:10px;padding:14px 0}
+    .listWrap .supplierInfo{border-top:1px solid #F5F5F5}
+    .listWrap .cartItem{width:100%;height:100px;line-height:100px;margin-top:10px;padding:14px 0;font-size: 16px}
     .listWrap .cartItem:first-child{margin-top:0}
     .listWrap .cartItem .c2{text-align:left}
     .listWrap .cartItem>div>*{vertical-align:middle}
     .listWrap .c0{float:left;width:34px;text-align:left;}
-    .listWrap .c1{float:left;width:100px}
-    .listWrap .c2{float:left;width:335px}
-    .listWrap .c3{float:left;width:142px}
+    .listWrap .c1{float:left;}
+    .listWrap .c2{float:left;width:400px}
+    .listWrap .cartTit .c2{padding-left: 75px;}
+    .listWrap .c3{float:left;width:200px}
     .listWrap .c4{float:left;width:142px}
-    .listWrap .c5{float:left;width:142px}
+    .listWrap .c5{float:left;width:185px}
     .listWrap .c6{float:left;width:142px}
     .listWrap .c7{float:right;width:118px}
     .listWrap .c10{float:left;width:495px}
     .listWrap .supplierInfo .c2{text-align:left;width:800px}
-    .listWrap .check{width:14px;height:14px;line-height:14px;vertical-align:middle}
+    .listWrap .check{width:16px;height:16px;line-height:14px;vertical-align:middle}
     .listWrap .image{display:block;width:100px;height:100px;border:1px solid #F7F7F7}
     .listWrap .name, .listWrap .unit{line-height:20px;display:inline-block;max-height:100px;overflow:hidden;vertical-align:middle}
     .listWrap .cartItem .name{padding-left:14px}
     .listWrap .cartItem .name .tag{display: inline-block;background:#f94b4b;color:#FFF;font-size:12px;padding:0 6px;height:20px;line-height:20px;border-radius:2px;font-style:normal;margin-right:5px}
     .listWrap .c7 em,.listWrap .c10 em{color:#f94b4b;font-style:normal}
-    .listWrap .number{display:inline-block;width:120px;line-height:24px;height:24px;box-sizing:border-box;border:1px solid #FFE6DC;border-radius:2px;font-size:0;white-space:nowrap;text-align:center;overflow:hidden;vertical-align:top}
-    .listWrap .number>em{display:inline-block;width:24px;height:22px;background:#FFE6DC;font-size:20px;font-style:normal;line-height:20px;vertical-align:top;cursor:pointer}
-    .listWrap .number input{width:70px;border:none;line-height:22px;font-size:14px;vertical-align:top;text-align:center;color:#E15616}
-    .listWrap .del{font-size:20px;position:relative;cursor:pointer;display:inline-block;height:40px;line-height:40px;width:30px}
+    .listWrap .number{display:inline-block;width:96px;line-height:24px;height:24px;box-sizing:border-box;border:1px solid #EFEFEF;border-radius:2px;font-size:0;white-space:nowrap;text-align:center;overflow:hidden;vertical-align:top}
+    .listWrap .number>em{display:inline-block;width:24px;height:22px;background:#EFEFEF;font-size:20px;font-style:normal;line-height:20px;vertical-align:top;cursor:pointer}
+    .listWrap .number input{width:48px;border:none;line-height:22px;font-size:14px;vertical-align:top;text-align:center;color:#E15616}
+    .listWrap .del{color: #9AA5B5;font-size:20px;position:relative;cursor:pointer;display:inline-block;height:40px;line-height:40px;width:30px}
     .listWrap .del .tips{position:absolute;top:40px;left:4px;opacity:0;white-space:nowrap;background-color:#f94b4b;color:#FFF;border-radius:3px;line-height:30px;font-size:12px;text-align:center;display:inline-block;transition:all .8s;padding:0 10px;font-style:normal}
     .listWrap .del .tips:before{content:"";width:10px;height:10px;background:#f94b4b;position:absolute;top:-3px;left:6px;transform:rotate(45deg)}
     .listWrap .del:hover{color:#f94b4b}
     .listWrap .del:hover .tips{opacity:1}
     .listWrap .price{position:relative;display:inline-block;height:40px;line-height:40px;}
-    .listWrap .price em{font-style:normal;}
+    .listWrap .price em{font-style:normal;font-size: 16px}
     .listWrap .price .tag{position:absolute;top:-10px;left:0;padding:0 6px;height:18px;line-height:18px;background-color:#1890f9;background-image:-webkit-linear-gradient(90deg,#1890f9 0%,#93cdff 100%);background-image:-moz-linear-gradient(90deg,#1890f9 0%,#93cdff 100%);background-image:-ms-linear-gradient(90deg,#1890f9 0%,#93cdff 100%);background-image:-o-linear-gradient(90deg,#1890f9 0%,#93cdff 100%);background-image:linear-gradient(90deg,#1890f9 0%,#93cdff 100%);border-radius:9px;font-size:12px;color:#FFF;font-style:normal}
     .listWrap .price .info .i{display:inline-block;vertical-align:middle;width:14px;height:14px;line-height:14px;text-align:center;font-size:12px;font-style:normal;background-color:#1890f9;border-radius:7px;color:#FFF;cursor:help}
     .listWrap .price .ladder{position:absolute;background:#fff;box-shadow:0 3px 6px 0 #d7dfec;border-radius:2px;line-height:42px;left:0;top:32px;z-index:9;transition:all .8s;display:none}
@@ -80,8 +81,18 @@ li{list-style:none}
     .summaryWrap .summary .right .item em{color:#f55c5c}
     .summaryWrap .summary .submit{display:inline-block;width:232px;height:50px;line-height:50px;text-align:center;background-color:#e15616;border-radius:2px;color:#FFF}
     .summaryWrap.fixed{position:fixed;bottom:0;left:0;margin:0;z-index:99999;box-shadow:20px 20px 102px rgba(0,0,0,0.1)}
-
-
+    .pageTitle .step label.line{width: 50px;height: 1px;background: #707070;display: inline-block; margin: 0px 10px}
+    .supplierInfo.top{border-bottom: 1px solid #F5F5F5}
+    input[type="number"]{
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    }
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    }
+    .colorprice{color: #9AA5B5}
+    .gouxuan{background: url("/img/cart/gouxuan.png");}
 
 
 }

src/main/resources/static/js/shopping/cart.js

@@ -6,10 +6,15 @@ var shoppingCart = new Vue({
         userToken: '',
         listLoading: true,
         listData: [],
+        cartList:[],
         invalidData: [],
         totalSize: 0,
         totalCount: 0,
-        totalPrice: 0
+        totalPrice: 0,
+        ischecked:false,
+        isCheckAll:false,
+        isStock:'',
+        allPrice:0,//每个店铺下的总价
 
     },
     computed: {
@@ -26,6 +31,14 @@ var shoppingCart = new Vue({
                     _self.totalSize = r.data.totalSize;
                     _self.totalCount = r.data.totalCount;
                     _self.totalPrice = r.data.totalPrice;
+                    var  prosPrice =0;
+                    _self.listData.forEach(function(item,index){
+				       _self.cartList=item.cartList;
+				         if(item.count==item.cartList.length){
+				               _self.totalPeice(item);
+				         }
+			           })
+
                 }
                 _self.listLoading = false;
             });
@@ -42,6 +55,89 @@ var shoppingCart = new Vue({
             $(el).parents('.ladder').hide();
             looseBody();
         },
+        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;
+					alert('该商品最小起订量为'+pros.min);
+					return
+				}else{
+					if(pros.step === 2){
+						pros.isStep = false
+						pros.number -= pros.min
+					}else{
+						pros.number--
+					}
+					 _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;
+				console.log(_value)
+				if(!_value){
+					pros.number = pros.min;
+				}else if(_value < pros.min){
+					alert('该商品最小起订量为'+pros.min);
+					pros.number = pros.min;
+				}else{
+					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)
+        },
+        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)
+			},
 
     },
     created: function () {

src/main/resources/templates/shopping/cart.html

@@ -28,7 +28,9 @@
         <div class="pageTitle">
             <div class="step">
                 <span class="on">我的购物车</span>
+                 <label class="line"></label>
                 <span>核对订单信息</span>
+                 <label class="line"></label>
                 <span>成功提交订单</span>
             </div>
             <h1>我的购物车</h1>
@@ -38,13 +40,17 @@
                 <div class="c0"><input class="check" type="checkbox"></div>
                 <div class="c1">全选</div>
                 <div class="c2">商品信息</div>
-                <div class="c3">包装规格</div>
-                <div class="c4">优惠价</div>
+<!--                <div class="c3">包装规格</div>-->
+                <div class="c4">单价（元）</div>
                 <div class="c5">数量</div>
                 <div class="c6">小计（元）</div>
                 <div class="c7">操作</div>
             </div>
             <div class="supplierItem" v-for="supplier in listData">
+                <div  class="supplierInfo  top">
+                    <div v-if="isPC" class="c0"><input class="check"  type="checkbox" @click.stop="checkShop(supplier)" ></div>
+                    <div v-if="isPC" class="c2"><a class="name" :href="'/supplier/index.shtml?id='+supplier.id" v-text="supplier.name" target="_blank"></a></div>
+                </div>
                 <div v-if="!isPC" class="supplierTit">
                     <div class="c0"><input class="check" type="checkbox"></div>
                     <a  :href="'/supplier/index.html?id='+supplier.id" target="_blank">
@@ -54,16 +60,16 @@
                 </div>
                 <div class="cartItem clear"  v-for="cart in supplier.cartList">
                     <div class="c0"><input class="check" type="checkbox" name="cartList"></div>
-                    <div class="c1"><a :href="'/product-'+cart.productId+'.html'" target="_blank">
+                    <div class="c1"><a :href="'/product/detail.html?id='+cart.productId" target="_blank">
                         <img class="image" :src="cart.image">
                     </a></div>
                     <div class="c2">
-                        <a class="name" :href="'/product-'+cart.productId+'.html'" target="_blank">
+                        <a class="name" :href="'/product/detail.html?id='+cart.productId" target="_blank">
                             <i v-if="cart.ladderFlag" class="priTag">阶梯价格</i>
                             <span v-text="cart.name"></span>
                         </a>
                     </div>
-                    <div class="c3"><span v-if="!isPC">包装规格：</span><span class="unit" v-text="cart.unit"></span></div>
+<!--                    <div class="c3"><span v-if="!isPC">包装规格：</span><span class="unit" v-text="cart.unit"></span></div>-->
                     <div class="c4">
                         <span class="price">
                             <em v-text="'¥'+toFloat(cart.price)"></em>
@@ -86,18 +92,16 @@
                     </div>
                     <div class="c5">
                         <span class="number">
-                            <em class="sub">-</em>
-                            <input type="number" :value="cart.number">
-                            <em class="add">+</em>
+                            <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>
                         </span>
                         <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>
                 </div>
                 <div class="supplierInfo">
-                    <div v-if="isPC" class="c0"><input class="check" type="checkbox"></div>
-                    <div v-if="isPC" class="c2"><a class="name" :href="'/supplier/index.html?id='+supplier.id" v-text="supplier.name" target="_blank"></a></div>
-                    <div class="c7"><span>合计：<em v-text="'¥'+toFloat(supplier.totalPrice)"></em></span></div>
+                    <div class="c7"style="width: 100%;text-align: right"><span>合计：<em v-text="'¥'+toFloat(supplier.allPrice)"></em></span></div>
                 </div>
             </div>
             <div class="invalidTit">