组合商品列表数据联调、购物车促销活动叠加、组合商品立即购买

src/main/java/com/caimei/www/controller/unlimited/ProductController.java

@@ -27,6 +27,7 @@ public class ProductController extends BaseController {
 
     private static final String PRODUCT_LIST_PATH = "product/list";
     private static final String PRODUCT_DETAIL_PATH = "product/detail";
+    private static final String PRODUCT_SUPPORTING_PATH = "product/product-supporting";
     private static final String PROMOTIONS_LIST_PATH = "product/promotions";
     private static final String INSTRUMENT_PAGE_PATH = "product/instrument";
     private static final String TEMPORARY_PAGE_PATH = "product/temporary";
@@ -325,4 +326,11 @@ public class ProductController extends BaseController {
     public String getCouponExpPath(){
         return ACTIVITY_COUPON_EXP;
     }
+    /**
+     * H5配套商品页
+     */
+    @GetMapping("/product/product-supporting.html")
+    public String getProductSupporting(){
+        return PRODUCT_SUPPORTING_PATH;
+    }
 }

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

@@ -63,7 +63,15 @@ li{list-style:none}
 .productBox .detailBox .concatBox{height:20vw;padding-bottom:4vw}
 .productBox .detailBox .concatBox img{height:20vw;width:auto}
 .productBox .detailBox .upgrade{width:100%;background:#F94B4B;border-radius:2px;display:inline-block;text-align:center;height:11.2vw;line-height:11.2vw;font-size:3.4vw;color:#FFF;margin:1.7vw 0}
-
+/*配套商品*/
+.product-supporting{width: 100%;height: 44vw;box-sizing: border-box;padding: 3.3vw;background-color: #FFFFFF;margin: 1.3vw 0;}
+.product-supporting-title{width: 100%;height: 6.2vw;line-height: 6.2vw;font-size: 3.6vw;color: #333333;text-align: left;font-weight: bold;}
+.product-supporting-content{width: 100%;height: 24.2vw;margin-top: 3vw;position: relative;}
+.product-supporting-content .product-supporting-list{width:24.2vw;height: 24.2vw;float: left;box-sizing: border-box;border: 1px solid #E2E7EF;margin-right: 2.4vw;border-radius: 2px;}
+.product-supporting-content .product-supporting-list img{width:100%;height: 100%;display: block;border-radius: 2px;}
+.product-supporting-more{width: 14vw;height: 100%;position: absolute;right: 0;top: 0;padding-left: 7.5vw;box-sizing: border-box;display: flex;align-items: center;}
+.product-supporting-more .mIcon{width: 6.5vw;height: 6.5vw;}
+.product-supporting-more .mIcon::before{width: 6.5vw;height: 6.5vw;background: url("/img/base/icon-xiayibu@2x.png");background-size: cover;}
 .recommendBox{margin-top:2vw;width:100%;background:#FFF}
 .recommendBox .hd{font-size:3.4vw;color:#E15621;font-weight:bold;padding:2.7vw;text-align:center}
 #productRecommend{width:100%;height:50vw;overflow:hidden;position:relative;box-sizing:border-box;padding:0 2.4vw}

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

@@ -97,6 +97,12 @@ li{list-style:none;}
 .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 .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 .svip-tag{width:100%;height:22px;letter-spacing:0}
@@ -109,9 +115,14 @@ li{list-style:none;}
 .product-supporting-list .tr-5 .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}
 .product-supporting-list .tr-5 .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}
 .product-supporting-list .tr-5 .number input{width:48px;border:none;line-height:22px;font-size:14px;vertical-align:top;text-align:center;color:#E15616}
-.product-supporting-list .tr-6{width:15%;box-sizing: border-box;padding: 16px 0;}
+.product-supporting-list .tr-6{width:15%;box-sizing: border-box;padding: 16px 0;padding-left: 30px;}
+.product-supporting-more{width: 100%;height: 32px;}
+.product-supporting-more .more{width: 98px;height: 32px;line-height: 32px;font-size: 14px;margin: 0 auto;border-radius: 2px;border: 1px solid #cccccc;color: #909090;text-align: left;transition: all 0.2s;cursor: pointer;padding-left: 15px;box-sizing: border-box;position: relative;}
+.product-supporting-more .more .icon:before{background-position: -93px 7px;width: 20px;height: 32px;right: 0;position: absolute;}
 .product-supporting-button{width: 100%;height: auto;}
 .product-supporting-button .product-supporting-total{width: 100%;height: 44px;text-align: right;line-height: 44px;font-size: 16px;color: #22272E;}
+.product-supporting-button .product-supporting-total .ore{color: #E15621;}
+.product-supporting-button .product-supporting-total .red{color: #F94B4B;}
 .product-supporting-button .product-supporting-btn{width: 100%;height: 36px;text-align: right;}
 .product-supporting-button .product-supporting-btn .btn{width: 128px;height: 36px;text-align: center;border: 1px solid #E15621;float: right;margin-left: 20px;line-height: 36px;font-size: 14px;}
 .product-supporting-button .product-supporting-btn .btn.add{background-color: #FFE6DC;color: #E15621;}

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

@@ -0,0 +1,54 @@
+@media screen and (max-width:768px) {
+    #supporting{width: 100%;}
+    .supporting-title{width:100%;height: 11.4vw;box-sizing: border-box;padding:3vw;background-color: #F7F7F7;box-sizing: border-box;}
+    .supporting-title .title{float: left;line-height: 5.4vw;font-size: 3.6vw;color: #2D3036;text-align: left;}
+    .supporting-title .coll-span{display: block;float: right;margin-left: 20px;height: 28px;line-height: 16px;box-sizing: border-box;padding: 6px 0;display: flex;cursor: pointer;}
+    .supporting-title .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-title .coll-checked.checked{background: url("/img/cart/icon_yixuanze@2x.png") no-repeat;background-size: cover;}
+    .supporting-content{width: 100%;min-height:50vw;background-color: #FFFFFF;padding-bottom: 27.7vw;}
+    .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.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;}
+    .supporting-list .list-info{width: 59vw;float: left;height: 100%;}
+    .supporting-list .list-info .list-name{width:100%;height: 10.5vw;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;word-break: break-all;line-height: 5.2vw;text-align: justify;font-size: 3.6vw;color: #22272E;}
+    .supporting-list .list-info .list-unit{width: 100%;line-height: 5vw;height: 5vw;font-size: 2.8vw;color: #627386;}
+    .supporting-list .list-info .list-price{width: 100%;line-height: 5vw;height: 5vw;font-size: 2.8vw;margin-bottom: 1.5vw;}
+    .supporting-list .list-info .list-price .price-box{float: left;line-height: 5vw;}
+
+    .supporting-list .list-info .list-price .price-box .main_price_show{color: #F94B4B;font-size: 3.6vw;line-height: 5vw;}
+    .supporting-list .list-info .list-price .price-box .main_price_show.none{text-decoration: line-through;color: #999999;}
+    .supporting-list .list-info .list-price .price-number{float: right;width: 20.8vw;height: 5vw;box-sizing: border-box;}
+    .supporting-list .list-info .list-price .price-number .number{display: inline-block;width: 100%;line-height: 5.5vw;height: 5.5vw;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;}
+    .supporting-list .list-info .list-price .price-number .number>em{display: inline-block;width: 5vw;height: 5vw;background: #FFE6DC;font-size: 3.8vw;line-height: 5vw;vertical-align: top;font-style: normal;text-align: center;}
+    .supporting-list .list-info .list-price .price-number .number input{width: 10.2vw;border: none;line-height: 5vw;vertical-align: top;text-align: center;color: #E15616;font-size: 3.4vw;}
+
+    .supporting-list .list-info .list-price .price_grade{width: 100%;float: left;}
+    .supporting-list .list-info .list-price .price_grade .bold{font-size: 3.4vw;}
+    .supporting-list .list-info .list-price .mIcon:before{width:15.8vw;height: 5vw}
+    .supporting-list .list-info .list-price .mIcon.i5:before {background-position: -84vw -97.5vw;}
+    .supporting-list .list-info .list-price .mIcon.i1:before {background-position: -84vw -69.5vw;}
+    .supporting-list .list-info .list-price .mIcon.i2:before {background-position: -84vw -76.5vw;}
+    .supporting-list .list-info .list-price .mIcon.i3:before {background-position: -84vw -83.7vw;}
+    .supporting-list .list-info .list-price .mIcon.i4:before {background-position: -84vw -90.7vw;}
+    .supporting-list .list-info .list-price .mIcon {display: inline-block;font-size: 0;height: 5vw;line-height: 5vw;vertical-align: text-bottom;}
+
+    .supporting-list .list-info .svip-tag{float: left; height:4.74vw;letter-spacing:0;overflow: hidden}
+    .supporting-list .list-info .svip-tag .svip-icon{position:relative;z-index:9;float: left; width:7.8vw;height:4.74vw;text-align:center;line-height:4.74vw;font-size:2.6vw;font-weight:400;color:#F0CB72;opacity:1;background:#333333}
+    .supporting-list .list-info .svip-tag .svip-icon.btr{border-radius:2px 8px 0px 2px}
+    .supporting-list .list-info .svip-tag .svip-price{z-index:1;position:relative;float: left;padding-left:5.4vw;padding-right:0.6vw;margin-left:-5vw;line-height:4.74vw;height: 4.74vw; background:#F0CB72;opacity:1;border-radius:2px;font-size:2.8vw}
+    .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 .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;}
+    .supporting-submit .supporting-submit-total p .red{color: #F94B4B;}
+    .supporting-submit .supporting-submit-button{flex: 6;display: flex;}
+    .supporting-submit .btn{width: 22.4vw;height: 11.2vw;flex: 1;line-height: 11.2vw;border: 1px solid #E15621;text-align: center;color: #FFFFFF;font-size: 3.4vw;margin: 0 2vw;border-radius: 2px;}
+    .supporting-submit .btn.buy{background-color: #E15621;}
+    .supporting-submit .btn.add{background-color: #FFE6DC;color: #E15621;}
+}

src/main/resources/static/js/common/serviceapi/order.service.js

@@ -94,6 +94,19 @@ var OrderApi = {
                 callback(res);
             });
         },
+        /* 组合商品立即购买确认订单 */
+        OrderClubProductSupporting: function (params, callback) {
+            Http.AjaxService({
+                url:'/order/club/product/buynow',
+                type:'GET',
+                data:params,
+                json:false,
+                isHost:true
+            })
+            .then(function(res){
+                callback(res);
+            });
+        },
         /* 获取订单邮费信息 */
         GetOrderPostage: function (params, callback) {
             Http.AjaxService({

src/main/resources/static/js/common/serviceapi/product.service.js

@@ -397,4 +397,23 @@ var ProductApi = {
                 callback(res);
             });
         },
+        /**
+         * @组合商品
+         * @param:userId 用户userId
+         * @param:productId 商品Id
+         * @param:pageNum 页码
+         * @param:pageSize 每一页条数
+         */
+        getCommodityCombinationList:function (params, callback) {//获取商品收藏列表
+            Http.AjaxService({
+                url:'/commodity/seller/combination/list',
+                type:'get',
+                data:params,
+                json:true,
+                isHost:true
+            })
+                .then(function(res){
+                    callback(res);
+                });
+        },
 };

src/main/resources/static/js/common/serviceapi/shopping.service.js

@@ -131,10 +131,11 @@ var ShoppingApi = {
          */
         ShoppingAddCarts:function (params, callback) {
             Http.AjaxService({
-                url:'/shoppingCart/addCarts',
+                url:'/order/club/cart/add/bulk',
                 type:'post',
                 data:params,
-                json:false
+                json:false,
+                isHost:true
             })
             .then(function(res){
                 callback(res);

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

@@ -42,9 +42,11 @@ var productDetail = new Vue({
         isShowPopup: false,
         currentTab: 1,
         listQuery:{
+            source:1,
             userId:0,
+            productId:0,
             pageNum:1,
-            pageSize:12,
+            pageSize:30,
         },
         couponParam: {// 获取弹窗优惠券领取参数
             userId: 0,
@@ -53,10 +55,16 @@ var productDetail = new Vue({
             source: 1
         },
         isCouponEmpty: false,
+        isProductChecked:false,
         productCoupon: [], 							// 优惠券
         productCouponList: [],						// 优惠券弹窗列表
         collectionType:false,                       // 商品收藏状态
-        supportingList:[]
+        supportingList:[],
+        defaultSupportingList:[],
+        isShowMoreButton:false,
+        checkedNum:0,
+        totalPrice:0,
+
 
     },
     filters: {
@@ -78,6 +86,9 @@ var productDetail = new Vue({
                     return '新用户券';
                     break;
             }
+        },
+        NumFormat:function(value) {
+            return Number(value).toFixed(2);
         }
     },
     methods: {
@@ -95,22 +106,23 @@ var productDetail = new Vue({
             }
             return false
         },
-        getCollectionProductList: function () {// 获取收藏商品列表
+        getCommodityCombinationList: function () {// 获取收藏商品列表
             var _self = this;
-            ProductApi.getProductUserLikeList(_self.listQuery,function (response) {
+            ProductApi.getCommodityCombinationList(_self.listQuery,function (response) {
                 if (response.code === 0 ) {
                     var data = response.data;
-                    // _self.listRecord = data.totalRecord;
                     if(data.results.length > 0 ){
                         var list = data.results.map((el,index)=>{
                             el.isChecked = false;
+                            el.number = el.minBuyNumber;
                             return el;
                         });
-                        if(isPC){
-                            _self.supportingList = list;
-                        }else{
-                            _self.supportingList = _self.supportingList.concat(list);
+                        _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 = [];
                     }
@@ -512,13 +524,168 @@ var productDetail = new Vue({
                 })
             }
         },
+        supportingNumberSub: function(pros){// 配套商品数量减减
+            var _self = this;
+            if (pros.number <= pros.minBuyNumber) {
+                pros.number = pros.minBuyNumber
+                return
+            } else {
+                if (pros.step === 2) {
+                    pros.number -= pros.minBuyNumber
+                } else {
+                    pros.number--
+                }
+            }
+            _self.numberChange(pros);
+        },
+        supportingNumberAdd: function(pros){  // 配套商品数量加加
+            var _self = this;
+            if (pros.step === 2) {
+                pros.number += pros.minBuyNumber
+            } else {
+                pros.number++
+            }
+            _self.numberChange(pros);
+        },
+        supportingNumberChange: function(pros){ // 配套商品数量输入
+            var _self = this;
+            pros.number = Math.ceil(pros.number/pros.step)*pros.step;
+            _self.numberChange(pros);
+        },
+        numberChange: function(pros){
+            var _self = this;
+            if(pros.ladderPriceFlag){
+                pros.ladderPrices.forEach(function(ladder){
+                    if(pros.number>=ladder.buyNum){
+                        pros.price = ladder.buyPrice;
+                        pros.originalPrice = ladder.buyPrice;
+                    }
+                });
+            }
+            // 计算价格
+            _self.calculatetTtalPrice();
+        },
+        calculatetTtalPrice: function () { // 计算配套商品总价格
+            var _self = this;
+            var totalPrice = 0;
+            _self.supportingList.forEach(function (pros) {
+                if(pros.isChecked){
+                    pros.totalPrice = pros.number*pros.price;
+                }else{
+                    pros.totalPrice = 0;
+                }
+                totalPrice += pros.totalPrice;
+            })
+            _self.totalPrice = totalPrice;
+        },
+        checkedSoperv:function (pros) {// 勾选配套商品
+            console.log(pros)
+            var _self = this;
+            var goodsCheckedLength = 0;
+            pros.isChecked = !pros.isChecked
+            _self.supportingList.forEach(el => {
+                if(el.isChecked) {
+                    goodsCheckedLength++;
+                }
+            })
+            _self.checkedNum = goodsCheckedLength;
+            if(goodsCheckedLength>0){
+                _self.isProductChecked = true
+            }else{
+                _self.isProductChecked = false
+            }
+            _self.calculatetTtalPrice();
+        },
+        handleSupportingSubmit:function (type) {
+            var _self = this;
+            if (_self.userId > 0) {
+                switch (type) {
+                    case 'buy':
+                        console.log('立即购买')
+                        _self.toConfirmation()
+                        break
+                    case 'add':
+                        console.log('加入购物车')
+                        _self.getAddProductCart()
+                        break
+                }
+            } else {
+                _self.toLogin();
+            }
+        },
+        getAddProductCart:function () {
+            //批量增加购物车成功和toast弹窗提示成功
+            var _self = this;
+            var checkedList = [];
+            if(!_self.isProductChecked){
+                CAIMEI.dialog('请先选择商品',false);
+                return;
+            }
+            _self.supportingList.forEach((el)=>{
+                if(el.isChecked){
+                    checkedList.push({ productId:el.productId , productCount: el.number });
+                }
+            })
+            ShoppingApi.ShoppingAddCarts({userId:_self.listQuery.userId,productInfo:JSON.stringify(checkedList)},function(response){
+                if(response.code === 0){
+                    globalHead.getHeadCart(_self.listQuery.userId);
+                    $.confirm({
+                        useBootstrap: false,
+                        boxWidth: (isPC?'338px':'74.6vw'),
+                        title: false,
+                        content:'<div class="cartAlert"><h6>商品已成功加入购物车！</h6><p>当前购物车共<em>'+response.data+'</em>种商品</p></div>',
+                        closeIcon: true,
+                        animation: 'opacity',
+                        closeAnimation: 'opacity',
+                        animateFromElement: false,
+                        scrollToPreviousElement: false,
+                        buttons: {
+                            login: {
+                                text: '去结算',
+                                btnClass: 'btn-to-cart',
+                                action: function(){
+                                    window.location.href = '/shopping/cart.html';
+                                }
+                            },
+                            close: {
+                                text: '继续购物',
+                                btnClass: 'btn-to-goon'
+                            }
+                        }
+                    });
+                } else {
+                    dialog("加入购物车失败！");
+                }
+            })
+        },
+        toConfirmation:function () {
+            var _self = this;
+            //跳转确认订单页面
+            var checkedList = []
+            if(!_self.isProductChecked){
+                CAIMEI.dialog('请先选择商品',false);
+                return;
+            }
+            _self.supportingList.forEach((el)=>{
+                if(el.isChecked){
+                    checkedList.push({ id:el.productId , count: el.number })
+                }
+            })
+            CAIMEI.Storage.setItem('KEY_SUPPORE', JSON.stringify(checkedList));
+            window.location.href = '/shopping/confirm.html?type=3';
+        },
+        showSupportingMore:function () {
+            var _self = this;
+            _self.isShowMoreButton = false;
+            _self.defaultSupportingList = _self.supportingList;
+        },
         // 是否显示vip标签价格
         showVipPriceTag(product){
             return (product.priceFlag !== 1 && product.svipProductFlag === 1 && ((GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG === 1) || GLOBAL_USER_IDENTITY === 2));
-        }
+        },
     },
     created: function () {
-        this.productId = this.couponParam.productId = $("#productId").val();
+        this.productId = this.couponParam.productId = this.listQuery.productId = $("#productId").val();
         this.userId = this.couponParam.userId = this.listQuery.userId = GLOBAL_USER_ID;
         this.productStock = $("#productStock").val();
         this.getImages();
@@ -537,7 +704,7 @@ var productDetail = new Vue({
         this.getProductPrice();
         this.getParameters();
         this.queryProductDetilsCoupons();
-        this.getCollectionProductList();
+        this.getCommodityCombinationList();
         // $('.productInfo').slide({
         //     mainCell:".tabCon"
         //     ,titCell:".tabTit span"

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

@@ -0,0 +1,251 @@
+var supporting = new Vue({
+    el: "#supporting",
+    data: {
+        showProduct: false,
+        productId: 0,
+        userId: 0,
+        listQuery:{
+            source:1,
+            userId:0,
+            productId:0,
+            pageNum:1,
+            pageSize:30,
+        },
+        supportingList:[],
+        isAllChecked:false,
+        isProductChecked:false,
+        checkedNum:0,
+        totalPrice:0
+
+    },
+    filters: {
+        NumFormat:function(value) {
+            return Number(value).toFixed(2);
+        }
+    },
+    methods: {
+        getCommodityCombinationList: function () {// 获取组合商品列表
+            var _self = this;
+            ProductApi.getCommodityCombinationList(_self.listQuery,function (response) {
+                if (response.code === 0 ) {
+                    var data = response.data;
+                    if(data.results.length > 0 ){
+                        var list = data.results.map((el,index)=>{
+                            el.isChecked = false;
+                            el.number = el.minBuyNumber;
+                            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 = [];
+                    }
+                }else {
+                    CAIMEI.Alert(response.msg, '确定');
+                }
+            });
+        },
+        supportingNumberSub: function(pros){
+            var _self = this;
+            if (pros.number <= pros.minBuyNumber) {
+                pros.number = pros.minBuyNumber
+                return
+            } else {
+                if (pros.step === 2) {
+                    pros.number -= pros.minBuyNumber
+                } else {
+                    pros.number--
+                }
+            }
+            _self.numberChange(pros);
+        },
+        supportingNumberAdd: function(pros){  //商品数量加加
+            var _self = this;
+            if (pros.step === 2) {
+                pros.number += pros.minBuyNumber
+            } else {
+                pros.number++
+            }
+            _self.numberChange(pros);
+        },
+        supportingNumberChange: function(pros){
+            var _self = this;
+            pros.number = Math.ceil(pros.number/pros.step)*pros.step;
+            _self.numberChange(pros);
+        },
+        numberChange: function(pros){
+            var _self = this;
+            if(pros.ladderPriceFlag){
+                pros.ladderPrices.forEach(function(ladder){
+                    if(pros.number>=ladder.buyNum){
+                        pros.price = ladder.buyPrice;
+                        pros.originalPrice = ladder.buyPrice;
+                    }
+                });
+            }
+            // 计算价格
+            _self.calculatetTtalPrice();
+        },
+        calculatetTtalPrice: function () {
+            var _self = this;
+            var totalPrice = 0;
+            _self.supportingList.forEach(function (pros) {
+                if(pros.isChecked){
+                    pros.totalPrice = pros.number*pros.price;
+                }else{
+                    pros.totalPrice = 0;
+                }
+                totalPrice += pros.totalPrice;
+            })
+            _self.totalPrice = totalPrice;
+        },
+        isCheckedAll(){//全选
+            var _self = this;
+            _self.isAllChecked = !_self.isAllChecked;
+            _self.supportingList.forEach((el)=>{
+                el.isChecked = _self.isAllChecked;
+            })
+            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;
+            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
+            }else{
+                _self.isProductChecked = false
+            }
+            _self.calculatetTtalPrice();
+        },
+        // 是否显示vip标签价格
+        showVipPriceTag: function(product){
+            return (product.priceFlag !== 1 && product.svipProductFlag === 1 && ((GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG === 1) || GLOBAL_USER_IDENTITY === 2));
+        },
+        PromotionsFormat:function(promo){//促销活动类型数据处理
+            if(promo!=null){
+                if(promo.type == 1 && promo.mode == 1){
+                    return true
+                }else{
+                    return false
+                }
+            }
+            return false
+        },
+        handleSupportingSubmit:function (type) {
+            var _self = this;
+            if (_self.listQuery.userId > 0) {
+                switch (type) {
+                    case 'buy':
+                        console.log('立即购买')
+                        _self.toConfirmation()
+                        break
+                    case 'add':
+                        console.log('加入购物车')
+                        _self.getAddProductCart()
+                        break
+                }
+            } else {
+                _self.toLogin();
+            }
+        },
+        getAddProductCart:function () {
+            //批量增加购物车成功和toast弹窗提示成功
+            var _self = this;
+            var checkedList = [];
+            if(!_self.isProductChecked){
+                CAIMEI.dialog('请先选择商品',false);
+                return;
+            }
+            _self.supportingList.forEach((el)=>{
+                if(el.isChecked){
+                    checkedList.push({ productId:el.productId , productCount: el.number });
+                }
+            })
+            ShoppingApi.ShoppingAddCarts({userId:_self.listQuery.userId,productInfo:JSON.stringify(checkedList)},function(response){
+                if(response.code === 0){
+                    globalHead.getHeadCart(_self.listQuery.userId);
+                    $.confirm({
+                        useBootstrap: false,
+                        boxWidth: (isPC?'338px':'74.6vw'),
+                        title: false,
+                        content:'<div class="cartAlert"><h6>商品已成功加入购物车！</h6><p>当前购物车共<em>'+response.data+'</em>种商品</p></div>',
+                        closeIcon: true,
+                        animation: 'opacity',
+                        closeAnimation: 'opacity',
+                        animateFromElement: false,
+                        scrollToPreviousElement: false,
+                        buttons: {
+                            login: {
+                                text: '去结算',
+                                btnClass: 'btn-to-cart',
+                                action: function(){
+                                    window.location.href = '/shopping/cart.html';
+                                }
+                            },
+                            close: {
+                                text: '继续购物',
+                                btnClass: 'btn-to-goon'
+                            }
+                        }
+                    });
+                } else {
+                    dialog("加入购物车失败！");
+                }
+            })
+        },
+        toConfirmation:function () {
+            var _self = this;
+            //跳转确认订单页面
+            var checkedList = []
+            if(!_self.isProductChecked){
+                CAIMEI.dialog('请先选择商品',false);
+                return;
+            }
+            _self.supportingList.forEach((el)=>{
+                if(el.isChecked){
+                    checkedList.push({ id:el.productId , count: el.number })
+                }
+            })
+            CAIMEI.Storage.setItem('KEY_SUPPORE', JSON.stringify(checkedList));
+            window.location.href = '/shopping/confirm.html?type=3';
+        },
+        toLogin: function () {
+            setBeforeUrl();
+            window.location.href = '/login.html';
+        },
+    },
+    created: function () {
+        this.userId = this.listQuery.userId = GLOBAL_USER_ID;
+        // identity: 0个人，1协销，2会员机构，3供应商，4普通机构
+    },
+    mounted: function () {
+        this.listQuery.productId = getUrlParam("productId") ? getUrlParam("productId")*1 : "";
+        this.userId = this.listQuery.userId = GLOBAL_USER_ID;
+        this.getCommodityCombinationList();
+        // $('.productInfo').slide({
+        //     mainCell:".tabCon"
+        //     ,titCell:".tabTit span"
+        //     ,trigger: "click"
+        // });
+    }
+});

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

@@ -198,10 +198,22 @@ var shoppingCart = new Vue({
                                 totalCount += cart.number;
                                 // 单品满减
                                 if (cart.promotions && cart.promotions.type * 1 === 1 && cart.promotions.mode * 1 === 2) {
-                                    // 单品满减-重新计算供应商总价/满减金额
-                                    if (cart.price * cart.number >= cart.promotions.touchPrice) {
-                                        supplierPrice -= cart.promotions.reducedPrice;
-                                        supplierReducedPrice += cart.promotions.reducedPrice;
+                                    var price = cart.price * cart.number;
+                                    if(cart.promotions.discount == 1){
+                                        var discountNum = parseInt( price/cart.promotions.touchPrice);
+                                        console.log('单品满减促销叠加通道叠加次数',discountNum)
+                                        // 单品满减-重新计算供应商总价/满减金额
+                                        if ( price >= cart.promotions.touchPrice) {
+                                            supplierPrice -= cart.promotions.reducedPrice*discountNum
+                                            supplierReducedPrice += cart.promotions.reducedPrice*discountNum
+                                        }
+                                    }else{
+                                        console.log(' 单品满减非促销叠加通道')
+                                        // 单品满减-重新计算供应商总价/满减金额
+                                        if ( price >= cart.promotions.touchPrice) {
+                                            supplierPrice -= cart.promotions.reducedPrice;
+                                            supplierReducedPrice += cart.promotions.reducedPrice;
+                                        }
                                     }
                                 }
                                 //sivp优惠价格
@@ -212,10 +224,20 @@ var shoppingCart = new Vue({
                         });
                         // 店铺满减
                         if (supplier.promotions && supplier.promotions.mode * 1 === 2) {
-                            // 店铺满减-计算供应商总价/满减金额
-                            if (supplierPrice >= supplier.promotions.touchPrice) {
-                                supplierPrice -= supplier.promotions.reducedPrice;
-                                supplierReducedPrice += supplier.promotions.reducedPrice;
+                            if(supplier.promotions.discount == 1){// 支持促销叠加条件的店铺满减 执行
+                                var prosDiscountNum = parseInt(supplierPrice/supplier.promotions.touchPrice) // 店铺满减促销叠加次数 = 店铺合计价格/满减促销价格
+                                console.log('店铺满减促销叠加通道叠加次数',prosDiscountNum)
+                                if (supplierPrice >= supplier.promotions.touchPrice) {
+                                    supplierPrice -= supplier.promotions.reducedPrice*prosDiscountNum
+                                    supplierReducedPrice += supplier.promotions.reducedPrice*prosDiscountNum
+                                }
+                            }else{
+                                console.log('店铺满减非促销叠加通道')
+                                // 店铺满减-计算供应商总价/满减金额
+                                if (supplierPrice >= supplier.promotions.touchPrice) {
+                                    supplierPrice -= supplier.promotions.reducedPrice;
+                                    supplierReducedPrice += supplier.promotions.reducedPrice;
+                                }
                             }
                         }
                     }

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

@@ -51,6 +51,11 @@ var shoppingConfirm = new Vue({
         productParam: Object.assign({}, defaultProductParam), 	// 商品立即购买确认订单参数
         postageParam: Object.assign({}, defaultPostageParam),	// 邮费计算参数
         confirmParam: Object.assign({}, defaultConfirmParam), 	// 提交订单参数
+        supportParm:{// 组合商品立即购买确认订单参数
+            productInfo:'',
+            source:2,			// 来源：1WWW 2小程序
+            userId:0			// 用户Id
+        },
         address: {
             id: '',
             townId: '',
@@ -164,34 +169,18 @@ var shoppingConfirm = new Vue({
             if(_self.userId ===0){return;}
             OrderApi.ProductCreateOrderInfo(_self.productParam,function(response){
                 if (response.code === 0 ) {
-                    var data = response.data;
-                    _self.listData = data.list;
-                    _self.totalPrice =  data.totalPrice;
-                    _self.reducedPrice = data.reducedPrice;
-                    _self.totalCount =  data.totalCount;
-                    _self.kindCount = data.kindCount;
-                    _self.balance.userMoney = data.userMoney;
-                    _self.balance.originUserMoney = data.userMoney;
-                    _self.hanldShouldPayFee = data.totalPrice;
-                    _self.svipReducedPrice = data.svipReducedPrice;
-                    _self.postageParam.productIds =  _self.getProductIds(data.list); // 获取订单商品id列表 以 , 隔开
-                    console.log('邮费接口数据',  _self.postageParam)
-                    _self.getAddressList(_self.userId,20);
-                    if( data.couponList &&  data.couponList.length>0){
-                        _self.isCouponShow = true;
-                        _self.couponAmount = data.couponList[0].couponAmount;
-                        _self.confirmParam.clubCouponId = data.couponList[0].clubCouponId;
-                        data.couponList.forEach((el) => {
-                            _self.couponList.push(Object.assign(el,{ischecked:false}))
-                        })
-                        _self.couponList[0].ischecked = true;
-                        _self.hanldShouldPayFee = data.totalPrice - _self.couponAmount;
-                    }
-                    _self.totalDiscountAmount =  _self.reducedPrice + _self.couponAmount;
-                    if(data.invoice){
-                        data.invoice.type = 0;
-                        _self.orderInvoice =  data.invoice;
-                    }
+                    _self.setCreatDataInfo(response.data)
+                }else{
+                    CAIMEI.Alert(r.msg, '确定', false);
+                }
+            });
+        },
+        OrderClubProductSupporting:function(){// 组合商品确认订单初始化
+            var _self = this;
+            if(_self.userId ===0){return;}
+            OrderApi.OrderClubProductSupporting(_self.supportParm,function(response){
+                if (response.code === 0 ) {
+                    _self.setCreatDataInfo(response.data)
                 }else{
                     CAIMEI.Alert(r.msg, '确定', false);
                 }
@@ -202,39 +191,42 @@ var shoppingConfirm = new Vue({
             if(_self.userId ===0){return;}
             OrderApi.GetOrderConfirmInfo(_self.cartParam,function(response){
                 if (response.code === 0 ) {
-                    var data = response.data;
-                    _self.listData = data.list;
-                    _self.totalPrice =  data.totalPrice;
-                    _self.reducedPrice = data.reducedPrice;
-                    _self.totalCount =  data.totalCount;
-                    _self.kindCount = data.kindCount;
-                    _self.balance.userMoney = data.userMoney;
-                    _self.balance.originUserMoney = data.userMoney;
-                    _self.hanldShouldPayFee = data.totalPrice;
-                    _self.svipReducedPrice = data.svipReducedPrice;
-                    _self.postageParam.productIds =  _self.getProductIds(data.list); // 获取订单商品id列表 以 , 隔开
-                    _self.getAddressList(_self.userId,20);
-                    console.log('邮费接口数据',  _self.postageParam)
-                    if( data.couponList &&  data.couponList.length>0){
-                        _self.isCouponShow = true;
-                        _self.couponAmount = data.couponList[0].couponAmount;
-                        _self.confirmParam.clubCouponId = data.couponList[0].clubCouponId;
-                        data.couponList.forEach((el) => {
-                            _self.couponList.push(Object.assign(el,{ischecked:false}))
-                        })
-                        _self.couponList[0].ischecked = true;
-                        _self.hanldShouldPayFee = data.totalPrice - _self.couponAmount;
-                    }
-                    _self.totalDiscountAmount =  _self.reducedPrice + _self.couponAmount;
-                    if(data.invoice){
-                        data.invoice.type = 0;
-                        _self.orderInvoice =  data.invoice;
-                    }
+                    _self.setCreatDataInfo(response.data)
                 }else{
                     CAIMEI.Alert(r.msg, '确定', false);
                 }
             });
         },
+        setCreatDataInfo(data){
+            var _self = this;
+            _self.listData = data.list;
+            _self.totalPrice =  data.totalPrice;
+            _self.reducedPrice = data.reducedPrice;
+            _self.totalCount =  data.totalCount;
+            _self.kindCount = data.kindCount;
+            _self.balance.userMoney = data.userMoney;
+            _self.balance.originUserMoney = data.userMoney;
+            _self.hanldShouldPayFee = data.totalPrice;
+            _self.svipReducedPrice = data.svipReducedPrice;
+            _self.postageParam.productIds =  _self.getProductIds(data.list); // 获取订单商品id列表 以 , 隔开
+            _self.getAddressList(_self.userId,20);
+            console.log('邮费接口数据',  _self.postageParam)
+            if( data.couponList &&  data.couponList.length>0){
+                _self.isCouponShow = true;
+                _self.couponAmount = data.couponList[0].couponAmount;
+                _self.confirmParam.clubCouponId = data.couponList[0].clubCouponId;
+                data.couponList.forEach((el) => {
+                    _self.couponList.push(Object.assign(el,{ischecked:false}))
+                })
+                _self.couponList[0].ischecked = true;
+                _self.hanldShouldPayFee = data.totalPrice - _self.couponAmount;
+            }
+            _self.totalDiscountAmount =  _self.reducedPrice + _self.couponAmount;
+            if(data.invoice){
+                data.invoice.type = 0;
+                _self.orderInvoice =  data.invoice;
+            }
+        },
         getFreight: function(){// 获取邮费
             var _self = this;
             console.log(_self.postageParam, '邮费接口调用')
@@ -665,18 +657,20 @@ var shoppingConfirm = new Vue({
             n=(r1>=r2)?r1:r2;
             return ((arg1*m-arg2*m)/m).toFixed(n);
         },
-        submitOrder: function(){
+        submitOrder: function(){// 提交按钮点击
             var _self = this;
-            if( _self.confirmParam.payInfo.orderShouldPayFee<1000){
+            if( _self.hanldShouldPayFee<1000){
                 _self.isModelAlert = true;
                 _self.isModelAlertText = '采购金额过小，将扣除500采美豆。建议您使用微信扫描 以下二维码，进入采美旗下“呵呵商城”小程序购买小额 商品。';
-            }else if(_self.confirmParam.payInfo.orderShouldPayFee<1000 && _self.userBeans<0){
+            }else if(_self.hanldShouldPayFee<1000 && _self.userBeans<0){
                 _self.isModelAlert = true;
                 _self.isShowConfirm = false;
                 _self.isModelAlertText = '采美豆不足，不能提交订单。您可使用微信扫描以下二维码，进入采美旗下“呵呵商城”小程序购买小额商品。';
+            }else{
+                _self.handleClickOrderSubmitMit()
             }
         },
-        handleClickOrderSubmitMit:function () {
+        handleClickOrderSubmitMit:function () {// 提交订单
             var _self = this;
             if(_self.submitLoading){return false;}
             if(!_self.confirmParam.addressId){
@@ -797,7 +791,7 @@ var shoppingConfirm = new Vue({
         var urlType = getUrlParam("type") ? getUrlParam("type")*1 : "";
         console.log('urlType',urlType)
         if(globalUserData){
-            _self.userId = _self.productParam.userId = _self.cartParam.userId = _self.postageParam.userId =   globalUserData.userId;
+            _self.userId = _self.productParam.userId = _self.cartParam.userId = _self.postageParam.userId = _self.supportParm.userId =   globalUserData.userId;
             _self.confirmParam.clubId = globalUserData.clubId
             _self.userIdentity = globalUserData.identity;
             _self.userToken = globalUserData.token;
@@ -816,6 +810,10 @@ var shoppingConfirm = new Vue({
                 if(_self.productParam.productId && _self.productParam.productCount) {
                     _self.getProductCreateOrderInfo();
                 }
+            }else if(urlType === 3){// 组合商品立即购买
+                _self.supportParm.productInfo = window.localStorage.getItem("KEY_SUPPORE");
+                _self.OrderClubProductSupporting()
+                console.log('_self.supportParm.productInfo',_self.supportParm.productInfo)
             }
         }
     },

src/main/resources/static/js/user-center/collection/collection.js

@@ -142,8 +142,6 @@ var orderPage = new Vue({
         },
         hanldBuyCart:function (pros,type) {// 1 加入购物车 2 立即购买
             var _self = this;
-            console.log('pros',pros)
-            console.log('type',type)
             if(type == 1) {
                 _self.shoppingCart(pros);
             }else{
@@ -155,13 +153,14 @@ var orderPage = new Vue({
             var checkedList = [];
             if(!_self.isProductChecked){
                 CAIMEI.dialog('请先选择商品',false);
+                return;
             }
             _self.listData.forEach((el)=>{
                 if(el.isChecked){
-                    checkedList.push(el.productId);
+                    checkedList.push({ productId:el.productId , productCount: el.minBuyNumber });
                 }
             })
-            ShoppingApi.ShoppingAddCarts({userId:_self.listQuery.userId,productIds:checkedList.join(",")},function(response){
+            ShoppingApi.ShoppingAddCarts({userId:_self.listQuery.userId, productInfo:JSON.stringify(checkedList)},function(response){
                 if(response.code === 0){
                     globalHead.getHeadCart(_self.listQuery.userId);
                     $.confirm({

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

@@ -274,12 +274,16 @@
                             <p class="td-6">选择</p>
                         </div>
                         <div class="product-supporting-pro">
-                            <div class="product-supporting-list" v-for="pros in supportingList">
+                            <div class="product-supporting-list" v-for="pros in defaultSupportingList">
                                 <div class="tr tr-1">
-                                    <img :src="pros.image" :alt="pros.name">
+                                    <a :href="'/product-'+pros.productId+'.html'">
+                                        <img :src="pros.image" :alt="pros.name">
+                                    </a>
                                 </div>
                                 <div class="tr tr-2">
-                                    <p v-html="pros.name"></p>
+                                    <a :href="'/product-'+pros.productId+'.html'">
+                                        <p v-html="pros.name"></p>
+                                    </a>
                                 </div>
                                 <div class="tr tr-3">
                                     <p v-html="pros.unit"></p>
@@ -326,8 +330,7 @@
                                             </div>
                                         </template>
                                         <template v-else>
-                                            <div class="price_grade"><span class="bold">￥</span><i
-                                                    :class="'icon mIcon i'+pros.priceGrade"></i></div>
+                                            <div class="price_grade"><i :class="'icon mIcon i'+pros.priceGrade"></i></div>
                                             <div class="price_text_tag">
                                                 <p class="couponTag" v-if="pros.couponsLogo">优惠券</p>
                                                 <template v-if="pros.svipProductFlag === 1">
@@ -344,30 +347,55 @@
                                 </div>
                                 <div class="tr tr-5">
                                     <span class="number">
-                                        <em class="sub" @click="">-</em>
-                                        <input type="number" :value="pros.number" v-model="pros.number" @change="">
-                                        <em class="add" @click="">+</em>
+                                        <em class="sub" @click="supportingNumberSub(pros)">-</em>
+                                        <input type="number" :value="pros.number" v-model="pros.number" @change="supportingNumberChange(pros)">
+                                        <em class="add" @click="supportingNumberAdd(pros)">+</em>
                                     </span>
                                 </div>
                                 <div class="tr tr-6">
-                                    <input class="check" type="checkbox" @change="" v-model="pros.isChecked">
+                                    <template v-if="pros.priceFlag == 1 || (pros.priceFlag==2 && GLOBAL_USER_IDENTITY === 4) || GLOBAL_USER_IDENTITY == 3">
+                                        <div class="checked-box">
+                                           <p>不可选择</p>
+                                        </div>
+                                    </template>
+                                    <template v-else>
+                                        <div class="checked-box" @click="checkedSoperv(pros)">
+                                            <input class="check" type="checkbox" @change="" v-model="pros.isChecked">
+                                        </div>
+                                    </template>
+                                </div>
+                            </div>
+                            <div class="product-supporting-more" v-if="isShowMoreButton">
+                                <div class="more" @click="showSupportingMore">
+                                    <i class="icon mIcon"></i>
+                                    查看更多
                                 </div>
                             </div>
                         </div>
                         <div class="product-supporting-button">
                             <div class="product-supporting-total">
-                                <p>共 <span>100</span>件商品，合计:<span>50000</span></p>
+                                <p>共 <span class="ore">{{ checkedNum }}</span>件商品，合计:<span class="red">￥{{ totalPrice | NumFormat }}元</span></p>
                             </div>
                             <div class="product-supporting-btn">
-                                <div class="btn buy">立即购买</div>
-                                <div class="btn add">加入购物车</div>
+                                <div class="btn buy" @click="handleSupportingSubmit('buy')">立即购买</div>
+                                <div class="btn add" @click="handleSupportingSubmit('add')">加入购物车</div>
                             </div>
                         </div>
                     </div>
                 </template>
                 <!--H5-->
                 <template v-else>
-
+                    <div class="product-supporting-title">配套商品({{ supportingList.length }})</div>
+                    <div class="product-supporting-content">
+                        <div class="product-supporting-list" v-for="(pros,index) in defaultSupportingList" :key="index" v-if="index<3">
+                            <a :href="'/product-'+pros.productId+'.html'">
+                                <img :src="pros.image" :alt="pros.name">
+                            </a>
+                        </div>
+                        <a :href="'/product/product-supporting.html?productId='+productId" class="product-supporting-more">
+                            <i class="icon mIcon"></i>
+                        </a>
+                    </div>
                 </template>
             </div>
         </div>

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

@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美365网-配套商品</title>
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/product/product-supporting.h5.css(v=${version})}" rel="stylesheet" type="text/css">
+    <template th:replace="components/analysis"></template>
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!-- 购物车列表 -->
+<div id="supporting">
+    <!--列表-->
+    <div class="supporting-title">
+        <div class="title">配套商品</div>
+        <div class="coll-span all" @click="isCheckedAll">
+            <span class="coll-checked" :class="[isAllChecked ? 'checked': '']"></span>
+            <span>全选</span>
+        </div>
+    </div>
+    <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>
+            </div>
+            <div class="list-image">
+                <img :src="pros.image" :alt="pros.name">
+            </div>
+            <div class="list-info">
+                <div class="list-name">{{ pros.name }}</div>
+                <div class="list-unit">规格：{{ pros.unit }}</div>
+                <div class="list-price">
+                    <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                        <div class="price-box">
+                            <!--0公开价格 1不公开价格 2仅对会员机构公开-->
+                            <div class="main_price_unde" v-if="pros.priceFlag==1">￥价格未公开</div>
+                            <!-- 资质机构 || (价格全部机构可见 && 普通机构) || (供应商 && 商品为供应商下的商品) || 超级会员用户 -->
+                            <template
+                                    v-else-if="GLOBAL_USER_IDENTITY === 2 || (pros.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) || (GLOBAL_USER_IDENTITY === 3 && pros.shopId === GLOBAL_SHOP_ID) || GLOBAL_VIP_FLAG === 1">
+                                <div class="main_price_show"
+                                     :class="{none: PromotionsFormat(pros.promotions) || (pros.svipProductFlag === 1 && showVipPriceTag(pros))}">
+                                    ￥{{ (PromotionsFormat(pros.promotions) || showVipPriceTag(pros) ? pros.originalPrice :
+                                    pros.price ) | NumFormat }}
+                                </div>
+                            </template>
+                            <!--机构价仅会员可见 && 用户是普通机构-->
+                            <div class="main_price_unde" v-else-if="pros.priceFlag==2 && GLOBAL_USER_IDENTITY === 4">
+                                ￥会员可见
+                            </div>
+                            <!--供应商除自己的商品外，也显示价格等级-->
+                            <div class="price_grade" v-else><span class="bold">￥</span><i :class="'icon mIcon i'+pros.priceGrade"></i></div>
+                        </div>
+                        <div class="price-number">
+                            <span class="number">
+                                <em class="sub" @click="supportingNumberSub(pros)">-</em>
+                                <input type="number" :value="pros.number" v-model="pros.number" @change="supportingNumberChange(pros)">
+                                <em class="add" @click="supportingNumberAdd(pros)">+</em>
+                            </span>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div class="price_grade">
+                            <span class="bold">￥</span><i :class="'icon mIcon i'+pros.priceGrade"></i>
+                        </div>
+                    </template>
+                </div>
+                <div class="list-tags">
+                    <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                        <div class="price_text_tag clear">
+                            <p class="couponTag" v-if="pros.couponsLogo">优惠券</p>
+                            <template v-if="pros.svipProductFlag === 1">
+                                <div class="svip-tag">
+                                    <div class="svip-icon">SVIP</div>
+                                    <template v-if="showVipPriceTag(pros)">
+                                        <div class="svip-price">
+                                            <span v-html="pros.svipPriceTag"></span>
+                                        </div>
+                                    </template>
+                                </div>
+                            </template>
+                            <template v-else>
+                                <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}
+                                    <span v-if="pros.priceFlag != 1 && PromotionsFormat(pros.promotions)">:￥{{pros.price | NumFormat}}</span>
+                                </p>
+                            </template>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div class="price_text_tag">
+                            <p class="couponTag" v-if="pros.couponsLogo">优惠券</p>
+                            <template v-if="pros.svipProductFlag === 1">
+                                <div class="svip-tag">
+                                    <div class="svip-icon">SVIP</div>
+                                </div>
+                            </template>
+                            <template v-else>
+                                <p class="listTag" v-if="pros.actStatus==1">{{p.promotions.name}}</p>
+                            </template>
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="supporting-submit">
+        <div class="supporting-submit-total">
+            <p>共<span class="ore">{{ checkedNum }}</span>件商品</p>
+            <p>合计<span class="red">￥{{ totalPrice | NumFormat }}元</span></p>
+        </div>
+        <div class="supporting-submit-button">
+            <div class="btn add" @click="handleSupportingSubmit('add')">加入购物车</div>
+            <div class="btn buy" @click="handleSupportingSubmit('buy')">立即购买</div>
+        </div>
+    </div>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/product/product-supporting.js(v=${version})}"></script>
+</body>
+</html>