uniapp WeChat applet payment coupon or merchant coupon plug-in

Mini Program coupon issuing plug-in API

https://pay.weixin.qq.com/wiki/doc/apiv3/apis/chapter9_3_1.shtml

Note: Merchants are supported to issue specified batches of payment vouchers or merchant vouchers to specified users in the Mini Program scenario

Tutorial given by the reference link of the native WeChat applet

uniapp WeChat applet payment coupon or merchant coupon plug-in API

You can refer to the following process, which is basically the same

1.manifest.json add plugin configuration (introduce plugin package)

2. Introduce the coupon issuing plug-in in the mini program page (the page that needs to use the plug-in is quoted)

3. Using components

<view class="hb" >
                  <send-coupon 
                  @sendcoupon="getcoupon"
                  @userconfirm="redirectuser"           
                  :send_coupon_params="couponInfo.send_coupon_params"
                  :sign="couponInfo.sign"
                  :send_coupon_merchant="couponInfo.send_coupon_merchant">  
                  <image src="https://ss2.meipian.me/users/49976449/478178f0-7835-11ec-844a-9bcd45718885.png" 
                  mode="widthFix" ></image>
              </send-coupon>
</view>

The send_coupon_params parameter of the component can refer to the WeChat document

The above three are required parameters, which must be assigned through the parameters returned by the backend interface

part of the code

Call the interface to get the volume configuration. The main thing is not to let the backend get it wrong. Basically, you can get the configuration by passing the coupon issuing merchant number and the batch number of the coupon. The specific analysis is done by the backend using WeChat’s api, front end is ok

 getcouponinfo(){
      
      var data={
          mchid:this.mchid,//发券商户号
          stockList:stockList//消费券批次号
      }
      getCouponParamsAPI(data).then(res=>{
        if (res.code==0) {
          this.couponInfo=res.data
          console.log("send_coupon_params",this.couponInfo)
           
        }
      }).catch(e=>{
        uni.showToast({
          title:res.msg,
          icon:"none"
        })
      })
    },

Coupon details data returned by the interface

Two callback functions getcoupon, redirectuser

// 领券回调函数
     getcoupon(res){
       var _this=this
     
      if (res.detail.errcode=="OK") {
       
        if (res.detail.send_coupon_result[0].code=="SUCCESS") {
          var couponList=[]
          for (const i in res.detail.send_coupon_result) {
            couponList.push({
              stockId:res.detail.send_coupon_result[i].stock_id,
              couponId:res.detail.send_coupon_result[i].coupon_code
            })
          }         
            var data={
                "couponList": couponList,
                "createTime":formatDate((new Date())), 
              }
               console.log(11,res.detail)
            setCouponLogAPI(data).then(res=>{
              uni.showToast({
                title: "领取成功",
                icon: "none",
              });
             
            })
        }else{
         uni.showModal({
              title: '领取失败',
              content: res.detail.send_coupon_result[0].message,
              showCancel:false,
              success: function (res) {
                 
              }
          });
        }
      } else {
         uni.showToast({
            title: "领取失败",
            icon: "none",
          });
      }
    
    },
    redirectuser(res){
       console.log(22,res)
        this.getTeamsList()
        uni.showToast({
          title: "领取成功，请查看微信卡包",
          icon: "none",
        });
       
    },

Note: We have to click the send-coupon component to have the WeChat pop-up box. This pop-up box comes with the component, so there is no need to write the style. It is best not to use an emulator to debug, but to use a mobile phone to debug.

When the pop-up box comes out, you can go to WeChat --> My --> Card Package --> Coupons and Gift Cards