Jelajahi Sumber

加入购物车

chao 4 tahun lalu
induk
melakukan
74e6da2157

+ 6 - 0
src/main/resources/static/css/base/base.h5.css

@@ -140,6 +140,12 @@
 .productItem .item .btn.add{background:#FEF6F3;color:#E15616;}
 .productItem .item .btn.cat{font-size:3.1vw;line-height:4vw;white-space:pre-wrap;padding:1vw;width:80%;height:auto}
 .noMore{height:10vw;line-height:10vw;text-align:center;color:#ccc}
+/* 加入购物车 */
+.cartAlert h6{font-size:4.6vw;font-weight:bold;margin:2vw 0;}
+.cartAlert p{font-size:3.7vw;}
+.cartAlert p em{font-style:normal;color:#e15616;}
+.btn-to-cart{background:#e15616!important;color:#FFF!important;}
+.btn-to-goon{background:#5bb641!important;color:#FFF!important;}
 /* 登录弹框 */
 .loginAlert{padding-top:1vw;text-align:center;}
 .loginAlert span{display:block}

+ 7 - 3
src/main/resources/static/css/base/base.pc.css

@@ -214,13 +214,18 @@ header{box-shadow: 0 2px 10px #ebecef;}
 .productItem .price .icon.i5:before{background-position:-295px -276px}
 .productItem .btnBox{display:none;position:absolute;width:284px;height:68px;z-index:1;background:#fef6f3;text-align:center;bottom:0;left:0}
 .productItem .item:hover .btnBox{display:block}
-.productItem .item:hover .name span{color: #e15616;}
+.productItem .item:hover .name span{color:#e15616;}
 .productItem .item:hover{box-shadow:0px 2px 6px #dedede;-moz-transition: all 0.5s;-webkit-transition:all 0.5s;transition:all 0.3s;-webkit-transform:translate3d(0,-2px,0);transform:translate3d(0,-2px,0);}
 .productItem .btn{display:block;width:158px;margin:12px auto;height:42px;line-height:42px;font-size:16px;text-align:center;overflow:hidden;color:#F94B4B;background:#FFE6DC;border:1px solid #E15616;border-radius:2px}
 .productItem .btn.add{color:#E15616;}
 .productItem .btn.cat{font-size:12px;width:80%;background:#E15616;color:#FFF}
 .productItem .btn:hover{background:#E15616;color:#FFF}
-
+/* 加入购物车 */
+.cartAlert h6{font-size:16px;font-weight:bold;margin:10px 0;}
+.cartAlert p{font-size:14px;}
+.cartAlert p em{font-style:normal;color:#e15616;}
+.btn-to-cart{background:#e15616!important;color:#FFF!important;}
+.btn-to-goon{background:#5bb641!important;color:#FFF!important;}
 /*分页*/
 .pageWrap{width:1184px;text-align:center;margin:20px auto 36px}
 .pageWrap a{box-sizing:border-box;display:inline-block;width:40px;height:40px;line-height:40px;border:1px solid #EBECEF;font-size:16px;margin:0 5px;color:#2D3036;background:#fff;border-radius:2px}
@@ -273,6 +278,5 @@ header{box-shadow: 0 2px 10px #ebecef;}
 .priceTag .promotion .p span{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
 .priceTag .promotion p.r{text-align:right;}
 .priceTag .promotion .more{color:#f55c5c;text-decoration:underline;float:right;}
-
 /*  加载  */
 .loading {box-sizing: border-box;padding: 200px 0;text-align: center;}

+ 6 - 5
src/main/resources/static/css/product/detail.pc.css

@@ -44,7 +44,7 @@ li{list-style:none;}
 .productBox .detailBox .price .icon.i5:before{background-position:-295px -276px}
 .productBox .detailBox .priceTag {position:absolute;top:0;left:88px;}
 .productBox .detailBox .number{display:inline-block;width:96px;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;}
-.productBox .detailBox .number>em{display:inline-block;width:24px;height:22px;background:#FFE6DC;font-size:20px;line-height:20px;vertical-align:top;cursor:pointer;margin: 0}
+.productBox .detailBox .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}
 .productBox .detailBox .number input{width:48px;border:none;line-height:22px;font-size:14px;vertical-align:top;text-align:center;color:#E15616;}
 .productBox .detailBox .detail .btn{position:absolute;right:20px;top:20px;height:32px;line-height:32px;padding:0 16px;background:#F94B4B;font-size:14px;color:#FFF;border-radius:2px}
 .productBox .detailBox .detail .row .btn{top:6px;right:0}
@@ -60,12 +60,13 @@ li{list-style:none;}
 .recommendBox .hd{font-size:16px;color:#4A4F58;font-weight:bold;padding:16px 32px}
 #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{width:153px;height:205px;margin:0 auto;line-height:22px;background:#FFF;}
 #productRecommend li .item a{display:block;width:100%;height:100%;color:#93979F}
 #productRecommend li .item a:hover{color:#E15616}
-#productRecommend li .item img{display:block;width:153px;height:153px}
-#productRecommend li .item span{max-height:44px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
-#productRecommend .swiper-wrapper{height:205px;}
+#productRecommend li .item a:hover img{border: solid 1px #e15616;}
+#productRecommend li .item img{display:block;width:153px;height:153px;border:solid 1px #e2e7ef;}
+#productRecommend li .item span{max-height:44px;padding-top:4px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
+#productRecommend .swiper-wrapper{height:205px;overflow:hidden;background:url(/img/base/placeholder.png) repeat-x center;background-size:166px;}
 #productRecommend .swiper-pagination{width:100%;height:14px;z-index:1;text-align:center;font-size:0;}
 #productRecommend .swiper-pagination span{display:inline-block;width:14px;height:4px;border:5px solid transparent;cursor:pointer;opacity:.2;}
 #productRecommend .swiper-pagination span:before{content:"";display:inline-block;width:100%;height:4px;background:#E15616;border-radius:2px}

+ 5 - 3
src/main/resources/static/js/base.js

@@ -3,11 +3,13 @@ var isPC = ($(window).width()>768);
 var globalUserData = '';
 var GLOBAL_TOKEN = 'X-Token';
 var GLOBAL_USER_ID = 0;
+var GLOBAL_USER_IDENTITY = 0;
 var GLOBAL_SHOP_ID = 0;
 if(localStorage.getItem('userInfo')){
     globalUserData = JSON.parse(localStorage.getItem('userInfo'));
     GLOBAL_TOKEN = globalUserData.token;
     GLOBAL_USER_ID = globalUserData.userId;
+    GLOBAL_USER_IDENTITY = globalUserData.identity ? globalUserData.identity : globalUserData.userIdentity;
     GLOBAL_SHOP_ID = globalUserData.shopId;
 }
 // 头部
@@ -570,7 +572,7 @@ function addShoppingCart(userId, productId, count, callback){
                 useBootstrap: false,
                 boxWidth: (isPC?'338px':'74.6vw'),
                 title: false,
-                content:'<div class="cartAlert"><h6>商品已成功加入购物车!</h6><p>当前购物车共'+res.data+'种商品去结算继续购物</p></div>',
+                content:'<div class="cartAlert"><h6>商品已成功加入购物车!</h6><p>当前购物车共<em>'+res.data+'</em>种商品</p></div>',
                 closeIcon: true,
                 animation: 'opacity',
                 closeAnimation: 'opacity',
@@ -586,8 +588,8 @@ function addShoppingCart(userId, productId, count, callback){
                     },
                     close: {
                         text: '继续购物',
-                        btnClass: 'btn-cancel',
-                        action: callback()
+                        btnClass: 'btn-to-goon',
+                        action: callback?callback():function(){}
                     }
                 }
             });

+ 102 - 173
src/main/resources/static/js/product/detail.js

@@ -4,7 +4,8 @@ var productDetail = new Vue({
         productId: 0,
         userId: 0,
         userIdentity: '', //2-会员机构;3-供应商;4-普通机构
-        userToken: '',
+        number: 0,
+        productStock: 0,
         images: [],
         priceObj: {
             actStatus: 0,
@@ -22,21 +23,11 @@ var productDetail = new Vue({
         ladderList:[],//阶梯价
         promotions:{},//促销活动信息
         promotionsId:0,//活动id
-        allTotalPrice:0,
-        recommendType: 1,
+        addStatus: true,
+        recommendType: 0,//相关推荐类型 0自动选择; 1手动推荐
         recommendPage: 1,
         recommends: [],
-        parameters: [],
-        isShow:false,
-        recommde:false,
-        recommdeindex:0,
-        number:0,
-        minBuyNumber:0,
-        typedata:0,
-        isQuantity:false,
-        isStock:false,
-        cartAlert:false
-
+        parameters: []
     },
     computed: {},
     methods: {
@@ -73,10 +64,7 @@ var productDetail = new Vue({
                 }
             });
         },
-        toLogin:function() {
-            location.href ='/login.html';
-        },
-        productDetail:function(){
+        getProductPrice:function(){
             var _self = this;
             if(_self.productId ===0){return;}
             $.getJSON(spiServer + "/product/detail/price",{
@@ -85,10 +73,9 @@ var productDetail = new Vue({
             }).done(function (r) {
                 if (r.code === 0 && r.data) {
                     _self.priceObj = r.data;
-                    if(r.data.ladderPriceFlag==1){
+                    _self.number = r.data.minBuyNumber;
+                    if(r.data.ladderPriceFlag===1){
                         _self.ladderPrice();
-                    }else {
-                        _self.allTotalPrice = _self.number * _self.priceObj.price;
                     }
                     if(r.data.actStatus==1){
                         _self.promotions =  r.data.promotions;
@@ -97,6 +84,29 @@ var productDetail = new Vue({
                 }
             });
         },
+        ladderPrice:function(){
+            var _self = this;
+            if(!this.productId){return;}
+            $.getJSON(spiServer + "/product/ladderPrice",{
+                productId: this.productId
+            }).done(function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.ladderList =r.data;
+                    this.numberResize();
+                }
+            });
+        },
+        getParameters: function(){
+            var _self = this;
+            if(!this.productId){return;}
+            $.getJSON(spiServer + "/product/detail/parameter",{
+                productId: this.productId
+            }).done(function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.parameters = r.data;
+                }
+            });
+        },
         toggleThisLadder: function(event){
             var el = event.currentTarget;
             if($(el).hasClass("on")){
@@ -112,78 +122,48 @@ var productDetail = new Vue({
             $(el).parents('.priceTag').find('.tag').removeClass("on").siblings('.mFixed').hide();
             if(!isPC){looseBody();}
         },
-        changeCountAdd:function () { //数量增加按钮
-            var _this = this;
-            if(_this.priceObj.step == 2){
-                _this.number += _this.minBuyNumber
-            }else{
-                _this.number++
-            }
-            _this.allTotalPrice = _this.number * _this.priceObj.price;
-            _this.calculatPerice()
+        numberSub: function(){
+            this.number -= this.priceObj.step;
+            this.numberResize();
         },
-        changeCountSub:function(){//popup弹窗数量减按钮
-           var _this = this;
-				if(_this.number<=_this.minBuyNumber){
-					_this.number= _this.minBuyNumber;
-					_this.isQuantity =true;
-					 layer.tips('此商品最小起批量为' + _this.minBuyNumber, $(this).parent().find(".calc-input"), {
-                        tips: 1,
-                        time: 3000
-                         });
-					return
-				}else{
-					if(_this.priceObj.step == 2){
-						_this.number-=_this.minBuyNumber
-					}else{
-						_this.number--
-					}
-					_this.allTotalPrice = _this.number * _this.priceObj.price;
-					_this.calculatPerice();
-					_this.isQuantity =false
-				}
-			 },
-			 changeNumber:function(e){
-			   var  _this=this;
-				var _value = e.detail.value;
-				if(!_value){
-					_this.number = _this.minBuyNumber
-				}else if(_value < _this.minBuyNumber){
-					_this.layer.msg('该商品最小起订量为'+_this.minBuyNumber,2000);
-					_this.number = _this.minBuyNumber
-				}else if( _value % _this.minBuyNumber !=0 ){
-					_this.layer.msg('购买量必须为起订量的整数倍',2000);
-					_this.number = _this.minBuyNumber
-				}else{
-					_this.number = e.detail.value;
-					_this.allTotalPrice = _this.number * _this.priceObj.price;
-					_this.calculatPerice();
-				}
-			},
-        calculatPerice:function(){//判断是否为阶梯价然后做计算价格处理
-              var _this = this;
-				if(_this.priceObj.ladderPriceFlag == '1'){
-					_this.ladderList.forEach(function (item,index) {
-						if(_this.number>=item.buyNum){
-							_this.priceObj.price = item.buyPrice
-							_this.allTotalPrice = _this.number*item.buyPrice
-						}
-					})
-				}else{
-					_this.priceObj.price = _this.priceObj.price;
-				}
-			},
-		addShopCart:function(){ //加入购物车
-		    addShoppingCart(this.userId, this.productId, this.number);
-		},
-		Continueshop:function(){ //继续购物
-            var _this = this;
-            _this.cartAlert = false;
-             location.reload()
+        numberAdd: function(){
+            this.number += this.priceObj.step;
+            this.numberResize();
+
+        },
+        numberChange: function(){
+            this.number = Math.ceil(this.number/this.priceObj.step)*this.priceObj.step;
+            this.numberResize();
+
+        },
+        numberResize: function(){
+            var _self = this;
+            if (this.number<this.priceObj.minBuyNumber){
+                this.number = this.priceObj.minBuyNumber;
+            }
+            if (this.number>this.productStock){
+                this.number = this.productStock;
+            }
+            if(this.priceObj.ladderPriceFlag){
+                this.ladderList.forEach.forEach(function(ladder){
+                    if(_self.number>=ladder.buyNum){
+                        _self.priceObj.price = ladder.buyPrice;
+                    }
+                });
+            }
         },
-        settlement:function(){//去结算
-           window.location.href = "/shopping/cart.html"
+        toLogin: function() {
+            location.href ='/login.html';
         },
+		addShopCart: function(){ //加入购物车
+		    var _self = this;
+		    if(this.addStatus){
+		        _self.addStatus = false;
+                addShoppingCart(this.userId, this.productId, this.number,function(){
+                    _self.addStatus = true;
+                });
+		    }
+		},
         buyNowSubmit: function(){
             if(this.productId && this.number){
                 // type:(1购物车提交[对应表cm_cart],2直接购买提交, 3协销下单)
@@ -198,106 +178,55 @@ var productDetail = new Vue({
                 recommendType: this.recommendType
             }).done(function (r) {
                 if (r.code === 0 && r.data) {
-                    // _self.recommendPage = Math.ceil(r.data.length / 7);
                     if(r.data.length > 0){
                         _self.recommends = r.data;
-                        _self.recommde =true;
-                    }else {
-                        _self.recommde =false;
+                        _self.recommendPage = isPC ? Math.ceil(r.data.length / 7) : Math.ceil(r.data.length / 3);
+                        setTimeout(function(){
+                            if (isPC) {
+                                $('#productRecommend').slide({
+                                    mainCell:".swiper-wrapper"
+                                    ,titCell:".swiper-pagination span"
+                                    ,effect: "leftLoop"
+                                    ,interTime: 3000
+                                    ,autoPlay: true
+                                    ,scroll:7
+                                    ,vis:7
+                                    ,trigger: "mouseover"
+                                });
+                            } else {
+                                var swiper = new Swiper('#productRecommend', {
+                                    slidesPerView: 3,
+                                    spaceBetween: 0,
+                                    autoplay: {
+                                        delay: 3000,
+                                        disableOnInteraction: false
+                                    },
+                                    pagination: {
+                                        el: '.swiper-pagination'
+                                    }
+                                });
+                            }
+                        },500);
                     }
-                    if(r.data.length<7){
-                        var length = 7-r.data.length;
-                        _self.recommdeindex = length;
-                    }else {
-                        var remainderres=r.data.length%7;
-                         _self.recommdeindex= 7-remainderres;
-                    }
-                }
-            });
-        },
-        ladderPrice:function(){
-            var _self = this;
-            if(!this.productId){return;}
-            $.getJSON(spiServer + "/product/ladderPrice",{
-                productId: this.productId
-            }).done(function (r) {
-                if (r.code === 0 && r.data) {
-                    console.log(r)
-                   _self.ladderList =r.data;
-                   _self.ladderList.forEach(function (item,index) {
-						if(_self.number>=item.buyNum){
-							_self.priceObj.price = item.buyPrice
-							_self.allTotalPrice = _self.priceObj.price*_self.number;
-						}
-					})
-
-                }
-            });
-        },
-        clubupgrade:function(){
-            location.href='/myAccount/club/clubupgrade.jsp'
-        },
-        getParameters: function(){
-            var _self = this;
-            if(!this.productId){return;}
-            $.getJSON(spiServer + "/product/detail/parameter",{
-                productId: this.productId
-            }).done(function (r) {
-                if (r.code === 0 && r.data) {
-                    _self.parameters = r.data;
                 }
             });
         }
-
-
     },
     created: function () {
         this.productId = $("#productId").val();
-        var userInfo = localStorage.getItem('userInfo');
-        if(userInfo){
-            this.userId = JSON.parse(userInfo).userId*1;
-        }
+        this.productStock = $("#productStock").val();
         this.getImages();
     },
     mounted: function () {
-        this.productDetail();
+        this.userId = GLOBAL_USER_ID;
+        this.userIdentity = GLOBAL_USER_IDENTITY;
+        this.getProductPrice();
+        this.getParameters();
         this.getRecommends();
         $('.productInfo').slide({
             mainCell:".tabCon"
             ,titCell:".tabTit span"
             ,trigger: "click"
         });
-        if(globalUserData){
-           console.log(globalUserData)
-            globalUserData.userId ? globalUserData.userId : globalUserData.userID;
-            this.userIdentity = globalUserData.identity ? globalUserData.identity : globalUserData.userIdentity;
-            this.userToken = globalUserData.token;
-        }
-         //相關推薦輪播
-        var mySwiper = new Swiper('#productRecommend',{
-                slidesPerView: 7,
-                spaceBetween: 12,
-                slidesPerGroup: 7,
-                autoplay: {
-                    delay:10000,
-                    disableOnInteraction: false,//是否禁止autoplay。默认为true:停止。
-                },
-                loop: false,
-                observer: true, //修改swiper自己或子元素时,自动初始化swiper
-                observeParents: true, //修改swiper的父元素时,自动初始化swiper
-                pagination: {
-                    el: '.swiper-pagination',
-                    clickable: true,
-                },
-                on:{
-                    init:function() {
-                        var length = this.slides.length;
-                        if(length < 8) {
-                            this.autoplay.stop();
-                        }
-                    }
-                }
-       })
-
     }
 });

+ 3 - 0
src/main/resources/static/js/shopping/cart.js

@@ -186,6 +186,9 @@ var shoppingCart = new Vue({
         },
         cartNumberAdd: function(cart){
             cart.number += cart.step;
+            if (cart.number>cart.stock){
+                cart.number = cart.stock;
+            }
             this.numberChange(cart);
         },
         cartNumberChange: function(cart){

+ 14 - 14
src/main/resources/templates/product/detail.html

@@ -14,6 +14,7 @@
 <!-- 商品详情 -->
 <div id="productDetail">
     <input type="hidden" th:value="${productId}" id="productId">
+    <input type="hidden" th:value="${product?.stock}" id="productStock">
     <div class="wrap">
         <div class="productBox clear">
             <div class="imageBox" id="imgShown">
@@ -130,11 +131,11 @@
                     <div class="row"><span class="l">商品编码</span><i>:</i><em th:text="*{productCode}"></em></div>
                     <div class="row"><span class="l">库存</span><i>:</i><em th:text="*{stock}"></em></div>
                     <div class="row"><span class="l">起批量</span><i>:</i><em th:text="*{minBuyNumber}"></em></div>
-                    <div class="row" v-if="priceObj.priceFlag== 0 && userIdentity !=2"><span class="l" >采购量</span><i>:</i>
+                    <div class="row"><span class="l">采购量</span><i>:</i>
                         <span class="number">
-                            <em class="sub" @click="changeCountSub" :class="[isQuantity==true?'disabled':'']">-</em>
-                            <input type="number" v-model="priceObj.minBuyNumber" maxlength='6' @blur="changeNumber($event)" >
-                            <em class="add" @click="changeCountAdd" :class="[isStock==true?'disabled':'']">+</em>
+                            <em class="sub" @click="numberSub()">-</em>
+                            <input type="number" :value="number" v-model="number" maxlength='6' @change="numberChange()">
+                            <em class="add" @click="numberAdd()">+</em>
                         </span>
                         <input type="hidden" th:value="*{step}">
                     </div>
@@ -147,7 +148,7 @@
                 </div>
                <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
                    <div  class="btnBox" v-if="priceObj.priceFlag==2 && userIdentity!=2">
-                      <a class="upgrade" @click="clubupgrade" href="javascript:0">升级会员查看价格</a>
+                      <a class="upgrade" href="/upgrade.html">升级会员查看价格</a>
                    </div>
                     <div class="btnBox" v-else-if="priceObj.priceFlag==0">
                         <a href="javascript:void(0);" class="cart icon" @click='addShopCart()'>加入购物车</a>
@@ -155,16 +156,15 @@
                     </div>
                 </template>
                 <template v-else>
-                    <a href="javascript:void(0);" class="member-detail " @click="toLogin">登录查看价格</a>
+                    <a href="javascript:void(0);" class="member-detail" @click="toLogin">登录查看价格</a>
                 </template>
             </div>
         </div>
-
-        <div class="recommendBox" v-if="recommde">
+        <div class="recommendBox" v-if="recommends.length>0">
             <div class="hd">相关推荐</div>
             <div id="productRecommend" class="swiper-container">
                 <ul class="swiper-wrapper" v-cloak>
-                    <li class="swiper-slide" v-for="p in recommends">
+                    <li class="swiper-slide mfc" v-for="p in recommends">
                         <div class="item">
                             <a class="image" :href="'/product-'+p.id+'.html'" target="_blank">
                                 <img :src="p.image" :alt="p.name">
@@ -172,15 +172,15 @@
                             </a>
                         </div>
                     </li>
-                    <li class="swiper-slide  defaulImg" v-for="(item,index) in recommdeindex">
+                    <!--<li class="swiper-slide  defaulImg" v-for="(item,index) in recommendIndex">
                        <div class="item">
                             <a href="javascript:0" class="image">
                                 <img src="/img/base/placeholder.png" alt="">
                             </a>
                      </div>
-                </li>
+                    </li>-->
                 </ul>
-                <div v-show="recommendPage>1" class="swiper-pagination mfc"><span v-if="isPC" v-for="i in recommendPage"></span></div>
+                <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in recommendPage"></span></div>
             </div>
         </div>
     </div>
@@ -208,8 +208,8 @@
                 <div class="item">
                     <table>
                         <tr v-for="pa in parameters">
-                            <td v-text="pa.paramsName"></td>
-                            <td v-text="pa.paramsContent"></td>
+                            <td v-text="pa.name"></td>
+                            <td v-text="pa.content"></td>
                         </tr>
                     </table>
                 </div>