支付的时候一般需要几个参数：
- ‘timeStamp’: 时间戳,
- ‘nonceStr’: 随机字符串，不超过32位
- ‘package’: 下单后接口返回的prepauid
- ‘signType’: 签名的算法
- ‘paySign’: 后端会给前端一个签名
- sign: data.sign // 根据签名算法生成签名
<template>
<view>
<scroll-view scroll-y>
<view class="block__title">报修信息</view>
<view class="cu-list menu">
<view class="cu-item">
<view class="content">
<text class="text-grey">工单号</text>
</view>
<view class="action">
<text class="text-grey text-sm">{{repairId}}</text>
</view>
</view>
<view class="cu-item">
<view class="content">
<text class="text-grey">报修类型</text>
</view>
<view class="action">
<text class="text-grey text-sm">{{repairTypeName}}</text>
</view>
</view>
<view class="cu-item">
<view class="content">
<text class="text-grey">报修位置</text>
</view>
<view class="action">
<text class="text-grey text-sm">{{repairObjName}}</text>
</view>
</view>
<view class="cu-item">
<view class="content">
<text class="text-grey">报修人</text>
</view>
<view class="action">
<text class="text-grey text-sm">{{repairName}}</text>
</view>
</view>
<view class="cu-item">
<view class="content">
<text class="text-grey">报修内容</text>
</view>
<view class="action">
<text class="text-grey text-sm">{{remark}}</text>
</view>
</view>
</view>
<view class="block__title">费用信息</view>
<view class="cu-list menu fee-last">
<view class="cu-item">
<view class="content">
<text class="text-grey">费用编号</text>
</view>
<view class="action">
<text class="text-grey text-sm">{{feeInfo.feeId }}</text>
</view>
</view>
<view class="cu-item">
<view class="content">
<text class="text-grey">金额</text>
</view>
<view class="action">
<text class="text-grey text-sm">{{feeInfo.amount + '元' }}</text>
</view>
</view>
</view>
</scroll-view>
<view class=" bg-white border flex justify-end" style="position: fixed;width: 100%;bottom: 0;">
<view class="action text-orange margin-right line-height">
合计：{{feeInfo.amount}}元
</view>
<view class="btn-group">
<!-- #ifdef H5 || MP-WEIXIN -->
<button class="cu-btn bg-red shadow-blur lgplus sharp" @click="onPayFee()">提交订单</button>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<button class="cu-btn bg-red shadow-blur lgplus sharp" @click="_payWxApp()">提交订单</button>
<!-- #endif -->
</view>
</view>
</view>
</view>
</template>
<script>
import {date2String} from '../../lib/java110/utils/DateUtil.js'
import context from '../../lib/java110/Java110Context.js';
const constant = context.constant;
const util = context.util;
// #ifdef H5
const WexinPayFactory = require('../../factory/WexinPayFactory.js');
// #endif
export default {
data() {
return {
communityId: '',
communityName: '',
repairId:'',
appId: '',
repairInfo:{},
feeInfo:{},
userId:'',
payerObjId: '',
payerObjType: '3333',
endTime: '',
repairTypeName: '',
repairObjName: '',
repairName: '',
remark: '',
};
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
context.onLoad(options);
// #ifdef MP-WEIXIN
let accountInfo = uni.getAccountInfoSync();
this.appId = accountInfo.miniProgram.appId;
// #endif
// #ifdef H5
this.appId = uni.getStorageSync(constant.mapping.W_APP_ID)
// #endif
this.communityId = options.communityId;
this.repairId = options.repairId;
this.userId = options.userId;
this.payerObjId = options.repairObjId;
this.endTime = date2String(new Date(options.appointmentTime.replace(/-/g, "/")));
this.repairTypeName = options.repairTypeName;
this.repairObjName = options.repairObjName;
this.repairName = options.repairName;
this.remark = options.context
this._loadRepair();
this._listFee();
},
methods: {
/**
* 加载我的报修
*
*/
_listFee: function() {
let that = this;
let _url = '';
_url = constant.url.listFeeByAttr;
let _paramIn = {
"communityId": that.communityId,
"page": 1,
"row": 1,
"specCd": '390001',
"value": that.repairId
};
context.request({
url: _url,
header: context.getHeaders(),
method: "GET",
data: _paramIn,
success: function(res) {
let _json = res.data;
if (_json.code == 0) {
that.feeInfo = _json.data[0];
return;
}
wx.showToast({
title: "查询费用失败",
icon: 'none',
duration: 2000
});
},
fail: function(e) {
wx.showToast({
title: "服务器异常了",
icon: 'none',
duration: 2000
})
}
})
},
_loadRepair: function() {
let that = this;
let _url = '';
_url = constant.url.listStaffFinishRepairs;
let _paramIn = {
"communityId": that.communityId,
"page": 1,
"row": 1,
"userId": that.userId,
"repairId": that.repairId
};
context.request({
url: _url,
header: context.getHeaders(),
method: "GET",
data: _paramIn,
success: function(res) {
let _json = res.data;
if (_json.code == 0) {
that.repairInfo = _json.data[0];
return;
}
wx.showToast({
title: "查询报修单失败",
icon: 'none',
duration: 2000
});
},
fail: function(e) {
wx.showToast({
title: "服务器异常了",
icon: 'none',
duration: 2000
})
}
})
},
_payWxApp: function(_data) {
wx.showLoading({
title: '支付中'
});
let _tradeType = 'APP';
let _objData = {
cycles: 1,
communityId: this.communityId,
feeId: this.feeInfo.feeId,
feeName: '报修费',
receivedAmount: this.feeInfo.feePrice,
tradeType: _tradeType,
appId: this.appId
};
context.request({
url: constant.url.preOrder,
header: context.getHeaders(),
method: "POST",
data: _objData,
//动态数据
success: function(res) {
if (res.statusCode == 200 && res.data.code == '0') {
let data = res.data; //成功情况下跳转
let obj = {
appid: data.appId,
noncestr: data.nonceStr,
package: 'Sign=WXPay', // 固定值，以微信支付文档为主
partnerid: data.partnerid,
prepayid: data.prepayid,
timestamp: data.timeStamp,
sign: data.sign // 根据签名算法生成签名
}
// 第二种写法，传对象字符串
let orderInfo = JSON.stringify(obj)
uni.requestPayment({
provider: 'wxpay',
orderInfo: orderInfo, //微信、支付宝订单数据
success: function(res) {
uni.showToast({
title: "支付成功",
duration: 2000
});
uni.navigateBack({});
},
fail: function(err) {
console.log('fail:' + JSON.stringify(err));
}
});
wx.hideLoading();
return;
}
wx.hideLoading();
wx.showToast({
title: "缴费失败",
icon: 'none',
duration: 2000
});
},
fail: function(e) {
wx.hideLoading();
wx.showToast({
title: "服务器异常了",
icon: 'none',
duration: 2000
});
}
});
},
onPayFee: function() {
wx.showLoading({
title: '支付中'
});
let _tradeType = 'JSAPI';
let _objData = {
cycles: '1',
communityId: this.communityId,
feeId: this.feeInfo.feeId,
feeName: '报修费',
receivedAmount: this.feeInfo.feePrice,
tradeType: _tradeType,
appId: this.appId,
endTime: this.endTime,
payerObjId: this.payerObjId,
payerObjType: this.payerObjType
};
context.request({
url: constant.url.preOrder,
header: context.getHeaders(),
method: "POST",
data: _objData,
//动态数据
success: function(res) {
if (res.statusCode == 200 && res.data.code == '0') {
let data = res.data; //成功情况下跳转
// #ifdef MP-WEIXIN
uni.requestPayment({
'timeStamp': data.timeStamp,
'nonceStr': data.nonceStr,
'package': data.package,
'signType': data.signType,
'paySign': data.sign,
'success': function(res) {
uni.showToast({
title: "支付成功",
duration: 2000
});
uni.navigateBack({});
},
'fail': function(res) {
console.log('fail:' + JSON.stringify(res));
}
});
// #endif
// #ifdef H5
WexinPayFactory.wexinPay(data,function(){
uni.showToast({
title: "支付成功",
duration: 2000
});
uni.navigateBack({});
});
// #endif
wx.hideLoading();
return;
}
wx.hideLoading();
wx.showToast({
title: "缴费失败",
icon: 'none',
duration: 2000
});
},
fail: function(e) {
wx.hideLoading();
wx.showToast({
title: "服务器异常了",
icon: 'none',
duration: 2000
});
}
});
}
}
};
</script>
<style>
.ppf_item{
padding: 0rpx 0rpx 0rpx 0rpx;
}
.block__title {
margin: 0;
font-weight: 400;
font-size: 14px;
color: rgba(69,90,100,.6);
padding: 40rpx 30rpx 20rpx;
}
.button_up_blank{
height: 40rpx;
}
.block__bottom{
height: 180rpx;
}
.fee-last {
margin-bottom: 200upx;
}
.cu-btn.lgplus {
padding: 0 20px;
font-size: 18px;
height: 100upx;
}
.cu-btn.sharp {
border-radius: 0upx;
}
.line-height {
line-height: 100upx;
}
</style>
import sheep from '@/sheep';
// #ifdef H5
import $wxsdk from '@/sheep/libs/sdk-h5-weixin';
// #endif
import { getRootUrl } from '@/sheep/helper';
import PayOrderApi from '@/sheep/api/pay/order';
/**
* 支付
*
* @param {String} payment = ['wechat','alipay','wallet','mock'] - 支付方式
* @param {String} orderType = ['goods','recharge','groupon'] - 订单类型
* @param {String} id - 订单号
*/
export default class SheepPay {
constructor(payment, orderType, id) {
this.payment = payment;
this.id = id;
this.orderType = orderType;
this.payAction();
}
payAction() {
const payAction = {
WechatOfficialAccount: {
wechat: () => {
this.wechatOfficialAccountPay();
},
alipay: () => {
this.redirectPay(); // 现在公众号可以直接跳转支付宝页面
},
wallet: () => {
this.walletPay();
},
mock: () => {
this.mockPay();
}
},
WechatMiniProgram: {
wechat: () => {
this.wechatMiniProgramPay();
},
alipay: () => {
this.copyPayLink();
},
wallet: () => {
this.walletPay();
},
mock: () => {
this.mockPay();
}
},
App: {
wechat: () => {
this.wechatAppPay();
},
alipay: () => {
this.alipay();
},
wallet: () => {
this.walletPay();
},
mock: () => {
this.mockPay();
}
},
H5: {
wechat: () => {
this.wechatWapPay();
},
alipay: () => {
this.redirectPay();
},
wallet: () => {
this.walletPay();
},
mock: () => {
this.mockPay();
}
},
};
return payAction[sheep.$platform.name][this.payment]();
}
// 预支付
prepay(channel) {
return new Promise(async (resolve, reject) => {
let data = {
id: this.id,
channelCode: channel,
channelExtras: {}
};
// 特殊逻辑：微信公众号、小程序支付时，必须传入 openid
if (['wx_pub', 'wx_lite'].includes(channel)) {
const openid = await sheep.$platform.useProvider('wechat').getOpenid();
// 如果获取不到 openid，微信无法发起支付，此时需要引导
if (!openid) {
this.bindWeixin();
return;
}
data.channelExtras.openid = openid;
}
// 发起预支付 API 调用
PayOrderApi.submitOrder(data).then((res) => {
// 成功时
res.code === 0 && resolve(res);
// 失败时
if (res.code !== 0 && res.msg.indexOf('无效的openid') >= 0) {
// 特殊逻辑：微信公众号、小程序支付时，必须传入 openid 不正确的情况
if (res.msg.indexOf('无效的openid') >= 0 // 获取的 openid 不正确时，或者随便输入了个 openid
|| res.msg.indexOf('下单账号与支付账号不一致') >= 0) { // https://developers.weixin.qq.com/community/develop/doc/00008c53c347804beec82aed051c00
this.bindWeixin();
}
}
});
});
}
// #ifdef H5
// 微信公众号 JSSDK 支付
async wechatOfficialAccountPay() {
let { code, data } = await this.prepay('wx_pub');
if (code !== 0) {
return;
}
const payConfig = JSON.parse(data.displayContent);
$wxsdk.wxpay(payConfig, {
success: () => {
this.payResult('success');
},
cancel: () => {
sheep.$helper.toast('支付已手动取消');
},
fail: (error) => {
if (error.errMsg.indexOf('chooseWXPay:没有此SDK或暂不支持此SDK模拟') >= 0) {
sheep.$helper.toast('发起微信支付失败，原因：可能是微信开发者工具不支持，建议使用微信打开网页后支付');
return
}
this.payResult('fail');
},
});
}
// 浏览器微信 H5 支付 TODO 芋艿：待接入
async wechatWapPay() {
const { error, data } = await this.prepay();
if (error === 0) {
const redirect_url = `${getRootUrl()}pages/pay/result?id=${this.id}&payment=${this.payment}&orderType=${this.orderType}`;
location.href = `${data.pay_data.h5_url}&redirect_url=${encodeURIComponent(redirect_url)}`;
}
}
// 支付链接 TODO 芋艿：待接入
async redirectPay() {
let { error, data } = await this.prepay();
if (error === 0) {
const redirect_url = `${getRootUrl()}pages/pay/result?id=${this.id}&payment=${this.payment}&orderType=${this.orderType}`;
location.href = data.pay_data + encodeURIComponent(redirect_url);
}
}
// #endif
// 微信小程序支付
async wechatMiniProgramPay() {
// let that = this;
let { code, data } = await this.prepay('wx_lite');
if (code !== 0) {
return;
}
// 调用微信小程序支付
const payConfig = JSON.parse(data.displayContent);
uni.requestPayment({
provider: 'wxpay',
timeStamp: payConfig.timeStamp,
nonceStr: payConfig.nonceStr,
package: payConfig.packageValue,
signType: payConfig.signType,
paySign: payConfig.paySign,
success: (res) => {
this.payResult('success');
},
fail: (err) => {
if (err.errMsg === 'requestPayment:fail cancel') {
sheep.$helper.toast('支付已手动取消');
} else {
this.payResult('fail');
}
},
});
}
// 余额支付
async walletPay() {
const { code } = await this.prepay('wallet');
code === 0 && this.payResult('success');
}
// 模拟支付
async mockPay() {
const { code } = await this.prepay('mock');
code === 0 && this.payResult('success');
}
// 支付宝复制链接支付 TODO 芋艿：待接入
async copyPayLink() {
let that = this;
let { error, data } = await this.prepay();
if (error === 0) {
// 引入showModal 点击确认 复制链接；
uni.showModal({
title: '支付宝支付',
content: '复制链接到外部浏览器',
confirmText: '复制链接',
success: (res) => {
if (res.confirm) {
sheep.$helper.copyText(data.pay_data);
}
},
});
}
}
// 支付宝支付 TODO 芋艿：待接入
async alipay() {
let that = this;
const { error, data } = await this.prepay();
if (error === 0) {
uni.requestPayment({
provider: 'alipay',
orderInfo: data.pay_data, //支付宝订单数据
success: (res) => {
that.payResult('success');
},
fail: (err) => {
if (err.errMsg === 'requestPayment:fail [paymentAlipay:62001]user cancel') {
sheep.$helper.toast('支付已手动取消');
} else {
that.payResult('fail');
}
},
});
}
}
// 微信支付 TODO 芋艿：待接入
async wechatAppPay() {
let that = this;
let { error, data } = await this.prepay();
if (error === 0) {
uni.requestPayment({
provider: 'wxpay',
orderInfo: data.pay_data, //微信订单数据(官方说是string。实测为object)
success: (res) => {
that.payResult('success');
},
fail: (err) => {
err.errMsg !== 'requestPayment:fail cancel' && that.payResult('fail');
},
});
}
}
// 支付结果跳转,success:成功，fail:失败
payResult(resultType) {
sheep.$router.redirect('/pages/pay/result', {
id: this.id,
orderType: this.orderType,
payState: resultType
});
}
// 引导绑定微信
bindWeixin() {
uni.showModal({
title: '微信支付',
content: '请先绑定微信再使用微信支付',
success: function (res) {
if (res.confirm) {
sheep.$platform.useProvider('wechat').bind();
}
},
});
}
}
export function getPayMethods(channels) {
const payMethods = [
{
icon: '/static/img/shop/pay/wechat.png',
title: '微信支付',
value: 'wechat',
disabled: true,
},
{
icon: '/static/img/shop/pay/alipay.png',
title: '支付宝支付',
value: 'alipay',
disabled: true,
},
{
icon: '/static/img/shop/pay/wallet.png',
title: '余额支付',
value: 'wallet',
disabled: true,
},
{
icon: '/static/img/shop/pay/apple.png',
title: 'Apple Pay',
value: 'apple',
disabled: true,
},
{
icon: '/static/img/shop/pay/wallet.png',
title: '模拟支付',
value: 'mock',
disabled: true,
}
];
const platform = sheep.$platform.name
// 1. 处理【微信支付】
const wechatMethod = payMethods[0];
if ((platform === 'WechatOfficialAccount' && channels.includes('wx_pub'))
|| (platform === 'WechatMiniProgram' && channels.includes('wx_lite'))
|| (platform === 'App' && channels.includes('wx_app'))) {
wechatMethod.disabled = false;
}
wechatMethod.disabled = false; // TODO 芋艿：临时测试
// 2. 处理【支付宝支付】
const alipayMethod = payMethods[1];
if ((platform === 'WechatOfficialAccount' && channels.includes('alipay_wap'))
|| platform === 'WechatMiniProgram' && channels.includes('alipay_wap')
|| platform === 'App' && channels.includes('alipay_app')) {
alipayMethod.disabled = false;
}
// 3. 处理【余额支付】
const walletMethod = payMethods[2];
if (channels.includes('wallet')) {
walletMethod.disabled = false;
}
// 4. 处理【苹果支付】TODO 芋艿：未来接入
// 5. 处理【模拟支付】
const mockMethod = payMethods[4];
if (channels.includes('mock')) {
mockMethod.disabled = false;
}
return payMethods;
}