<!-- 校園公告詳情界面 用於顯示校園公告的詳情信息 在校園公告界面點擊某一條目后 進入本界面查看詳情 --> <!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 += "轉單號:            " + msg.zhuandanhao + "\n"; content_str += "投件方式:       " + msg.toujianfangshi + "\n"; content_str += "收件人:           " + msg.reveiver + "\n"; content_str += "收件人電話:   " + msg.receiver_mobile + "\n"; content_str += "快遞公司:       " + msg.expressCompany + "\n"; content_str += "付款方式:       " + msg.payment + "\n"; content_str += "托寄物:           " + msg.tuojiwu + "\n"; content_str += "服務類型:       " + msg.fuwuleixing + "\n"; content_str += "保價金額:       " + msg.baojiajine + "\n"; content_str += "備注:               " + msg.beizhu + "\n"; break; case "2": console.log("訂單狀態-->已入庫待付款(2)"); title_str = "您的快遞" + msg.kuaididanhao + "待付款!"; time_str = msg.lastModifiedTime; content_str += "快遞單號:            " + msg.kuaididanhao + "\n"; content_str += "價格:               " + msg.jiage + "\n"; content_str += "重量:               " + msg.zhongliang + "\n"; content_str += "投件方式:       " + msg.toujianfangshi + "\n"; content_str += "收件人:           " + msg.reveiver + "\n"; content_str += "收件人電話:   " + msg.receiver_mobile + "\n"; content_str += "快遞公司:       " + msg.expressCompany + "\n"; content_str += "付款方式:       " + msg.payment + "\n"; content_str += "托寄物:           " + msg.tuojiwu + "\n"; content_str += "服務類型:       " + msg.fuwuleixing + "\n"; content_str += "保價金額:       " + msg.baojiajine + "\n"; content_str += "備注:               " + msg.beizhu + "\n"; break; case "3": console.log("訂單狀態-->已入庫待付款(3)"); title_str = "您的快遞" + msg.kuaididanhao + "待付款!"; time_str = msg.lastModifiedTime; content_str += "快遞單號:            " + msg.kuaididanhao + "\n"; content_str += "價格:               " + msg.jiage + "\n"; content_str += "重量:               " + msg.zhongliang + "\n"; content_str += "投件方式:       " + msg.toujianfangshi + "\n"; content_str += "收件人:           " + msg.reveiver + "\n"; content_str += "收件人電話:   " + msg.receiver_mobile + "\n"; content_str += "快遞公司:       " + msg.expressCompany + "\n"; content_str += "付款方式:       " + msg.payment + "\n"; content_str += "托寄物:           " + msg.tuojiwu + "\n"; content_str += "服務類型:       " + msg.fuwuleixing + "\n"; content_str += "保價金額:       " + msg.baojiajine + "\n"; content_str += "備注:               " + 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, "<$1>")).replace(/ /gi, " ")).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>