shenhao
/
sys


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572
							<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 style="width: 50px;">
			        	<ul class="fwmc_xxk">
			           	<li  th:class="sign_type_select"  data-type="1" data-lib_service="30" data-unit_price="800"  >
			              <p>服务包1</p>
			              	30人<i>/1月</i>
			           	</li>
			          </ul>
			        </td>
			        
			        <td style="width: 50px;">
			        	<ul class="fwmc_xxk">
			           	<li th:class="sign_type_select" data-type="2" data-lib_service="50" data-unit_price="1200" >
			              <p>服务包2</p>
			              	50人<i>/1月</i>
			           	</li>
			          </ul>
			        </td>
			        
			         <td style="width: 50px;">
			        	<ul class="fwmc_xxk">
			           	<li th:class="sign_type_select"  data-type="3" data-lib_service="100" data-unit_price="2000" >
			              <p>服务包3</p>
			            	100人<i>/1月</i>
			           	</li>
			          </ul>
			        </td>
			      
			        
		      </tr>
		      
		      <tr valign="top">
			        <td align="right" width="70" style="line-height: 50px;font-weight: 700"></td>
			        <td style="width: 50px;">
			        	<ul class="fwmc_xxk">
			           	<li th:class="sign_type_select" data-type="4" data-lib_service="20" data-unit_price="400" >
			              <p>服务包4</p>
			              	20人<i>/1月</i>
			           	</li>
			          </ul>
			        </td>
			        
			        <td style="width: 50px;">
			        	<ul class="fwmc_xxk">
			           	<li th:class="sign_type_select"  data-type="5" th:data-lib_service="0" data-unit_price="0" >
			              <p>服务包5</p>
			              	自定义<i>/1月</i>
			           	</li>
			          </ul>
			        </td>
		      </tr>
		      
		       <tr id="lib_service_tr"  valign="top">
		  			<td align="right" width="70" style="line-height: 30px;font-weight: 700">服务人数量：</td>
		  	        <td>
			        	<ul class="nmb_jj">
				            <li class="jian" id="1_reduce_num">-</li>
				            <li>
				              <input name="" id="1_service_num" type="text" value="0" class="srkk" style="width: 50px;">
				            </li>
				            <li class="jia" id="1_add_num">+</li>  
			          </ul>
			        </td>
		      </tr>
		      <tr >
		        <td height="20"></td>
		        <td></td>
		      </tr>
		      
		     <tr valign="top" th:if="${startActiveTime!=null}">
	  			<td align="right" width="70" style="line-height: 30px;font-weight: 700">合同激活日期：</td>
	  	        <td>
		        	<ul class="nmb_jj">
			            <li style="position: absolute;">
			             	<input type="text" style="width: 120px;" class="srkk"  id="startActiveTime" name="startActiveTime"  onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',autoPickDate:true})" autocomplete="off" th:value="${#dates.format(startActiveTime, 'yyyy-MM-dd')}" placeholder="合同开始激活日期">
			            	~
			            	<input type="text" style="width: 120px;" class="srkk"  id="activeTime" name="activeTime"  onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',autoPickDate:true})" autocomplete="off" th:value="${#dates.format(startActiveTime, 'yyyy-MM-dd')}" placeholder="合同开始激活日期">
			            	
			            </li>
		          </ul>
		        </td>
		      </tr>
		      <tr th:if="${startActiveTime!=null}">
		        <td height="20"></td>
		        <td></td>
		      </tr>
		      
		      
		       <tr valign="top" th:if="${activeTime!=null}">
	  			<td align="right" width="70" style="line-height: 30px;font-weight: 700">合同激活日期：</td>
	  	        <td>
		        	<ul class="nmb_jj">
			            <li style="position: absolute;">
			            	<input type="text" style="width: 120px;" class="srkk"  id="activeTime" name="activeTime"  onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',autoPickDate:true})" autocomplete="off" th:value="${#dates.format(activeTime, 'yyyy-MM-dd')}" placeholder="合同开始激活日期">
			            </li>
		          </ul>
		        </td>
		      </tr>
		      <tr th:if="${activeTime!=null}">
		        <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 class="jian" id="2_reduce_num">-</li>
			            <li>
			              <input name="" id="2_service_num" type="text" value="1" class="srkk" style="width: 50px;">
			            </li>
			            <li class="jia" id="2_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 class="jian" id="3_reduce_num">-</li>
			            <li>
			              <input name="" id="3_service_num" type="text" value="0" class="srkk" style="width: 50px;">
			            </li>
			            <li class="jia" id="3_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 name="unitPrice" id="unitPrice" type="text" value="0" class="srkk" style="width: 95px;"><i> 元</i>
			            </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="price" id="price" type="text" value="0" class="srkk" style="width: 95px;"><i> 元</i>
			            </li>
		          </ul>
		        </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>
	    	<th >月单价（成本）</th>
	    	<th >服务包总价（收入）</th>
	    	<th >购买时间</th>
	    </tr> 
	</thead>
	<tbody>
		 <tr  th:each="item:${list}" >
		 	<td th:text="${item.id}"></td>
	    	<td  th:switch="${item.signType}">
			   <span th:case="1" >服务包1</span>
			   <span th:case="2" >服务包2</span>
			   <span th:case="3" >服务包3</span>
			   <span th:case="4" >服务包4</span>
			   <span th:case="5" >服务包5</span>
			</td>
			<td th:text="${item.libService}"></td>
			<td th:text="${item.startActiveTime!=null ? #calendars.format(item.startActiveTime,'yyyy-MM-dd') : ''}"></td>
			<td th:text="${item.activeTime!=null ? #calendars.format(item.activeTime,'yyyy-MM-dd') : ''}"></td>
	    	<td th:text="${item.buyMonth}"></td>
	    	<td th:text="${item.giveMonth}"></td>
	    	<td th:text="${item.unitPrice}"></td>
	    	<td th:text="${item.price}"></td>
	    	<td th:text="${item.createTime}"></td>
	    </tr> 
	</tbody>
