红人

@@ -23,14 +23,21 @@
             </filter-item>
         </layout-filter>
 
-        <layout-action>
+        <layout-action v-show="!nullData">
             <Button type="error" @click="addSellPool">添加到推广池</Button>
+            <span class="add-num">已添加到推广池：{{num}}</span>
         </layout-action>
 
         <layout-list>
-            <Table border :columns="tableCols" :data="tableData" @on-selection-change="changeProductStr"></Table>
+            <Table border :columns="tableCols" :data="tableData" @on-selection-change="changeProductStr" v-show="!nullData"></Table>
             <Page :total="pageData.total" :current="pageData.current"
-                        @on-change="pageChange" :page-size="10" show-total></Page>
+                        @on-change="pageChange" :page-size="10" show-total v-show="!nullData"></Page>
+
+            <div class="null-data" v-show="nullData">
+                <p class="red">请选择查询条件，查找你想要推广的商品。.......</p>
+                <p class="red">*注：品牌或品类筛选必须选择其中一个。</p>
+                <p><Icon type="android-arrow-forward"></Icon><a href="//www.yohobuy.com/boys-brands/">品牌一览</a></p>
+            </div>
         </layout-list>
     </layout-body>
 </template>
@@ -44,7 +51,7 @@ import _ from 'lodash';
 export default {
     data() {
         return {
-            query: {
+            query: { 
                 poolId: null,
                 brandId: null,
                 sort: [],
@@ -55,6 +62,7 @@ export default {
                 total: 0,
                 current: 1,
             },
+            nullData: true,
             tableData: [],
             tableCols: [{
                 type: 'selection',
@@ -63,6 +71,7 @@ export default {
             }, {
                 title: 'skn',
                 key: 'productSkn',
+                width: 100,
                 align: 'center'
             }, {
                 title: '商品图片',
@@ -90,10 +99,30 @@ export default {
             }, {
                 title: '库存状态',
                 key: 'stockStatus',
-                align: 'center'
+                align: 'center',
+                width: 110,
+                renderHeader: (h, params) => {
+                    return h('div', [
+                        h('strong', params.column.title),
+                        h('Tooltip', {
+                            attrs: {
+                                placement: 'bottom-start',
+                                content: '这里指整个商品下所有颜色尺码的库存状态。具体颜色、尺码的库存明细请参考商品详情页面。'
+                            }
+                        }, [
+                            h('Icon', {
+                                props: {
+                                    type: 'android-alert'
+                                },
+                                attrs: {style: 'font-size: 16px;vertical-align: text-top; margin-left: 5px;'}
+                            })
+                        ])
+                    ]);
+                }
             }, {
                 title: '当前价格(元)',
                 key: 'currentPrice',
+                width: 110,
                 align: 'center'
             }, {
                 title: '结算比例',
@@ -119,12 +148,12 @@ export default {
                 maxSortId: _.get(this.query, 'sort[0].value') || '',
                 middleSortId: _.get(this.query, 'sort[1].value') || '',
                 smallSortId: _.get(this.query, 'sort[2].value') || '',
-                priceRangeLow: _.get(this.query, 'price[0].value') || '',
-                priceRangeHigh: _.get(this.query, 'price[1].value') || '',
+                priceRangeLow: _.get(this.query, 'price[0]') || '',
+                priceRangeHigh: _.get(this.query, 'price[1]') || '',
                 stockStatus: +this.query.stockStatus
             };
 
-            return params;
+            return _.pickBy(params, val => val);
         },
         search() {
             if (!this.query.brandId && this.query.sort.length === 0 && this.query.price.length === 0 && !this.query.stockStatus) {
@@ -142,6 +171,7 @@ export default {
                     this.tableData = _.get(ret, 'data.list', []);
                     this.pageData.total = _.get(ret, 'data.total', 0);
                     this.pageData.current = _.get(ret, 'data.page', 1);
+                    this.nullData = false;
                 } else {
                     this.$Message.error(ret.message);
                 }
@@ -187,4 +217,26 @@ export default {
 </script>
 
 <style lang="scss">
+    .ivu-table-column-center .ivu-tooltip-inner {
+        white-space: normal !important;
+    }
+
+    .add-num {
+        float: right;
+        margin-top: 15px;
+    }
+
+    .null-data {
+        width: 260px;
+        margin: 180px auto 0;
+        line-height: 30px;
+
+        .ivu-icon-android-arrow-forward {
+            margin-right: 10px;
+        }
+
+        .red {
+            color: #ed3f16;
+        }
+    }
 </style>