payInfo.jsp 18.5 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="${ctx }/resource/js/layer/qrcode.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var Pay = {
                init: function () {
                    this.bind();
                    this.render();
                    this.countdown = 120;
                    this.count = 1;
                    this.billNo = '';
                    this.interval = '';
                },
                bind: function () {
                    $(document).on('click', '#payBtn', this.showPayDialog);
                },
                render: function () {

                },
                showPayDialog: function () {
                    $.ajax({
                        type: "get",
                        url: "/pick/unionPay/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: '',
                                    cancel: function(){
                                        Pay.count = 16;
                                        window.clearInterval(Pay.interval);
                                    }
                                });
                                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%;position: relative;" 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"), {
                                    width: 200,
                                    height: 200,
                                    background: "#ffffff"
                                });
                                qrcode.clear();
                                qrcode.makeCode(data.qrCode);
                                Pay.count = 1;
                                Pay.billNo = data.billNo;
                                setTimeout(function () {
                                    Pay.interval = setInterval(function () { Pay.ajaxstatus()}, 5000);
                                }, 3000);
                                Pay._timer();
                            } else {
                                layer.msg(data.msg, {icon: '2'});
                            }
                        }
                    });
                },
                ajaxstatus: function () {
                    $.ajax({
                        type: "get",
                        url: "/pick/unionPay/query?billNo=" + Pay.billNo,
                        success: function (data) {
                            if (data.status === 'PAID') {
                                layer.msg('付款成功', {icon: '1'});
                                setTimeout(function () {
                                    window.location.href = "/user/pick/record";
                                }, 3 * 1000)
                            }else if(data.status === 'CLOSED') {
                                layer.msg('二维码已失效,请重新扫码支付', {icon: '2'});
                                setTimeout(function () {}, 5 * 1000)
                            }else if(data.status === 'UNKNOWN') {
                                layer.msg('付款失败,请重新扫码支付', {icon: '2'});
                                setTimeout(function () {}, 5 * 1000)
                            }
                        },
                        error: function () {
                            alert("请求订单状态出错");
                        }
                    });
                },
                _timer: function () {
                    if (Pay.countdown == 0) {
                        if (Pay.count > 15) {
                            window.clearInterval(Pay.interval);
                            return;
                        }
                        $.ajax({
                            type: "get",
                            url: "/pick/unionPay/createOrder",
                            success: function (data) {
                                if (data.code) {
                                    Pay.countdown = 120;
                                    var qrcode = new QRCode(document.getElementById("qrcode"), {
                                        width: 200,
                                        height: 200,
                                        background: "#ffffff"
                                    });
                                    qrcode.clear();
                                    qrcode.makeCode(data.qrCode);
                                    Pay.billNo = data.billNo;
                                    Pay.count++;
                                } else {
                                    layer.msg(data.msg, {icon: '2'});
                                }
                            }
                        });
                    } else {
                        Pay.countdown--;
                    }
                    setTimeout(function () {
                        Pay._timer()
                    }, 1000);
                }
            };
            window.Pay = Pay;
            Pay.init();
        });
    </script>
    <style>
        #qrcode img {
            position: absolute;
            top: 0;
            left: 0;
            background-color: #fff;
            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="${pickInfo.pickType == 0}">上门自提</c:if>
                                <c:if test="${pickInfo.pickType == 1}">委托他人</c:if>
                                <c:if test="${pickInfo.pickType == 2}">顺丰到付</c:if>
                                <c:if test="${pickInfo.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;">
                                ${pickName }
                            </div>
                        </div>
                        <c:if test="${pickType == 1 or pickType == 2}">
                            <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;">
                                        ${pickDate }
                                </div>
                            </div>
                        </c:if>
                    </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>