商品详情

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

@@ -214,6 +214,7 @@ var productList = new Vue({
                 }
                 _self.isAllcheckedBrand = false;
                 _self.checkedBrandLength = _self.checkedBrandList.length;
+                _self.params.brandIds = this.checkedBrandList.join(',');
             }else{
                 window.location.href =  '/product/list.html?keyword=' + encodeURIComponent(this.params.keyword) +
                     '&bpn=' + brand.id + '&pro=' + this.params.promotionFlag +
@@ -241,7 +242,6 @@ var productList = new Vue({
             }
             _self.isAllcheckedBrand = false;
             _self.checkedBrandLength = _self.checkedBrandList.length;
-            _self.params.brandIds = this.checkedBrandList.join(',');
         },
         choiceBrandAll:function(){
             // 点击选择全部品牌

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

@@ -12,7 +12,7 @@
 <template th:replace="components/header"></template>
 
 <!-- 商品列表 -->
-<div id="productList">
+<div id="productList" v-cloak>
     <!-- 面包屑 -->
     <div v-if="isPC && listData && listData.length>0" class="crumbs">
         <div class="search-text">
@@ -30,117 +30,117 @@
         <img src="/img/base/loading.gif">
     </div>
     <template v-else>
-        <!--数据为空-->
-        <div v-if="isListEmpty" class="empty">
-            <img src="/img/common/empty.png">
-            <div class="msg">
-                <p>暂未找到你搜索的商品，去<a href="/">商城</a>，逛逛吧~</p>
+        <!--品牌选择-->
+        <template v-if="isPC">
+            <div class="product-brand clear">
+                <div class="product-brand-name" :class="isShowAllBrands ? 'show' : ''">
+                    <p class="title">品牌</p>
+                </div>
+                <div class="product-brand-list" :class="isShowAllBrands ? 'show' : ''">
+                    <div class="brand-list" v-if="!isShowAllBrandsButton" @click="choiceBrandAllHref" :class="hrefBrandId ? '' : 'checked'"><a href="javascript:void(0)">全部</a></div>
+                    <div class="brand-list" @click="choiceBrandHref(brand, index)" v-for="(brand,index) in brandLists"
+                         :key="index" :class="brand.isChecked ? 'checked' : ''">
+                        <a href="javascript:void(0)" :title="brand.name" v-html="brand.name"></a>
+                    </div>
+                </div>
+                <div class="product-brand-oper" v-if="!isShowAllBrandsButton">
+                    <div class="product-brand-more" v-if="defaultBrandLists.length>8" :class="isShowAllBrands ? 'show' : ''"
+                         @click="showMoreItem">{{
+                        isShowAllBrands ? '收起' : '更多' }} <i class="icon mIcon"></i></div>
+                    <div class="product-brand-add" @click="showMoreItemCheckedAll">+多选</div>
+                </div>
+                <div class="product-brand-button" v-if="isShowAllBrandsButton">
+                    <div class="brand-button">
+                        <div class="btn confirm" :class="checkedBrandList.length>0 ? '' : 'disabled'" @click="handleConfirm">确定</div>
+                        <div class="btn cancel" @click="handleCancel">取消</div>
+                    </div>
+                </div>
             </div>
-        </div>
+        </template>
         <template v-else>
-            <!--品牌选择-->
-            <template v-if="isPC">
+            <div class="product-brand-fiexd" v-if="isProductScreen">
                 <div class="product-brand clear">
+                    <div class="product-screen">
+                        <div class="sortBox-new" @click="hanldCheckedActivi">
+                            <span>促销商品</span>
+                            <span class="coll-checked" :class="[isActiviChecked ? 'checked': '']"></span>
+                        </div>
+                        <div class="sortBox-new" @click="hanldCheckedNews">
+                            <span>新品</span>
+                            <span class="coll-checked" :class="[isNewsChecked ? 'checked': '']"></span>
+                        </div>
+                    </div>
                     <div class="product-brand-name" :class="isShowAllBrands ? 'show' : ''">
                         <p class="title">品牌</p>
+                        <p v-if="!isPC" class="num">已选中<span>{{ checkedBrandLength }}</span>个品牌</p>
                     </div>
                     <div class="product-brand-list" :class="isShowAllBrands ? 'show' : ''">
-                        <div class="brand-list" v-if="!isShowAllBrandsButton" @click="choiceBrandAllHref" :class="hrefBrandId ? '' : 'checked'"><a href="javascript:void(0)">全部</a></div>
-                        <div class="brand-list" @click="choiceBrandHref(brand, index)" v-for="(brand,index) in brandLists"
-                             :key="index" :class="brand.isChecked ? 'checked' : ''">
+                        <div class="brand-list" @click="choiceBrandAll" :class="isAllcheckedBrand ? 'checked' : ''"><a href="javascript:void(0)">全部</a></div>
+                        <div class="brand-list" v-for="(brand,index) in brandLists" :key="index"
+                             @click="choiceBrand(brand, index)" :class="brand.isChecked ? 'checked' : ''">
                             <a href="javascript:void(0)" :title="brand.name" v-html="brand.name"></a>
                         </div>
                     </div>
-                    <div class="product-brand-oper" v-if="!isShowAllBrandsButton">
-                        <div class="product-brand-more" v-if="defaultBrandLists.length>8" :class="isShowAllBrands ? 'show' : ''"
-                             @click="showMoreItem">{{
-                            isShowAllBrands ? '收起' : '更多' }} <i class="icon mIcon"></i></div>
-                        <div class="product-brand-add" @click="showMoreItemCheckedAll">+多选</div>
-                    </div>
-                    <div class="product-brand-button" v-if="isShowAllBrandsButton">
-                        <div class="brand-button">
-                            <div class="btn confirm" :class="checkedBrandList.length>0 ? '' : 'disabled'" @click="handleConfirm">确定</div>
-                            <div class="btn cancel" @click="handleCancel">取消</div>
-                        </div>
+                    <div class="product-brand-more" v-if="defaultBrandLists.length>8" :class="isShowAllBrands ? 'show' : ''" @click="showMoreItem">{{
+                        isShowAllBrands ? '收起' : '查看全部' }} <i
+                                class="icon mIcon"></i></div>
+                    <div class="product-screen-btn" @click="handleConfirmScreen">
+                        <div class="sub-button">确定</div>
                     </div>
                 </div>
-            </template>
-            <template v-else>
-                <div class="product-brand-fiexd" v-if="isProductScreen">
-                    <div class="product-brand clear">
-                        <div class="product-screen">
-                            <div class="sortBox-new" @click="hanldCheckedActivi">
-                                <span>促销商品</span>
-                                <span class="coll-checked" :class="[isActiviChecked ? 'checked': '']"></span>
-                            </div>
-                            <div class="sortBox-new" @click="hanldCheckedNews">
-                                <span>新品</span>
-                                <span class="coll-checked" :class="[isNewsChecked ? 'checked': '']"></span>
-                            </div>
-                        </div>
-                        <div class="product-brand-name" :class="isShowAllBrands ? 'show' : ''">
-                            <p class="title">品牌</p>
-                            <p v-if="!isPC" class="num">已选中<span>{{ checkedBrandLength }}</span>个品牌</p>
-                        </div>
-                        <div class="product-brand-list" :class="isShowAllBrands ? 'show' : ''">
-                            <div class="brand-list" @click="choiceBrandAll" :class="isAllcheckedBrand ? 'checked' : ''"><a href="javascript:void(0)">全部</a></div>
-                            <div class="brand-list" v-for="(brand,index) in brandLists" :key="index"
-                                 @click="choiceBrand(brand, index)" :class="brand.isChecked ? 'checked' : ''">
-                                <a href="javascript:void(0)" :title="brand.name" v-html="brand.name"></a>
-                            </div>
-                        </div>
-                        <div class="product-brand-more" v-if="defaultBrandLists.length>8" :class="isShowAllBrands ? 'show' : ''" @click="showMoreItem">{{
-                            isShowAllBrands ? '收起' : '查看全部' }} <i
-                                    class="icon mIcon"></i></div>
-                        <div class="product-screen-btn" @click="handleConfirmScreen">
-                            <div class="sub-button">确定</div>
-                        </div>
-                    </div>
+            </div>
+        </template>
+        <!--排序-->
+        <div class="sortBox">
+            <ul class="mfc clear">
+                <li :class="{'on':params.sortField == ''}" @click="toSortList('',1)">综合</li>
+                <template>
+                    <li v-if="params.sortField == 'sales' && params.sortType == 1" class="down"
+                        @click="toSortList('sales',0)"><span>销量</span></li>
+                    <li v-else-if="params.sortField == 'sales' && params.sortType == 0" class="up"
+                        @click="toSortList('sales',1)"><span>销量</span></li>
+                    <li v-else @click="toSortList('sales',0)"><span>销量</span></li>
+                </template>
+                <template>
+                    <li v-if="params.sortField == 'favorite' && params.sortType == 1" class="down"
+                        @click="toSortList('favorite',0)"><span>人气</span></li>
+                    <li v-else-if="params.sortField == 'favorite' && params.sortType == 0" class="up"
+                        @click="toSortList('favorite',1)"><span>人气</span></li>
+                    <li v-else @click="toSortList('favorite',0)"><span>人气</span></li>
+                </template>
+                <template>
+                    <li v-if="params.sortField == 'price' && params.sortType == 1" class="down"
+                        @click="toSortList('price',0)"><span>价格</span></li>
+                    <li v-else-if="params.sortField == 'price' && params.sortType == 0" class="up"
+                        @click="toSortList('price',1)"><span>价格</span></li>
+                    <li v-else @click="toSortList('price',0)"><span>价格</span></li>
+                </template>
+                <template v-if="!isPC">
+                    <li class="screen" @click="showIsProductScreen">
+                        <span>筛选</span>
+                        <i class="mIcon"></i>
+                    </li>
+                </template>
+            </ul>
+            <div class="sortBox-checked" v-if="isPC">
+                <div class="sortBox-new" @click="hanldCheckedActiviHref">
+                    <span class="coll-checked" :class="[isActiviChecked ? 'checked': '']"></span>
+                    <span>促销商品</span>
                 </div>
-            </template>
-            <!--排序-->
-            <div class="sortBox">
-                <ul class="mfc clear">
-                    <li :class="{'on':params.sortField == ''}" @click="toSortList('',1)">综合</li>
-                    <template>
-                        <li v-if="params.sortField == 'sales' && params.sortType == 1" class="down"
-                            @click="toSortList('sales',0)"><span>销量</span></li>
-                        <li v-else-if="params.sortField == 'sales' && params.sortType == 0" class="up"
-                            @click="toSortList('sales',1)"><span>销量</span></li>
-                        <li v-else @click="toSortList('sales',0)"><span>销量</span></li>
-                    </template>
-                    <template>
-                        <li v-if="params.sortField == 'favorite' && params.sortType == 1" class="down"
-                            @click="toSortList('favorite',0)"><span>人气</span></li>
-                        <li v-else-if="params.sortField == 'favorite' && params.sortType == 0" class="up"
-                            @click="toSortList('favorite',1)"><span>人气</span></li>
-                        <li v-else @click="toSortList('favorite',0)"><span>人气</span></li>
-                    </template>
-                    <template>
-                        <li v-if="params.sortField == 'price' && params.sortType == 1" class="down"
-                            @click="toSortList('price',0)"><span>价格</span></li>
-                        <li v-else-if="params.sortField == 'price' && params.sortType == 0" class="up"
-                            @click="toSortList('price',1)"><span>价格</span></li>
-                        <li v-else @click="toSortList('price',0)"><span>价格</span></li>
-                    </template>
-                    <template v-if="!isPC">
-                        <li class="screen" @click="showIsProductScreen">
-                            <span>筛选</span>
-                            <i class="mIcon"></i>
-                        </li>
-                    </template>
-                </ul>
-                <div class="sortBox-checked" v-if="isPC">
-                    <div class="sortBox-new" @click="hanldCheckedActiviHref">
-                        <span class="coll-checked" :class="[isActiviChecked ? 'checked': '']"></span>
-                        <span>促销商品</span>
-                    </div>
-                    <div class="sortBox-new" @click="hanldCheckedNewsHref">
-                        <span class="coll-checked" :class="[isNewsChecked ? 'checked': '']"></span>
-                        <span>新品</span>
-                    </div>
+                <div class="sortBox-new" @click="hanldCheckedNewsHref">
+                    <span class="coll-checked" :class="[isNewsChecked ? 'checked': '']"></span>
+                    <span>新品</span>
                 </div>
             </div>
+        </div>
+        <!--数据为空-->
+        <div v-if="isListEmpty" class="empty">
+            <img src="/img/common/empty.png">
+            <div class="msg">
+                <p>暂未找到你搜索的商品，去<a href="/">商城</a>，逛逛吧~</p>
+            </div>
+        </div>
+        <template v-else>
             <!--商品列表-->
             <ul class="productList clear mfw">
                 <li class="productItem " v-for="p in listData">