Showing
1 changed file
with
60 additions
and
8 deletions
@@ -23,14 +23,21 @@ | @@ -23,14 +23,21 @@ | ||
23 | </filter-item> | 23 | </filter-item> |
24 | </layout-filter> | 24 | </layout-filter> |
25 | 25 | ||
26 | - <layout-action> | 26 | + <layout-action v-show="!nullData"> |
27 | <Button type="error" @click="addSellPool">添加到推广池</Button> | 27 | <Button type="error" @click="addSellPool">添加到推广池</Button> |
28 | + <span class="add-num">已添加到推广池:{{num}}</span> | ||
28 | </layout-action> | 29 | </layout-action> |
29 | 30 | ||
30 | <layout-list> | 31 | <layout-list> |
31 | - <Table border :columns="tableCols" :data="tableData" @on-selection-change="changeProductStr"></Table> | 32 | + <Table border :columns="tableCols" :data="tableData" @on-selection-change="changeProductStr" v-show="!nullData"></Table> |
32 | <Page :total="pageData.total" :current="pageData.current" | 33 | <Page :total="pageData.total" :current="pageData.current" |
33 | - @on-change="pageChange" :page-size="10" show-total></Page> | 34 | + @on-change="pageChange" :page-size="10" show-total v-show="!nullData"></Page> |
35 | + | ||
36 | + <div class="null-data" v-show="nullData"> | ||
37 | + <p class="red">请选择查询条件,查找你想要推广的商品。.......</p> | ||
38 | + <p class="red">*注:品牌或品类筛选必须选择其中一个。</p> | ||
39 | + <p><Icon type="android-arrow-forward"></Icon><a href="//www.yohobuy.com/boys-brands/">品牌一览</a></p> | ||
40 | + </div> | ||
34 | </layout-list> | 41 | </layout-list> |
35 | </layout-body> | 42 | </layout-body> |
36 | </template> | 43 | </template> |
@@ -44,7 +51,7 @@ import _ from 'lodash'; | @@ -44,7 +51,7 @@ import _ from 'lodash'; | ||
44 | export default { | 51 | export default { |
45 | data() { | 52 | data() { |
46 | return { | 53 | return { |
47 | - query: { | 54 | + query: { |
48 | poolId: null, | 55 | poolId: null, |
49 | brandId: null, | 56 | brandId: null, |
50 | sort: [], | 57 | sort: [], |
@@ -55,6 +62,7 @@ export default { | @@ -55,6 +62,7 @@ export default { | ||
55 | total: 0, | 62 | total: 0, |
56 | current: 1, | 63 | current: 1, |
57 | }, | 64 | }, |
65 | + nullData: true, | ||
58 | tableData: [], | 66 | tableData: [], |
59 | tableCols: [{ | 67 | tableCols: [{ |
60 | type: 'selection', | 68 | type: 'selection', |
@@ -63,6 +71,7 @@ export default { | @@ -63,6 +71,7 @@ export default { | ||
63 | }, { | 71 | }, { |
64 | title: 'skn', | 72 | title: 'skn', |
65 | key: 'productSkn', | 73 | key: 'productSkn', |
74 | + width: 100, | ||
66 | align: 'center' | 75 | align: 'center' |
67 | }, { | 76 | }, { |
68 | title: '商品图片', | 77 | title: '商品图片', |
@@ -90,10 +99,30 @@ export default { | @@ -90,10 +99,30 @@ export default { | ||
90 | }, { | 99 | }, { |
91 | title: '库存状态', | 100 | title: '库存状态', |
92 | key: 'stockStatus', | 101 | key: 'stockStatus', |
93 | - align: 'center' | 102 | + align: 'center', |
103 | + width: 110, | ||
104 | + renderHeader: (h, params) => { | ||
105 | + return h('div', [ | ||
106 | + h('strong', params.column.title), | ||
107 | + h('Tooltip', { | ||
108 | + attrs: { | ||
109 | + placement: 'bottom-start', | ||
110 | + content: '这里指整个商品下所有颜色尺码的库存状态。具体颜色、尺码的库存明细请参考商品详情页面。' | ||
111 | + } | ||
112 | + }, [ | ||
113 | + h('Icon', { | ||
114 | + props: { | ||
115 | + type: 'android-alert' | ||
116 | + }, | ||
117 | + attrs: {style: 'font-size: 16px;vertical-align: text-top; margin-left: 5px;'} | ||
118 | + }) | ||
119 | + ]) | ||
120 | + ]); | ||
121 | + } | ||
94 | }, { | 122 | }, { |
95 | title: '当前价格(元)', | 123 | title: '当前价格(元)', |
96 | key: 'currentPrice', | 124 | key: 'currentPrice', |
125 | + width: 110, | ||
97 | align: 'center' | 126 | align: 'center' |
98 | }, { | 127 | }, { |
99 | title: '结算比例', | 128 | title: '结算比例', |
@@ -119,12 +148,12 @@ export default { | @@ -119,12 +148,12 @@ export default { | ||
119 | maxSortId: _.get(this.query, 'sort[0].value') || '', | 148 | maxSortId: _.get(this.query, 'sort[0].value') || '', |
120 | middleSortId: _.get(this.query, 'sort[1].value') || '', | 149 | middleSortId: _.get(this.query, 'sort[1].value') || '', |
121 | smallSortId: _.get(this.query, 'sort[2].value') || '', | 150 | smallSortId: _.get(this.query, 'sort[2].value') || '', |
122 | - priceRangeLow: _.get(this.query, 'price[0].value') || '', | ||
123 | - priceRangeHigh: _.get(this.query, 'price[1].value') || '', | 151 | + priceRangeLow: _.get(this.query, 'price[0]') || '', |
152 | + priceRangeHigh: _.get(this.query, 'price[1]') || '', | ||
124 | stockStatus: +this.query.stockStatus | 153 | stockStatus: +this.query.stockStatus |
125 | }; | 154 | }; |
126 | 155 | ||
127 | - return params; | 156 | + return _.pickBy(params, val => val); |
128 | }, | 157 | }, |
129 | search() { | 158 | search() { |
130 | if (!this.query.brandId && this.query.sort.length === 0 && this.query.price.length === 0 && !this.query.stockStatus) { | 159 | if (!this.query.brandId && this.query.sort.length === 0 && this.query.price.length === 0 && !this.query.stockStatus) { |
@@ -142,6 +171,7 @@ export default { | @@ -142,6 +171,7 @@ export default { | ||
142 | this.tableData = _.get(ret, 'data.list', []); | 171 | this.tableData = _.get(ret, 'data.list', []); |
143 | this.pageData.total = _.get(ret, 'data.total', 0); | 172 | this.pageData.total = _.get(ret, 'data.total', 0); |
144 | this.pageData.current = _.get(ret, 'data.page', 1); | 173 | this.pageData.current = _.get(ret, 'data.page', 1); |
174 | + this.nullData = false; | ||
145 | } else { | 175 | } else { |
146 | this.$Message.error(ret.message); | 176 | this.$Message.error(ret.message); |
147 | } | 177 | } |
@@ -187,4 +217,26 @@ export default { | @@ -187,4 +217,26 @@ export default { | ||
187 | </script> | 217 | </script> |
188 | 218 | ||
189 | <style lang="scss"> | 219 | <style lang="scss"> |
220 | + .ivu-table-column-center .ivu-tooltip-inner { | ||
221 | + white-space: normal !important; | ||
222 | + } | ||
223 | + | ||
224 | + .add-num { | ||
225 | + float: right; | ||
226 | + margin-top: 15px; | ||
227 | + } | ||
228 | + | ||
229 | + .null-data { | ||
230 | + width: 260px; | ||
231 | + margin: 180px auto 0; | ||
232 | + line-height: 30px; | ||
233 | + | ||
234 | + .ivu-icon-android-arrow-forward { | ||
235 | + margin-right: 10px; | ||
236 | + } | ||
237 | + | ||
238 | + .red { | ||
239 | + color: #ed3f16; | ||
240 | + } | ||
241 | + } | ||
190 | </style> | 242 | </style> |
-
Please register or login to post a comment