</table> 
<br/>
<br/>
	

</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");

			
			var sign_type=$(this).data("type");

			$("#1_service_num").val($(this).data("lib_service"));

			$("#unitPrice").val($(this).data("unit_price"));

			
// 			if(sign_type>=5){

// 				$("#lib_service_tr").show();

// 			}else{

// 				$("#lib_service_tr").hide();

// 			}

		});

		
		$("#1_reduce_num").click(function (){

			if($("#1_service_num").val()<=0){

				parent.layer.msg("服务人数量不能小于1喔",{icon:11});

				$("#2_service_num").val(0);

				return;

			}

			$("#1_service_num").val(parseInt($("#1_service_num").val())-1);

		});

		
		$("#1_add_num").click(function (){

			$("#1_service_num").val(parseInt($("#1_service_num").val())+1);

		});

		
		$("#2_reduce_num").click(function (){

			if($("#2_service_num").val()<=1){

				parent.layer.msg("购买月数量不能小于1喔",{icon:11});

				$("#2_service_num").val(1);

				return;

			}

			$("#2_service_num").val(parseInt($("#2_service_num").val())-1);

		});

		
		$("#2_add_num").click(function (){

			$("#2_service_num").val(parseInt($("#2_service_num").val())+1);

		});

		
		$("#3_reduce_num").click(function (){

			if($("#3_service_num").val()<=0){

				parent.layer.msg("赠送月数量不能小于0",{icon:11});

				$("#3_service_num").val(0);

				return;

			}

			$("#3_service_num").val(parseInt($("#3_service_num").val())-1);

		});

		
		$("#3_add_num").click(function (){

			$("#3_service_num").val(parseInt($("#3_service_num").val())+1);

		});

		
	})

	var islock=false;

	function save(){

		if(islock){

			parent.layer.msg("正在下单中，请勿重复提交...",{icon:2});

		}

		if($(".sign_type_select_on").data("type")==undefined){

			parent.layer.msg("请选择购买的服务包",{icon:11});

			return;

		}

		parent.layer.confirm("确定为此商户购买服务包？", {

			icon: 4, btn: ['确定','关闭'],offset: '100px' //按钮

		}, function(){

				islock=true;

				var id=$("#id").val();

				var signType=$(".sign_type_select_on").data("type");

				var libService=$("#1_service_num").val();

				var buyMonth=$("#2_service_num").val();

				var giveMonth=$("#3_service_num").val();

				var startActiveTime=$("#startActiveTime").val();

				var activeTime=$("#activeTime").val();

				var price=$("#price").val();

				var unitPrice=$("#unitPrice").val();

				
				var url="[[${sysUrl}]]/sys/fx/saveMerchantMeal";

				var params ={

			        'id' : id,

			        'signType':signType,

			        'libService':libService,

			        'buyMonth':buyMonth,

			        'giveMonth':giveMonth,

			        'unitPrice':unitPrice,

			        'price':price,

			        'startActiveTime':startActiveTime,

			        'activeTime':activeTime

			    };

				$.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));

						islock=false;

					}else{

						parent.layer.msg(data.meta.message,{icon:11});

						islock=false;

					}

				});

		});

	}

	
</script>

</html>