基于uniapp在微信支付宝小程序中使用发券插件

基于uniapp在微信支付宝小程序中使用发券插件
1.在小程序配置manifest.json 文件中加入如下配置：

 "mp-weixin" : {
	"plugins" : {
	     "sendCoupon" : {
	          "version" : "latest",
	          "provider" : "wxf3f436ba9bd4be7b"
	      }
	  }
  }
  "mp-alipay" : {
        "plugins" : {
            "couponPlugin" : {
                "version" : "*",
                "provider" : "2021002172680015"
            }
        }
    },

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

{
	"path": "pages/testGetCoupons/index",
	"style": {
		"navigationBarTitleText": "测试领取商家优惠券",
		"mp-weixin": {
			"navigationStyle": "custom",
			"usingComponents": {
				"send-coupon": "plugin://sendCoupon/send-coupon"
			}
		},
		"mp-alipay": {
			"transparentTitle": "always",
			"allowsBounceVertical": "NO",
			"usingComponents": {
				"get-coupon": "plugin://couponPlugin/get-coupon"
			}
		}
	}
},

3.页面中点击领取按钮弹出插件领取弹窗领

<template>
    <view class="coupon_wrap">
        <view @click="getCoupon" class="coupon_btn" style="background:rgba(255, 208, 0, 1);">点击领取到卡包</view>
        <!-- 领取弹窗 -->
        <view v-if="showMask" @closeMask="closeMask">
            <view class="mask-coupon" @click="closeMask">
                <view class="wx-coupon">
                    <view class="title">
                        领取优惠券
                        <i>*</i>
                    </view>
                    <view class="content">
                        优惠券列表显示
                    </view>
                    <!-- 小程序领券插件 -->
                     <!-- #ifdef MP-ALIPAY -->
                    <get-coupon
                        onGetCouponSuccess="onGetCouponSuccess" 
                        onGetCouponFail="onGetCouponFail" 
                        onClose="onClose"
                        :params="coupone_params"
                        :zIndex="4"
                    >
                        <view class="text-button">立即领券2</view>
                    </get-coupon>
                    <!-- #endif -->
                    <!-- #ifdef MP-WEIXIN -->
                    <send-coupon
                        @sendcoupon="getSendCoupon" 
                        @userconfirm="redirectuser"
                        :sign="sign" 
                        :send_coupon_params="send_coupon_params"
                        :send_coupon_merchant="send_coupon_merchant"
                    >
                        <view class="text-button">确认领取3</view>
                    </send-coupon>
                    <!-- #endif -->
                </view>
            </view>
        </view>
    </view>
</template>

4.页面逻辑处理

data() {
        return {
            showMask: false,
            // alipay
            coupone_params: [{  
                activityId: "2022122700826004358920358691",  
                outBizNo: "22122702451294028",  
            }],
            // weixin
            sign: '9A0A8659F005D6984697E2CA0A9CF3B79A0A8659F005D6984697E2CA0A9CF3B7', // 签名
            send_coupon_params: [{
                "stock_id": '1212', // 批次号
                "out_request_no": '1212121212' // 发券凭证
            }],
            send_coupon_merchant: '10016226', // 发券商户号
        }
    },
    components: {
        receiveCoupons
    },
    onLoad() {
        // #ifdef MP-ALIPAY
        console.log('MP-ALIPAY')
        this.$scope.onClose = this.onClose.bind(this)
        this.$scope.onGetCouponSuccess = this.onGetCouponSuccess.bind(this)
        this.$scope.onGetCouponFail = this.onGetCouponFail.bind(this) 
        // #endif
        // #ifdef MP-WEIXIN
        console.log('MP-WEIXIN')
        // #endif
    },
    methods: {
        getCoupon() {
            this.showMask = true 
        },
        closeMask() {
            this.showMask = false 
        },
        // #ifdef MP-ALIPAY
        onClose() {},
        onGetCouponSuccess(e) {
            console.log('领券成功', e)
            uni.showToast({
                title: '领取成功',
                icon: 'success',
                duration: 2000,
            })
        },
        onGetCouponFail(e) {
            console.log('领券失败', e)
            uni.showToast({
                title: '领券失败',
                icon: 'fail',
                duration: 2000,
            })
        },
        // #endif
        // #ifdef MP-WEIXIN
        // 点击领券获取优惠券信息
        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.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.showMask = false
                        }
                    })
                }
            } else {
                uni.showToast({
                    title: '领取失败',
                    icon: 'none'
                })
                that.showMask = false
            }
        },
        // 点击确认收券按钮后回调
        redirectuser() {},
        // #endif
    }

5. 页面样式

<style lang="scss" scoped>
.coupone_wrap {
    margin-top: 200px;
}
.coupon_btn {
    width: 100%;
    height: 50px;
    text-align: center;
    margin-top:100px;
}

.text-button {
    height: 100rpx;
    border-radius: 0px 0px 6rpx 0;
    background: rgba(255, 208, 0, 1);
    font-weight: 500;
    font-size: 36rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.couponItem {
    width: 100%;
    padding: 0 30rpx;
    margin-top: 24rpx;
    -webkit-overflow-scrolling: touch;
}
.couponItem:last-child {
    margin-bottom: 24rpx;
}
.mask-coupon {
    background: rgba(0,0,0,.5);
    width: 100vw;
    height: 100vh;
    position: fixed;
    left:0;
    top:0;
    padding-bottom: 120rpx;
    .wx-coupon {
        background:#F2F2F2;
        min-height: 300px;
        position: fixed;
        bottom:0;
        left:0;
        width: 100%;
    }
    .title {
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding:20rpx 0 10rpx;
    }

    .content {
        height: 80%;
        overflow-y: auto;
    }
    .text-button {
        height: 100rpx;
        border-radius: 0px 0px 6rpx 0;
        background: rgba(255, 208, 0, 1);
        font-weight: 500;
        font-size: 36rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>