uniapp写支付的操作

支付的时候一般需要几个参数：

1. ‘timeStamp’: 时间戳,
2. ‘nonceStr’: 随机字符串，不超过32位
3. ‘package’: 下单后接口返回的prepauid
4. ‘signType’: 签名的算法
5. ‘paySign’: 后端会给前端一个签名
6. 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 H5const WexinPayFactory = require('../../factory/WexinPayFactory.js');// #endifexport 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-WEIXINlet accountInfo = uni.getAccountInfoSync();this.appId = accountInfo.miniProgram.appId;// #endif// #ifdef H5this.appId = uni.getStorageSync(constant.mapping.W_APP_ID)// #endifthis.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.contextthis._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-WEIXINuni.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 H5WexinPayFactory.wexinPay(data,function(){uni.showToast({title: "支付成功",duration: 2000});uni.navigateBack({});});// #endifwx.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: {}};// 特殊逻辑：微信公众号、小程序支付时，必须传入 openidif (['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/00008c53c347804beec82aed051c00this.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;
}