<%@ Page Language="C#" AutoEventWireup="true" Inherits="Kesion.NET.WebSite.Course.Course.buyprop" Codebehind="buyprop.aspx.cs" %>
<%@ Import Namespace="Kesion.Publics" %>
<%@ Import Namespace="Kesion.Components" %>
<%@ Import Namespace="Kesion.Cache" %>
<%@ Import Namespace="Kesion.BLL" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="<%=MyCache.GetCacheConfig(0) %>KS_Inc/DatePicker/WdatePicker.js"></script>
	<link href="/admin/images/base.css" rel="stylesheet" />
	<link href="/admin/images/style.css" rel="stylesheet" />
    <script src="<%=MyCache.GetCacheConfig(0) %>ks_inc/jquery.js"></script>
    <script src="<%=MyCache.GetCacheConfig(0) %>ks_inc/kesion.common.js"></script>
    <script src="/user/images/Tab.js" type="text/javascript"></script>
	<style>
	    #tablist ul li{float:left;text-align: center;}
	    #tablist li .giftimg{display: flex;align-items: center;justify-content: center;}
	    #tablist li img{max-width:100%; height:100%;}
		.padtitle{height:44px; line-height:44px;font-size: 14px;color: #333;}
		.payButton{background:#188EEE;width:140px; display:block; -webkit-transition:0.3s; transition:0.3s;height:40px; line-height:40px; font-size:14px; color:#fff;border-radius:3px;border:0px;margin:10px 0px 0px 15px;}
		.setdisplay .option{width:130px;height:40px;margin:0px 10px 10px 0px; cursor:pointer; padding:10px 15px;border:1px solid #e3e3e3;float:left;}
		.setdisplay .option .name{ font-size:14px; line-height:24px;}
		.setdisplay .option .info{color:#999;}
		.setdisplay .on{border:2px solid #f69352; padding:9px 14px;}
		.setdisplay .on .name{color:#f69352;}
		.payButton:hover{ background:#1083e1;}
		#buycount div{float:left;width:31px;height:31px; padding:1px;margin:0px 10px 10px 0px; font-size:14px; cursor:pointer; text-align:center;border:1px solid #e3e3e3; line-height:31px;}
		#buycount .on{border:2px solid #f69352; padding:0px;color:#f69352;}
		.ctable{margin-top: 0.5rem;}
		.ctable .cleft{ width:90px !important;}
	  </style>
</head>
<body>

<form id="form1" runat="server">
  <asp:Repeater ID="Repeater1" runat="server">
    <HeaderTemplate>
	<script>
		$(function(){
			$(".wrapBox").height($("body").height());
		});
		$(window).resize(function(){
			$(".wrapBox").height($("body").height());
		});
	</script>
      <div class="wrapBox" style="overflow:auto;-webkit-overflow-scrolling: touch;">
     <div class="padtitle">选择要购买的道具</div>
     <div id="tablist" class="border">
       <ul class="tdbg clearfix">
    </HeaderTemplate>
    <ItemTemplate>
   
          <li class="splittd"> 
            <div class="giftimg"><img src="<%#Eval("acimage") %>"></div>
			<input type="radio" name="ids" value="<%#Eval("id") %>" onclick="showcombo(this.value)" name="ids" style="margin-right:0;">
		    <%#Eval("acname") %>
		    
          </li>

     </ItemTemplate>
     <FooterTemplate>
          </ul>
		  <ul class="tdbg clearfix" style="display:<%# bool.Parse((Repeater1.Items.Count==0).ToString())?"":"none"%>">
                <li class="splittd">
                  <div class="empty">没有可供购买的道具！</div>
                </li>
          </ul> 
      </div>
     </FooterTemplate>
    </asp:Repeater>
	<div class="fy_box" style="padding-bottom:10px;"><KS:Page ID="Page1" runat="server" /></div>
      
	<div class="padtitle">选择套餐包</div>
	<div style="height:60px" id="accombo">
	</div>

	<div class="clear"></div>
	<div class="padtitle">选择购买数量</div>
	<div style="height:50px" id="buycount">
	<div><span>1</span></div>
	<div><span>2</span></div>
	<div><span>3</span></div>
	<div><span>4</span></div>
	<div><span>5</span></div>
	<div><span>6</span></div>
	<div><span>7</span></div>
	<div><span>8</span></div>
	<div><span>9</span></div>
	<div><span>10</span></div>
	</div>
    <div class="clear"></div>
	
        <input type="hidden" id="selectcount" name="buycount" value="0" >
        <input type="hidden" id="selectmoney" value="0" >
        <input type="hidden" id="selectnum" name="" value="0" >
        <input type="hidden" id="acid" name="acid" value="0" >
        <input type="hidden" id="comboid" name="comboid" value="0" >
        <input type="hidden" id="tl_money" name="price" value="0" />
		<input type="hidden" id="acnum" name="acnum" />
		<input type="hidden" name="action" value="dobuy" />
	   
	   <div id="totalprice" style="line-height:44px; font-size:14px; display:none; padding-left:15px;">共需支付 <b style="font-size:18px;color:#FF6D16;font-weight:normal;">
           <span id="sf_money">0</span>元</b>，购买道具数量：<span id="count"></span></div>
    

          <%=new Kesion.APPCode.PayFormAPI().GetPaymentList() %>

            <span><input type="submit"  class="payButton" value="账户余额支付" onclick="check()"/></span>
          
          
          
	<script>
		$(document).ready(function () {
			$("#buycount").find("div").each(function () {
				$(this).attr("onclick", "savecount(" + $(this).find("span").html() + ")");
			});
			$("#buycount").find("div").click(function(){
				$(this).addClass("on").siblings().removeClass("on");
			});
			
			$("input[type=radio]").click(function(){
							$(".setdisplay").find(".option").removeClass("on");
							$("#buycount").find("div").removeClass("on");
						});
			
		});
		function check() {
			jQuery("#action").val("dobuy");
			var s = $("#sf_money").html();
			var t = $("#count").html();
			if (s != "0" & t != "0") {
			    if (t == "" || s == "") { alert("请选择购买数量"); return false }
			    $('#tl_money').val($("#sf_money").html());
			    $('#acnum').val($("#count").html());
			}
			else {
			    alert("选择错误");
			    return false;
			}
			return true;
		}
		function showcombo(id) {
			var s = $("#accombo" + id + "");
			if (s.html()) {
				$(".setdisplay").css("display", "none");
				s.css("display", "block");
			}
			else {
				$.ajax({
					type: 'Post',
					datatype: 'text',
					url: "?action=getcombo",
					data: { acid: id },
					success: function (msg) {
					//	alert(msg);
						$(".setdisplay").css("display", "none");
						$("#accombo").html($("#accombo").html() + "<div id='accombo" + id + "' class='setdisplay'>" + msg + "</div>");
						$(".setdisplay > div").addClass("option");
						$(".setdisplay").find(".option").click(function(){
							$(this).addClass("on").siblings().removeClass("on");
						});
						
						
						
					}
				});
			}
			$("#totalprice").css("display","none");
			$("#selectcount").val("0");
			$("#selectmoney").val("0");
			$("#selectnum").val("0");
			$("#comboid").val("0");
			$("#acid").val("0");
		}
		function saveselect(money, num, comboid, acid) {
			$("#selectmoney").val(money);
			$("#selectnum").val(num);
			$("#comboid").val(comboid);
			$("#acid").val(acid);
			calculate();
		}
		function savecount(count) {
			$("#selectcount").val(count);
			calculate();
		}

		function calculate() {
			var omoney = parseFloat($("#selectmoney").val());
			var onum = parseInt($("#selectnum").val());
			var ocount = $("#selectcount").val();
			if (omoney == 0 || onum == 0 || ocount == 0) { }
			else {
				$("#totalprice").css("display", "block");
				$("#sf_money").html(omoney * ocount);
				$("#tl_money").val(omoney * ocount);
				$("#count").html(onum * ocount);
				$("#user_pay_money").val($("#umoeny").html());
				payu();
			}
		}
		function closewindow()
		{
			$.dialog.close();
		}
		function senddate()
		{
		    if ($('#tl_money').val() > 0) {
		        $("#from1").submit();
		    } else {
		        alert("您还选择道具");
		    }
		}
		
		$(function(){
		   if($('body').width()<=800){
			   $('#tablist li').css('width','20%')
			   $('#tablist li').css('margin-bottom','0.5rem')
		   }
		   $('#tablist li .giftimg').height($('#tablist li .giftimg').width());
		})
	</script>



    	</div>
    </div>
</form>
</body>
</html>
