⼩程序优惠券列表领取(send-coupon插件)
官⽅领取流程:
<send-coupon
bind:sendcoupon="getcoupon"
bind:userconfirm="redirectuser"
send_coupon_params="{{send_coupon_params}}"
sign="{{sign}}"
send_coupon_merchant="{{send_coupon_merchant}}"
suggest_immediate_use="{{suggest_immediate_use}}"
>
<!-- 内部为⾃定义代码,按钮点击部分的代码写在这⾥ -->
<!-- [[以下为⽰例代码 -->
<view class="text">领券</view>
<!-- 以上为⽰例代码 ]] -->
</send-coupon>
上⽅是官⽅给出的WXML模板,<send-coupon>标签内部的内容可以⾃定义
1. 点击领券之前先获取:发券参数,签名,发券商户号,这些参数从后台获取
2. 点击“领券”后触发bindsendcoupon⽅法,弹出原⽣页⾯
3.点击"我知道了",触发binduserconfirm⽅法,关闭弹窗,领券完成
针对列表形式做的优化:
样式如下图所⽰
因为每张优惠券的签名唯⼀,所以上图的“点击领取”按钮⽤来获取签名等系列参数,获取完成后弹窗显⽰真正的领取按钮,如下图所⽰
代码⽚段如下:
点击列表中领取按钮:
<view class="btn">
<text
bind:tap="getParas(item.stock_id)" // 获取签名等参数
wx:class="{{{pe==1, blue: pe!=1}}}"
>点击领取</text>
</view>
确认弹窗代码:
<van-popup show="{{ show }}" bind:close="onClose" position="bottom" custom- round>            <send-coupon
bindsendcoupon="getCoupon"
binduserconfirm="couponConfirm"
send_coupon_params="{{send_coupon_params}}"
sign="{{sign}}"
send_coupon_merchant="{{send_coupon_merchant}}"
><view class="get-wrapper" wx:if="comfirmShow">
<text class="title">提⽰</text>
<text>确认领取此优惠券?</text>
<view class="order-btn main-bk">
<text class="text-color">确认领取</text>
</view>
</view>
android获取真正的签名
</send-coupon>
</van-popup>
领取优惠券的回调函数:
getCoupon(params) {
// 插件返回信息在params.detail
wx.showLoading()
if (de == 'OK') {
// 调⽤成功
if (params.detail.send_coupon_result[0].code == 'SUCCESS') {
// 成功领取
wx.hideLoading()
} else {
// 领取失败
wx.hideLoading()
this.setData({ show: false })
wx.showToast({
title: params.detail.send_coupon_result[0].message,
icon: 'none',
duration: 1500,
})
}
} else {
/
/ 失败
wx.hideLoading()
this.setData({ show: false })
wx.showToast({
title: params.detail.send_coupon_result[0].message,
icon: 'none',
duration: 1500,
})
}