commit -m 搜索 分类列表 筛选项

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

@@ -84,27 +84,27 @@ li{list-style:none;}
 .product-supporting-td{width: 100%;height: 38px;line-height: 38px;}
 .product-supporting-td p{font-size: 14px;color: #627386;float: left;text-align: center;}
 .product-supporting-td p.td-1{width: 10%;text-align: left;}
-.product-supporting-td p.td-2{width: 25%;text-align: center;}
+.product-supporting-td p.td-2{width: 20%;text-align: center;}
 .product-supporting-td p.td-3{width: 15%;}
-.product-supporting-td p.td-4{width: 15%;}
+.product-supporting-td p.td-4{width: 20%;}
 .product-supporting-td p.td-5{width: 20%;}
 .product-supporting-td p.td-6{width: 15%;}
 .product-supporting-list{width: 100%;height: 102px;box-sizing: border-box;padding: 16px;}
 .product-supporting-list .tr{font-size: 14px;color: #627386;float: left;text-align: center;}
 .product-supporting-list .tr-1{width:10%;}
 .product-supporting-list .tr-1 img{width: 70px;height: 70px;display: block;box-sizing: border-box;border: 1px solid #E2E7EF;border-radius: 2px;}
-.product-supporting-list .tr-2{width:25%;height: 100%;box-sizing: border-box;padding: 16px 0;}
+.product-supporting-list .tr-2{width:20%;height: 100%;box-sizing: border-box;padding: 16px 0;}
 .product-supporting-list .tr-2 p{text-align: justify;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;word-break: break-all;}
 .product-supporting-list .tr-3{width:15%;line-height: 70px}
-.product-supporting-list .tr-4{width:15%;box-sizing: border-box;padding: 16px 0 0 44px;text-align: left;}
+.product-supporting-list .tr-4{width:20%;box-sizing: border-box;padding: 16px 0 0 44px;text-align: left;}
 .product-supporting-list .tr-4 .price .icon:before{width:63px;height: 22px;}
 .product-supporting-list .tr-4 .price .icon.i5:before{background-position:-2px -835px}
 .product-supporting-list .tr-4 .price .icon.i1:before{background-position:-2px -715px}
 .product-supporting-list .tr-4 .price .icon.i2:before{background-position:-2px -745px}
 .product-supporting-list .tr-4 .price .icon.i3:before{background-position:-2px -775px}
 .product-supporting-list .tr-4 .price .icon.i4:before{background-position:-2px -805px}
-.product-supporting-list .tr-4 .price .price_text_tag .svip-tag,
-.product-supporting-list .tr-4 .price .price_text_tag .listTag{-webkit-transform: translateX(4px);-ms-transform: translateX(4px);transform: translateX(4px)}
+.product-supporting-list .tr-4 .price .price_text_tag .svip-tag{-webkit-transform: translateX(4px);-ms-transform: translateX(4px);transform: translateX(4px);}
+.product-supporting-list .tr-4 .price .price_text_tag .listTag{-webkit-transform: translateX(4px);-ms-transform: translateX(4px);transform: translateX(4px);margin: 0;float: left;}
 .product-supporting-list .tr-4 .price .svip-tag{width:100%;height:22px;letter-spacing:0}
 .product-supporting-list .tr-4 .price .couponTag{margin: 0 4px 0 0;float: left;}
 .product-supporting-list .tr-4 .price .svip-tag .svip-icon{position:relative;z-index:9;display:inline-block;width:30px;height:22px;text-align:center;line-height:22px;font-size:12px;font-weight:400;color:#F0CB72;opacity:1;background:#333333}

src/main/resources/static/css/product/product-supporting.h5.css

@@ -9,6 +9,7 @@
     .supporting-list{width: 100%;height: 38vw;box-sizing: border-box;border-bottom: 1px solid #E1E1E1;padding:3.2vw 4vw;}
     .supporting-list .list-checked{width: 6.5vw;height: 100%;display: flex;align-items: center;float: left;}
     .supporting-list .list-checked .coll-checked{width: 16px;height: 16px;background: url("/img/cart/icon_weigouxuan@2x.png") no-repeat;background-size: cover;display: block;margin-right: 6px;}
+    .supporting-list .list-checked .coll-checked.none{width: 16px;height: 16px;background: url("/img/cart/icon_weigouxuan_desied@2x.png") no-repeat;background-size: cover;display: block;margin-right: 6px;}
     .supporting-list .list-checked .coll-checked.checked{background: url("/img/cart/icon_yixuanze@2x.png") no-repeat;background-size: cover;}
     .supporting-list .list-image{width: 24vw;height: 100%;float: left;margin-right: 2vw;}
     .supporting-list .list-image img{width: 24vw;height: 24vw;box-sizing: border-box;display: block;border: 1px solid #E1E1E1;border-radius: 2px;}
@@ -42,7 +43,7 @@
     .supporting-list .list-info .svip-tag .svip-price span{color: #333}
     .supporting-list .list-info .svip-tag .svip-price span:nth-child(2){margin-left: -0.4vw}
 
-    .supporting-submit{width: 100%;height: 26.7vw;box-sizing: border-box;padding:7.2vw 3.3vw;position:fixed;bottom: 0;left: 0;background-color: #FFFFFF;display: flex;box-shadow: 8px 8px 8px 8px rgb(0 0 0 / 7%);}
+    .supporting-submit{width: 100%;height: 26.7vw;box-sizing: border-box;padding:7.2vw 3.3vw;position:fixed;bottom: 0;left: 0;z-index: 999;background-color: #FFFFFF;display: flex;box-shadow: 8px 8px 8px 8px rgb(0 0 0 / 7%);}
     .supporting-submit .supporting-submit-total{flex: 4;}
     .supporting-submit .supporting-submit-total p{line-height:5.6vw;font-size: 3.4vw;color: #4A4F58; }
     .supporting-submit .supporting-submit-total p .ore{color: #E15621;}

src/main/resources/static/js/product/detail.js

@@ -61,11 +61,10 @@ var productDetail = new Vue({
         collectionType:false,                       // 商品收藏状态
         supportingList:[],
         defaultSupportingList:[],
+        isShowSupportingList:false,
         isShowMoreButton:false,
-        checkedNum:0,
-        totalPrice:0,
-
-
+        totalPrice:0,  // 勾选配套商品总价格
+        totalNumber:0, // 勾选配套商品总数量
     },
     filters: {
         TypeFormat: function (value) {
@@ -119,7 +118,7 @@ var productDetail = new Vue({
                         });
                         _self.supportingList = list;
                         _self.defaultSupportingList = _self.supportingList.slice(0,5);
-                        if(_self.supportingList.length > 0 ){
+                        if(_self.supportingList.length > 5 ){
                             _self.isShowMoreButton = true;
                         }
                     }else{
@@ -236,6 +235,9 @@ var productDetail = new Vue({
                         _self.promotions = response.data.promotions;
                         _self.promotionsId = response.data.promotions.id;
                     }
+                    if(_self.priceObj.userIdentity == 2 || _self.priceObj.userIdentity == 4){
+                        _self.isShowSupportingList = true;
+                    }
                 }
             });
         },
@@ -567,15 +569,18 @@ var productDetail = new Vue({
         calculatetTtalPrice: function () { // 计算配套商品总价格
             var _self = this;
             var totalPrice = 0;
+            var totalNumber = 0;
             _self.supportingList.forEach(function (pros) {
                 if(pros.isChecked){
                     pros.totalPrice = pros.number*pros.price;
+                    totalNumber+= pros.number
                 }else{
                     pros.totalPrice = 0;
                 }
                 totalPrice += pros.totalPrice;
             })
             _self.totalPrice = totalPrice;
+            _self.totalNumber = totalNumber;
         },
         checkedSoperv:function (pros) {// 勾选配套商品
             console.log(pros)
@@ -587,7 +592,6 @@ var productDetail = new Vue({
                     goodsCheckedLength++;
                 }
             })
-            _self.checkedNum = goodsCheckedLength;
             if(goodsCheckedLength>0){
                 _self.isProductChecked = true
             }else{

src/main/resources/static/js/product/product-supporting.js

@@ -14,9 +14,8 @@ var supporting = new Vue({
         supportingList:[],
         isAllChecked:false,
         isProductChecked:false,
-        checkedNum:0,
-        totalPrice:0
-
+        totalPrice:0,
+        totalNumber:0,
     },
     filters: {
         NumFormat:function(value) {
@@ -36,11 +35,9 @@ var supporting = new Vue({
                             return el;
                         });
                         _self.supportingList = list;
-                        _self.defaultSupportingList = _self.supportingList.slice(0,5);
                         if(_self.supportingList.length > 0 ){
                             _self.isShowMoreButton = true;
                         }
-                        console.log('defaultSupportingList',_self.defaultSupportingList)
                     }else{
                         _self.supportingList = [];
                     }
@@ -93,42 +90,57 @@ var supporting = new Vue({
         calculatetTtalPrice: function () {
             var _self = this;
             var totalPrice = 0;
+            var totalNumber = 0;
             _self.supportingList.forEach(function (pros) {
                 if(pros.isChecked){
                     pros.totalPrice = pros.number*pros.price;
+                    totalNumber+= pros.number
+                    totalPrice += pros.totalPrice;
                 }else{
                     pros.totalPrice = 0;
                 }
-                totalPrice += pros.totalPrice;
             })
             _self.totalPrice = totalPrice;
+            _self.totalNumber = totalNumber;
+        },
+        disabledChecked(pros){
+            if(pros.priceFlag ==1){// 为公开价格返回 true 禁用按钮
+                return true
+            }else{
+                if(GLOBAL_USER_IDENTITY == 4 && pros.priceFlag ==2){// 普通机构且商品价格仅会员可见 禁用按钮
+                    return true
+                }
+            }
         },
         isCheckedAll(){//全选
             var _self = this;
+            var list = [];
             _self.isAllChecked = !_self.isAllChecked;
-            _self.supportingList.forEach((el)=>{
-                el.isChecked = _self.isAllChecked;
+            _self.supportingList.forEach((pros)=>{
+                if(!_self.disabledChecked(pros)){
+                    pros.isChecked = _self.isAllChecked;
+                    list.push(pros);
+                }
             })
             if(_self.isAllChecked){
                 _self.isProductChecked = true;
-                _self.checkedNum = _self.supportingList.length;
             }else{
                 _self.isProductChecked = false;
-                _self.checkedNum = 0;
             }
             _self.calculatetTtalPrice();
         },
         checkedSoperv:function (pros) {// 勾选
-            console.log(pros)
             var _self = this;
             var goodsCheckedLength = 0;
+            if(_self.disabledChecked(pros)){
+                return
+            }
             pros.isChecked = !pros.isChecked
             _self.supportingList.forEach(el => {
                 if(el.isChecked) {
                     goodsCheckedLength++;
                 }
             })
-            _self.checkedNum = goodsCheckedLength;
             _self.isAllChecked = goodsCheckedLength === _self.supportingList.length;
             if(goodsCheckedLength>0){
                 _self.isProductChecked = true
@@ -236,6 +248,7 @@ var supporting = new Vue({
     },
     created: function () {
         this.userId = this.listQuery.userId = GLOBAL_USER_ID;
+        console.log('GLOBAL_USER_ID',GLOBAL_USER_ID)
         // identity: 0个人，1协销，2会员机构，3供应商，4普通机构
     },
     mounted: function () {

src/main/resources/templates/product/detail.html

@@ -243,7 +243,7 @@
                            onclick="_czc.push(['_trackEvent','商品详情','点击','升级查看价格','','Um_Event_ProductUpgrade'])">升级会员查看价格</a>
                     </div>
                     <div class="btnBox"
-                         v-else-if="(priceObj.priceFlag==0 && priceObj.userIdentity!=3) || (priceObj.priceFlag==2 && priceObj.userIdentity==2) || GLOBAL_VIP_FLAG === 1">
+                         v-else-if="(priceObj.priceFlag==0 && priceObj.userIdentity!=3) || (priceObj.priceFlag==2 && priceObj.userIdentity==2) || (priceObj.priceFlag==2&&GLOBAL_VIP_FLAG === 1)">
                         <a href="javascript:void(0);" class="cart icon" @click='addShopCart()' v-if="!isNoneDisabled"
                            onclick="_czc.push(['_trackEvent','商品详情','点击','加入购物车','','Um_Event_ProductAddCart'])">加入购物车</a>
                         <a href="javascript:void(0);" class="buy" @click="buyNowSubmit()" v-if="!isNoneDisabled"
@@ -259,7 +259,7 @@
             </div>
         </div>
         <!--配套商品区域-->
-        <div class="wrap">
+        <div class="wrap" v-if="defaultSupportingList.length>0">
             <div class="product-supporting">
                 <!--PC-->
                 <template v-if="isPC">
@@ -339,7 +339,7 @@
                                                     </div>
                                                 </template>
                                                 <template v-else>
-                                                    <p class="listTag" v-if="pros.actStatus==1">{{p.promotions.name}}</p>
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
                                                 </template>
                                             </div>
                                         </template>
@@ -374,7 +374,7 @@
                         </div>
                         <div class="product-supporting-button">
                             <div class="product-supporting-total">
-                                <p>共 <span class="ore">{{ checkedNum }}</span>件商品，合计:<span class="red">￥{{ totalPrice | NumFormat }}元</span></p>
+                                <p>共 <span class="ore">{{ totalNumber }}</span>件商品，合计:<span class="red">￥{{ totalPrice | NumFormat }}元</span></p>
                             </div>
                             <div class="product-supporting-btn">
                                 <div class="btn buy" @click="handleSupportingSubmit('buy')">立即购买</div>

src/main/resources/templates/product/product-supporting.html

@@ -24,7 +24,8 @@
     <div class="supporting-content">
         <div class="supporting-list" v-for="(pros,index) in supportingList" :key="index">
             <div class="list-checked"  @click="checkedSoperv(pros)">
-                <span class="coll-checked" :class="[pros.isChecked ? 'checked': '']"></span>
+                <span v-if="disabledChecked(pros)" class="coll-checked none"></span>
+                <span v-else class="coll-checked" :class="[pros.isChecked ? 'checked': '']"></span>
             </div>
             <div class="list-image">
                 <img :src="pros.image" :alt="pros.name">
@@ -53,7 +54,7 @@
                             <!--供应商除自己的商品外，也显示价格等级-->
                             <div class="price_grade" v-else><span class="bold">￥</span><i :class="'icon mIcon i'+pros.priceGrade"></i></div>
                         </div>
-                        <div class="price-number">
+                        <div class="price-number" v-if="!disabledChecked(pros)">
                             <span class="number">
                                 <em class="sub" @click="supportingNumberSub(pros)">-</em>
                                 <input type="number" :value="pros.number" v-model="pros.number" @change="supportingNumberChange(pros)">
@@ -107,7 +108,7 @@
     </div>
     <div class="supporting-submit">
         <div class="supporting-submit-total">
-            <p>共<span class="ore">{{ checkedNum }}</span>件商品</p>
+            <p>共<span class="ore">{{ totalNumber }}</span>件商品</p>
             <p>合计<span class="red">￥{{ totalPrice | NumFormat }}元</span></p>
         </div>
         <div class="supporting-submit-button">