| <!doctype html> | 
| <html xmlns:th="http://www.thymeleaf.org" xmlns:matrix="http://www.w3.org/1999/xhtml"> | 
| <head> | 
|     <meta charset="utf-8"> | 
|     <meta http-equiv="X-UA-Compatible" content="IE=edge"> | 
|   | 
|     <meta | 
|             content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" | 
|             name="viewport"/> | 
|     <title th:text="${session.userInfo.shopName }"></title> | 
|   | 
|     <!-- Set render engine for 360 browser --> | 
|     <meta name="renderer" content="webkit"> | 
|   | 
|     <!-- No Baidu Siteapp--> | 
|     <meta http-equiv="Cache-Control" content="no-siteapp"/> | 
|   | 
|   | 
|     <!-- Add to homescreen for Chrome on Android --> | 
|     <meta name="mobile-web-app-capable" content="yes"> | 
|   | 
|   | 
|     <!-- Add to homescreen for Safari on iOS --> | 
|     <meta name="apple-mobile-web-app-capable" content="yes"> | 
|     <meta name="apple-mobile-web-app-status-bar-style" content="black"> | 
|     <meta name="apple-mobile-web-app-title" content="Amaze UI"/> | 
|   | 
|   | 
|     <!-- Tile icon for Win8 (144x144 + tile color) --> | 
|   | 
|     <meta name="msapplication-TileColor" content="#0e90d2"> | 
|     <script type="text/javascript" | 
|             th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script> | 
|     <script type="text/javascript" | 
|             th:src="@{/js/systools/DDMBase.js}"></script> | 
|     <link rel="stylesheet" | 
|           th:href="@{/plugin/amazingUI/css/amazeui.min.css}"> | 
|     <link rel="stylesheet" | 
|           th:href="@{/plugin/amazingUI/css/app.css}"> | 
|     <link rel="stylesheet" type="text/css" | 
|           th:href="@{/css/dingUserVip.css}"> | 
|     <link rel="stylesheet" type="text/css" | 
|           th:href="@{/plugin/LCalendar/src/css/LCalendar.css}"> | 
|   | 
| </head> | 
| <script> | 
|   | 
| </script> | 
| <body> | 
| <!-- 待预约详情页面 --> | 
| <!-- 头部开始 --> | 
| <!-- 头部开始 --> | 
| <header data-am-widget="header" class="am-header color-w back-m1"> | 
|     <div class="am-header-left am-header-nav"> | 
|         <a onclick="javascript:history.back(-1)" class=""> <i | 
|                 class="am-header-icon am-icon-chevron-left"></i> | 
|         </a> | 
|     </div> | 
|   | 
|     <h1 class="am-header-title"> | 
|         <a href="#title-link" class="">服务单</a> | 
|     </h1> | 
|   | 
|     <!-- <div class="am-header-right am-header-nav"> | 
|   | 
|     </div> --> | 
| </header> | 
| <!-- 头部结束 --> | 
| <div th:if="${obj== null}"> | 
|     <p id="empty-car">查询失败</p> | 
| </div> | 
| <div class="main3"> | 
|     <form class="am-form am-form-horizontal" id="dataform" | 
|           onsubmit="javascripr:return false;"> | 
|         <!-- <div class="main main1">     --> | 
|         <input autocomplete="off"   type="hidden" id="serviceId" name="id" | 
|                th:value="${obj.id }"/> | 
|         <div class="am-input-group am-form-group  am-input-group-primary am-g"> | 
|             <div class="am-u-sm-4"> | 
|                 <span class="am-input-group-label">服务编号</span> | 
|             </div> | 
|             <div class="am-u-sm-8"> | 
|                 <span class="am-input-group-label" th:text="${obj?.serviceNo }"></span> | 
|             </div> | 
|         </div> | 
|         <div class="am-input-group am-form-group  am-input-group-primary am-g"> | 
|             <div class="am-u-sm-4"> | 
|                 <span class="am-input-group-label">客户姓名</span> | 
|             </div> | 
|             <div class="am-u-sm-8"> | 
|                 <span class="am-input-group-label" th:text="${obj?.vipInfo.vipName }"></span> | 
|             </div> | 
|         </div> | 
|   | 
|         <div class="am-input-group am-form-group  am-input-group-primary am-g"> | 
|             <div class="am-u-sm-4"> | 
|                 <span class="am-input-group-label">下单顾问</span> | 
|             </div> | 
|             <div class="am-u-sm-8"> | 
|                 <span class="am-input-group-label" th:text="${obj?.createStaffName }"></span> | 
|             </div> | 
|         </div> | 
|         <div class="am-input-group am-form-group  am-input-group-primary am-g"> | 
|             <div class="am-u-sm-4"> | 
|                 <span class="am-input-group-label">创建时间</span> | 
|             </div> | 
|             <div class="am-u-sm-8"> | 
|                 <span class="am-input-group-label" | 
|                       th:text="${#dates.format(obj.createTime,'yyyy-MM-dd HH:mm')}" | 
|                 > </span> | 
|             </div> | 
|         </div> | 
|         <div class="am-input-group am-form-group  am-input-group-primary am-g"> | 
|             <div class="am-u-sm-4"> | 
|                 <span class="am-input-group-label">配料师</span> | 
|             </div> | 
|             <div class="am-u-sm-8"> | 
|                 <span class="am-input-group-label" th:text="${obj?.plsName }"></span> | 
|             </div> | 
|         </div> | 
|   | 
|             <div   th:each="item:${obj.serviceItems }"> | 
|                 <hr> | 
|                 <div | 
|                         class="am-input-group am-form-group  am-input-group-primary am-g"> | 
|                     <div class="am-u-sm-4"> | 
|                         <span class="am-input-group-label">项目名称</span> | 
|                     </div> | 
|                     <div class="am-u-sm-8"> | 
|                         <span class="am-input-group-label" th:text="${item.projInfo.name  }"></span> | 
|                     </div> | 
|                 </div> | 
|                 <div | 
|                         class="am-input-group am-form-group  am-input-group-primary am-g"> | 
|                     <div class="am-u-sm-4"> | 
|                         <span class="am-input-group-label">美疗师</span> | 
|                     </div> | 
|                     <div class="am-u-sm-8"> | 
|                         <span class="am-input-group-label" th:text="${item.beautiStaffInfo?.suName  }"></span> | 
|                     </div> | 
|                 </div> | 
|                 <div | 
|                         class="am-input-group am-form-group  am-input-group-primary am-g"> | 
|                     <div class="am-u-sm-4"> | 
|                         <span class="am-input-group-label">剩余次数</span> | 
|                     </div> | 
|                     <div class="am-u-sm-8"> | 
|                         <span class="am-input-group-label" th:text="${item.projUse.surplusCount  }"></span> | 
|                     </div> | 
|                 </div> | 
|                 <div | 
|                         class="am-input-group am-form-group  am-input-group-primary am-g"> | 
|                     <div class="am-u-sm-4"> | 
|                         <span class="am-input-group-label">服务时长</span> | 
|                     </div> | 
|                     <div class="am-u-sm-8"> | 
|                         <span class="am-input-group-label" th:text="${item.projInfo.timeLength  }"></span> | 
|                     </div> | 
|                 </div> | 
|   | 
|             </div> | 
|   | 
|             <hr> | 
|             <div class="am-input-group am-form-group  am-input-group-primary am-g"> | 
|                 <div class="am-u-sm-4"> | 
|                     <span class="am-input-group-label">预约时间</span> | 
|                 </div> | 
|                 <div class="am-u-sm-8"> | 
|                     <div> | 
|                     <span class="am-input-group-label" th:text="${#dates.format(obj.yyTime,'yyyy-MM-dd HH:mm')}" > | 
|                     </span> | 
|                     </div> | 
|                 </div> | 
|             </div> | 
|             <div class="am-input-group am-form-group  am-input-group-primary am-g"> | 
|                 <div class="am-u-sm-4"> | 
|                     <span class="am-input-group-label">服务开始时间</span> | 
|                 </div> | 
|                 <div class="am-u-sm-8"> | 
|                     <div> | 
|                     <span class="am-input-group-label" th:text="${#dates.format(obj.startTime,'yyyy-MM-dd HH:mm')}"> | 
|                     </span> | 
|                     </div> | 
|                 </div> | 
|             </div> | 
|   | 
|             <div class="am-input-group am-form-group  am-input-group-primary am-g"> | 
|                 <div class="am-u-sm-4"> | 
|                     <span class="am-input-group-label">服务预计时长</span> | 
|                 </div> | 
|                 <div class="am-u-sm-8"> | 
|                     <div> | 
|                     <span class="am-input-group-label" th:text="${obj?.totalTime }"> | 
|                         分钟 </span> | 
|                     </div> | 
|                 </div> | 
|             </div> | 
|   | 
|   | 
|             <div class="am-input-group am-form-group  am-input-group-primary am-g"> | 
|                 <div class="am-u-sm-4"> | 
|                     <span class="am-input-group-label">预约床位</span> | 
|                 </div> | 
|                 <div class="am-u-sm-8"> | 
|                     <div> | 
|                     <span class="am-input-group-label" th:text="${obj?.bedName }"> | 
|                     </span> | 
|                     </div> | 
|                 </div> | 
|             </div> | 
|             <div class="am-input-group am-form-group  am-input-group-primary am-g"> | 
|                 <div class="am-u-sm-4"> | 
|                     <span class="am-input-group-label">备注</span> | 
|                 </div> | 
|                 <div class="am-u-sm-8"> | 
|                     <span class="am-input-group-label" th:text="${obj?.remark  }"></span> | 
|                 </div> | 
|             </div> | 
|             <div class="am-input-group am-form-group  am-input-group-primary am-g"> | 
|                 <div class="am-u-sm-4"> | 
|                     <span class="am-input-group-label">皮肤状况</span> | 
|                 </div> | 
|                 <div class="am-u-sm-8"> | 
|                     <span class="am-input-group-label" th:text="${obj?.skinCond  }"></span> | 
|                 </div> | 
|             </div> | 
|             <div class="am-input-group am-form-group  am-input-group-primary am-g"> | 
|                 <div class="am-u-sm-4"> | 
|                     <span class="am-input-group-label">其他信息</span> | 
|                 </div> | 
|   | 
|             </div> | 
|   | 
|             <div th:if="${obj.state eq '配料完成'}" class="inputBtn"> | 
|                 <button class="am-btn btn-m1 am-radius am-btn-block" | 
|                         type="button" onclick="startService()">开始服务 | 
|                 </button> | 
|             </div> | 
|             <div th:if="${obj.state eq '服务中' }" class="inputBtn"> | 
|                 <button class="am-btn btn-m1 am-radius am-btn-block" | 
|                         type="button" onclick="endService()">结束服务 | 
|                 </button> | 
|             </div> | 
|     </form> | 
| </div> | 
|   | 
| <script type="text/x-handlebars-template" id="amz-tpl"> | 
|     {{>header header}} | 
|   | 
|     {{>menu menu}} | 
|   | 
|     {{>slider slider}} | 
|   | 
|     {{>list_news list1}} | 
|   | 
|     {{>gallery gallery}} | 
|   | 
|     {{>list_news list2}} | 
|   | 
|     {{>footer footer}} | 
|   | 
|     {{>navbar navbar}} | 
| </script> | 
| <script th:src="@{/plugin/amazingUI/js/handlebars.min.js}"></script> | 
| <script | 
|         th:src="@{/plugin/amazingUI/js/amazeui.widgets.helper.js}"></script> | 
| <script th:src="@{/plugin/LCalendar/src/js/LCalendar.js}"></script> | 
| <!-- index js --> | 
| <script type="text/javascript"> | 
|     function endService() { | 
|         var id = $("#serviceId").val(); | 
|         var url = basePath + "/admin/projService/endService?id=" + id; | 
|         $ | 
|             .AjaxProxy() | 
|             .invoke( | 
|                 url, | 
|                 function (loj) { | 
|                     console.log(loj); | 
|                     if (loj.status = '200') { | 
|                         layer | 
|                             .open({ | 
|                                 content: "服务结束~", | 
|                                 className: 'shouBox', | 
|                                 time: 2, | 
|                                 end: function (elem) { | 
|                                     history.back(-1); | 
|                                 } | 
|                             }); | 
|   | 
|                     } | 
|                 }) | 
|     } | 
|   | 
|     function startService() { | 
|         var id = $("#serviceId").val(); | 
|         var url = basePath + "/admin/projService/startService?id=" + id; | 
|         $ | 
|             .AjaxProxy() | 
|             .invoke( | 
|                 url, | 
|                 function (loj) { | 
|                     console.log(loj); | 
|                     if (loj.status = '200') { | 
|                         layer | 
|                             .open({ | 
|                                 content: "服务开始~", | 
|                                 className: 'shouBox', | 
|                                 time: 2, | 
|                                 end: function (elem) { | 
|                                     history.back(-1); | 
|                                 } | 
|                             }); | 
|   | 
|                     } | 
|                 }) | 
|     } | 
| </script> | 
|   | 
| </body> | 
| </html> |