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文件坐标可以导入,因目前不知 ...
随机推荐
- ant的那些闹挺事
今日发现了一个问题,用ant+hudson去运行脚本代码时,突然ant报错: 即使我在ant的build文件中指定了basedir=“C:/Users/145064/.hudson/jobs/haix ...
- nginx、fastCGI、php-fpm关系梳理(转载 http://blog.sina.com.cn/s/blog_6df9fbe30102v57y.html)
前言: Linux下搭建nginx+php+memached(LPMN)的时候,nginx.conf中配需要配置fastCGI,php需要安装 php-fpm扩展并启动php-fpm守护进程, ...
- 创建本地yum软件源，为本地Package安装Cloudera Manager、Cloudera Hadoop及Impala做准备
一.包管理工具及CentOS的yum 1.包管理工具如何发现可以用的包 包管理工具依赖一系列软件源,工具下载源的信息存储在配置文件中,其位置随某包管理工具不同而变化 使用yum的RedHat/Cent ...
- 【RoR win32】新rails运行后0.0.0.0：3000不能访问
在浏览器中使用127.0.0.1:3000来访问
- 用javascript在客户端删除某一个cookie键值对
下面这个方法展示如何在客户端浏览器上用javascript删除某一个cookie键值对. //用javascript删除某一个cookie的方法,该方法传入要删除cookie的名称 function ...
- 视频处理控件TVideoGrabber如何对屏幕进行录制/压缩
TVideoGrabber可以对屏幕进行录制和压缩,本文来详细的说明在多种情况下TVideoGrabber是如何实现屏幕的录制和压缩. 屏幕录制 当VideoSource = vs_ScreenRec ...
- HTML5之WebSocket
在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...
- android 开发中的常见问题
Android studio 使用极光推送, 显示获取sdk版本失败 在 build.gradle(Module.app) 添加 android { sourceSets.main { ...
- 深入理解HTTP协议、HTTP协议原理分析【转】
转自:http://blog.csdn.net/lmh12506/article/details/7794512 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[-] 基础概念篇 ...
- [转]Windows配置Git
原文地址:http://blog.csdn.net/exlsunshine/article/details/18939329 1.从git官网下载windows版本的git:http://git-sc ...