dayuan
/
manyi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
							<!DOCTYPE html>
<html class="remModel">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="no-cache,no-store,no-siteapp,must-revalidate">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="author" content="">
    <meta name="description" content=""/>
    <meta name="keywords" content="扫码支付，线上投币，运营数据，物联网"/>
    <meta name="format-detection" content="telephone=no,email=no">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>订单详情</title>
    <link rel="stylesheet" href="https://cdn.washpayer.com/components/lib/mui.min.css">
    <link rel="stylesheet" href="/components/custom/css/common.css"/>
    <link rel="stylesheet" href="/app/css/xyf.common.min.css">
    <style>
        html, body, .order-detail-list {
            height: 100%;
        }

        /**表格*/
        .order-detail-list .order-goods-list {
            overflow-y: auto;
            padding-bottom: 54px;
        }

        /*卡片布局*/
        .order-detail-card .card-left {
            line-height: 1;
        }

        .order-detail-card .main-info {
            font-size: .3rem;
            color: rgba(0, 0, 0, .9);
        }

        .order-detail-card .sub-info {
            font-size: .26rem;
            color: #8f8f94;
            line-height: 1;
        }

        .order-detail-card .price {
            text-align: right;
        }

        .order-detail-card .number {
            text-align: right;
        }

        .order-detail-list .order-info-card {
            background: #fff;
            padding: 10px 15px;
        }

        .order-info-card .main-info {
            font-size: .36rem;
            line-height: .6rem;
        }

        .order-bottom-info .sub-info {
            font-size: .24rem;
            color: #555;
            line-height: .3rem;
        }

        .order-info-card2 {
            margin-top: 10px;
        }

        /**底部**/
        .order-detail-list .handle-panel {
            background: #fff;
            position: relative;
            width: 100%;
            left: 0;
            bottom: 0;
            border-top: 1px solid #c8c7cc;
            text-align: right;
            padding: 10px 15px;
            margin-top: 10px;
        }

        .order-detail-list .handle-panel .mui-btn {
            margin-left: 10px;
        }
    </style>
</head>
<body>

<div class="order-detail-list">

    <div class="order-goods-list">
        <div id="pullrefresh" class="pullrefresh">
            <div class="scrollloadContainer">
                <ul class="mui-table-view scrollload-content">
                </ul>
            </div>
        </div>
        <div class="order-info-card">
            <div class="mui-row order-detail-card ">
                <div class="mui-col-sm-8 mui-col-xs-8">
                    <div><span class="main-info">实付款</span></div>
                </div>

                <div class="mui-col-sm-4 mui-col-xs-4">
                    <div class="main-info price c-red totalFee">￥30</div>
                </div>
            </div>
        </div>

        <div class=" order-info-card order-info-card2">
            <div class="mui-row order-detail-card ">
                <div class="mui-col-sm-11 mui-col-xs-12 order-bottom-info">
                    <div><span class="sub-info orderNo" id="orderNoRow">订单编号： <span id="orderNo"></span><span
                            class="c-primary"> 复制</span></span></div>
                    <div><span class="sub-info payType"></span></div>
                    <div><span class="sub-info createdTime"></span></div>
                </div>
            </div>
        </div>
    </div>

    <div class="handle-panel btn-list">
        <button type="button" class="mui-btn mui-btn-outlined cancelBtn" onclick="cancel()">取消订单</button>
        <button type="button" class="mui-btn mui-btn-danger mui-btn-outlined payBtn" onclick="pay()">付款</button>
    </div>
</div>

<script type="text/html" id="model">
    <li class="mui-table-view-cell">
        <div class="mui-row order-detail-card">

            <div class="mui-col-sm-8 mui-col-xs-8 card-left">
                <p><span class="main-info name"></span></p>
            </div>

            <div class="mui-col-sm-4 mui-col-xs-4">
                <p class="main-info price"></p>
                <p class="sub-info number"></p>
            </div>
        </div>
    </li>
</script>

<div class="load-mask " id="agreeDialog" style="display: none">
    <div class="friendly-dialog">
        <div class="friendly-dialog-close iconfont icon-close-dark" onclick="closeAgree()">
        </div>
        <div class="friendly-dialog-body">
            为了防止您遗忘充值，系统建议您将所有设备配置为SIM卡到期自动续费，避免SIM卡过期，业务无法正常运营。
        </div>
        <div class="friendly-dialog-footer">
            <button type="button" onclick="agreeAutoPay()" class="mui-btn mui-btn-primary mui-col-sm-4 mui-col-xs-4">同意
            </button>
        </div>
    </div>
