virtual-payment-uni-pay.uvue

<template>
  <view class="content">
    <view class="uni-list">
      <radio-group @change="applePriceChange">
        <view class="uni-list-cell" v-for="(item, index) in productList" :key="index">
          <radio :value="item['product_id']" :checked="product_id == item['product_id']" />
          <view class="price" @click="applePriceClick(item)">{{item['title']}} {{item['goods_price']}}元</view>
        </view>
      </radio-group>
    </view>
    <view class="uni-padding-wrap">
      <button class="button btn-pay" @click="createOrder" :loading="loading" :disabled="disabled">立即支付</button>
    </view>

    <!-- 统一支付组件 -->
    <uni-pay ref="payRef" :debug="true" :adpid="adpid"
      return-url="/pages/API/request-payment/request-payment/order-detail" @mounted="onMounted" @success="onSuccess"
      @fail="onFail" @cancel="onCancel"></uni-pay>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        order_no: "", // 业务系统订单号（即你自己业务系统的订单表的订单号）
        out_trade_no: "", // 插件支付单号
        adpid: "1000000001", // uni-ad的广告位id

        loading: false, // 支付按钮是否在loading中
        disabled: true, // 支付按钮是否禁用
        product_id: "" // 用户选择的商品id
      }
    },
    onLoad: function () {

    },
    onShow() {

    },
    onUnload() { },
    computed: {
      // 出售的苹果虚拟商品列表
      productList() {
        return [
          {
            "description": "为DCloud提供的免费软件进行赞助",
            "goods_price": 1, // 单价（元）
            "buy_quantity": 1, // 数量（消耗性类型: 数量默认是1，最大值是10）
            "product_id": this.isDebug() ? "uniappx.consumable.sponsor_1" : "uniappx.consumable.sponsor1",
            "title": "消耗性产品：赞助"
          },
          {
            "description": "为DCloud提供的免费软件进行赞助",
            "goods_price": 5, // 单价（元）
            "buy_quantity": 1, // 数量（消耗性类型: 数量默认是1，最大值是10）
            "product_id": this.isDebug() ? "uniappx.consumable.sponsor_50" : "uniappx.consumable.sponsor50",
            "title": "消耗性产品：赞助"
          },
          {
            "description": "为DCloud提供的免费软件进行赞助",
            "goods_price": 1, // 单价（元）
            "buy_quantity": 1, // 数量（非消耗性: 数量只能是1，且一个该类型产品一个appleId只能购买一次）
            "product_id": this.isDebug() ? "uniappx.nonconsumable.sponsorskin_1" : "uniappx.nonconsumable.sponsorskin1",
            "title": "非消耗性产品: 赞助"
          },
          // {
          //   "description": "为DCloud提供的免费软件进行赞助",
          //   "goods_price": 1, // 单价（元）
          //   "buy_quantity": 1, // 数量（自动续期订阅产品: 数量只能是1）
          //   "product_id": this.isDebug() ? "uniappx.autorenewable.monthly_1" : "uniappx.autorenewable.monthly1",
          //   "title": "自动续期订阅产品：每月定期赞助", // 注意自动续期订阅产品在沙盒模式下，实际周期会缩短到几分钟续期一次（即现实世界几分钟 = 沙盒世界1个月）
          // },
          {
            "description": "为DCloud提供的免费软件进行赞助",
            "goods_price": 1, // 单价（元）
            "buy_quantity": 1, // 数量（非自动续期订阅产品: 数量只能是1）
            "product_id": this.isDebug() ? "uniappx.nonrenewable.monthly_1" : "uniappx.nonrenewable.monthly1",
            "title": "非自动续期订阅产品：月赞助",
          },
          // {
          //   "description": "为DCloud提供的免费软件进行赞助",
          //   "goods_price": 1, // 单价（元）
          //   "buy_quantity": 1, // 数量
          //   "product_id": "uniappx.nonrenewable.none",
          //   "title": "测试不存在的产品"
          // }
        ] as Array<UTSJSONObject>
      }
    },
    methods: {
      // 支付组件加载完毕后执行
      onMounted(insideData : any) {
        this.init();
      },
      // 初始化
      init() {
        this.product_id = this.productList[0]["product_id"] as string;
        this.disabled = false;
        let payRef = this.$refs['payRef'] as UniPayComponentPublicInstance;
        // 苹果虚拟支付未完成订单检测
        payRef.appleiapRestore();
      },
      /**
       * 发起支付
       * 在调用此api前，你应该先创建自己的业务系统订单，并获得订单号 order_no，把order_no当参数传给此api，而示例中为了简化跟支付插件无关的代码，这里直接已时间戳生成了order_no
       */
      createOrder() {
        this.order_no = `test` + Date.now();
        this.out_trade_no = this.order_no;
        let productInfo : UTSJSONObject = this.productList.find((item : UTSJSONObject) : boolean => {
          return item['product_id'] == this.product_id;
        });
        let buy_quantity = productInfo.getNumber('buy_quantity') || 1;
        let goods_price = productInfo.getNumber('goods_price');
        // 发起支付
        this.$refs.payRef.createOrder({
          provider: "appleiap", // 支付供应商（这里固定为appleiap，代表苹果虚拟支付）
          order_no: this.order_no, // 业务系统订单号（即你自己业务系统的订单表的订单号）
          out_trade_no: this.out_trade_no, // 插件支付单号
          type: "appleiap", // 支付回调类型（可自定义，建议填写appleiap）
          description: productInfo.description,
          total_fee: parseInt((goods_price * 100 * buy_quantity).toFixed(0)), // 插件是以分为单位，故这里需要乘以100
          // apple_virtual字段仅苹果虚拟支付生效
          apple_virtual: {
            product_id: this.product_id, // 产品id
            goods_price: goods_price, // 单价
            buy_quantity: buy_quantity, // 购买数量
          },
          // 自定义数据
          custom: {}
        });
      },
      // 监听事件 - 支付成功
      onSuccess(res) {
        console.log('success: ', res);
        if (res.user_order_success) {
          // 代表用户已付款，且你自己写的回调成功并正确执行了

        } else {
          // 代表用户已付款，但你自己写的回调执行失败（通常是因为你的回调代码有问题）

        }
      },

      onFail(err) {
        uni.showModal({
          content: `${err.errSubject} : ${err.errCode} : ${err.errMsg}`,
          showCancel: false,
          title: `发起支付失败`,
        });
      },

      onCancel(err) {
        uni.showToast({
          title: "用户取消了支付",
          icon: 'none'
        });
      },

      // 监听-多选框选中的值改变
      applePriceChange(e) {
        this.product_id = e.detail.value;
      },
      applePriceClick(item : any) {
        this.product_id = item['product_id'] as string;
      },
      getPackageName() : string {
        const res = uni.getAppBaseInfo();
        let packageName : string = ""

        // #ifdef APP-ANDROID
        packageName = res.packageName
        // #endif

        // #ifdef APP-IOS
        packageName = res.bundleId
        // #endif

        return packageName
      },
      isDebug() : boolean {
        if (this.getPackageName() == 'io.dcloud.uniappx') {
          return true
        }
        return false
      }
    }
  }
</script>

<style>
  .content {
    padding: 15px;
  }

  .button {
    background-color: #007aff;
    color: #ffffff;
  }

  .uni-list-cell {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
  }

  .price {
    margin-left: 10px;
  }

  .btn-pay {
    margin-top: 30px;
  }
</style>