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文件坐标可以导入,因目前不知 ...
随机推荐
- Uploadify在MVC中使用方法案例（一个视图多次上传单张图片）
Controller 中代码和 上一节文章(http://www.cnblogs.com/yechangzhong-826217795/p/3785842.html )一样 视图中代码如下: < ...
- 全志A20芯片用于启动的SD卡的布局
起始 大小 内容 0 8KB 存放分区表等 8 24KB SPL loader 32 512KB u-boot 544 128KB environment 672 352KB 保留 1024 - 用于 ...
- zw版【转发·台湾nvp系列Delphi例程】HALCON AddNoiseWhite
zw版[转发·台湾nvp系列Delphi例程]HALCON AddNoiseWhite unit Unit1;interfaceuses Windows, Messages, SysUtils, Va ...
- yii2语言设置
1.父配置文件在yii2/base/Application中的$language="en-US", 修改项目的语言可以修改项目的配置文件main.php中加'language'=& ...
- Sql Server 检测死锁的SQL语句
首先创建一个标量值函数DigLock,用来递归检测SqlServer中的每一个会话是否存在加锁循环,如果该函数最终返回1则表示检测到了加锁循环 (也就是说检测到了死锁),如果最终返回0则表示没有检测到 ...
- oracle中dual表的使用
dual表是一个虚拟表,用来和select语句一起使用.1.查看当前用户select user from dual2.用来调用系统函数select to_char(sysdate,'yyyy-mm- ...
- python时间处理函数
所有日期.时间的api都在datetime模块内. 1. 日期输出格式化 datetime => string import datetime now = datetime.datetime.n ...
- Javascript Window Location
window.location 对象在编写时可不使用 window 这个前缀. URL : 统一资源定位符 (Uniform Resource Locator) 说明: 完整的URL示例:scheme ...
- 【Pro ASP.NET MVC 3 Framework】.学习笔记.3.MVC的主要工具-单元测试
IProductRepository接口定义了一个仓库,我们通过它获得.更新Product对象.IPriceReducer接口指定了一个功能,它将要对所有的Products实施,通过一个参数,降低他们 ...
- Spring面试问题
什么是Spring框架?Spring框架有哪些主要模块? 使用Spring框架有什么好处? 什么是控制反转(IOC)?什么是依赖注入? 请解释下Spring中的IOC? BeanFactory和App ...