</div>

<script src="https://cdn.washpayer.com/components/lib/jquery.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
<script src="https://cdn.washpayer.com/npm/clipboard@2.0.4/dist/clipboard.min.js"></script>
<script src="https://cdn.washpayer.com/components/lib/mui.min.js"></script>
<script src="/components/custom/js/common.js"></script>
<script src="/app/js/xyf.common.js"></script>
<script src="/app/js/pay.js"></script>
<script>
    var inhouseApp = localStorage.getItem("inhouseApp")

    var orderNo = getQueryString("orderNo");
    var totalFee = null;

    //初始化数据加载组件
    $(function () {
        pullupRefresh();

        function pullupRefresh() {
            var url = "/dealer/sim/order/detail?random=" + Math.random() * 1000;
            var data = {"orderNo": orderNo};
            sendRequest(url, "GET", data, function (res) {
                var panel = $(".scrollload-content");
                if (res.result == 1) {
                    var length = res.para.items.length;
                    for (var i = 0; i < length; i++) {
                        var obj = res.para.items[i];

                        var html = $("#model").html();
                        html = $(html);

                        html.find(".name").text(obj.name);
                        html.find(".price").text("￥" + obj.price);
                        html.find(".number").text("X" + obj.number);

                        panel.append(html);
                    }

                    $(".totalFee").text("￥" + res.para.totalFee);
                    $("#orderNo").text("" + res.para.orderNo);
                    $(".createdTime").text("创建时间： " + res.para.createdTime);

                    res.para.setSimChargeAuto && $(".payType").text('充值方式： 系统自动充值')

                    totalFee = res.para.totalFee;

                    changeBtnStatus(res.para.status)
                } else {
                    mui.toast(res.description);
                }

            });
        }
    });

    //修改付款按钮状态
    function changeBtnStatus(status) {
        var text = "等待支付"
        if (status === "Paid") {
            $(".payBtn,.cancelBtn").hide();
            text = "交易成功"
        } else if (status === "Cancel") {
            $(".payBtn,.cancelBtn").hide();
            text = "订单已取消"
        }

        if ($('.handle-panel .mui-btn:visible').length === 0) {
            $('.handle-panel').hide();
        }
        $(".status").text(text);
    }

    // 同意续费，全部设备
    function agreeAutoPay() {
        sendRequest({
            url: '/dealer/setSimChargeAuto',
            type: "POST",
            data: null,
            contentType: "json",
            success: function (res) {
                if (res.result === 1) {
                    mui.toast("设置自动续费成功");
                    closeAgree()
                } else {
                    mui.toast(res.description);
                }
            }
        });
    }

    function closeAgree(){
        $('#agreeDialog').removeClass('active').hide();
        setTimeout(function () {
            history.back()
        }, 1000);
    }

    //调用充值
    function pay() {
        var openId = localStorage.getItem("simOpenId")

        goPay({"orderNo": orderNo, "totalFee": totalFee, front_url: location.href, openId: openId}, function () {
            mui.toast("支付成功");

            if (inhouseApp === 'true') {
                $('#agreeDialog').addClass('active').show();
            }

            changeBtnStatus("Paid");
        })

    }

    function cancel() {
        sendRequest({
            url: '/dealer/sim/order/cancel',
            type: "POST",
            data: {orderNo: orderNo},
            contentType: "json",
            success: function (res) {
                if (res.result === 1) {
                    mui.toast("已取消，即将返回上一页");
                    changeBtnStatus("Cancel");
                    setTimeout(function () {
                        history.back()
                    }, 2000);
                } else {
                    mui.toast(res.description);
                }

            }
        });
    }

    function bindCopyLink() {
        var clipboard = new ClipboardJS('#orderNoRow', {
            text: function (trigger) {
                var value = $('#orderNo').text()
                return value
            }
        });
        clipboard.on('success', function (e) {
            mui.toast('复制成功')
        });
    }

    bindCopyLink()


</script>
</body>
</html>