fuyu
/
tjshop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
							<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>黑龙江昆仑盛和安体检中心</title>
    <link rel="stylesheet" type="text/css" href="/style/common.css"/>
    <link rel="stylesheet" type="text/css" href="/style/shop.css"/>
    <!--[if lt IE 9]> 
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]-->
    <!--窗口自适应适配低端IE-->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style type="text/css">
	.show {
		display: block;
	}
	.hidden {
		display: none;
	}
</style>
</head>

<body>
    <div th:include="fragments :: header"></div>
    <div class="wp">
        <div class="main bgFF">
            <div class="d-view">
                <div class="f14 bgF4 h32 lh32 pl20 mt20">商品清单</div>
                <table class="tab-1-EEE mt15">
                    <thead>
                        <tr>
                            <td>商品</td>
                            <td>单价</td>
                            <td>数量</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="item : ${buyOrder.items}">
                            <td>
                            	<img th:attr="src=${item.good.icon}" class="bor-img w60 h60 l mr5" />
                            	<span class="f12 c666" th:text="${item.good.name}"></span>
                            </td>
                            <td th:text="'¥' + ${item.price}"></td>
                            <td th:text="x + ${item.num}"></td>
                        </tr>
                    </tbody>
                </table>
                <div class="mt20 cOrange f12 fb">购买体检商品后您可以在个人中心直接预约体检时间</div>
                <div class="f14 bgF4 h32 lh32 pl20 mt20">发票信息</div>
                <div class="tab-fb mt20">
                    <div class="o-rdo">
                        <input name="fapiao" checked="checked" type="radio" value="0" id="t1" class="fapiao" />
                        <label for="t1">不需要发票</label>
                    </div>
                    <div class="o-rdo">
                        <input name="fapiao" type="radio" value="1" id="t2" class="fapiao" />
                        <label for="t2">需要发票</label>
                    </div>
                </div>
                <div class="clearfix"></div>
                <div class="fp-view" id="show" style="display:none; ">
                    <h3>发票信息</h3>
                    <dl><dt>发票抬头：</dt>
                        <dd><input name="" type="text" class="txt" /></dd>
                    </dl>
                    <dl><dt>纳税人识别号：</dt>
                        <dd><input name="" type="text" class="txt" placeholder="非个人开票请必须填写" /></dd>
                    </dl>
                    <dl><dt>发票明细：</dt>
                        <dd>体检服务</dd>
                    </dl>
                    <dl><dt>收件人：</dt>
                        <dd><input name="" type="text" class="txt" /></dd>
                    </dl>
                    <dl><dt>快递地址：</dt>
                        <dd><input name="" type="text" class="txt" /></dd>
                    </dl>
                    <dl><dt>联系电话：</dt>
                        <dd><input name="" type="text" class="txt" /></dd>
                    </dl>
                </div>
                <div class="f14 bgF4 h32 lh32 pl20 mt20">支付方式</div>
                <div class="clearfix ov-h mt20">
                    <div class="o-rdo alzf">
                        <input name="zhifu" checked="checked" type="radio" value="1" id="z1" />
                        <label for="z1"></label>
                    </div>
                    <div class="o-rdo wxzf">
                        <input name="zhifu" type="radio" value="2" id="z2" />
                        <label for="z2"></label>
                    </div>
                </div>
                <div class="lineDDD mt20"></div>
                <div class="d-view-list">
                    <div class="clearfix ov-h">
                        <dl>
                        	<dt>
                        		共计 <em class="cOrange" th:text="${totalNum}"></em> 件商品:
                        	</dt>
                            <dd th:text="'¥' + ${buyOrder.totalPrice}"></dd>
                        </dl>
                        <dl><dt>应付金额:</dt>
                            <dd th:text="'¥' + ${buyOrder.totalPrice}"></dd>
                        </dl>
                    </div>
                    <div class="h50 mt10 bgF4"><button id="startPay">支付</button><span class="f24" th:text="'商品总计：¥' + ${buyOrder.totalPrice}"><strong></strong></span></div>
                </div>
                
                <div class="d-view-list hidden" style="text-align: center; height: 300px;" id="qrCodeDiv" >
                	<div id="qrCodeDiv" class="show">
	                    <div style="margin-bottom: 10px;">请扫描下方二维码支付</div>
	                    <div id="qrCode">
	                    </div>
                    </div>
                    <div id="payedDiv" class="hidden" style="margin-top: 40px;">
                    	<div style="font-size: 60px;">
                    		<img src="/images/ok.png" alt="" style="height: 40px;"/>
                    		支付完成
                    	</div>
                    	<div style="margin-top: 20px;">
                    		<a href="#" style="color: #0FAFD4">预约体检</a>
                    	</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div th:replace="fragments :: footer"></div>
    
    <link rel="stylesheet" type="text/css" href="/js/plugs/modal/jquery.modal.css"/>
    <script type="text/javascript" src="/js/plugs/modal/jquery.modal.js"></script>
    <script type="text/javascript" src="/js/jquery.qrcode.min.js"></script>
    <script th:inline="javascript">
	    $(".fapiao").click(function() {
	        if ($(this).attr("value") == "1")
	            $("#show").show();
	        else
	            $("#show").hide();
	    });
    
    	$("#startPay").click(function(){
    		var paytype = $('input[name="zhifu"]:checked').val();
    		var orderid	= [[${buyOrder.id}]];
    		$.get("/pay/createPayQRCode/" + orderid + "/" + paytype, function(data){
				if (data.code == 0){
					$("#qrCode").empty();
					$("#qrCode").qrcode(data.obj);
					$("#qrCodeDiv").modal();
				}
    		});
    		
    		setInterval(function(){
    			$.get("/payquery/" + orderid, function(data){
    				if (data.code == 0){
    					if (data.obj){
    						$("#qrCodeDiv").hide();
    						$("#payedDiv").show();
    					}
    				}
    			})
    			
    		},1000)
    	});
    </script>
</body>

</html>