list search

@@ -23,11 +23,33 @@ const timeFormat = (time) => {
 
 
 const zeroBuy = {
 const zeroBuy = {
     zeroBuyList(req, res, next) {
     zeroBuyList(req, res, next) {
+        let params = req.query;
+
+        const statusList = [
+            {name: '全部', status: ''},
+            {name: '关闭', status: 0},
+            {name: '开启', status: 1},
+            {name: '已开奖', status: 2},
+        ];
+
         req.ctx(ActivityModel).getZerobuyList(req.query).then(result => {
         req.ctx(ActivityModel).getZerobuyList(req.query).then(result => {
+            _.forEach(statusList, value => {
+                if (+params.status === value.status) {
+                    value.active = true;
+                }
+            });
+
+            if (!_.find(statusList, 'active')) {
+                statusList[0].active = true;
+            }
+
             res.render('activity/zero-buy-list', Object.assign(result, {
             res.render('activity/zero-buy-list', Object.assign(result, {
                 bodyClass: 'nav-md',
                 bodyClass: 'nav-md',
                 module: 'admin',
                 module: 'admin',
-                page: 'zero-buy'
+                page: 'zero-buy',
+                qsQuery: params.query,
+                qsStatus: params.status,
+                statusList
             }));
             }));
         }).catch(next);
         }).catch(next);
     },
     },

@@ -395,17 +395,31 @@ class AdminModel extends global.yoho.BaseModel {
         const pageSize = 10;
         const pageSize = 10;
         const page = parseInt(params.page, 10) || 1;
         const page = parseInt(params.page, 10) || 1;
 
 
+        let where = ['act_id = :actId'];
+
+        if (params.query) {
+            where.push('name like :query');
+        }
+
+        if (!_.isNaN(+params.status)) {
+            where.push('status = :status');
+        }
+
         return Promise.all([
         return Promise.all([
             mysqlCli.query(`select * from ${TABLE_ACT_PRIZE_PRODUCT}
             mysqlCli.query(`select * from ${TABLE_ACT_PRIZE_PRODUCT}
-                where act_id = :actId order by id desc
+                where ${where.join(' and ')} order by id desc
                 limit :start,:end`, {
                 limit :start,:end`, {
                     actId,
                     actId,
                     start: (page - 1) * pageSize,
                     start: (page - 1) * pageSize,
-                    end: page * pageSize
+                    end: page * pageSize,
+                    query: `%${params.query}%`,
+                    status: params.status
                 }),
                 }),
             mysqlCli.query(`select count(*) as total from ${TABLE_ACT_PRIZE_PRODUCT}
             mysqlCli.query(`select count(*) as total from ${TABLE_ACT_PRIZE_PRODUCT}
-                where act_id = :actId`, {
-                    actId
+                where ${where.join(' and ')}`, {
+                    actId,
+                    query: `%${params.query}%`,
+                    status: params.status
                 }),
                 }),
         ]).then(result => {
         ]).then(result => {
             let resData = {};
             let resData = {};

@@ -5,21 +5,24 @@
             <div>
             <div>
                 <a href="/admin/activity/zerobuy/edit" class="btn btn-primary">创建抽奖活动</a>
                 <a href="/admin/activity/zerobuy/edit" class="btn btn-primary">创建抽奖活动</a>
                 <div class="clearfix"></div>
                 <div class="clearfix"></div>
-{{!--
-                <input type="text" class="form-control" aria-label="...">
-                <div class="btn-group">
-                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">全部 <span class="caret"></span></button>
-                    <ul class="dropdown-menu">
-                        <li><a href="#">关闭</a></li>
-                        <li><a href="#">开启</a></li>
-                        <li><a href="#">已开奖</a></li>
-                    </ul>
-                </div>
-
-                <button type="button" class="btn btn-primary">筛选</button>
-                <button type="button" class="btn btn-primary">全部</button> --}}
-
 
 
+                <div class="search-wrap">
+                    <input type="text" id="search-key" class="form-control" value="{{qsQuery}}">
+                    <div class="btn-group">
+                        <button type="button" id="status-switch" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-status="{{qsStatus}}"><span class="btn-text">
+                            {{# statusList}}
+                                {{#if active}}{{name}}{{/if}}
+                            {{/ statusList}}
+                        </span> <span class="caret"></span></button>
+                        <ul class="dropdown-menu">
+                            {{# statusList}}
+                                <li><a href="javascript:;" class="status-switch" data-status="{{status}}">{{name}}</a></li>
+                            {{/ statusList}}
+                        </ul>
+                    </div>
+                    <button type="button" id="search-btn" class="btn btn-primary">筛选</button>
+                    <a href="/admin/activity/zerobuy" class="btn btn-primary">全部</a>
+                </div>
             </div>
             </div>
 
 
             <table class="table table-bordered">
             <table class="table table-bordered">
@@ -55,6 +58,11 @@
                             </td>
                             </td>
                         </tr>
                         </tr>
                     {{/each}}
                     {{/each}}
+                    {{#unless list}}
+                        <tr>
+                            <td class="text-center" colspan="8">暂无数据</td>
+                        </tr>
+                    {{/unless}}
                 </tbody>
                 </tbody>
             </table>
             </table>
             <div class="table-pagination article-pagination pull-right">
             <div class="table-pagination article-pagination pull-right">

@@ -6,6 +6,32 @@ const $alert = $('#alert-modal');
 const $confirm = $('#confirm-modal');
 const $confirm = $('#confirm-modal');
 
 
 function bindListPageEvent() {
 function bindListPageEvent() {
+    const $searchKey = $('#search-key');
+    const $statusSwitch = $('#status-switch');
+
+    const searchFn = function() {
+        let val = $searchKey.val();
+        let status = $statusSwitch.data('status');
+
+        let qs = [];
+
+        if (val) {
+            qs.push(val ? 'query=' + val : '');
+        }
+
+        if (!_.isNaN(+status)) {
+            qs.push('status=' + status);
+        }
+
+        location.href = `?${qs.join('&')}`;
+    };
+
+    const statusFn = function() {
+        let $this = $(this);
+
+        $statusSwitch.data('status', $this.data('status')).children('.btn-text').text($this.text());
+    }
+
     const editFn = function() {
     const editFn = function() {
         window.open('/admin/activity/zerobuy/edit?id=' +
         window.open('/admin/activity/zerobuy/edit?id=' +
             $(this).data('id'), '_blank');
             $(this).data('id'), '_blank');
@@ -52,6 +78,9 @@ function bindListPageEvent() {
         });
         });
     };
     };
 
 
+    $('#search-btn').on('click', searchFn);
+    $('.status-switch').on('click', statusFn);
+
     $('.btn-edit').on('click', editFn);
     $('.btn-edit').on('click', editFn);
     $('.btn-switch-open').on('click', switchFn);
     $('.btn-switch-open').on('click', switchFn);
     $('.btn-switch-close').on('click', switchFn);
     $('.btn-switch-close').on('click', switchFn);

 @import '~bootstrap-daterangepicker';
 @import '~bootstrap-daterangepicker';
 
 
+.search-wrap {
+    padding-bottom: 20px;
+}
+
+.search-wrap > * {
+    display: inline-block;
+    max-width: 50%;
+    vertical-align: middle;
+    margin-bottom: 0;
+    margin-right: 20px;
+}
+
 .cover-img {
 .cover-img {
     width: 160px;
     width: 160px;
 }
 }