Authored by yyq

list search

... ... @@ -23,11 +23,33 @@ const timeFormat = (time) => {
const zeroBuy = {
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 => {
_.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, {
bodyClass: 'nav-md',
module: 'admin',
page: 'zero-buy'
page: 'zero-buy',
qsQuery: params.query,
qsStatus: params.status,
statusList
}));
}).catch(next);
},
... ...
... ... @@ -395,17 +395,31 @@ class AdminModel extends global.yoho.BaseModel {
const pageSize = 10;
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([
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`, {
actId,
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}
where act_id = :actId`, {
actId
where ${where.join(' and ')}`, {
actId,
query: `%${params.query}%`,
status: params.status
}),
]).then(result => {
let resData = {};
... ...
... ... @@ -5,21 +5,24 @@
<div>
<a href="/admin/activity/zerobuy/edit" class="btn btn-primary">创建抽奖活动</a>
<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>
<table class="table table-bordered">
... ... @@ -55,6 +58,11 @@
</td>
</tr>
{{/each}}
{{#unless list}}
<tr>
<td class="text-center" colspan="8">暂无数据</td>
</tr>
{{/unless}}
</tbody>
</table>
<div class="table-pagination article-pagination pull-right">
... ...
... ... @@ -6,6 +6,32 @@ const $alert = $('#alert-modal');
const $confirm = $('#confirm-modal');
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() {
window.open('/admin/activity/zerobuy/edit?id=' +
$(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-switch-open').on('click', switchFn);
$('.btn-switch-close').on('click', switchFn);
... ...
@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 {
width: 160px;
}
... ...