【TP5】对于广告分类跟搜索的解决方案

版权声明：咔咔 来自https://blog.csdn.net/fangkang7 https://blog.csdn.net/fangkang7/article/details/85323349

author：咔咔

wechat：fangkangfk

需求：点击广告分类，在点击查询，需要查询本分类下的广告

首先我们需要固定的就是样式问题

第一次进入的时候显示的是全部的广告，那么我们的全部广告就需要被点击的样式，所以我们直接就给全部广告加了一个checked

点击全部广告是不需要条件的，所有地址没有追加参数

点击其他的广告分类，带上各自在数据库的标识，然候使用参数传递给后台

同样后台也会接收这个参数，去数据库查询

由于是a链接跳转，所以我们使用addClass的方式是肯定不行的，这个时候就需要后台传递参数给前端，然候根据这个值进行判断点击的是那个

 

现在点击分类的业务处理好了，还需要处理查询时查询当下分类的数据

我们就需要在点击查询的form表单里边放置一个隐藏域，并且name值需要跟点击广告追加的参数名相同，这个隐藏域的value值，同样是不可以直接使用attr的方式添加，所以依然使用后台传递的方式

 

 

这样在点击查询的时候就会将这个条件带上

下来我们做一个测试

我们设置了俩条banner数据，但是标题不一样

 

 点击banner

查询kak

 

结果：

 

前端代码

{include file="../../../application/admin/view/public/head" /}

<style>
    .layui-badge-rim{
        margin: 0 30px;
    }

    .type{
        margin: 50px 50px 50px 10px;
        background-color: #009818;
    }

    .checked{
        background-color: #666;
    }
</style>

<form class="layui-form " method="post">

    {if condition="isset($showType)"}
    <a class="layui-btn mgl-20  type" attr="1" href="{:url('index')}"> 全部广告</a>
<a class="layui-btn mgl-20  type {if condition='$showType eq 1'} checked {/if}" attr="1" href="{:url('index')}?showType=1"> Banner广告</a>
<a class="layui-btn mgl-20  type {if condition='$showType eq 2'} checked {/if}" attr="2" href="{:url('index')}?showType=2"> 专题广告</a>
<a class="layui-btn mgl-20  type {if condition='$showType eq 3'} checked {/if}" attr="3" href="{:url('index')}?showType=3"> 详情页广告</a>
<a class="layui-btn mgl-20  type" attr="4" href="{:url('index')}"> 启动页广告</a>
    {else if}
    <a class="layui-btn mgl-20  type checked" attr="1" href="{:url('index')}"> 全部广告</a>
    <a class="layui-btn mgl-20  type" attr="1" href="{:url('index')}?showType=1"> Banner广告</a>
    <a class="layui-btn mgl-20  type " attr="2" href="{:url('index')}?showType=2"> 专题广告</a>
    <a class="layui-btn mgl-20  type " attr="3" href="{:url('index')}?showType=3"> 详情页广告</a>
    <a class="layui-btn mgl-20  type" attr="4" href="{:url('index')}"> 启动页广告</a>
    {/if}

</form>



