<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>私塾家</title>
<script th:include="sys/common/metaCSS" th:remove="tag"></script> 
<script th:include="sys/common/metaJS" th:remove="tag"></script> 
<script src="sys/js/My97DatePicker/WdatePicker.js" th:src="@{/static/sys/js/My97DatePicker/WdatePicker.js}"></script>
</head>
<style>
	.tablelink{margin-right:10px;}
	.stylecss{
	      color: red;
	}
	.select_width{
	     width: 220px;
	}
	.date_width{
	     width: 150px;
	}
	
	.tablelist th,td{
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	#mealServiceAdd .zwfb_shop_table {
		margin-top: 10px
	}
	#mealServiceAdd tbody {
	    display: table-row-group;
	    vertical-align: middle;
    	border-color: inherit;
	}
	#mealServiceAdd .fwmc_xxk {
	    overflow: hidden;
	    margin-left: 20px;
	}
	#mealServiceAdd .fwmc_xxk li {
	    float: left;
	    width: 150px;
	    height: 52px;
	    border: 1px solid #ddd;
	    font-size: 18px;
	    color: #666;
	    margin-right: 30px;
	    text-align: center;
	    margin-bottom: 10px;
	    overflow: hidden;
	    cursor: pointer;
	}
	#mealServiceAdd .fwmc_xxk li p {
	    line-height: 18px;
	    font-size: 12px;
	    color: #999;
	    margin-top: 5px;
	}
	#mealServiceAdd .zwsl_num {
	    margin-left: 20px;
	    font-size: 16px;
	    color: #333;
	}
	#mealServiceAdd .zwsl_num span {
	    color: #999;
	    font-size: 12px;
	    padding-left: 10px;
	}
	#mealServiceAdd .nmb_jj {
	    overflow: hidden;
	    margin-left: 20px;
	}
	#mealServiceAdd .nmb_jj li.jian {
	    border-right: none;
	    cursor: pointer;
	    color: #999;
	    width: 30px;
	    padding: 0;
	}
	#mealServiceAdd .nmb_jj li {
	    float: left;
	    text-align: center;
	    line-height: 30px;
	    border: 1px solid #ddd;
	    font-size: 20px;
	    padding: 0 8px;
	}
	#mealServiceAdd .nmb_jj li .srkk {
	    width: 30px;
	    font-size: 16px;
	    border: none;
	    line-height: 30px;
	    text-align: center;
	    outline: 0;
	    background: #FFF;
	}
	#mealServiceAdd .nmb_jj li.jia {
	    border-left: none;
	    cursor: pointer;
	    color: #999;
	    width: 30px;
	    padding: 0;
	}
	#mealServiceAdd a.ty_but {
	    width: 130px;
	    height: 40px;
	    line-height: 40px;
	    text-align: center;
	    display: block;
	    font-size: 16px;
	    color: #fff;
	    border-radius: 3px;
	    background: #169ed8;
	}
	#mealServiceAdd a.ty_but:hover {
	    background: #1187ba;
	}
	#mealServiceAdd .fwmc_xxk li.sign_type_select_on {
	    background: url(/static/sys/images/fwkk.jpg) no-repeat center;
	    color: #169ed8;
	    border: 1px solid #169ed8;
	}
	
	
	
	
	
	
	#libServiceAdd .zwfb_shop_table {
		margin-top: 10px
	}
	#libServiceAdd tbody {
	    display: table-row-group;
	    vertical-align: middle;
    	border-color: inherit;
	}
	#libServiceAdd .fwmc_xxk {
	    overflow: hidden;
	    margin-left: 20px;
	}
	#libServiceAdd .fwmc_xxk li {
	    float: left;
	    width: 150px;
	    height: 52px;
	    border: 1px solid #ddd;
	    font-size: 18px;
	    color: #666;
	    margin-right: 30px;
	    text-align: center;
	    margin-bottom: 25px;
	    overflow: hidden;
	    cursor: pointer;
	}
	#libServiceAdd .fwmc_xxk li p {
	    line-height: 18px;
	    font-size: 12px;
	    color: #999;
	    margin-top: 5px;
	}
	#libServiceAdd .zwsl_num {
	    margin-left: 20px;
	    font-size: 16px;
	    color: #333;
	}
	#libServiceAdd .zwsl_num span {
	    color: #999;
	    font-size: 12px;
	    padding-left: 10px;
	}
	#libServiceAdd .nmb_jj {
	    overflow: hidden;
	    margin-left: 20px;
	}
	#libServiceAdd .nmb_jj li.jian {
	    border-right: none;
	    cursor: pointer;
	    color: #999;
	    width: 30px;
	    padding: 0;
	}
	#libServiceAdd .nmb_jj li {
	    float: left;
	    text-align: center;
	    line-height: 30px;
	    border: 1px solid #ddd;
	    font-size: 20px;
	    padding: 0 8px;
	}
	#libServiceAdd .nmb_jj li .srkk {
	    width: 30px;
	    font-size: 16px;
	    border: none;
	    line-height: 30px;
	    text-align: center;
	    outline: 0;
	    background: #FFF;
	}
	#libServiceAdd .nmb_jj li.jia {
	    border-left: none;
	    cursor: pointer;
	    color: #999;
	    width: 30px;
	    padding: 0;
	}
	#libServiceAdd a.ty_but {
	    width: 130px;
	    height: 40px;
	    line-height: 40px;
	    text-align: center;
	    display: block;
	    font-size: 16px;
	    color: #fff;
	    border-radius: 3px;
	    background: #169ed8;
	}
	#libServiceAdd a.ty_but:hover {
	    background: #1187ba;
	}
	#libServiceAdd .fwmc_xxk li.sign_type_select_on {
	    background: url(/static/sys/images/fwkk.jpg) no-repeat center;
	    color: #169ed8;
	    border: 1px solid #169ed8;
	}
	
	
	
