购物车阶梯价格活动价优化

src/main/resources/config/dev/application-dev.yml

@@ -52,7 +52,7 @@ logging:
 
 # 服务域名
 caimei:
-  spiServer: http://192.168.2.75:8008/
+  spiServer: http://192.168.2.75:8008
   imageDomain: https://img-b.caimei365.com
   wwwDomain: https://www-b.caimei365.com
 

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

@@ -141,6 +141,25 @@
 #scrollTop .phoneHover span{color:#93979F;display:block;margin-top:1.4vw}
 #scrollTop .phoneHover a{color:#E15616}
 #scrollTop .phoneHover a>i{display:inline-block;height:7.2vw;line-height:7.2vw;padding:0 2vw;background:#F55C5C;border-radius:3.6vw;margin-left:4vw;font-size:3.4vw}
+/* 活动标签，阶梯价格 */
+.priceTag .tag{position:absolute;left:0;height:6.4vw;line-height:6.4vw;font-size:3vw;padding:0 6vw 0 3vw;background-color:#ffe6dc;color:#E15616;border-radius:2px;font-style:normal;white-space:nowrap;top:-6.8vw}
+.priceTag .tag:before{width:4vw;height:4vw;background-position:-51.6vw -.9vw;position:absolute;right:1.5vw;top:1.2vw}
+.priceTag .tag.on:before{background-position:-43vw -.9vw}
+.priceTag .ladder{display:none;background-color:rgba(74,79,88,.7);z-index:998}
+.priceTag .ladder>span{display:block;box-sizing:border-box;width:74.6vw;padding:4vw 0;background:#FFF;border-radius:1.6vw;position:relative;top:50%;margin:-60vw auto 0 auto;line-height:10vw;font-size:4.2vw}
+.priceTag .ladder em{white-space:nowrap;text-align:center}
+.priceTag .ladder i{font-style:normal;display:inline-block;width:35vw;text-align:center}
+.priceTag .ladder .t{color:#627386}
+.priceTag .ladder .p{color:#f94b4b}
+.priceTag .ladder .close{display:block;width:46vw;height:10vw;line-height:10vw;text-align:center;background-color:#ffe6dc;border-radius:2px;border:1px solid #e15616;margin:6vw auto 0}
+
+
+
+
+
+
+
+
 
 /**/
 .activity{

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

@@ -239,6 +239,22 @@ header{box-shadow: 0 2px 10px #ebecef;}
 #scrollTop .item .phoneHover span{color:#93979F;margin-top:10px}
 #scrollTop .item .phoneHover a:hover{text-decoration:underline}
 #scrollTop .item:hover .phoneHover{display:block}
+/* 活动标签，阶梯价格 */
+.priceTag{position:relative}
+.priceTag .tag{display:inline-block;height:24px;line-height:24px;border:1px solid #ffe6dc;border-radius:2px;font-size:12px;color:#E15616;cursor:pointer;background:#fff;padding:0 24px 0 10px;position:relative;font-style:normal}
+.priceTag .tag:before{width:24px;height:24px;background-position:-88px 3px;position:absolute;right:0;top:0}
+.priceTag .tag.on:before{background-position:-117px 3px}
+.priceTag .ladder{position:absolute;background:#fff;box-shadow:0 3px 6px 0 #d7dfec;border-radius:2px;line-height:42px;left:0;top:25px;z-index:9;transition:all .8s;display:none}
+.priceTag .ladder>span{padding:0 20px 20px;}
+.priceTag .ladder em{white-space:nowrap}
+.priceTag .ladder i{font-style:normal;display:inline-block;width:120px;text-align:center}
+.priceTag .ladder .t{color:#627386}
+.priceTag .ladder .p{color:#f94b4b}
+.priceTag .ladder .close{background:#E15616;color:#fff;border-radius:2px;cursor:pointer;display:inline-block;padding:0 20px;height:30px;line-height:30px}
+
+
+
+
     .login-btn{float:right;
     margin:10px 10px 0 0;
     padding:2px 5px;

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

@@ -56,16 +56,8 @@ li{list-style:none}
     .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{position:relative;display:inline-block;line-height:24px;}
     .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}
-    .listWrap .price .info .i:hover+.ladder{display:block}
-    .listWrap .price .ladder em{white-space:nowrap}
-    .listWrap .price .ladder i{font-style:normal;display:inline-block;width:120px;text-align:center}
-    .listWrap .price .ladder .t{color:#627386}
-    .listWrap .price .ladder .p{color:#f94b4b}
     .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;}
@@ -198,16 +190,6 @@ li{list-style:none}
     .invalidTit .tit{color:#22272e;float:left}
     .invalidTit .delAll{color:#e15616;float:right}
     .invalidTit .tit em{font-style:normal;color:#e15616}
-    .supplierItem.disable .name .tag{display:inline-block;background:#f94b4b;color:#FFF;font-size:2.4vw;padding:0 2vw;height:4.4vw;line-height:4.4vw;border-radius:2px;font-style:normal;margin-right:1vw;}
-    .listWrap .priTag{display:inline-block;margin-right:1vw;padding:0 2vw;height:4.4vw;line-height:4.4vw;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:2.2vw;font-size:2.4vw;color:#FFF;font-style:normal}
-    .listWrap .price .info .i{display:inline-block;vertical-align:middle;width:3.7vw;height:3.7vw;line-height:3.7vw;text-align:center;font-size:2.4vw;font-style:normal;background-color:#1890f9;border-radius:1.9vw;color:#FFF;}
-    .listWrap .price .info .ladder{display:none;background-color:rgba(74,79,88,.7);z-index:998;}
-    .listWrap .price .info .ladder>span{display:block;box-sizing:border-box;width:74.6vw;padding:4vw 0;background:#FFF;border-radius:1.6vw;position:relative;top:50%;margin:-60vw auto 0 auto;line-height:10vw;font-size:4.2vw}
-    .listWrap .price .ladder em{white-space:nowrap;text-align:center;}
-    .listWrap .price .ladder i{font-style:normal;display:inline-block;width:35vw;text-align:center}
-    .listWrap .price .ladder .t{color:#627386}
-    .listWrap .price .ladder .p{color:#f94b4b}
-    .listWrap .price .ladder .close{display:block;width:46vw;height:10vw;line-height:10vw;text-align:center;background-color:#ffe6dc;border-radius:2px;border:1px solid #e15616;margin:6vw auto 0}
     .summaryWrap{width:100%;background:#FFF;margin:1.4vw 0}
     .summaryWrap .summary{width:93vw;margin:0 auto;font-size:3.4vw;padding-bottom:3.3vw}
     .summaryWrap .summary em{font-style:normal}

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

@@ -40,17 +40,20 @@ var shoppingCart = new Vue({
                 _self.listLoading = false;
             });
         },
-        showThisLadder: function(event){
-            if(isPC){return false;}
+        toggleThisLadder: function(event){
             var el = event.currentTarget;
-            $(el).siblings('.ladder').show();
-            fixedBody();
+            if($(el).hasClass("on")){
+                $(el).removeClass("on").siblings('.ladder').hide();
+                if(!isPC){looseBody();}
+            }else{
+                $(el).addClass("on").siblings('.ladder').show();
+                if(!isPC){fixedBody();}
+            }
         },
         hideThisLadder: function(event){
-            if(isPC){return false;}
             var el = event.currentTarget;
-            $(el).parents('.ladder').hide();
-            looseBody();
+            $(el).parents('.priceTag').find('.tag').removeClass("on").siblings('.ladder').hide();
+            if(!isPC){looseBody();}
         },
         changeCountAdd:function(item,pros){//商品数量加加
          var _this = this;

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

@@ -48,7 +48,7 @@
             <div class="supplierItem" v-for="supplier,index 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 v-if="isPC" class="c2"><a class="name" :href="'/supplier/index.html?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>
@@ -59,56 +59,35 @@
                 </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/detail.html?id='+cart.productId" target="_blank">
+                    <div class="c1"><a :href="'/product-'+cart.productId+'.html'" target="_blank">
                         <img class="image" :src="cart.image">
                     </a></div>
                     <div class="c2">
-                        <a class="name" :href="'/product/detail.html?id='+cart.productId" target="_blank">
+                        <a class="name" :href="'/product-'+cart.productId+'.html'" target="_blank">
                             <span v-text="cart.name"></span>
                         </a>
                     </div>
                     <div class="c4">
                         <span class="price">
                             <em v-text="'¥'+toFloat(cart.price)"></em>
+                            <!-- 促销活动 -->
                             <template v-if="cart.actStatus==1">
-                                 <span class="activity" style="margin: auto;" @click="activity" :class="isShow?'activitystyle':''" >{{cart.promotions.name}}<i class="icon" :class="isShow?'activeicon':''"></i>
-                           </span>
+                                 <span class="activity" style="margin: auto;" @click="activity" :class="isShow?'activitystyle':''" >{{cart.promotions.name}}<i class="icon" :class="isShow?'activeicon':''"></i></span>
                             </template>
-                            <!-- 阶梯价-->
-                            <span v-else-if="cart.ladderFlag" class="info" >
-                             <span v-if="isPC" class="activity" style="margin: auto;" @click="showladder(index)"  :class="showIndex==index?'activitystyle':''" >阶梯价格<i class="icon" :class="isShow?'activeicon':''"></i>
-                                  <div class="activityBox" v-if="showIndex==index?isShow:''" >
-                                       <div class="tips-content">
-                                             <div class="tip-tr">
-                                                <div class="tip-td">起订量</div>
-                                                <div class="tip-td">价格</div>
-                                             </div>
-                                       <div class="tip-ul">
-                                             <ul class="tip-ul">
-                                                <li class="tip-tr ladderPriceList"  v-for="l in cart.ladderPrices">
-                                                    <div class="tip-td buyNumRangeShow">{{l.buyNum+' ~ '+l.maxNum}}</div>
-                                                    <div class="tip-td buyPrice">￥{{toFloat(l.buyPrice)}}</div>
-                                                </li>
-                                             </ul>
-                                       </div>
-                                     </div>
-                                  <button class="activeBtn" @click="activeBtn" >了解</button>
-                               </div>
-                              </span>
-<!--                                <i v-if="isPC" class="tag">阶梯价格</i>-->
-<!--                                <i class="i" @click="showThisLadder($event)">?</i>-->
-<!--                                <span class="ladder mFixed">-->
-<!--                                    <span>-->
-<!--                                        <em class="t"><i>价格</i><i>批量</i></em>-->
-<!--                                        <em v-for="l in cart.ladderPrices">-->
-<!--                                            <i class="p">¥{{toFloat(l.buyPrice)}}</i>-->
-<!--                                            <i v-if="l.maxNum>0">{{l.buyNum+' ~ '+l.maxNum}}</i>-->
-<!--                                            <i v-else>≥ {{l.buyNum}}</i>-->
-<!--                                        </em>-->
-<!--                                        <em v-if="!isPC" @click="hideThisLadder($event)" class="close">了解</em>-->
-<!--                                    </span>-->
-<!--                                </span>-->
-<!--                            </span>-->
+                            <!-- 阶梯价 -->
+                            <span v-else-if="cart.ladderFlag" class="priceTag">
+                                <i class="tag icon mIcon" @click="toggleThisLadder($event)">阶梯价格</i>
+                                <span class="ladder mFixed">
+                                    <span>
+                                        <em class="t"><i>价格</i><i>起订量</i></em>
+                                        <em v-for="l in cart.ladderPrices">
+                                            <i class="p">¥{{toFloat(l.buyPrice)}}</i>
+                                            <i>{{l.numRange}}</i>
+                                        </em>
+                                        <em @click="hideThisLadder($event)" class="close">了解</em>
+                                    </span>
+                                </span>
+                            </span>
                         </span>
                     </div>
                     <div class="c5">