MUI 微信 和支付宝支付 （前台代码）
2015-12-23 14:23
501 查看
<!--
校园公告详情界面 用于显示校园公告的详情信息
在校园公告界面点击某一条目后 进入本界面查看详情
-->
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- NSURLRequest详解
- Xcode7 自带UI单元测试详解 带demo UITests
- 关于for(;;)和while(1)/while(true)区别
- MultipartRequest实现文件上传，并修改上传文件名称
- iOS预览PDF文档 UIDocumentInteractionController
- 【AC自动机】[UESTC 554][USACO 2012]Video Game Combos
- Android导入Liblary包后报Value = 2系列错误
- VS2013编译Duilib界面库，“找不到Riched20.lib”的问题
- request.getAttribute() 和 request.getParameter() 有何区别
- Chrome 43+浏览器 Cookies encrypted_value解密脚本
- 20.给UITextField添加一些小动画, 增强UI界面的趣味
- iOS UI-Lable标签、NStimer定时器和RunLoop超级死循环
- 19.制作自动切换滚动的图片轮播
- IOS学习笔记之UISwitch
- iOS UISearchDisplayController学习笔记
- 【ZSTU4215 2015年12月浙理工校赛 F】【Dijkstra最短路】Landlocked 到达海洋最少跨越国家数
- UI布局分析工具-视图工具（Hierarchy Viewer）
- 仿支付宝密码输入界面+随机键盘
- UITextField键盘类型
- UITextField键盘类型