微信（jspai版本即公众号h5版）支付-微信下单支付及企业转账到零钱
一、后端前置条件
准备好商户号mchid、商户API秘钥（API安全里获取）、微信公众号APPID、微信公众号秘钥
（证书只有转账到零钱或者银行卡或者退款才需要）
产品开通支付权限，若需要付款到零钱则开通企业付款到零钱支付权限，另外付款的钱是运营账户不是基本账户的金额，必须保证运营账户有钱
登录商户平台-产品中心-开发配置
将服务器前端访问页面加入支付配置的JSAPI中（注意这里前端服务器是https就必须选择https，如果不一致可能会返回页面不在）
到APPID账号管理中添加公众号APPID
登录商户平台-账户中心-API安全
拿到商户API秘钥
登录微信公众平台-公众号设置-功能设置
在业务域名，JS接口安全域名，网页授权域名都添加上前端服务器的域名
登录微信公众平台-基本配置
新增服务器ip地址白名单（如果微信商户平台有ip限制也需要去新增ip地址）
（以下条件是企业付款到微信个人用户零钱才需要申请证书）
申请证书（按提示操作即可，转账才需要申请证书）
获得证书
解压，将p12文件放入项目resource文件夹下
二、配置h5 devServer
（uniapp下）
三、后端开发代码
pom.xml引入依赖jar包
<!-- 微信支付 -->
<dependency>
<groupId>com.github.wxpay</groupId>
<artifactId>wxpay-sdk</artifactId>
<version>0.0.3</version>
</dependency>
<dependency>
<groupId>org.jdom</groupId>
<artifactId>jdom</artifactId>
<version>2.0.2</version>
</dependency>
<!-- 以下是工具类的支持已有可不引用 -->
<dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpclient</artifactId>
<version>4.5.3</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>1.7.21</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-simple</artifactId>
<version>1.7.21</version>
</dependency>
创建微信工具类
此处查看我的百度网盘payUtils及util文件夹下的几个工具类
修改 WXPayConfigImpl.java，读取证书（加载证书需要注意证书放置位置在项目下的webapp中建文件夹，linux单独防止只要地址配置正确即可。）
public WXPayConfigImpl() throws Exception{
String certPath = WXPayConfigImpl.class.getClassLoader().getResource("").getPath();//本地运行放在resource下//放在linux中需要改为"/www/wwwroot/jar/"之类的服务器上的证书存放地址
File file = new File(certPath + "apiclient_cert.p12");
InputStream certStream = new FileInputStream(file);
this.certData = new byte[(int) file.length()];
certStream.read(this.certData);
certStream.close();
}
创建service，写方法
package com.aproject.weixin.service;
import java.io.IOException;
import java.io.Writer;
import java.lang.reflect.Field;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashMap;
import java.util.LinkedHashMap;
import java.util.Map;
import java.util.Random;
import java.util.SortedMap;
import java.util.TreeMap;
import javax.servlet.http.HttpServletRequest;
import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.ResponseHandler;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.entity.ContentType;
import org.apache.http.entity.StringEntity;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Repository;
import org.springframework.transaction.annotation.Transactional;
import com.aproject.project.tool.wxPay.WxapiController;
import com.aproject.weixin.payUtils.PayCommonUtil;
import com.aproject.weixin.payUtils.StringUtils;
import com.aproject.weixin.payUtils.WXPay;
import com.aproject.weixin.payUtils.WXPayConfig;
import com.aproject.weixin.payUtils.WXPayConfigImpl;
import com.aproject.weixin.payUtils.WXPayUtil;
import cn.hutool.log.Log;
import net.sf.json.JSONObject;
/**
* @功能说明：微信支付，订单服务类
* @作者：
* @创建日期：2021-02-22
*/
@Transactional
@Repository("WxOrderService")
public class WxOrderService {
private static final Logger log = LoggerFactory.getLogger(WxOrderService.class);
/**
* 创建微信订单
* @param openid 用户openid
* @param out_trade_no 根据逻辑自己生成的订单编号
* @param total_fee 金额,必须是整数形式的String,单位是分
* @return map
*/
public Map<String, Object> wxpay(HttpServletRequest request,String openid,String out_trade_no,String total_fee) throws Exception {
Map<String, Object> map = new HashMap<String, Object>();
WXPayConfigImpl config = new WXPayConfigImpl();
WXPay wxpay = new WXPay(config);
Map<String, String> data = new HashMap<String, String>();
data.put("appid", WXPayConfig.WX_App_ID);
data.put("body", "自己定义");
data.put("out_trade_no", out_trade_no);
data.put("device_info", "WEB");
data.put("mch_id", WXPayConfig.MCH_ID);
data.put("fee_type", "CNY");
data.put("total_fee", total_fee);
data.put("spbill_create_ip", "我的ip");
data.put("notify_url", WXPayConfig.PAY_HUL+"/api/wxapi/notifyWeiXinPay");//回调地址
data.put("openid", openid);
data.put("trade_type", "JSAPI"); // 此处指定为扫码支付
try {
System.out.println("data===="+data);
Map<String, String> resp = wxpay.unifiedOrder(data);
map.put("data", resp);
//通过返回值二次签名
String return_code = resp.get("return_code");
map.put("msga", resp.get("return_msg"));
System.out.println("return_code========"+return_code);
System.out.println("msga========"+resp);
//返回给小程序端需要的参数
if(return_code=="SUCCESS"||return_code.equals(return_code)) {
//返回的预付单信息
String prepay_id = (String) resp.get("prepay_id");
Long timeStamp = System.currentTimeMillis() / 1000;//微信是按照分来算的，我们是按照元来算的，所以需要转换
String stringSignTemp = "appId=" + WXPayConfig.WX_App_ID + "&nonceStr=" + resp.get("nonce_str") + "&package=prepay_id=" + prepay_id + "&signType=MD5&timeStamp=" + timeStamp;
map.put("appId", WXPayConfig.WX_App_ID);
map.put("timeStamp", timeStamp+ "");
map.put("nonceStr",resp.get("nonce_str"));
map.put("package", "prepay_id="+prepay_id);
map.put("prepayid", prepay_id);
String mysignTow = PayCommonUtil.sign(stringSignTemp, WXPayConfig.MCH_KEY, "utf-8").toUpperCase();
//sign签名,第二次随机签名
map.put("paySign", mysignTow);
log.info("timeStamp", timeStamp);
log.info("prepayid", prepay_id);
log.info("paySign", mysignTow);
log.info("stringSignTemp", stringSignTemp);
}
System.out.println(resp);
} catch (Exception e) {
e.printStackTrace();
}
return map;
}
//获取IP
private String getIpAddr(HttpServletRequest request) {
String ip = request.getHeader("X-Forwarded-For");
if (StringUtils.isNotEmpty(ip) && !"unKnown".equalsIgnoreCase(ip)) {
//多次反向代理后会有多个ip值，第一个ip才是真实ip
int index = ip.indexOf(",");
if (index != -1) {
return ip.substring(0, index);
} else {
return ip;
}
}
ip = request.getHeader("X-Real-IP");
if (StringUtils.isNotEmpty(ip) && !"unKnown".equalsIgnoreCase(ip)) {
return ip;
}
return request.getRemoteAddr();
}
/**
* 微信付款转账到微信用户零钱
* @param request HttpServletRequest
* @param openid 用户openid
* @param partner_trade_no 根据逻辑自己生成的订单编号
* @param amount 金额,必须是整数形式的String,单位是分,必须大于0.30元或累计大于300元
* @param desc 备注
* @param check_name 校验用户姓名 NO_CHECK：不校验真实姓名 FORCE_CHECK：强校验真实姓名
* @return
* @throws Exception
*/
public Map<String, Object> wxpayUser(String openid,String partner_trade_no,String amount,String desc,int check_name,String re_user_name) throws Exception {
Map<String, Object> map = new HashMap<String, Object>();
WXPayConfigImpl config = new WXPayConfigImpl();
WXPay wxpay = new WXPay(config);
Map<String, String> data = new HashMap<String, String>();
data.put("mch_appid", WXPayConfig.WX_App_ID);
data.put("mchid", WXPayConfig.MCH_ID);
data.put("partner_trade_no", partner_trade_no);
data.put("openid", openid);
if(check_name==1){//不校验真实姓名
data.put("check_name", "NO_CHECK");
}else {
data.put("check_name", "FORCE_CHECK");
if(re_user_name!=null) {
data.put("re_user_name", re_user_name);
}else {
map.put("re_user_name", "FORCE_CHECK时re_user_name不能为空");
return map;
}
}
data.put("amount", amount);
data.put("desc", desc);
data.put("spbill_create_ip", "我的ip");
try {
System.out.println("data===="+data);
Map<String, String> returnData=wxpay.payUser( data, config.getHttpConnectTimeoutMs(), config.getHttpReadTimeoutMs());
System.out.println("returnData===="+returnData);
map.put("nonce_str", returnData.get("nonce_str"));
map.put("mchid", returnData.get("mchid"));
map.put("partner_trade_no", returnData.get("partner_trade_no"));
map.put("payment_time", returnData.get("payment_time"));
map.put("mch_appid", returnData.get("mch_appid"));
map.put("payment_no", returnData.get("payment_no"));
} catch (Exception e) {
e.printStackTrace();
}
return map;
}
创建Controller调用方法（此处如果想只管调用支付方法或者付款方法，可参考）
package com.aproject.project.tool.wxPay;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.math.BigDecimal;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import org.apache.poi.ss.formula.functions.Na;
import org.jdom2.JDOMException;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import com.aproject.framework.aspectj.lang.annotation.Log;
import com.aproject.framework.aspectj.lang.enums.BusinessType;
import com.aproject.framework.web.controller.BaseController;
import com.aproject.framework.web.domain.AjaxResult;
import com.aproject.sample.OrderDetailed.domain.OrderDetailed;
import com.aproject.sample.OrderDetailed.service.OrderDetailedService;
import com.aproject.sample.merchant.domain.JgshMerchant;
import com.aproject.sample.merchant.service.JgshMerchantService;
import com.aproject.sample.oms.domain.OmsOrder;
import com.aproject.sample.oms.domain.OmsOrderItem;
import com.aproject.sample.oms.service.OmsOrderItemService;
import com.aproject.sample.oms.service.OmsOrderService;
import com.aproject.sample.pms.domain.PmsProduct;
import com.aproject.sample.pms.domain.PmsSkuStock;
import com.aproject.sample.pms.service.PmsProductService;
import com.aproject.sample.pms.service.PmsSkuStockService;
import com.aproject.weixin.payUtils.PayCommonUtil;
import com.aproject.weixin.payUtils.StringUtil;
import com.aproject.weixin.payUtils.WXPayConfig;
import com.aproject.weixin.service.WxOrderService;
import com.aproject.weixin.util.AccessToken;
import com.aproject.weixin.util.WX_TokenUtil;
import com.aproject.weixin.util.WeChatUtil;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
@Api("微信支付接口")
@RestController
@RequestMapping("/api/wxapi")
public class WxapiController extends BaseController{
private static final Logger log = LoggerFactory.getLogger(WxapiController.class);
@Autowired
WxOrderService wxOrderService;
@Autowired
private OrderDetailedService orderDetailedService;
@Autowired
private OmsOrderService omsOrderService;
@Autowired
private JgshMerchantService jgshMerchantService;
@Autowired
private OmsOrderItemService omsOrderItemService;
@Autowired
private PmsSkuStockService pmsSkuStockService;
@Autowired
private PmsProductService pmsProductService;
@Log(title = "调用起微信支付jsapi ", businessType = BusinessType.OTHER)
@ApiOperation("调用起微信支付jsapi" + "参数 appId---(自定义参数)" + "picFileUrl--- 图片列表"
+"type--类型( 1App商场轮播图,2:剧院动态轮播图)")
@PostMapping("/getJsTicket")
@ResponseBody
public AjaxResult getWeJsTicket(HttpSession session,HttpServletRequest request, String url) {
Map<String, Object> map = new HashMap<String, Object>();
AccessToken access_token=WX_TokenUtil.getWXToken();
System.out.println("access_token===="+access_token);
String jsapi_ticket=WeChatUtil.getSapi_ticket(access_token.getAccessToken());
String nonceStr=WeChatUtil.create_nonce_str();
String timestamp=WeChatUtil.create_timestamp();
String signature=WeChatUtil.getSignature(access_token.getAccessToken(), nonceStr, timestamp, jsapi_ticket, url);
//获取access_token
// Access_token access = viCaseService.getAccessToken(1, url,request);
// //4获取url
map.put("appId", WXPayConfig.WX_App_ID);
map.put("timestamp", timestamp);
map.put("nonceStr", nonceStr);
map.put("signature", signature);
map.put("access_token", access_token.getAccessToken());
map.put("ticket", jsapi_ticket);
return AjaxResult.success(map);
}
/**
* 调用起微信支付jsapi
* @throws Exception
*/
@Log(title = "调用起微信支付jsapi ", businessType = BusinessType.OTHER)
@ApiOperation("调用起微信支付jsapi" + "参数 appId---(自定义参数)" + "picFileUrl--- 图片列表"
+"type--类型( 1App商场轮播图,2:剧院动态轮播图)")
@PostMapping("/unifiedorder_mp")
@ResponseBody
public AjaxResult unifiedorder_mp(HttpServletRequest request,String id,String openid,String money) throws Exception{
Map m = new HashMap<>();
}
m=wxOrderService.wxpay(request,
openid,
id,//订单号
getMoney.toString());
//m.put("order_id",id);
return AjaxResult.success(m);
}
/**
* @param totalAmount 支付金额
* @param description 描述
* @param request
* @return
* @throws IOException
* @throws JDOMException
*/
@RequestMapping("/notifyWeiXinPay")
@ResponseBody
public String notifyWeiXinPay(HttpServletRequest request) throws IOException, JDOMException {
System.out.println("微信支付回调");
InputStream inStream = request.getInputStream();
ByteArrayOutputStream outSteam = new ByteArrayOutputStream();
byte[] buffer = new byte[1024];
int len = 0;
while ((len = inStream.read(buffer)) != -1) {
outSteam.write(buffer, 0, len);
}
String resultxml = new String(outSteam.toByteArray(), "utf-8");
Map<String, String> params = PayCommonUtil.doXMLParse(resultxml);
outSteam.close();
inStream.close();
Map<String,String> return_data = new HashMap<String,String>();
if (!PayCommonUtil.isTenpaySign(params)) {
// 支付失败
System.out.println("支付失败==="+params);
return_data.put("return_code", "FAIL");
return_data.put("return_msg", "return_code不正确");
return StringUtil.GetMapToXML(return_data);
} else {
System.out.println("===============付款成功==============");
// ------------------------------
// 处理业务开始
//获取订单编号,修改订单状态以及商户插入待入账金额
String orderNumber = String.valueOf(Long.parseLong(params.get("out_trade_no").split("O")[0]));
String total_fee = (String) params.get("total_fee");
String transactionId = (String) params.get("transaction_id");//支付流水号
String store_id = "";
OrderDetailed detailed = orderDetailedService.selectOrderDetailedById(orderNumber); //查询是否存在多订单
if(detailed != null) {
String orderIds = detailed.getOrderIds();
String[] order_ids = orderIds.split(",");
for (String string : order_ids) {
OmsOrder selectOmsOrderById = omsOrderService.selectOmsOrderById(Long.parseLong(string));
store_id = selectOmsOrderById.getAppId();//商户id
changeOmsOrder(string,transactionId);
}
}else { //单个订单
OmsOrder selectOmsOrderById = omsOrderService.selectOmsOrderById(Long.parseLong(orderNumber));
store_id = selectOmsOrderById.getAppId();//商户id
changeOmsOrder(orderNumber,transactionId);
}
double v = Double.valueOf(total_fee) / 100;
BigDecimal addMoney = new BigDecimal(v);
JgshMerchant selectJgshMerchantById = jgshMerchantService.selectJgshMerchantById(store_id);
BigDecimal disableCashout = selectJgshMerchantById.getDisableCashout();
selectJgshMerchantById.setDisableCashout(disableCashout.add(addMoney));//增加待提现金额
jgshMerchantService.updateJgshMerchant(selectJgshMerchantById);
return_data.put("return_code", "SUCCESS");
return_data.put("return_msg", "OK");
return StringUtil.GetMapToXML(return_data);
}
}
public void changeOmsOrder(String out_trade_no,String transactionId) {
OmsOrder order = omsOrderService.selectOmsOrderById(Long.parseLong(out_trade_no));
if(order.getStatus().equals(0)) {
order.setPayType(2); //设置支付方式 微信
order.setStatus(1); //支付成功后 变成待发货状态
order.setPaymentTime(new Date()); //支付时间
order.setZfbTradeNo(transactionId); //微信支付订单号
omsOrderService.updateOmsOrder(order); //更新
//减少库存操作
OmsOrderItem item = new OmsOrderItem();
item.setOrderId(Long.parseLong(out_trade_no));
List<OmsOrderItem> itemList = omsOrderItemService.selectOmsOrderItemList(item); //订单明细表信息
for (OmsOrderItem item1 : itemList) {
PmsSkuStock s = new PmsSkuStock();
s.setProductId(item1.getProductId());
s.setSkuCode(item1.getProductSkuCode());
List<PmsSkuStock> pmsSkuStockList = pmsSkuStockService.selectPmsSkuStockList(s);
PmsSkuStock skuStock = pmsSkuStockList.get(0);
Long stock = skuStock.getStock(); //库存数量
Long buyNum = item1.getProductQuantity(); //购买数量
stock = stock - buyNum; // 更新库存
skuStock.setStock(stock);
pmsSkuStockService.updatePmsSkuStock(skuStock);
PmsProduct product = pmsProductService.selectPmsProductById(item1.getProductId()); //产品
Long sale2 = product.getSale(); //此产品销量
sale2 = sale2 + buyNum;
product.setSale(sale2);
Long pStock = product.getStock(); //产品库存
pStock = pStock - buyNum;
}
}
}
}
四、前端开发代码（uniapp）
cmd到前端项目下，npm引入jweixin-module
新建wxPay.js
/*
微信支付方法(uni-app h5)适用
获取微信加签信息
@param{data}:获取的微信加签
@param{res}:成功回调
@param{fail}:失败回调
@warn:因为package为严格模式下的保留字，不能用作变量.
@use
wxPay({
appId,
timeStamp,
nonceStr,
signature,
package,
paySign
},res=>{
console.log('调用成功!');
},fail=>{
console.log('调用失败!');
})
*/
const wx = require('jweixin-module');
const wxPay = (data, callback, errCallback) => {
const {appId, timestamp,nonceStr, signature,timestamp1, nonceStr1,prepayid, packages, paySign} = data;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId, // 必填，公众号的唯一标识
timestamp, // 必填，生成签名的时间戳
nonceStr, // 必填，生成签名的随机串
signature, // 必填，签名，见附录1
jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.ready(function() {
wx.chooseWXPay({
timestamp:timestamp1, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr:nonceStr1, // 支付签名随机串，不长于 32 位
'package': packages, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
'signType': 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign:paySign, // 支付签名
success(res) {
// 支付成功后的回调函数
console.log('cg')
callback(res);
},
fail(res) {
console.log('sb')
errCallback(res);
}
});
});
wx.error(function(res) {
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
/*alert("config信息验证失败");*/
});
}
export default wxPay;
新建utils.js挂载方法
function Core() {
}
Core.prototype.isWechat = function() {
return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
}
Core.prototype.getAppid = function() {
return 'wx544764abf19fc7f1';
}
export default mainUtil
在main.js中挂载
Vue.prototype.$isWechat= util.isWechat;
Vue.prototype.$getAppid= util.getAppid;
在pay.vue中关键代码
import wxPay from '@/static/js/common/wxPay.js'
return {
openid: '一个openid',
payType: 1,
order_id: "156498768567",
money: 1,
providerList: []
};
调用方法
// #ifdef H5
if (this.$isWechat()) {
let appid = this.$getAppid();
// 这里是获取code后要跳转的地址，可以自定义也可以使用当前地址，使用当前页面地址需要自行判断处理code
let local = window.location.href;
console.log(local);
// window.location.href =
// `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`;
//return;
if(!that.money||that.money<0){that.$toast("金额不对！");return;}
if(!that.order_id){that.$toast("并无此订单！");return;}
if(!that.openid){that.$toast("未登入！");return;}
this.$post("api/wxapi/getJsTicket", {//获取JsTicket及AsseceToken及签名Sing
url: local
}, function(res) {
console.log('getJsTicket',res);
var data1=res.data;
var o = {
id: that.order_id,
openid: that.openid,
money: that.money
};
that.$post("api/wxapi/unifiedorder_mp", o, function(res) {
console.log(res)
// if (res.status != 200) {
// console.log(res.msg)
// //this.$toast(res.msg)
// return
// }
var orderInfo = {//appId, timestamp,timestamp1, nonceStr,nonceStr1, signature, packages,prepayid, paySign
appId:data1.appId,
timestamp : data1.timestamp,
nonceStr : data1.nonceStr,
signature : data1.signature,
nonceStr1: res.data.nonceStr,
packages: res.data.package,
//partnerid: res.data.data.partnerid,
prepayid: res.data.prepayid,
timestamp1: res.data.timeStamp,
paySign: res.data.paySign
}
console.log('orderInfo',orderInfo)
console.log('bbbb',res)
wxPay(orderInfo, s => {
console.log('aaaa',res)
that.$redirectTo('/pages/pay/paySuccess');
//window.location.href = `/h5/#/pages/order/index`
}, e => {
console.log('dddd',res)
console.log(res)
//window.location.href = `/h5/#/pages/shop/cashier?order_sn=${order_sn}`
})
}, res => {
console.log('这是失败了')
// this.$msg(res.msg)
})
})
}else{
that.$toast("支付失败,不在微信浏览器中！")
}
pay.vue全部代码
<template>
<view class="app">
<view class="price-box">
<text>支付金额</text>
<text class="price">{{money}}</text>
</view>
<view class="pay-type-list">
<view class="type-item b-b" @click="changePayType(1)">
<text class="iconfont iconweixinzhifu3" style="color: green; font-size: 2rem;"></text>
<view class="con">
<text class="tit">微信支付</text>
<!-- <text>推荐使用微信支付</text> -->
</view>
<label class="radio">
<radio value="" color="#fa436a" :checked='payType == 1' />
</radio>
</label>
</view>
<!-- <view class="type-item b-b" @click="changePayType(2)">
<text class="icon yticon icon-alipay"></text>
<view class="con">
<text class="tit" >支付宝支付</text>
<text>推荐使用支付宝支付</text>
</view>
<label class="radio">
<radio value="" color="#fa436a" :checked='payType == 2' />
</radio>
</label>
</view> -->
</view>
<text class="mix-btn" @click="confirm()">立即支付</text>
</view>
</template>
<script>
import wxPay from '@/static/js/common/wxPay.js'
// const jweixin = require('jweixin-module')
export default {
data() {
let _user = this.getUser();
return {
openid: _user.wxOpenId,//,
payType: 1,
order_id: "",
money: 0,
providerList: []
};
},
computed: {
},
onLoad(options) {
this.loadData(options)
//this.initapppay()
},
methods: {
initapppay() {
uni.getProvider({
service: "payment",
success: (e) => {
//this.$toast("payment success:" + JSON.stringify(e));
let providerList = [];
e.provider.map((value) => {
switch (value) {
case 'alipay':
providerList.push({
name: '支付宝',
id: value,
loading: false
});
break;
case 'wxpay':
providerList.push({
name: '微信',
id: value,
loading: false
});
break;
default:
break;
}
})
this.providerList = providerList;
},
fail: (e) => {
console.log("获取支付通道失败：", e);
}
});
},
loadData(o) {
this.money = o.money;
this.order_id = o.order_id
},
changePayType(type) {
this.payType = type;
},
onwxpayresult(res) {
let that = this
if (res.err_msg == "get_brand_wcpay_request:ok") {
uni.getStorage({
key: 'buy_type',
success: function(res) {
o = res.data;
if (o === "cart") {
uni.getStorage({
key: 'cart_list',
success: function(res) {
var list = res.data;
var li = [];
for (let i in list) {
var ite = list[i];
if (ite.checked === true) {
li.push(ite.id)
}
}
this.$post("cart/rm_cart_by_bought", {
"ids": JSON.stringify(li)
}, function(res) {
})
}
});
}
}
});
uni.redirectTo({
url: '../order/order?state=2'
})
} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
that.$msg("用户取消支付!");
} else {
alert("支付失败!");
}
},
onalipayresult(res) {
let that = this
console.log("alipay", res)
return
if (res.err_msg == "get_brand_wcpay_request:ok") {
uni.getStorage({
key: 'buy_type',
success: function(res) {
o = res.data;
if (o === "cart") {
uni.getStorage({
key: 'cart_list',
success: function(res) {
var list = res.data;
var li = [];
for (let i in list) {
var ite = list[i];
if (ite.checked === true) {
li.push(ite.id)
}
}
this.$post("cart/rm_cart_by_bought", {
"ids": JSON.stringify(li)
}, function(res) {
})
}
});
}
}
});
uni.redirectTo({
url: '../order/order?state=2'
})
} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
that.$msg("用户取消支付!");
} else {
alert("支付失败!");
}
},
confirm() {
if (this.payType == 1) {
this.confirmweixin()
} else {
this.confirmalipay()
}
},
confirmalipay() {
this.$post("aliapi/unifiedorder_app", {
id: this.order_id
}, (res) => {
if (res.status != 200) {
this.$msg(res.msg)
return
}
var orderInfo = {
"appid": res.data.appid,
"noncestr": res.data.noncestr,
"package": res.data.package,
"partnerid": res.data.partnerid,
"prepayid": res.data.prepayid,
"timestamp": res.data.timestamp,
"sign": res.data.sign
}
var reqdata = {}
reqdata.provider = "alipay";
reqdata.orderInfo = res.data;
reqdata.success = (res) => {
this.$msg("支付成功")
uni.redirectTo({
url: '/pages/order/order?state=2'
})
}
reqdata.fail = (err) => {
console.log(err)
this.$msg("支付失败" + err.errMsg)
}
uni.requestPayment(reqdata);
}, res => {
console.log(reqdata)
this.$msg(res.msg)
})
},
//确认支付
confirmweixin() {
let that = this
if (this.isApp()) {
that.$toast("支付失败!当前不在微信浏览器内！")
// console.log('这是wxapi/unifiedorder_app')
// this.$post("wxapi/unifiedorder_app", {
// id: this.order_id
// }, (res) => {
// if (res.status != 200) {
// this.$toast(res.msg)
// return
// }
// var orderInfo = {
// "appid": res.data.appid,
// "noncestr": res.data.noncestr,
// "packages": res.data.package,
// "partnerid": res.data.partnerid,
// "prepayid": res.data.prepayid,
// "timestamp": res.data.timestamp,
// "sign": res.data.sign
// }
// var reqdata = {}
// reqdata.provider = "wxpay";
// reqdata.orderInfo = orderInfo;
// reqdata.success = (res) => {
// this.$toast("支付成功")
// this.$redirectTo('/pages/order/order?stat=2');
// }
// reqdata.fail = (err) => {
// console.log(err)
// that.$toast("支付失败" + err.errMsg)
// }
// uni.requestPayment(reqdata);
// }, res => {
// console.log(reqdata)
// this.$msg(res.msg)
// })
} else {
console.log('这是wxapi/unifiedorder_mp')
// h5环境且在微信浏览器中
// #ifdef H5
if (this.$isWechat()) {
let appid = this.$getAppid();
// 这里是获取code后要跳转的地址，可以自定义也可以使用当前地址，使用当前页面地址需要自行判断处理code
let local = window.location.href;
console.log(local);
// window.location.href =
// `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`;
//return;
if(!that.money||that.money<0){that.$toast("金额不对！");return;}
if(!that.order_id){that.$toast("并无此订单！");return;}
if(!that.openid){that.$toast("未登入！");return;}
this.$post("api/wxapi/getJsTicket", {//获取JsTicket及AsseceToken及签名Sing
url: local
}, function(res) {
console.log('getJsTicket',res);
var data1=res.data;
var o = {
id: that.order_id,
openid: that.openid,
money: that.money
};
that.$post("api/wxapi/unifiedorder_mp", o, function(res) {
console.log(res)
// if (res.status != 200) {
// console.log(res.msg)
// //this.$toast(res.msg)
// return
// }
var orderInfo = {//appId, timestamp,timestamp1, nonceStr,nonceStr1, signature, packages,prepayid, paySign
appId:data1.appId,
timestamp : data1.timestamp,
nonceStr : data1.nonceStr,
signature : data1.signature,
nonceStr1: res.data.nonceStr,
packages: res.data.package,
//partnerid: res.data.data.partnerid,
prepayid: res.data.prepayid,
timestamp1: res.data.timeStamp,
paySign: res.data.paySign
}
console.log('orderInfo',orderInfo)
console.log('bbbb',res)
wxPay(orderInfo, s => {
console.log('aaaa',res)
that.$redirectTo('/pages/pay/paySuccess');
}, e => {
console.log('dddd',res)
console.log(res)
}else{
that.$toast("支付失败,不在微信浏览器中！")
}
}
}
}
}
</script>
<style lang='scss'>
.app {
width: 100%;
}
.price-box {
background-color: #fff;
height: 265upx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 28upx;
color: #909399;
.price {
font-size: 50upx;
color: #303133;
margin-top: 12upx;
&:before {
content: '￥';
font-size: 40upx;
}
}
}
.pay-type-list {
margin-top: 20upx;
background-color: #fff;
padding-left: 60upx;
.type-item {
height: 120upx;
padding: 20upx 0;
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 60upx;
font-size: 30upx;
position: relative;
}
.icon {
width: 100upx;
font-size: 52upx;
}
.icon-erjiye-yucunkuan {
color: #fe8e2e;
}
.icon-weixinzhifu {
color: #36cb59;
}
.icon-alipay {
color: #01aaef;
}
.tit {
font-size: 32upx;
color: #303133;
margin-bottom: 4upx;
}
.con {
flex: 1;
display: flex;
flex-direction: column;
font-size: 24upx;
color: #f8f6fc;
}
}
.mix-btn {
display: flex;
align-items: center;
justify-content: center;
width: 630upx;
height: 80upx;
margin: 80upx auto 30upx;
font-size: 32upx;
color: #fff;
background-color: #fa436a;
border-radius: 10upx;
box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
</style>
扫一扫
1224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
