MUI 微信和支付宝支付（前台代码）

<!--
    校园公告详情界面 用于显示校园公告的详情信息
    在校园公告界面点击某一条目后 进入本界面查看详情
-->
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <script src="../js/mui.min.js"></script>
        <script src="../js/params.js"></script>
        <link href="../css/mui.min.css" rel="stylesheet" />
        <link href="../css/lmx.color-mode.css" rel="stylesheet" />
        <script src="../js/message.express.js"></script>
        <script type="text/javascript" charset="utf-8">
            mui.init();
            mui.plusReady(function() {
                //改写返回键 并刷新消息界面显示的消息(读过的变为已读)
                document.getElementById("message_detail_back").addEventListener("tap", function() {
                        plus.webview.currentWebview().close();
                        var targetPage = plus.webview.getWebviewById("secondpage.html");
                        mui.fire(targetPage, "refresh", {});
                    })
                    //改写回退键 并刷新消息界面显示的消息(读过的变为已读)
                mui.back = function() {
                        plus.webview.currentWebview().close();
                        var targetPage = plus.webview.getWebviewById("secondpage.html");
                        mui.fire(targetPage, "refresh", {});
                    }
                    //内容样式更改
                document.getElementById("mode_content_div").className = "mode-clear-content";
                //背景样式更改
                document.getElementById("mode_background_body").className = "mode-clear-background";
                //接收消息界面(second.html)传来的key_id值并显示
                var key_id = plus.webview.currentWebview().keyID;
                console.log("收到流水号key_id:" + key_id);
                //定义标题字符串 用于显示订单状态
                var title_str = "";
                //定义时间字符串 用于显示订单状态的最后更新时间
                var time_str = "";
                //定义内容字符串 用于显示消息内容
                var content_str = "";
                //根据流水号 获取本地保存的消息对象
                var msg = queryMsg(key_id);
                console.log("该条消息的相关信息:");
                console.log(JSON.stringify(msg));
                if (msg == "") {
                    //异常情况:如果没有查询到这条消息
                    content_str = "没有找到对应消息记录";
                } else {
                    //正常情况:如果消息存在 根据消息的不同状态 选择不同内容显示
                    var status = msg.orderStatus;
                    switch (status) {
                        case "1":
                            console.log("订单状态-->已受理(1)");
                            title_str = "您的订单已受理!"
                            time_str = msg.lastModifiedTime;
                            content_str += "转单号:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.zhuandanhao + "\n";
                            content_str += "投件方式:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.toujianfangshi + "\n";
                            content_str += "收件人:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.reveiver + "\n";
                            content_str += "收件人电话:&nbsp&nbsp&nbsp" + msg.receiver_mobile + "\n";
                            content_str += "快递公司:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.expressCompany + "\n";
                            content_str += "付款方式:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.payment + "\n";
                            content_str += "托寄物:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.tuojiwu + "\n";
                            content_str += "服务类型:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.fuwuleixing + "\n";
                            content_str += "保价金额:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.baojiajine + "\n";
                            content_str += "备注:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.beizhu + "\n";
                            break;
                        case "2":
                            console.log("订单状态-->已入库待付款(2)");
                            title_str = "您的快递" + msg.kuaididanhao + "待付款!";
                            time_str = msg.lastModifiedTime;
                            content_str += "快递单号:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.kuaididanhao + "\n";
                            content_str += "价格:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.jiage + "\n";
                            content_str += "重量:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.zhongliang + "\n";
                            content_str += "投件方式:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.toujianfangshi + "\n";
                            content_str += "收件人:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.reveiver + "\n";
                            content_str += "收件人电话:&nbsp&nbsp&nbsp" + msg.receiver_mobile + "\n";
                            content_str += "快递公司:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.expressCompany + "\n";
                            content_str += "付款方式:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.payment + "\n";
                            content_str += "托寄物:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.tuojiwu + "\n";
                            content_str += "服务类型:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.fuwuleixing + "\n";
                            content_str += "保价金额:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.baojiajine + "\n";
                            content_str += "备注:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.beizhu + "\n";
                            break;
                        case "3":
                            console.log("订单状态-->已入库待付款(3)");
                            title_str = "您的快递" + msg.kuaididanhao + "待付款!";
                            time_str = msg.lastModifiedTime;
                            content_str += "快递单号:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.kuaididanhao + "\n";
                            content_str += "价格:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.jiage + "\n";
                            content_str += "重量:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.zhongliang + "\n";
                            content_str += "投件方式:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.toujianfangshi + "\n";
                            content_str += "收件人:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.reveiver + "\n";
                            content_str += "收件人电话:&nbsp&nbsp&nbsp" + msg.receiver_mobile + "\n";
                            content_str += "快递公司:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.expressCompany + "\n";
                            content_str += "付款方式:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.payment + "\n";
                            content_str += "托寄物:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.tuojiwu + "\n";
                            content_str += "服务类型:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.fuwuleixing + "\n";
                            content_str += "保价金额:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.baojiajine + "\n";
                            content_str += "备注:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + msg.beizhu + "\n";
                            break;
                        case "4":
                            console.log("订单状态-->已付款(4)");
                            title_str = "您的快递" + msg.kuaididanhao + "已付款!"
                            break;
                        case "5":
                            console.log("订单状态-->已出库(5)");
                            title_str = "您的快递" + msg.kuaididanhao + "已出库!"
                            break;
                        default:
                            title_str = "快件状态异常";
                            break;
                    }
                    //检测支付方式
                    var pay_method = msg.payment;
                    console.log("支付方式-------------------" + pay_method);
                    //如果是待付款订单(状态为2或3) 则显示支付按钮
                    if (status == "2" || status == "3") {
                        if (pay_method == "微信") {
                            //组装微信支付HTML字符串
                            var WX_pay_str = "<button id=\"pay_btn\" style=\"width: 30%;padding-top: 10px;padding-bottom: 8px;margin-left: 30%;padding-left: 5%;padding-right: 5%;background-color: #ddffdd;\"><img id=\"pay_icon\" width=\"70%\" src=\"../img/iconfont-weixinzhifu.png\" /></button>";
                            //在html页面显示微信支付按钮
                            document.getElementById("btn_span").innerHTML = WX_pay_str;
                            //给微信支付按钮绑定监听事件 
                            document.getElementById("pay_btn").addEventListener("tap", function() {
                                //调起微信支付
                                startWXPAY();
                            })
                        } else if (pay_method == "支付宝") {
                            //组装支付宝支付HTML字符串
                            var ALI_pay_str = "<button id=\"pay_btn\" style=\"width: 30%;padding-top: 10px;padding-bottom: 8px;margin-left: 30%;padding-left: 5%;padding-right: 5%;background-color: #ddffdd;\"><img id=\"pay_icon\" width=\"100%\" src=\"../img/iconfont-zhifubao.png\" /></button>";
                            //在html页面显示支付宝按钮
                            document.getElementById("btn_span").innerHTML = ALI_pay_str;
                            //给支付宝按钮绑定监听事件
                            document.getElementById("pay_btn").addEventListener("tap", function() {
                                //调起支付宝支付
                                startALIPAY();
                            })
                        }
                    }
                }
                var wv = plus.webview.currentWebview();
                //js使用正则表达式替换文字中的换行等内容 使其能在html中显示
                content_str = ((content_str.replace(/<(.+?)>/gi, "&lt;$1&gt;")).replace(/ /gi, "&nbsp;")).replace(/\n/gi, "<br>");
                //显示标题、时间、内容信息
                document.getElementById("title_h3").innerHTML = title_str;
                document.getElementById("content_span").innerHTML = content_str;
                //删除按钮 删除当前消息
                document.getElementById("msg-delete").addEventListener("tap", function() {
                        var delete_array = ['取消', '确定'];
                        mui.confirm('为了您的包裹安全，请勿删除没有付款的货物信息，是否确认删除?', "删除消息", delete_array, function(e) {
                            if (e.index == 0) {
                                console.log("点了取消");
                                //不执行任何操作
                            } else {
                                console.log("点了确定删除");
                                //删除本条数据
                                deleteMsg(key_id);
                                //关闭本页面
                                plus.webview.currentWebview().close();
                                //调用消息界面的刷新显示
                                var target_wv = plus.webview.getWebviewById("secondpage.html");
                                mui.fire(target_wv, "refresh", {});
                            }
                        })
                    })
                    /***********发起微信支付************/
                function startWXPAY() 
                {
                    console.log("调起微信支付");
                    //调用pay()方法 发起支付即可
                    pay();
                    //定义支付通道
                    var channel = null;
                    //获取支付通道
                    getChannels();
                    //获取支付通道的方法
                    function getChannels() {
                        plus.payment.getChannels(function(channels) {
                            for (var i = 0; i < channels.length; i++) {
                                if (channels[i].id == "wxpay") {
                                    channel = channels[i];
                                }
                            }
                            plus.ui.toast("使用支付方式:" + channel.id);
                        }, function(e) {
                            plus.ui.toast("获取支付通道失败!");
                            console.log("获取支付通道失败!");
                        })
                    }
                    //发起微信支付请求的方法
                    function pay() {
                        //获取微信支付参数的url
                        var basic_url = "http://microtivo.chinacloudapp.cn:9202/";
                        mui.ajax(basic_url, {
                            data: "",
                            dataType: "json",
                            type: "get",
                            success: ajax_success_callback,
                            error: ajax_error_callback
                        })
                    }
                    //获取微信支付参数成功的回调函数
                    function ajax_success_callback(resObj) {
                        console.log("请求微信支付参数成功,返回的json:");
                        var res_str = JSON.stringify(resObj);
                        console.log(res_str);
                        //用返回参数 发起微信支付请求
                        plus.payment.request(channel, res_str, wxpay_success, wxpay_error);
                    }
                    //获取微信支付参数失败的回调函数
                    function ajax_error_callback(e) {
                        console.log("ajax获取参数失败");
                    }
                    //微信支付成功回调
                    function wxpay_success(result) {
                        plus.ui.alert("支付成功!", function() {
                            back();
                        })
                    }
                    //微信支付失败回调
                    function wxpay_error(error) {
                        plus.ui.alert("支付失败!");
                        plus.ui.alert(JSON.stringify(error));
                        console.log(JSON.stringify(error));
                    }
                }
                /***********微信支付结束************/
                /***********发起支付宝支付*************/
                function startALIPAY()
                    {
                    console.log("调起支付宝支付");
                    alert("调起支付宝支付");
                    //调用pay()方法 发起支付即可
                    
                    //定义支付通道
                    var channel = null;
                    //获取支付通道
                    getChannels();
                    //获取支付通道的方法
                    function getChannels() 
                    {
                        plus.payment.getChannels(function(channels) {
                            for (var i = 0; i <= channels.length; i++) {
                                if (channels[i].id == "alipay") 
                                {
                                    
                                    channel = channels[i];
                               }
                            }
                      alert("使用支付方式:" + channel.id);
                            plus.ui.toast("使用支付方式:" + channel.id);
                        }, function(e) {
                            
                            
                            plus.ui.toast("获取支付通道失败!");
                            console.log("获取支付通道失败!");
                        })
                        pay();
                    }
                    //发起支付宝支付请求的方法
                    function pay() {
                        //获取支付宝支付参数的url
                        var basic_url = URI_APP+"/Payment/OutOrder.json?payid=alipay";
                        mui.ajax(basic_url, {
                            data: "",
                            dataType: "text",
                            type: "get",
                            success: ajax_success_callback,
                            error: ajax_error_callback
                        })
                    }
                    //获取支付宝支付参数成功的回调函数
                    function ajax_success_callback(resObj) {
                        console.log("请求支付宝支付参数成功,返回的json:");
                    
                        //var res_str = JSON.stringify(resObj);
                        var res_str = resObj;
                        
                        console.log(res_str);
                            //alert("返回"+res_str);
                        //用返回参数 发起支付宝支付请求
                        plus.payment.request(channel, res_str, wxpay_success, wxpay_error);
                    }
                    //获取支付宝支付参数失败的回调函数
                    function ajax_error_callback(e) {
                        //alert("ajax获取参数失败");
                        console.log("ajax获取参数失败");
                    }
                    //支付宝支付成功回调
                    function wxpay_success(result) {
                        plus.ui.alert("支付成功!", function() {
                            back();
                        })
                    }
                    //支付宝支付失败回调
                    function wxpay_error(error) {
                        plus.ui.alert("支付失败!");
                        plus.ui.alert(JSON.stringify(error));
                        console.log(JSON.stringify(error));
                    }
                    }
//                /***********支付宝支付结束*************/
            })
        </script>
    </head>

    <body id="mode_background_body">
        <header class="mui-bar mui-bar-nav ibox-main-color">
            <a id="message_detail_back" class=" mui-icon mui-icon-left-nav mui-pull-left" style="color: #ffffff;"><span style="color: #ffffff;font-size: 15px;">返回</span></a>
            <h1 class="mui-title" style="color: #ffffff;font-size: 20px;">消息详情</h1>
            <button id="msg-delete" style="width: 25%;float: right;padding-top: 3.3%;padding-right: 8%;padding-left: 10%;padding-bottom: 3%;background: none;border: none;"><img src="../img/iconfont-shanchu.png" style="width: 100%;" /></button>
        </header>
        <div id="mode_content_div" class="mui-content" style="padding-left: 5%;padding-right: 5%;">
            <br>
            <br>
            <br>
            <h4 id="title_h3" style="text-align: center;"></h4>
            <br>
            <br>
            <span id="content_span"></span>
            <br>
            <br>
            <br>
            <br>
            <span id="btn_span">
            </span>
            <br>
            <br>
            <br>
            <br>
        </div>
    </body>

</html>
posted @ 2015-12-23 14:23 每天进步一点点！阅读(2872) 评论(0) 编辑收藏举报
刷新页面返回顶部
每天进步一点点！

MUI 微信 和支付宝支付 （前台代码）

公告

MUI 微信和支付宝支付（前台代码）
