taro小程序-小程序发券插件的使用

372 阅读1分钟

官方文档

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

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

在小程序页面配置文件中加入如下配置,引入send-coupon组件:

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

方案1:

  • 多张优惠券,每一张优惠券都可以单独领取,并且不需要用户二次确认
  • 由于不需要用户二次确认,因此发券的参数必须在获取优惠券列表时就要返回

send_coupon_params

  // 获取发券参数
  getSendCouponParams(sendCouponParams) {
    return [
      {
        "stock_id": sendCouponParams.stockId,
        "out_request_no": sendCouponParams.outRequestNo,
        "coupon_code": sendCouponParams.couponCode
      }
    ]
  }

onSendcoupon回调拿到发券信息

  onSendcouponHandle = ({ detail }) => {
    const sendCouponResult = detail.send_coupon_result
    const sendCouponResultItem = sendCouponResult[0]
    console.log(detail)
    // 微信卡包发券成功的同时将券发放到小程序
    if (sendCouponResultItem.code === "SUCCESS") {
      if (this.state.currentGetCouponInfo) this.receive(this.state.currentGetCouponInfo)
    }
  }

页面

{
item.isWxCard === 1 ? (
    // 将优惠券发放到微信卡包的处理
    <send-coupon onSendcoupon={this.onSendcouponHandle} send_coupon_params={this.getSendCouponParams(item.sendCouponParams)} sign={item.sendCouponParams.sign} send_coupon_merchant={item.sendCouponParams.sendCouponMerchant}>
        /*为了获取到优惠券的信息 可以给这个按钮加点击事件 在发券的同时触发这个事件拿到优惠券信息*/
      {<View className="yhj-btn" onClick={this.onWxCardCouponHandle.bind(this, item)}>领券</View>}
    </send-coupon>
) : (
    // 普通的领取
    <View className="yhj-btn" onClick={this.receive.bind(this, item)}>领券</View>
)
}

方案二

  • 需要用户二次确认,拿到微信卡包发券参数

微信卡包发券