uni-app支付功能

巴洛特烦恼 發表於 2020-9-29 14:05:00

扫码查看原文
<img src="https://mp.weixin.qq.com/mp/qrcode?scene=10000004&size=102&__biz=Mzg3NTAzMzAxNA==&mid=2247483869&idx=1&sn=e5c9575e4b409bb3ce510ca14622ce74&send_time=">
前言
近期一直在使用APP开发多端应用，IOS的APP、安卓的APP和H5网页，其中开发的APP使用到了微信和支付宝的支付，在此给大家分享出来，一起使用
前置条件：
<ol class="list-paddingleft-2">
<li>
开发环境：windows
</li>
<li>
开发框架：uni-app , H5+，nativeJS
</li>
<li>
编辑器：HbuilderX 2.8.13
</li>
</ol>
  　  4.兼容版本：安卓，IOS已作测试
此代码可以直接复制到uni-app项目中使用
正文开始：
1. 首先需要做一些相关配置
1.1 打开HbuilderX，配置manifest.json，选择App模块配置，勾选Payment支付；根据业务需要再勾选支付宝和微信支付；
1.2 微信支付需要配置appid、ios通用平台链接；支付宝在HbuilderX内无需任何配置；不过需要在支付宝付宝开放平台，创建应用时做一些配置。
 
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/SfwJdTEt5qPTXO4aj7NXayEBtia38bx6pI0biaQ7Vogbw2CPKaRK7DV9X7vOiaP3xM9ib4dmUjLJ9OWkAfl9vYUicpQ/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">
2. 以下是具体代码页面部分
2.1 radio的值等于1，是微信支付，等于2是支付宝支付；通过@change事件获取到radio的值
<div class="cnblogs_code">
<pre><view class="pay_list_box">
<radio-group @change="radioChange">
<label class="pay_list">
 <view class="l_box">
 <view class="top">
 <image class="t_img" src="/static/images/pay_icon2.png" mode=""></image>
 <view>微信</view>
 </view>
 </view>
 <view class="r_radio">
 <radio value="1" color="#44bb53" style="transform:scale(0.8)"/>
 </view>
</label>
<label class="pay_list">
 <view class="l_box">
 <view class="top">
 <image class="t_img1" src="/static/images/pay_icon1.png" mode=""></image>
 <view>支付宝</view>
 </view>
 </view>
 <view class="r_radio">
 <radio value="2" color="#44bb53" style="transform:scale(0.8)"/>
 </view>
</label>
</radio-group>
</view>
<view class="zf_btn" @click="pay">提交</view></pre>
</div>
3. 以下是样式部分
<div class="cnblogs_code">
<pre><style scoped lang="scss">
.zaixian{
padding-bottom: 100rpx;
border-top: 1px solid #ebebeb;
.content{
 .money{
 padding-top: 50rpx;
 text-align: center;
 height: 200rpx;
 color: #F05D31;
 line-height: 200rpx;
 font-size: 100rpx;
 }
 .time{
 text-align: center;
 color: #a5a5a5;
 font-size: 28rpx;
 }
}
.code{
 padding: 0 20rpx;
 display: flex;
 .shoukuanma{
 text-align: center;
 width: 50%;
 height: 200rpx;
 .type{
 font-size: 30rpx;
 color: #3b3b3b;
 }
 .ty_img{
 width: 200rpx;
 height: 200rpx;
 }
 }
}

.pay_list_box{
 margin-top: 100rpx;
 .yinhangka{
 font-size: 30rpx;
 color: #3b3b3b;
 padding: 0 20rpx;
 display: flex;
 height: 100rpx;
 align-items: center;
 justify-content: space-between;
 border-bottom: 1px solid #ebebeb;
 .y_left{
 display: flex;
 .name{
 padding-right: 20rpx;
 }
 }
 }
 .pay_list{
 border-bottom: 1px solid #ebebeb;
 padding: 0 20rpx;
 height: 100rpx;
 align-items: center;
 display: flex;
 justify-content: space-between;
 .l_box{
 height: 100rpx;
 .top{
 height: 100rpx;
 display: flex;
 height: 100rpx;
 align-items: center;
 font-size: 30rpx;
 color: #3b3b3b;
 .t_img{
 padding-right: 20rpx;
 width: 46rpx;
 height: 38rpx;
 }
 .t_img1{
 padding-right: 32rpx;
 width: 34rpx;
 height: 33rpx;
 }
 .t_img2{
 padding-right: 28rpx;
 width: 38rpx;
 height: 33rpx;
 }
 }
 }
 }
}
.pingzheng{
 margin-top: 30rpx;
 .content{
 display: flex;
 align-items: center;
 padding: 0 20rpx;
 height: 200rpx;
 .shangchuan{
 color: #454545;
 font-size: 30rpx;
 }
 .sc_img{
 padding-left: 20rpx;
 width: 200rpx;
 height: 200rpx;
 border-radius: 5px;
 }
 }
 .pz_pic{
 margin-top: 30rpx;
 padding: 0 20rpx;
 .pz_img{
 width: 100%;
 height: 300rpx;
 }
 }
}
.zf_btn{
 margin: 100rpx auto 0;
 background-color: #44bb57;
 width: 650rpx;
 height: 90rpx;
 font-size: 36rpx;
 color: #FFFFFF;
 line-height: 90rpx;
 text-align: center;
 border-radius: 45rpx;
}
}
</style></pre>
</div>
4. 以下是具体的代码逻辑部分
4.1 通过后端获取到订单信息；再通过订单信息获取到服务商信息和支付配置信息
4.2 最后通过 uni.requestPayment 支付；
5.通过servicesInfo方法获取订单信息，取到订单的基本信息
5.1 向 pay 方法传递订单基本信息，获取到服务商信息和支付配置信息
5.2 通过 appPay 方法调用uni.requestPayment函数发起支付；
5.3 uni.requestPayment发起支付时，传递两个重要参数provider、orderInfo
5.3.1 provider：支付类型，支付宝（alipay）或者微信 (wxpay)
5.3.2 orderInfo: 通过 pay 方法请求接口获取到 order_info
6. 支付成功后，通过 updateOrder 方法改变订单状态
<div class="cnblogs_code">
<pre><script>
export default{
data(){
 return{
 imgs:[],
 pay_type:0,
 id:0,
 info:[]
 }
},
onLoad(response) {
 this.id = response.id
 this.servicesInfo()
},
methods:{
 radioChange(e){
 // 获取用选择的支付方式
 this.pay_type = e.detail.value
 },
 //一、获取订单信息
 servicesInfo:function(){
 var that = this;
 // 请求订单信息接口
 that.$http.post("User/servicesInfo",{'id':that.id})
 .then(function (response) {
 that.info = response.data;
 console.log(response);
 });
 },

 //二、获取服务信息和支付配置信息
 pay:function(){
 var that = this;
 if(that.pay_type == 0){
 uni.showToast({
 title:"请选择支付方式",
 icon:"none"
 })
 return;
 }
 var url;
 // 1 微信支付；2 支付宝支付
 if(that.pay_type == 1){
 url = 'Order/wxpay';
 }else if(that.pay_type == 2){
 url = 'Order/alipay';
 }
 // 请求服务信息和支付配置信息
 that.$http.post(url,{'id':that.id,type:that.pay_type,'price':that.info.pay_price,'order_sn':that.info.order_sn}).then(function(response){
 console.log(response);
 // 调用支付
 that.appPay(response.data,that.pay_type);
 });
 },
 // 三、支付
 appPay:function(data, type){
 var that =this;
 let pay_type = type == 1 ? 'wxpay' : 'alipay'
 // 发起支付
 uni.requestPayment({
 provider: pay_type,
 orderInfo: data.order_info, //微信、支付宝订单数据
 success: (res) => {
 // 支付成功，改变订单状态
 that.updateOrder(data.out_trade_no,type)
 },
 fail: (err) => {
 uni.showToast({
 title:'支付失败',
 'icon':'none'
 })
 }
 })
 },
 //四、修改务订单状态
 updateOrder:function(order_no,type){
 var that = this;
 that.$http.post('Order/updateOrder',{order_no:order_no})
 .then(function(response) {
 uni.showToast({
 title:"支付成功",
 icon:'none',
 duration:2000
 })

 })
 },
}
}
</script></pre>
</div>
  
来源：https://www.cnblogs.com/ts119/p/13749318.html

頁: [1]

琼殿技术论坛's Archiver

uni-app支付功能