uni-app支付功能

掃碼查看原文

前言

近期一直在使用APP開發多端應用，IOS的APP、安卓的APP和H5網頁，其中開發的APP使用到了微信和支付寶的支付，在此給大家分享出來，一起使用

前置條件：

1. 開發環境：windows

2. 開發框架：uni-app , H5+，nativeJS

3. 編輯器：HbuilderX 2.8.13

  　  4.兼容版本：安卓，IOS已作測試

此代碼可以直接復制到uni-app項目中使用

正文開始：

1. 首先需要做一些相關配置

1.1 打開HbuilderX，配置manifest.json，選擇App模塊配置，勾選Payment支付；根據業務需要再勾選支付寶和微信支付；

1.2 微信支付需要配置appid、ios通用平台鏈接；支付寶在HbuilderX內無需任何配置；不過需要在支付寶付寶開放平台，創建應用時做一些配置。

 

2. 以下是具體代碼頁面部分

2.1 radio的值等於1，是微信支付，等於2是支付寶支付；通過@change事件獲取到radio的值

<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>

3. 以下是樣式部分

<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>

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 方法改變訂單狀態

<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>