product list empty state

@@ -18,6 +18,12 @@
         </ul>
         <p class="cardlist--loading text-center" v-show="inLoading">正在加载...</p>
         <p class="cardlist--end text-center" v-show="atEnd ">--End--</p>
+        
+        <div class="empty-tip" v-show="empty">
+            <i class="icon icon-search"></i>
+            <p class="empty-tip-cn">未找到相关商品</p>
+            <p class="empty-tip-en">Did not find the relevant goods</p>
+        </div>
     </div>
 </template>
 <script>
@@ -36,7 +42,8 @@
             disableFetch: Boolean,
 
             // 数据
-            data: Array
+            data: Array,
+            empty: Boolean
         },
         computed: {
             // 空列表: data.length === 0
@@ -110,4 +117,25 @@
         }
     }
 
+
+    .empty-tip {
+        margin-top: 380px;
+        color: #b0b0b0;
+        text-align: center;
+        .icon-search {
+            display: inline-block;
+            font-size: 200px;
+            margin-bottom: 56px;
+        }
+    }
+
+    .empty-tip-cn {
+        font-size: 34px;
+        margin-bottom: 30px;
+    }
+
+    .empty-tip-en {
+        font-size: 20px;
+    }
+
 </style>

@@ -3,8 +3,8 @@
         <cheader :title="sortName" class="list-header">
             <i class="icon icon-filter" slot="right" @click="openFilter"></i>
         </cheader>
-        <order :config="orderConfig" :val="order"></order>
-        <List :data="productList"></List>
+        <order :config="orderConfig" :val="order" V-if="!empty"></order>
+        <List :data="productList" :empty="empty"></List>
         <Filter :config="filterConfig" v-ref:filter></Filter>
     </div>
 </template>
@@ -49,6 +49,11 @@
                 inSearching: false // 请求中
             };
         },
+        computed: {
+            empty: function() {
+                return this.page !== 0 && !this.productList.length;
+            }
+        },
         components: {
             cheader,
             list,
@@ -60,7 +65,6 @@
                 const self = this;
                 const nextPage = this.page + 1;
 
-                console.log(nextPage);
                 if (this.inSearching) {
                     return;
                 }
@@ -98,10 +102,6 @@
                 this.$refs.filter.isVisible = true;
             },
 
-            // openFilterSub: function(classify) {
-            //     console.log('TODO: open filter sub', classify);
-            // },
-
             /**
              *  清空数据（page=0） 重新搜索
              */

 <template>
     <div>
-        <template v-if="productList.length">
-            <Order :config="orderConfig" :val="order">
-            </Order>
-            <List :data="productList"></List>
-        </template>
-        <div class="empty-tip" v-if="empty">
-            <i class="icon icon-search"></i>
-            <p class="empty-tip-cn">未找到相关商品</p>
-            <p class="empty-tip-en">Did not find the relevant goods</p>
-        </div>
+        <Order :config="orderConfig" :val="order" v-if="!empty">
+        </Order>
+        <List :data="productList" :empty="empty"></List>
     </div>
 </template>
 <script>
@@ -133,24 +126,4 @@
 
 </script>
 <style>
-    .empty-tip {
-        margin-top: 380px;
-        color: #b0b0b0;
-        text-align: center;
-        .icon-search {
-            display: inline-block;
-            font-size: 200px;
-            margin-bottom: 56px;
-        }
-    }
-
-    .empty-tip-cn {
-        font-size: 34px;
-        margin-bottom: 30px;
-    }
-
-    .empty-tip-en {
-        font-size: 20px;
-    }
-
 </style>