1 @{ 2 ViewBag.Title = "服务列表"; 3 Layout = "~/Areas/hahaha/Views/Shared/_Head.cshtml"; 4 } 5 <link href="~/Scripts/layui/css/layui.css" rel="stylesheet" /> 6 <style> 7 .up { background:url(/Content/WeiXin/images/sort-up.png) no-repeat center center; background-size:.6rem auto;} 8 .down { background:url(/Content/WeiXin/images/sort-down.png) no-repeat center center; background-size:.6rem auto;} 9 </style> 10 11 <div class="wc_content"> 12 <div class="tabPanel"> 13 <ul class="clearfix productTad serviceList_u"> 14 <li class="hit" data-type="1"><span>服务项目</span></li> 15 <li data-type="2"><span>服务人员</span></li> 16 </ul> 17 </div> 18 <div class="panes serviceListpanes"> 19 <div class="pane" style="display:block"> 20 <div class="serviceList_box"> <a href="serviceSeach.html" class="serviceList_seach"><i></i>请输入关键词</a> </div> 21 <div class="serviceList_t" id="dataContent"> 22 23 24 </div> 25 <ul class="service_list" id="serviceData"></ul> 26 </div> 27 </div> 28 </div> 29 30 <script src="~/Scripts/jquery-1.10.2.min.js"></script> 31 <script src="~/Scripts/layui/layui.js"></script> 32 <script type="text/javascript"> 33 var totalPage = 2, 34 pageIndex = 1, 35 serviceHtml = \'\', 36 dataType = 1, 37 sort = 1,//正序or倒序 38 OrderStr;//排序字段 39 $(function () { 40 $(\'.tabPanel ul li\').click(function () {//切换筛选条件 41 $(this).addClass(\'hit\').siblings().removeClass(\'hit\'); 42 var s =parseInt( $(this).attr(\'data-type\')); 43 if (dataType != s) { 44 dataType = s; 45 $(\'.list_head\').remove(); 46 $(\'#serviceData li\').remove(); 47 pageIndex = 1; 48 OrderStr = \'\'; 49 setHead(); 50 $(\'cite\').click(); 51 } 52 53 }) 54 setHead(); 55 loadFlow(); 56 }) 57 58 function setHead() { 59 var scriptHtml; 60 if (dataType == 1) { 61 scriptHtml = $(\'#serviceList\').html(); 62 } else { 63 scriptHtml = $(\'#personList\').html(); 64 } 65 $(\'#dataContent\').after(scriptHtml); 66 } 67 68 function loadList() { 69 var act = dataType == 1 ? \'GetServices\' : \'GetPersons\'; 70 $.ajax({ 71 type: "GET", 72 url: \'/**/***/\'+act, 73 data: { PageIndex: pageIndex, OrderStr: OrderStr, sort: sort }, 74 dataType: "json", 75 async: false, 76 success: function (data) { 77 if (data.success) { 78 totalPage = data.totalPage; 79 var objs = []; 80 var sh; 81 if (dataType == 1) { 82 sh = $(\'#service\').html(); 83 } else { 84 sh = $(\'#person\').html(); 85 } 86 $.each(data.result, function (i,r) { 87 objs.push(formatTemplate(r,sh)) 88 }) 89 serviceHtml = objs.join(\'\'); 90 } 91 } 92 }); 93 } 94 95 function loadFlow() { 96 97 layui.use(\'flow\', function () { 98 var flow0 = layui.flow; 99 100 flow0.load({ 101 elem: \'#serviceData\', 102 //scrollElem: \'#LAY_demo1\', //滚动条所在元素，一般不用填，此处只是演示需要。 103 done: function (page, next) { //执行下一页的回调 104 105 setTimeout(function () { 106 loadList(); 107 108 //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页 109 //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多 110 next(serviceHtml, pageIndex < totalPage); //假设总页数为 10 111 pageIndex++; 112 }, 500); 113 } 114 }); 115 116 }); 117 } 118 119 function orderService(serId,e) {//排序 120 var i = $(e).find(\'i\'); 121 if (i.hasClass("up")) { 122 i.addClass(\'down\').removeClass(\'up\'); 123 sort = 1; 124 } else if (i.hasClass(\'down\')) { 125 i.addClass(\'up\').removeClass(\'down\'); 126 sort = 2; 127 } else { 128 i.addClass(\'down\'); 129 sort = 1; 130 $(e).parent().siblings().find(\'i\').removeClass(\'down\').removeClass(\'up\'); 131 } 132 OrderStr = serId; 133 pageIndex = 1; 134 $(\'#serviceData li\').remove(); 135 $(\'cite\').click();//加载流 136 } 137 138 function formatTemplate(dta, tmpl) { //加载模板数据 139 var format = { 140 name: function (x) { 141 return x 142 } 143 }; 144 return tmpl.replace(/{(\w+)}/g, function (m1, m2) { 145 if (!m2) 146 return ""; 147 return (format && format[m2]) ? format[m2](dta[m2]) : dta[m2]; 148 }); 149 } 150 </script> 151 152 <script type="text/template" id="service"> 153 <li> 154 <a href="/Hahaha/WxService/Index?s={ServiceID}"> 155 <div class="service_listL"><img src="{Image}"></div> 156 <div class="service_listr"> 157 <div class="service_listr1 clearfix"><span>{ServiceName}</span><b>{ServiceTime}分钟</b></div> 158 <p class="service_listr2">{Describe}</p> 159 <div class="service_listr3"><span>￥{PresentPrice}</span><del>￥{Price}</del></div> 160 </div> 161 </a> 162 </li> 163 </script> 164 165 <script type="text/template" id="serviceList"> 166 <ul class="serviceList_tu clearfix list_head"> 167 <li><a class="serviceList_tui" href="serviceCategory.html"><i></i>分类</a></li> 168 <li><a onclick="orderService(\'ServiceID\',this)" href="javascript:">新品<i></i></a></li> 169 <li><a onclick="orderService(\'SalesCount\', this)" href="javascript:">销量<i></i></a></li> 170 <li><a onclick="orderService(\'PresentPrice\', this)" href="javascript:">价格<i></i></a></li> 171 </ul> 172 173 </script> 174 175 <script type="text/template" id="personList"> 176 <div class="serviceList_t list_head"> 177 <ul class="serviceList_tu serviceList_tu2 clearfix"> 178 <li><a onclick="orderService(\'orderService\', this)" href="javascrip:">级别<i></i></a></li> 179 <li><a href="javascrip:" onclick="orderService(\'CountServiceHas\', this)">销量<i></i></a></li> 180 </ul> 181 </div> 182 </script> 183 <script type="text/template" id="person"> 184 <li> 185 <a href="/Hahaha/WxService/ServiceUserIndex?s={PersonId}"> 186 <div class="service_listL"><img src="{Portrait}"></div> 187 <div class="service_listr"> 188 <div class="service_listr1 clearfix"><span>{Name}<i class="{Sex}"></i></span></div> 189 <p class="service_listr2">{Introduction}</p> 190 <div class="service_listr4">服务次数：<span>{CountServiceHas}</span></div> 191 </div> 192 </a> 193 </li> 194 </script>
效果如下图: