商品详情配套商品显示控制

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

@@ -90,6 +90,7 @@ li{list-style:none;}
 .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.active{background-color: #F3F7FE;}
 .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;}

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

@@ -235,7 +235,7 @@ var productDetail = new Vue({
                         _self.promotions = response.data.promotions;
                         _self.promotionsId = response.data.promotions.id;
                     }
-                    if(_self.userId == 0 || _self.priceObj.userIdentity == 2 || _self.priceObj.userIdentity == 4){
+                    if((_self.userId == 0 || _self.priceObj.userIdentity == 2 || _self.priceObj.userIdentity == 4) &&  _self.defaultSupportingList.length>0){
                         _self.isShowSupportingList = true;
                     }
                 }

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

@@ -274,14 +274,14 @@
                             <p class="td-6">选择</p>
                         </div>
                         <div class="product-supporting-pro">
-                            <div class="product-supporting-list" v-for="pros in defaultSupportingList">
+                            <div class="product-supporting-list" v-for="(pros,index) in defaultSupportingList" :class="index == 0 ? 'active' : ''">
                                 <div class="tr tr-1">
-                                    <a :href="'/product-'+pros.productId+'.html'">
+                                    <a :href="'/product-'+pros.productId+'.html'" target="_blank">
                                         <img :src="pros.image" :alt="pros.name">
                                     </a>
                                 </div>
                                 <div class="tr tr-2">
-                                    <a :href="'/product-'+pros.productId+'.html'">
+                                    <a :href="'/product-'+pros.productId+'.html'" target="_blank">
                                         <p v-html="pros.name"></p>
                                     </a>
                                 </div>