{
  "mp-alipay": {
    "usingComponents": true,
    "plugins":{
      "couponPlugin": {
        "version": "*", // 拉取当前上架最新版本
        "provider": "2021002172680015" // 领券组件插件 ID，固定值
      }
    }
  },
}

在小程序页面pages.json中引入发券插件

{
  "path": "pages/tabBar/home",
  "style": {
    "navigationBarTitleText": "首页",
    "mp-alipay": {
      "usingComponents": {
        "get-coupon": "plugin://couponPlugin/get-coupon"
      }
    }
  }
}

页面添加触发按钮

在Vue中使用：

如果做成组件的话需要使用插槽，因为这个领券组件只能在pages.json定义了插件的页面中使用

<get-coupon
            onBeforeGetCoupon="onBeforeGetCoupon"
            onGetCouponSuccess="onGetCouponSuccess"
            onGetCouponFail="onGetCouponFail"
            onUseImmediately="onUseImmediately"
            onClose="onClose"
            :params="coupon.params"
            :dialogBtnType="coupon.dialogBtnType"
            :dialogBtnStyle="coupon.dialogBtnStyle"
            :zIndex="9998"
            :extraData="'Any Data'"
            >
  <view class="text-button">立即领取</view>
</get-coupon>

注意

onBeforeGetCoupon是返回可用的券列表，不是true/false。

页面逻辑处理

Vue2

里面的coupon.params需要后台提供接口获取用户可领取的券。

export default {
  data() {
    return {
      coupon: {
        params: [],
        dialogBtnType: 2,
        dialogBtnStyle: {
          color: '#ffffff',
          borderColor: '#fa7e31',
          backgroundColor: '#fa7e31'
        }
      }
    };
  },
  onLoad() {
    this.$scope.onClose = this.onClose.bind(this);
    this.$scope.onBeforeGetCoupon = this.onBeforeGetCoupon.bind(this);
    this.$scope.onGetCouponSuccess = this.onGetCouponSuccess.bind(this);
    this.$scope.onGetCouponFail = this.onGetCouponFail.bind(this);
  },
  methods: {
    async onBeforeGetCoupon(event, { extraData }) {
      console.log('触发了 onBeforeGetCoupon 事件');
      console.log('附加数据 event 为：', event);
      // 返回值将作为「领券请求」的参数，注意是覆盖 params 的值。
      // 如果没有返回值则使用 params 作为请求参数。
      this.coupon.params = [
        {
          activityId: '2025010200826004557635965089',
          outBizNo: '2025010400000200015914'
        }
      ];
      return this.coupon.params;
    },
    onGetCouponSuccess(resultList, { extraData }) {
      console.log('触发了 onGetCouponSuccess 事件');
      console.log('成功返回结果: ', resultList);
    },
    onGetCouponFail(result, { extraData }) {
      console.log('触发了 onGetCouponFail 事件');
      console.log('失败返回结果: ', result);
    },
    onUseImmediately(event, { extraData }) {
      console.log('触发了 onUseImmediately 事件');

      // 可以跳转到自定义的页面
      // my.navigateTo({
      //   url: '/pages/goods-detail/index',
      // })
    },
    onClose(event, { extraData }) {
      console.log('触发了 onClose 事件');
    },
  }

调用接口

async onBeforeGetCoupon(event, { extraData }) {
  console.log('触发了 onBeforeGetCoupon 事件');
  console.log('附加数据 event 为：', event);
  // 返回值将作为「领券请求」的参数，注意是覆盖 params 的值。
  // 如果没有返回值则使用 params 作为请求参数。
  let parasList = await this.actionCustomerMessageActivityConsult();
  this.coupon.params = parasList;
  if (this.coupon.params.length == 0) {
    uni.showToast({
      title: '暂无可用支付宝券',
      duration: 3000
    });
  }
  return this.coupon.params;
}

Vue3

let coupon=reactive({
  params:[
    {
      activityId: '202308210xxxxxxxxx',
      outBizNo: '20230522609522159xxxxxxxxxx',
    },
  ],
  dialogBtnType: 2,
  dialogBtnStyle: {
    color: '#000',
    borderColor: 'yellowgreen',
    backgroundColor: 'yellowgreen',
  },
})

async function onBeforeGetCoupon(event, { extraData }) {
  console.log('触发了 onBeforeGetCoupon 事件')
  console.log('附加数据 event 为：', event)
  return coupon.params
}

function  onGetCouponSuccess(resultList, { extraData }) {
  console.log('触发了 onGetCouponSuccess 事件')
  console.log('成功返回结果: ', resultList)
}

function onGetCouponFail(result, { extraData }) {
  console.log('触发了 onGetCouponFail 事件')
  console.log('失败返回结果: ', result)
}

function  onUseImmediately(event, { extraData }) {
  console.log('触发了 onUseImmediately 事件')

  // 可以跳转到自定义的页面
  // my.navigateTo({
  //   url: '/pages/goods-detail/index',
  // })
}

function  onClose(event, { extraData }) {
  console.log('触发了 onClose 事件')
}

获取领券组件的回调需要在页面的onLoad中绑定到这个页面的实例上

let {proxy}=getCurrentInstance()
proxy.$scope.onBeforeGetCoupon = onBeforeGetCoupon.bind(proxy)
proxy.$scope.onGetCouponSuccess = onGetCouponSuccess.bind(proxy)
proxy.$scope.onGetCouponFail = onGetCouponFail.bind(proxy)
proxy.$scope.onClose = onClose.bind(proxy)