</style>
<body style="min-width: 100%;">

<div class="rightinfo">
	<div class="formbody" id="libServiceAdd" >
		<input type="hidden" id="id" th:value="${merchant.id}" >
		<table border="0" cellspacing="0" cellpadding="0" class="zwfb_shop_table">
		     <tbody>
		      	<tr valign="top">
			        <td align="right" width="70" style="line-height: 50px;font-weight: 700">加油包类型：</td>
			        <td>
			        	<ul class="fwmc_xxk">
				            <li class="sign_type_select sign_type_select_on" data-type="1" data-lib_service="5">
				              <p>加油包-月包</p>
				              1个月<i>/5人</i>
				           	</li>
				           	<li class="sign_type_select"  data-type="2" data-lib_service="5">
				              <p>加油包-数量包</p>
				              5人<i>/1月</i>
				           	</li>
			          </ul>
			        </td>
		      	</tr>
		      <tr>
		        <td height="20"></td>
		        <td></td>
		      </tr>
		      <tr>
		        <td align="right" style="font-weight: 700">购买数量：</td>
		        <td>
		        	<ul class="nmb_jj">
			            <li class="jian" id="reduce_num">-</li>
			            <li>
			              <input name="" id="service_num" type="text" value="1" class="srkk" style="width: 70px;">
			            </li>
			            <li class="jia" id="add_num">+</li>  
		          </ul>
		        </td>
		      </tr>
		      <tr>
		        <td height="20"></td>
		        <td></td>
		      </tr>
		      
		     <tr valign="top">
	  			<td align="right" width="70" style="line-height: 30px;font-weight: 700">激活日期：</td>
	  	        <td>
		        	<ul class="nmb_jj">
			            <li>
			              <input style="width: 130px;font-size: 15px;"  id="signTime" name="signTime"  onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',autoPickDate:true})" th:value="${#dates.format(signTime, 'yyyy-MM-dd')}" autocomplete="off"  placeholder="激活日期" type="text"  class="srkk">
			            </li>
		          </ul>
		        </td>
		      </tr>
		      <tr>
		        <td height="20"></td>
		        <td></td>
		      </tr>
		      
		     <tr valign="top">
	  			<td align="right" width="70" style="line-height: 30px;font-weight: 700">加油包单价：</td>
	  	        <td>
		        	<ul class="nmb_jj">
			            <li>
			              <input name="unitPrice" id="unitPrice" type="text" value="0" class="srkk" style="width: 115px;"><i> 元</i>
			            </li>
		          </ul>
		        </td>
		      </tr>
		   	 <tr>
		        <td height="20"></td>
		        <td></td>
		      </tr>
		   	 <tr>
		        <td height="20"></td>
		        <td></td>
		      </tr>
		      <tr>
		        <td></td>
		        <td><a style="margin-left: 20px;" class="ty_but ml20" href="javascript:#" onclick="save();">购 买</a></td>
		      </tr>
		    </tbody>
	   	</table>
	</div>
<br/>
<br/>
	
<table class="tablelist">
	<thead>
	    <tr>
	    	<th >订单号</th>
	    	<th >加油包类型</th>
	    	<th >购买数量</th>
	    	<th >服务人数</th>
	    	<th >激活日期 </th>
	    	<th >服务包单价</th>
	    	<th >购买时间</th>
	    </tr> 
	</thead>
	<tbody>
		 <tr th:each="item:${list}" >
		 	<td th:text="${item.id}"></td>
	    	<td  th:switch="${item.type}">
			   <span th:case="1" >加油包月包</span>
			   <span th:case="2" >加油包量包</span>
			</td>
	    	<td th:text="${item.num}"></td>
	    	<td th:text="${item.libService}"></td>
	    	<td th:text="${#dates.format(item.signTime, 'yyyy-MM-dd')}"> </td>
	    	<td th:text="${item.unitPrice}"></td>
	    	<td th:text="${item.createTime}"></td>
	    </tr> 
	   
	</tbody>
</table> 

</body>
<script type="text/javascript">
	$(function () {
		$(".sign_type_select").click(function (){
			$(".sign_type_select").removeClass("sign_type_select_on");
			$(this).addClass("sign_type_select_on");
		});
		
		$("#reduce_num").click(function (){
			if($("#service_num").val()<=1){
				parent.layer.msg("购买数量不能小于1喔",{icon:11});
				$("#service_num").val(1);
				return;
			}
			$("#service_num").val(parseInt($("#service_num").val())-1);
		});
		
		$("#add_num").click(function (){
			$("#service_num").val(parseInt($("#service_num").val())+1);
		});
		
	})
	
	function save(){
		parent.layer.confirm("确定为此商户购买加油包？", {
			icon: 4, btn: ['确定','关闭'],offset: '100px' //按钮
		}, function(){
				var id=$("#id").val();
				var type=$(".sign_type_select_on").data("type");
				var num=$("#service_num").val();
				var signTime=$("#signTime").val();
				var unitPrice=$("#unitPrice").val();
				var libService=$(".sign_type_select_on").data("lib_service");
				
				var url="[[${sysUrl}]]/sys/fx/saveMerchantSign";
				var params ={
			        'id' : id,
			        'type':type,
			        'num':num,
			        'signTime':signTime,
			        'unitPrice':unitPrice,
			        'libService':libService
			    };
				$.post(url,params,function(data){
					if(data.meta.success){
						parent.layer.msg("购买成功",{icon:1});
						parent.location.reload();
						parent.layer.close(parent.layer.getFrameIndex(window.name));
					}else{
						parent.layer.msg(data.meta.message,{icon:11});
					}
				});
		});
	}
		
</script>

</html>