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

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) &&  _self.defaultSupportingList.length>0){
+                    if(_self.userId == 0 || _self.priceObj.userIdentity == 2 || _self.priceObj.userIdentity == 4){
                         _self.isShowSupportingList = true;
                     }
                 }

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

@@ -1,6 +1,7 @@
 var supporting = new Vue({
     el: "#supporting",
     data: {
+        listLoading: true,
         showProduct: false,
         productId: 0,
         userId: 0,
@@ -38,6 +39,7 @@ var supporting = new Vue({
                         if(_self.supportingList.length > 0 ){
                             _self.isShowMoreButton = true;
                         }
+                        _self.listLoading = false;
                     }else{
                         _self.supportingList = [];
                     }

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

@@ -259,7 +259,7 @@
             </div>
         </div>
         <!--配套商品区域-->
-        <div class="wrap" v-if="isShowSupportingList">
+        <div class="wrap" v-if="isShowSupportingList && defaultSupportingList.length>0">
             <div class="product-supporting">
                 <!--PC-->
                 <template v-if="isPC">
@@ -387,13 +387,13 @@
                 <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'">
+                        <a :href="'/product/product-supporting.html?productId='+productId">
+                            <div class="product-supporting-list" v-for="(pros,index) in defaultSupportingList" :key="index" v-if="index<3">
                                 <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>
+                            </div>
+                            <div class="product-supporting-more">
+                                <i class="icon mIcon"></i>
+                            </div>
                         </a>
                     </div>
                 </template>

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

@@ -13,109 +13,114 @@
 
 <!-- 购物车列表 -->
 <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 v-if="listLoading" class="loading">
+        <img src="/img/base/loading.gif">
     </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 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">
+    <!--列表-->
+    <template v-else>
+        <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 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>
+        <div class="supporting-content">
+            <div class="supporting-list" v-for="(pros,index) in supportingList" :key="index">
+                <div class="list-checked"  @click="checkedSoperv(pros)">
+                    <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">
+                </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>
-                            </template>
-                            <!--机构价仅会员可见 && 用户是普通机构-->
-                            <div class="main_price_unde" v-else-if="pros.priceFlag==2 && GLOBAL_USER_IDENTITY === 4">
-                                ￥会员可见
+                                <!--供应商除自己的商品外，也显示价格等级-->
+                                <div class="price_grade" v-else><span class="bold">￥</span><i :class="'icon mIcon i'+pros.priceGrade"></i></div>
                             </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" v-if="!disabledChecked(pros)">
+                            <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)">
                                 <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>
+                        </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>
-    <div class="supporting-submit">
-        <div class="supporting-submit-total">
-            <p>共<span class="ore">{{ totalNumber }}</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 class="supporting-submit">
+            <div class="supporting-submit-total">
+                <p>共<span class="ore">{{ totalNumber }}</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>
 </div>
 <!-- 引入底部 -->
 <template th:replace="components/foot-link"></template>