tp5 + html 切换列表 展示对应商品

foreach 自己一直很迷糊，感觉这段很很受用，记录起来，

欢迎补充呐~~~~~~

html：

<div class="row">
    <div class="col-md-3 col-sm-4 col-xs-12">
        <div class="panel panel-primary ">
            <div class="panel-heading text-center">
                应用分类列表
            </div>
            <div class="panel-body">
                {volist name="category" id="v"}
                <dl>
                    <dt style="font-size:16px;">{$v.cate_name}</dt>
                    {volist name="v.child" id="v"}
                    <a href="{:url('index/list',['cate'=>$v.id])}" class="btn btn-default nav-btn">{$v.cate_name}</a>
                    {/volist}
                    <hr>
                </dl>
                {/volist}
            </div>

        </div>
    </div>
    <div class="col-md-9 col-sm-8 col-xs-12">
        <div class="container">
            <div class="row">
                <div class="col-md-9 col-sm-8 col-xs-12">
                    <div class="panel panel-default">
                        <div class="table-responsive">
                            <table id="MyStretchGrid" class="table table-striped datagrid m-b-sm">
                                <tr>
                                    <th style="border-top: 0">
                                        <a href="new.html" class="shop-sort active">默认</a>
                                        <a id="sort-price" href="new-order=sell_desc.html" class="shop-sort ">
                                            畅销
                                        </a>
                                        <a id="sort-price" href="new-order=last_edit_time_desc.html" class="shop-sort ">
                                        更新时间
                                        </a>
                                        <a id="sort-price" href="new-order=price_desc.html" class="shop-sort ">
                                            价格        
                                        </a>
                                    </th>
                                </tr>
                                <tfoot>
                                </tfoot>
                            </table>
                        </div>

                        <div class="panel-body">
                            {volist name="app" id='v'}
                            <li class="col-xs-12 col-md-6 col-lg-4">
                                <div class="apply-list radius">
                                    <a target="_blank"
                                       href="application-detail-application_id=39.html">
                                        <div class="media">
                                            <div class="media-body">
                                                <img src="{$v.logo}"
                                                     class="pull-left shop-list-ico radius">
                                                <div class="search-list-content" style="height: 45px;">
                                                    <span class="search-list-install">0人近期下载</span>
                                                    <span class="search-list-install text-overflow"
                                                          style="white-space:nowrap;">价格：{$v.price}</span>
                                                    <!--style="white-space:nowrap;">价格：18000.00{$v.price}</span>-->
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                    <p class="apply-list-name text-overflow">{$v.name}</p>
                                    <p class="apply-list-safe">认证：
                                        <a href="new-s=-shop-index-new&amp;p=1.html#">官方认证</a>
                                    </p>
                                    <p class="apply-list-support">支持：        
                                        <span><img src="__STATIC__/home/images/linux.png"   class="list_support_logo">{$v.system}</span>
                                    </p>
                                    <p class="apply-list-support">基于：
                                        <span><img src="http://www.test.com/img/logo.png"  class="list_support_logo">&nbsp;&nbsp;{$v.platform}</span>
                                        &nbsp;&nbsp;&nbsp;
                                    </p>
                                </div>
                            </li>
                            {/volist}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

 controller：

public function list($cate=''){
    $app=Db::name('table')->where('category_id','like',"%$cate%")->select();
    foreach ($app as $k => $v){
        $vv=$v;
           $typeArr=getAppType();
        if($app[$k]['system'] ==$v['system']){
               $arr=json_decode($v['system']);
               if(is_array($arr) && !empty($arr)){
                   foreach ($arr as $v){
                      foreach ($typeArr['system'] as $v6){
                          if($v6['id']==$v){
                              unset($app[$k]['system']);
                              $app[$k]['system']='';
                              $app[$k]['system'].=$v6['name'];
                          }
                      }
                   }
               }
           }
           if($app[$k]['platform'] == $vv['platform']){
           $arr=json_decode($vv['platform']);
           if(is_array($arr) && !empty($arr)){
               foreach ($arr as $v){
                   foreach ($typeArr['platform'] as $v6){
                       if($v6['id']==$v){
                           unset($app[$k]['platform']);
                           $app[$k]['platform']='';
                           $app[$k]['platform'].=$v6['name'];
                       }
                   }
               }
           }
       }
   }
       $this->assign('app',$app);
    return view();
   }

common.php     (getApptype方法)

function getAppType(){
    $type=[
        'system'=>[
            '0'=>['name'=>'windows','id'=>1],
            '1'=>['name'=>'linux','id'=>2]
        ],

        'platform'=>[
            '0'=>['name'=>'UC','id'=>1],
            '1'=>['name'=>'UC2','id'=>2],
        ]
    ];
    return $type;
}

效果展示：