这两天有个需求,在小程序领券,然后该优惠券进入微信卡包.
官方文档: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是我的微信卡包,可以看得到已经成功领取了
这就是前端负责部分,如有不足之处,多多指教哈