payInfo.jsp 13.9 KB
<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
    <jsp:include page="${ctx }/view/common/meta.jsp" />
    <link href="${ctx}/resource/css/member.css" rel="stylesheet" type="text/css" />
    <link href="${ctx }/resource/css/tab-slide.css" rel="stylesheet" type="text/css" />
    <link href="${ctx }/resource/css/jquery-date/jquery-ui-1.10.1.css" rel="stylesheet" />
    <link href="${ctx }/resource/css/jquery-date/latoja.datepicker.css" rel="stylesheet" />
    <link href="${ctx }/resource/css/detail.css" rel="stylesheet" type="text/css" />
    <link href="${ctx }/resource/css/home.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="${ctx }/resource/js/layer/jquery.min.js"></script>
    <script type="text/javascript" src="${ctx }/resource/js/layer/layer.js"></script>
    <script type="text/javascript" src="${ctx }/resource/js/layer/layui-2.2.5.js"></script>
    <%--<script type="text/javascript" src="${ctx }/resource/js/layer/qrcode.js"></script>--%>
    <script type="text/javascript" src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="//static.runoob.com/assets/qrcode/qrcode.min.js"></script>

    <script type="text/javascript">
        $(function() {
            var Pay = {
                init: function() {
                    this.bind();
                    this.render();
                },
                bind: function() {
                    $(document).on('click', '#payBtn', this.showPayDialog);
                },
                render: function() {
                },
                showPayDialog: function(){
                    $.ajax({
                        type: "get",
                        url: "/pick/pay/createOrder",
                        success : function(data){
                            if(data.code){
                                var laytpl = layui.laytpl;
                                layer.open({
                                    type: 1,
                                    title: '付款码',
                                    closeBtn: 1,
                                    area: ['800px;', '500px'],
                                    shade: 0.8,
                                    id: 'payDialogContent',
                                    skin: 'payDialogContent',
                                    btnAlign: 'c',
                                    moveType: 1,
                                    content: ''
                                });
                                var htmlStr = '';
                                htmlStr += '<div style="width:100%;height:50px;font-size:16px;text-align:center;padding-top:30px;">'
                                htmlStr += '请打开微信或支付宝app扫码进行支付'
                                htmlStr += '</div>'
                                htmlStr += '<div style="width:100%;height:60px;font-size:22px;text-align:center;color:#f20000;font-weight:bold;">'
                                htmlStr += data.totalAmount + '元'
                                htmlStr += '</div>'
                                htmlStr += '<div style="width: 200px;height: 200px;margin: 0 auto;">'
                                htmlStr += '<div style="width:100%;height:100%;" id="qrcode"></div>'
                                htmlStr += '</div>'
                                htmlStr += '<div style="width:100%;height:30px;font-size:16px;text-align:center;padding-top:30px;">'
                                htmlStr += '付款码每2分钟刷新一次,请在规定时间内完成付款'
                                htmlStr += '</div>'
                                $('#payDialogContent').html(htmlStr);
                                var qrcode = new QRCode(document.getElementById("qrcode"));
                                qrcode.makeCode(data.qrCode);
                            }else{
                                layer.msg(data.msg, {icon: '2'});
                            }
                        }
                    });
                }
            };
            window.Pay = Pay;
            Pay.init();
        });
    </script>
    <style>
        #qrcode img { width: 100%; }
    </style>
