uni-app小程序开发-商家券/支付宝领券组件插件使用

发表于 | 分类于
uni-app小程序开发-支付宝领券组件插件使用

前言

商家券

https://opendocs.alipay.com/open/03rr8k?pathHash=c2ad7338

领券组件插件接入流程

https://opendocs.alipay.com/open/08bcgx?pathHash=56ef335b

接入指引

https://open.alipay.com/api/solutionDetail?solutionId=SC00002300

领券组件插件开通页面

https://open.alipay.com/plugin/order-page?serviceCode=MP2021090600100574

插件管理页面

https://open.alipay.com/dev/workspace/plugin-center/get-plugin

如果有多个小程序需要绑定，可以在这个页面绑定

https://open.alipay.com/dev/workspace/plugin-center/plugin-bind-list?pluginId=2021002172680015

订阅消息

订阅消息

https://open.alipay.com/develop/mini/sub/dev-setting

开放平台 => 开发设置 => From 平台

  • ant.merchant.expand.shop.save.rejected

  • alipay.marketing.activity.message.received

  • alipay.marketing.activity.message.stopped

  • alipay.marketing.activity.message.expired

  • alipay.marketing.activity.message.appended

  • alipay.marketing.activity.message.created

  • alipay.marketing.activity.message.modified

  • ant.merchant.expand.shop.save.passed

  • alipay.marketing.activity.message.used

配置组件

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

1
2
3
4
5
6
7
8
9
10
11
{
  "mp-alipay": {
    "usingComponents": true,
    "plugins":{
      "couponPlugin": {
        "version": "*", // 拉取当前上架最新版本
        "provider": "2021002172680015" // 领券组件插件 ID，固定值
      }
    }
  },
}

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

1
2
3
4
5
6
7
8
9
10
11
{
  "path": "pages/tabBar/home",
  "style": {
    "navigationBarTitleText": "首页",
    "mp-alipay": {
      "usingComponents": {
        "get-coupon": "plugin://couponPlugin/get-coupon"
      }
    }
  }
}

页面添加触发按钮

在Vue中使用：

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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需要后台提供接口获取用户可领取的券。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
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 事件');
    },
  }

调用接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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中绑定到这个页面的实例上

1
2
3
4
5
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)