<div class="page-container p10">

    <form class="layui-form " method="post" id="pageListForm">
        <div class="layui-input-inline w150">
            <div class="layui-btn-group">
                <a data-full="1" data-href="{:url('addBanner')}" class="layui-btn layui-btn-primary j-iframe"><i class="layui-icon">&#xe654;</i>添加广告</a>
            </div>
        </div>
        {if condition="isset($showType)"}
        <!--存放点击的类型-->
        <input type="hidden" id="showType" name="showType" value="{$showType}">

        {/if}
        <div class="layui-input-inline w150">
            <select name="vt_id" class="vt_id">
                <option value="">视频类型</option>
                {foreach name='subject' item='v'}
                {if condition="isset($param['vt_id'])"}
                <option {if condition="$param['vt_id'] eq $v['vt_id']"} selected {/if} value="{$v['vt_id']}"  >{$v['vt_name']}</option>
                {else if /}
                <option value="{$v['vt_id']}"  >{$v['vt_name']}</option>
                {/if}
                {/foreach}
            </select>
        </div>

        <div class="layui-input-inline">
            <input type="text" autocomplete="off" placeholder="请输入广告名" id="content" class="layui-input" name="b_title" value="{$param['b_title']?$param['b_title']:''}">
        </div>

        <button class="layui-btn mgl-20 .j-kaka" id="query"> 查询</button>


        <table class="layui-table" lay-size="sm">
        <thead>
            <tr >
                <th >ID</th>
                <th >标题</th>
                <th >分类</th>
                <th >对应视频名</th>
                <th >展示类型</th>
                <th >排序</th>
                <th >操作</th>
            </tr>
        </thead>
            {foreach name='bannerList' item='v'}
            <tr height="50">
                <th>{$v['b_id']}</th>
                <td>{$v['b_title']}</td>
                <td>{$v['banner_type']['vt_name']}</td>
                <td>{$v['banner_vs_video_name']['vi_title']}</td>
                {if condition="$v['b_showType'] eq 1"}
                <td>banner广告</td>
                {/if}

                {if condition="$v['b_showType'] eq 2"}
                <td>专题</td>
                {/if}

                {if condition="$v['b_showType'] eq 3"}
                <td>详情页</td>
                {/if}

                <td>{$v['b_sort']}</td>
                <td width="500">
                    <a class="layui-badge-rim j-iframe" width="100" data-full="1" data-href="{:url('editBanner?b_id='.$v.b_id)}" href="javascript:;" title="编辑">编辑</a>
                    <a class="layui-badge-rim del" data-id="{$v.b_id}" data-href="" href="javascript:;" title="删除">删除</a>
                </td>
            </tr>
            {/foreach}
        </table>
    </form>
</div>


<div id="pages" class="center"></div>

{include file="../../../application/admin/view/public/foot" /}

<script type="text/javascript">


    layui.use(['jquery',], function(args){
        var $= layui.jquery;

        $('.type').click(function () {
            var showType = $(this).attr('attr');
            alert(showType)
            $('#showType').val(showType);
        })
    });


    // 点击删除
    $(document).on('click','.del',function(){
        var that = $(this),
            href = !that.attr('data-href') ? that.attr('href') : that.attr('data-href');
        layer.confirm('删除之后无法恢复，您确定要删除吗？', {title:false, closeBtn:0}, function(index){
            if (!href) {
                layer.msg('请设置data-href参数');
                return false;
            }
            $.get(href, function(res){
                layer.msg(res.msg);
                if (res.code == 1) {
                    that.parents('tr').remove();
                }
            });
            layer.close(index);
        });
        return false;
    })


    /**
     * 更改数据顺序
     */
    layui.use('laypage', function(){
        var laypage = layui.laypage
            , layer = layui.layer,
            $ = layui.$;

        $(document).on('blur','.sort',function(){
            var that = $(this),
                b_sort = that.val();
            var b_id = that.attr('b_id');

            $.post("{:url('banner/editSort')}",{b_sort:b_sort,b_id:b_id},function(res){
                if(res == 1){
                    loadData()
                }
            });
        })
    });





</script>
</body>
</html>

后台代码：

    /**
     * banner列表
     * @return array
     */
    public function index()
    {
        $param = $this->request->param();

        $where = [];

        if(!empty($param['vt_id'])){
            $where['vt_id'] = $param['vt_id'];
        }

        if(!empty($param['b_title'])){
            $where['b_title'] = ['like',"%".$param['b_title']."%"];
        }

        if(!empty($param['showType'])){
            $where['b_showType'] = $param['showType'];
        }

        if(!empty($param['vt_id']) && !empty($param['b_targetType']) && !empty($paran['b_title'])){
            $where = '1 = 1';
        }


        // banner列表
        $bannerList = $this->bannerModel->bannerList($where);

        // 类型
        $videoTypeList = Db::name($this->videoTypeModel->tableName)->select();

        if(!empty($param)){
            $this->assign('param',$param);
        }

        if(!empty($param['showType'])){
            $this->assign('showType',$param['showType']);
        }

        $this->assign([
            'subject' => $videoTypeList,
            'bannerList' => $bannerList,
        ]);

        return $this->fetch();
    }