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 += "转单号:            " + 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>
MUI 微信 和支付宝支付 （前台代码）的更多相关文章
- 微信和支付宝支付模式详解及实现（.Net标准库）- OSS开源系列
支付基本上是很多产品都必须的一个模块,大家最熟悉的应该就是微信和支付宝支付了,不过更多的可能还是停留在直接sdk的调用上,甚至和业务系统高度耦合,网上也存在各种解决方案,但大多形式各异,东拼西凑而成. ...
- 微信和支付宝支付模式详解及实现（.Net标准库）
支付基本上是很多产品都必须的一个模块,大家最熟悉的应该就是微信和支付宝支付了,不过更多的可能还是停留在直接sdk的调用上,甚至和业务系统高度耦合,网上也存在各种解决方案,但大多形式各异,东拼西凑而成. ...
- iOS不用官方SDK实现微信和支付宝支付XHPayKit
作者:朱晓辉Allen 链接:https://juejin.im/post/5a90dd3a6fb9a0634912b755 前言 前段时间由于项目需求,移除了项目中的微信支付SDK和支付宝支付SDK ...
- （转载）Android支付宝支付封装代码
Android支付宝支付封装代码 投稿:lijiao 字体:[增加 减小] 类型:转载 时间:2015-12-22我要评论 这篇文章主要介绍了Android支付宝支付封装代码,Android支付的时候 ...
- Android H5调起原生微信或支付宝支付
Android H5调起原生微信或支付宝支付 WebView调用原生微信或支付宝回调:其原理就是在shouldOverrideUrlLoading(final WebView view, String ...
- spring_boot_pay支付宝，微信，银联支付详细代码案例
spring-boot-pay 支付服务:支付宝,微信,银联详细代码案例(除银联支付可以测试以外,支付宝和微信支付测试均需要企业认证,个人无法完成测试),项目启动前请仔细阅读 注意事项 . 友情提示 ...
- 支付宝支付Java代码
支付宝调用流程 开发前的准备工作 配置应用网关 应用网关里面填写的值就是商户后台的异步回调地址.也就是在支付宝付完款之后,由支付宝调用商户,便于商户验证订单各信息和更新订单状态 授权回调地址 授权回调 ...
- 微信端支付宝支付，iframe改造，解决微信中无法使用支付宝付款和弹出“长按地址在浏览器中打开”
微信对支付宝的链接屏蔽了, https://mapi.alipay.com/gateway.do?_input_charset=utf-8¬ify_url=http%3A%2F%2Fzh ...
- 关于Java调用接入微信、支付宝支付提现
前言: 本篇文章介绍关于自己写的一个集成微信.支付宝的支付.提现等功能的介绍,本项目已在码云上进行开源,欢迎大家一起来进行改造,使进行更好的创新供大家使用:也有对应的pom文件坐标可以导入,因目前不知 ...
随机推荐
- ruby的在ubuntu上的安装
apt (Debian or Ubuntu) Debian GNU/Linux and Ubuntu use the apt package manager. You can use it like ...
- C++之路进阶——bzoj1455（罗马游戏）
F.A.Qs Home Discuss ProblemSet Status Ranklist Contest ModifyUser gryz2016 Logout 捐赠本站 Notice:由于本OJ ...
- Java用native2ascii命令做unicode编码转换
背景:在做Java开发的时候,常常会出现一些乱码,或者无法正确识别或读取的文件,比如常见的validator验证用的消息资源(properties)文件就需要进行Unicode重新编码.原因是java ...
- 夺命雷公狗---node.js---9实现页面的跳转
废话不多说,我们先来看看项目的文件结构,如下所示: 然后我们创建一个index.js的文件让他来做端口监听,代码如下所示: var http = require('http'); var fs = r ...
- 夺命雷公狗---DEDECMS----14dedecms首页导航条的完成
我们的首页完成了,那么下一步就开始创建一个模型了, 添加好电影模型后我们来给他添加一些字段,这些字段主要还是要看我们的项目需求来添加的,因为我们的项目里有: 我们在项目中要用得上这些字段,所以要对他们 ...
- java 与 R 相互调用
https://www.r-project.org/ http://cos.name/2013/08/r-rjava-java/ http://blog.csdn.net/hwssg/article/ ...
- 【ubuntu】首选项和应用程序命令（preference & application）
gnome-control-center 系统设置 gnome-control-center region 键盘布局 gnome-control-center screen 屏幕 gno ...
- Swift 注释
注释就是对代码的解释和说明.目的是为了让别人和自己很容易看懂.为了让别人一看就知道这段代码是做什么用的. 正确的程序注释一般包括序言性注释和功能性注释.序言性注释的主要内容包括模块的接口.数据的描述和 ...
- nginx负载均衡的实现
将一台nginx主机当作前端负载均衡服务器,后面通过交换机链接多台web服务器,提供html和php的web界面服务.通过配置前端负载均衡服务器,可以实现将html界面和php界面的分开访问,即htm ...
- IMG图片和文字同行显示
只要设定img标签的vertical-align CSS属性就好了,代码如下: <img src="images/untitled.png" style="widt ...