request-payment.uvue

<template>
  <page-head title="发起支付"></page-head>

  <template v-if="providerList.length > 0">
    <button style="margin-top: 20px;" type="primary" v-for="(item,index) in providerList" :key="index"
      @click="requestPayment(item)">{{item.name}}支付</button>
  </template>
</template>

<script>
  export type PayItem = { id : string, name : string }
  export default {
    data() {
      return {
        btnText: "支付宝支付",
        btnType: "primary",
        orderInfo: "",
        errorCode: 0,
        errorMsg: "",
        complete: false,
        providerList: [] as PayItem[]
      }
    },
    onLoad: function () {
      uni.getProvider({
        service: "payment",
        success: (e) => {
          console.log("payment success:" + JSON.stringify(e));
          let array = e.provider as string[]
          array.forEach((value : string) => {
            switch (value) {
              case 'alipay':
                this.providerList.push({
                  name: '支付宝',
                  id: "alipay",
                } as PayItem);
                break;
              case 'wxpay':
                this.providerList.push({
                  name: '微信',
                  id: "wxpay",
                } as PayItem);
                break;
              default:
                break;
            }
          })
        },
        fail: (e) => {
          console.log("获取支付通道失败：", e);
        }
      });
    },
    methods: {
      requestPayment(e : PayItem) {
        const provider = e.id
        if (provider == "alipay") {
          this.payAli()
        } else if (provider == "wxpay") {
          this.payWX()
        }
      },
      payAli() {
        uni.showLoading({
          title: "请求中..."
        })
        uni.request({
          url: 'https://demo.dcloud.net.cn/payment/alipay/?total=0.01',
          method: 'GET',
          timeout: 6000,
          success: (res) => {
            this.orderInfo = JSON.stringify(res.data);
            console.log("====" + this.orderInfo)
            uni.hideLoading()
            uni.requestPayment({
              provider: "alipay",
              orderInfo: res.data as string,
              fail: (res) => {
                console.log(JSON.stringify(res))
                this.errorCode = res.errCode
                uni.showToast({
                  icon: 'error',
                  title: 'errorCode:' + this.errorCode
                });
              },
              success: (res) => {
                console.log(JSON.stringify(res))
                uni.showToast({
                  icon: 'success',
                  title: '支付成功'
                });
              }
            })
          },
          fail: (e) => {
            console.log(e)
            uni.hideLoading()
          },
        });
      },
      payWX() {
        uni.showLoading({
          title: "请求中..."
        })

        uni.request({
          url: 'https://demo.dcloud.net.cn/payment/wxpayv3.__UNI__uniappx/?total=1',
          method: 'GET',
          timeout: 6000,
          header: {
            "Content-Type": "application/json"
          } as UTSJSONObject,
          success: (res) => {
            console.log(res.data)
            uni.hideLoading()
            uni.requestPayment({
              provider: "wxpay",
              orderInfo: JSON.stringify(res.data),
              fail: (res) => {
                console.log(JSON.stringify(res))
                this.errorCode = res.errCode
                uni.showToast({
                  duration: 5000,
                  icon: 'error',
                  title: 'errorCode:' + this.errorCode,
                });
              },
              success: (res) => {
                console.log(JSON.stringify(res))
                uni.showToast({
                  duration: 5000,
                  icon: 'success',
                  title: '支付成功'
                });
              }
            })
          },
          fail: (res) => {
            uni.hideLoading()
            console.log(res)
          },
        });
      },

      //自动化测试使用
      jest_pay() {
        uni.requestPayment({
          provider: "alipay",
          orderInfo: this.orderInfo,
          fail: (res : RequestPaymentFail) => {
            this.errorCode = res.errCode
            this.complete = true
          },
          success: (res : RequestPaymentSuccess) => {
            console.log(JSON.stringify(res))
            this.complete = true
          }
        } as RequestPaymentOptions)
      }
    }
  }
</script>

<style>

</style>