uniapp-小程序发券插件-领券进入微信卡包

这两天有个需求,在小程序领券,然后该优惠券进入微信卡包.
官方文档:https://pay.weixin.qq.com/wiki/doc/apiv3/open/pay/chapter5_3_1.shtml
1.在小程序配置app.json 文件中加入如下配置：

{
  "plugins": {
    "sendCoupon": {
      "version": "latest",
      "provider": "wxf3f436ba9bd4be7b"
    }
  }
} 

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

{
  "usingComponents": {
    "send-coupon": "plugin://sendCoupon/send-coupon"
  }
} 

接下来上前端代码部分:

            
            <view class="mask-coupon" v-if="showMask" @click="closeMask">
                <view class="wx-coupon">
                    <view class="title">提示view>
                    <view class="content">确认领取此优惠券?view>
                    
                    <send-coupon v-if='showWechatbool' @sendcoupon="getSendCoupon" @userconfirm="redirectuser"
                        :sign="sign" :send_coupon_params="send_coupon_params"
                        :send_coupon_merchant="send_coupon_merchant">
                        <view class="get-btn">确认领取view>
                    send-coupon>
                view>
            view>

// 立即领取的按钮
            getCoupon: function(id, index, stockId) {
                let that = this
                let list = that.couponsList
                let q = [{
                    out_request_no: '60002019189501000121',
                    stock_id: stockId
                }]
                //  如果是需要放入卡包的券,走这个请求
                if (stockId) { // stockId 后端返回批次号
                    getWechatCoupon(q).then(res => {
                        that.sign = res.data.sign // 获取签名
                        that.outRequestNo= res.data.outRequestNo // 获取随机数
                        that.send_coupon_params = [{ // 发券插件的发券参数
                                "stock_id": stockId, // 批次号
                                "out_request_no": res.data.outRequestNo // 后读返回的随机数
                            }
                        ]
                        that.showMask = true // 打开弹窗
                        that.showWechatbool = true // 打开 领取插件
                    }).catch(err => {
                        // console.log('err',err)
                    })
                } else {
                    //  如果不需要领入卡包  直接领进小程序
                    getCouponReceive(id)
                        .then(function(res) {
                            list[index].isUse = true
                            // 后台埋点
                            that.describeAction = '领取优惠券'
                            that.toGetUserVisitadd()
                            uni.showToast({
                                title: '领取成功',
                                icon: 'success',
                                duration: 2000,
                            })
                        })
                        .catch(function(err) {
                            uni.showToast({
                                title: err.msg || err.response.data.msg || err.response.data.message,
                                icon: 'none',
                                duration: 2000,
                            })
                        })
                }
            },

            // 小程序发券插件API
            getSendCoupon(res) {
                let that = this
                console.log('res', res)
                if (res.detail.errcode == 'OK') {
                    console.log(222)
                    if (res.detail.send_coupon_result[0].code == 'SUCCESS') {
                        that.showWechatbool = false
                        that.showMask = false
                        uni.showToast({
                            title: '领取成功',
                            icon: 'success',
                            duration: 2000,
                        })
                    } else {
                        uni.showModal({
                            title: '领取失败',
                            content: res.detail.send_coupon_result[0].message,
                            showCancel: false,
                            success: function(res) {
                                that.showWechatbool = false
                                that.showMask = false
                            }
                        })
                    }
                } else {
                    // uni.showToast({
                    //  title: '领取失败',
                    //  icon: 'none'
                    // })
                    that.showWechatbool = false
                    that.showMask = false
                }
            },

接下来上图解:

图1为小程序领券页面,立即领取也就是调用getCoupon这个方

图2如果是该券领取后是需要进入微信卡包,则点击立即领取不调用getCoupon这个方法,而是调用getWechatCoupon获取批次号,成功之后打开弹窗和领券插件(图2),图2的确认领取才会真正调用领券方法

领券成功后,控制台会返回相关详情信息(图3)

图4是我的微信卡包,可以看得到已经成功领取了

这就是前端负责部分,如有不足之处,多多指教哈