</head>
<body>
<jsp:include page="${ctx }/view/common/header.jsp" />
<div class="bigbox">
    <jsp:include page="${ctx }/view/common/menu.jsp" />
    <div class="etlist rightbox0">
        <div class="etlist rightbox0">
            <h2 style="text-align: left;">提货详情</h2>
            <div class="crossline"></div>
            <div class="clear"></div>
            <div class="pick self">
                <div class="content">
                    <h4 style="font-weight: bold;">提货信息</h4>
                    <div style="width: 100%;text-align: left;margin-top: 20px;">
                        <div style="width: 100%;height: 30px;line-height: 30px;width: 620px;">
                            <div style="display: inline-block;vertical-align: top;width: 100px;">
                                提货方式:
                            </div>
                            <div style="display: inline-block;vertical-align: top;width: 500px;">
                                <c:if test="${pick.pickType == '0'}">上门自提</c:if>
                                <c:if test="${pickType == '2' }">顺丰到付</c:if>
                                <c:if test="${pickType == '3' }">转赵涌在线</c:if>
                            </div>
                        </div>
                        <div style="width: 100%;height: 30px;line-height: 30px;width: 620px;">
                            <div style="display: inline-block;vertical-align: top;width: 100px;">
                                提货人:
                            </div>
                            <div style="display: inline-block;vertical-align: top;width: 500px;">
                                陈鹏
                            </div>
                        </div>
                        <div style="width: 100%;height: 30px;line-height: 30px;width: 620px;">
                            <div style="display: inline-block;vertical-align: top;width: 100px;">
                                提货日期:
                            </div>
                            <div style="display: inline-block;vertical-align: top;width: 500px;">
                                2019年4月25日
                            </div>
                        </div>
                    </div>
                    <h4 style="margin-top: 60px;font-weight: bold;">仓储明细</h4>
                    <div style="width: 760px;margin-top: 20px;">
                        <table style="width:100%;border-right: 1px solid #222;border-bottom: 1px solid #222;border-spacing: 0px;">
                            <tbody>
                            <tr>
                                <th style="border-left: 1px solid #222;border-top: 1px solid #222;height: 30px;line-height: 30px;">藏品代码</th>
                                <th style="border-left: 1px solid #222;border-top: 1px solid #222;height: 30px;line-height: 30px;">藏品名称</th>
                                <th style="border-left: 1px solid #222;border-top: 1px solid #222;height: 30px;line-height: 30px;">提货数量(件)</th>
                                <th style="border-left: 1px solid #222;border-top: 1px solid #222;height: 30px;line-height: 30px;">仓储单价</th>
                                <th style="border-left: 1px solid #222;border-top: 1px solid #222;height: 30px;line-height: 30px;">托管周期(天)</th>
                                <th style="border-left: 1px solid #222;border-top: 1px solid #222;height: 30px;line-height: 30px;">仓储费(元)</th>
                            </tr>
                            <c:forEach items="${applyList }" var="pick">
                            <tr>
                                <td style="border-left: 1px solid #222;border-top: 1px solid #222;height: 30px;line-height: 30px;">
                                ${pick.otcCode }
                                </td>
                                <td style="border-left: 1px solid #222;border-top: 1px solid #222;height: 30px;line-height: 30px;">
                                ${pick.otcName }
                                </td>
                                <td style="border-left: 1px solid #222;border-top: 1px solid #222;height: 30px;line-height: 30px;">
                                ${pick.occurAmount }
                                </td>
                                <td style="border-left: 1px solid #222;border-top: 1px solid #222;height: 30px;line-height: 30px;">
                                0.01元/件
                                </td>
                                <td style="border-left: 1px solid #222;border-top: 1px solid #222;height: 30px;line-height: 30px;">
                                ${pick.trusteeshipCycle }
                                </td>
                                <td style="border-left: 1px solid #222;border-top: 1px solid #222;height: 30px;line-height: 30px;">
                                <fmt:formatNumber type="number" value="${pick.warehousingCharges }" pattern="0.00"/>
                                </td>
                            </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </div>
                    <div style="width: 100%; height: 2px;margin: 60px 0px 40px 0;background-color: #222;"></div>
                    <div style="width: 100%;">
                        <div style="width: 100%;height: 40px;line-height: 40px;font-size: 0;">
                            <div style="display: inline-block;vertical-align: top;width: 100px;font-size: 18px;text-align: left;">
                                总费用
                            </div>
                            <div style="display: inline-block;vertical-align: top;width: 560px;font-size: 18px;">

                            </div>
                            <div style="display: inline-block;vertical-align: top;width: 100px;font-size: 18px;color: #f20000;text-align: left;">
                                ${totalAmount }元
                            </div>
                        </div>
                        <div style="width: 100%;height: 30px;line-height: 30px;font-size: 0;">
                            <div style="display: inline-block;vertical-align: top;width: 100px;font-size: 14px;text-align: right;">
                                仓储费
                            </div>
                            <div style="display: inline-block;vertical-align: top;width: 560px;font-size: 14px;">

                            </div>
                            <div style="display: inline-block;vertical-align: top;width: 100px;font-size: 14px;text-align: left;">
                                ${warehousingCharges }元
                            </div>
                        </div>
                        <div style="width: 100%;height: 30px;line-height: 30px;font-size: 0;">
                            <div style="display: inline-block;vertical-align: top;width: 100px;font-size: 14px;text-align: right;">
                                包装服务费
                            </div>
                            <div style="display: inline-block;vertical-align: top;width: 560px;font-size: 14px;">

                            </div>
                            <div style="display: inline-block;vertical-align: top;width: 100px;font-size: 14px;text-align: left;">
                                6.00元
                            </div>
                        </div>
                    </div>
                    <div class="content-msg" style="margin-top: 40px;">
                        <div style="padding: 30px;">
                            <p style="color: #f20000;font-size: 18px;">注意事项</p>
                            <p style="margin-top: 10px;">• 托管方对于藏品实行统一保管,提货时,仅从相应藏品目录下随机提取符合提货数量的实物用以交付;托管方不接受任何针对藏品性状(如版票、方联、散张等)的提货甄选要求;</p>
                            <p style="margin-top: 10px;">• 所有托管藏品入库时经统一“鉴评-入库”,保证为“全品”。托管方将鉴评标准内的品相差异与自然因素导致的品相变化视为正常交付,不接受提货人因上述原因提出的交付异议;</p>

                            <p style="margin-top: 10px;">• 本公告解释权归平台所有,未尽事宜平台有权修改和补充。如有疑问,请致电平台客服: 400-969-0800。</p>
                        </div>
                    </div>

                    <p class="pick-person" style="background-color: #fff;">
                        <span id="spPickDate" class="bold"></span>
                        <span id="spPickType"></span>
                        <span id="spDelegateName"></span>
                        <span id="spDelegateId" class="bold"></span>
                        <a id="payBtn" style="text-align: center;" class="red-btn">确认支付</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="clear"></div>
<script type="text/html" id="payDialog">
    <div style="width: 600px;height: 500px;">
        <div style="width: 100%;height: 30px;line-height: 30px;text-align: center;font-size: 18px;font-weight: bold;">
            付款码
        </div>
        <div>
            请打开微信或支付宝app扫码进行支付
        </div>
        <div>
            付款码每2分钟刷新一次,请在规定时间内完成付款
        </div>
    </div>
</script>
<jsp:include page="${ctx }/view/common/bottom.jsp" />
</body>
</html>