<!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> 
 |