uniapp--支付宝领券组件插件使用

1.在小程序配置manifest.json 文件中加入如下配置

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

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

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

3，在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>

4，页面逻辑处理

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

async function onBeforeGetCoupon(event, { extraData }) {
    console.log('触发了 onBeforeSendCoupon 事件')
    console.log('附加数据 event 为：', event)
    uni.showToast({ title: "onBeforeGetCoupon", icon: "none" });
    return 
    
    // 返回值将作为「领券请求」的参数，注意是覆盖 params 的值。
    // 如果没有返回值则使用 params 作为请求参数。
    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 事件')
  }

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

 this.$scope.onClose = this.onClose.bind(this)
  this.$scope.onBeforeGetCoupon =onBeforeGetCoupon.bind(this)
    this.$scope.onGetCouponSuccess = this.onGetCouponSuccess.bind(this)
    this.$scope.onGetCouponFail = this.onGetCouponFail.bind(this)

vue3：

 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)