@{

     ViewBag.Title = "服务列表";

     Layout = "~/Areas/hahaha/Views/Shared/_Head.cshtml";

 }

 <link href="~/Scripts/layui/css/layui.css" rel="stylesheet" />

 <style>

     .up { background:url(/Content/WeiXin/images/sort-up.png) no-repeat center center; background-size:.6rem auto;}

     .down { background:url(/Content/WeiXin/images/sort-down.png) no-repeat center center; background-size:.6rem auto;}

 </style>

 <div class="wc_content">

     <div class="tabPanel">

         <ul class="clearfix productTad serviceList_u">

             <li class="hit" data-type="1"><span>服务项目</span></li>

             <li data-type="2"><span>服务人员</span></li>

         </ul>

     </div>

     <div class="panes serviceListpanes">

         <div class="pane" style="display:block">

             <div class="serviceList_box"> <a href="serviceSeach.html" class="serviceList_seach"><i></i>请输入关键词</a> </div>

             <div class="serviceList_t" id="dataContent">

             </div>

             <ul class="service_list" id="serviceData"></ul>

         </div>

     </div>

 </div>

 <script src="~/Scripts/jquery-1.10.2.min.js"></script>

 <script src="~/Scripts/layui/layui.js"></script>

 <script type="text/javascript">

     var totalPage = 2,

     pageIndex = 1,

     serviceHtml = '',

     dataType = 1,

     sort = 1,//正序or倒序

     OrderStr;//排序字段

     $(function () {

         $('.tabPanel ul li').click(function () {//切换筛选条件

             $(this).addClass('hit').siblings().removeClass('hit');

             var s =parseInt( $(this).attr('data-type'));

             if (dataType != s) {

                 dataType = s;

                 $('.list_head').remove();

                 $('#serviceData li').remove();

                 pageIndex = 1;

                 OrderStr = '';

                 setHead();

                 $('cite').click();

             }

         })

         setHead();

         loadFlow();

     })

     function setHead() {

         var scriptHtml;

         if (dataType == 1) {

             scriptHtml = $('#serviceList').html();

         } else {

             scriptHtml = $('#personList').html();

         }

         $('#dataContent').after(scriptHtml);

     }

     function loadList() {

         var act = dataType == 1 ? 'GetServices' : 'GetPersons';

         $.ajax({

             type: "GET",

             url: '/**/***/'+act,

             data: { PageIndex: pageIndex, OrderStr: OrderStr, sort: sort },

             dataType: "json",

             async: false,

             success: function (data) {

                 if (data.success) {

                     totalPage = data.totalPage;

                     var objs = [];

                     var sh;

                     if (dataType == 1) {

                         sh = $('#service').html();

                     } else {

                         sh = $('#person').html();

                     }

                     $.each(data.result, function (i,r) {

                         objs.push(formatTemplate(r,sh))

                     })

                     serviceHtml = objs.join('');

                 }

             }

         });

     }

     function loadFlow() {

         layui.use('flow', function () {

             var flow0 = layui.flow;

             flow0.load({

                 elem: '#serviceData',

                 //scrollElem: '#LAY_demo1', //滚动条所在元素，一般不用填，此处只是演示需要。

                 done: function (page, next) { //执行下一页的回调

                     setTimeout(function () {

                         loadList();

                         //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页

                         //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多

                         next(serviceHtml, pageIndex < totalPage); //假设总页数为 10

                         pageIndex++;

                     }, 500);

                 }

             });

         });

     }

     function orderService(serId,e) {//排序

         var i = $(e).find('i');

         if (i.hasClass("up")) {

             i.addClass('down').removeClass('up');

             sort = 1;

         } else if (i.hasClass('down')) {

             i.addClass('up').removeClass('down');

             sort = 2;

         } else {

             i.addClass('down');

             sort = 1;

             $(e).parent().siblings().find('i').removeClass('down').removeClass('up');

         }

         OrderStr = serId;

         pageIndex = 1;

         $('#serviceData li').remove();

         $('cite').click();//加载流

     }

     function formatTemplate(dta, tmpl) {  //加载模板数据

         var format = {

             name: function (x) {

                 return x

             }

         };

         return tmpl.replace(/{(\w+)}/g, function (m1, m2) {

             if (!m2)

                 return "";

             return (format && format[m2]) ? format[m2](dta[m2]) : dta[m2];

         });

     }

 </script>

 <script type="text/template" id="service">

     <li>

         <a href="/Hahaha/WxService/Index?s={ServiceID}">

             <div class="service_listL"><img src="{Image}"></div>

             <div class="service_listr">

                 <div class="service_listr1 clearfix"><span>{ServiceName}</span><b>{ServiceTime}分钟</b></div>

                 <p class="service_listr2">{Describe}</p>

                 <div class="service_listr3"><span>￥{PresentPrice}</span><del>￥{Price}</del></div>

             </div>

         </a>

     </li>

 </script>

 <script type="text/template" id="serviceList">

     <ul class="serviceList_tu clearfix list_head">

         <li><a class="serviceList_tui" href="serviceCategory.html"><i></i>分类</a></li>

         <li><a onclick="orderService('ServiceID',this)" href="javascript:">新品<i></i></a></li>

         <li><a onclick="orderService('SalesCount', this)" href="javascript:">销量<i></i></a></li>

         <li><a onclick="orderService('PresentPrice', this)" href="javascript:">价格<i></i></a></li>

     </ul>

 </script>

 <script type="text/template" id="personList">

     <div class="serviceList_t list_head">

         <ul class="serviceList_tu serviceList_tu2 clearfix">

             <li><a onclick="orderService('orderService', this)" href="javascrip:">级别<i></i></a></li>

             <li><a href="javascrip:" onclick="orderService('CountServiceHas', this)">销量<i></i></a></li>

         </ul>

     </div>

 </script>

 <script type="text/template" id="person">

     <li>

         <a href="/Hahaha/WxService/ServiceUserIndex?s={PersonId}">

             <div class="service_listL"><img src="{Portrait}"></div>

             <div class="service_listr">

                 <div class="service_listr1 clearfix"><span>{Name}<i class="{Sex}"></i></span></div>

                 <p class="service_listr2">{Introduction}</p>

                 <div class="service_listr4">服务次数：<span>{CountServiceHas}</span></div>

             </div>

         </a>

     </li>

 </script>