微信小程序优惠券列表领取（send-coupon插件）

官方领取流程：

插件配置和引入请参考官方文档：https://pay.weixin.qq.com/wiki/doc/apiv3/apis/chapter9_3_1.shtml

<send-couponbind: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"><textbind:tap="getParas(item.stock_id)" // 获取签名等参数wx:class="{{{orange:item.type==1, blue: item.type!=1}}}">点击领取</text></view>

确认弹窗代码：

<van-popup show="{{ show }}" bind:close="onClose" position="bottom" custom-style="height: 50%;" round><send-couponbindsendcoupon="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></send-coupon></van-popup>

领取优惠券的回调函数：

getCoupon(params) {// 插件返回信息在params.detailwx.showLoading()if (params.detail.errcode == '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,})}

微信小程序优惠券列表领取（send-coupon插件）相关推荐

会员卡券领取小程序_新增卡券功能在哪微信小程序内直接领取卡券方法
微信小程序新增卡券功能在哪?怎么在微信小程序内直接领取卡券?近日,微信小程序又新增了几大功能,其中包括卡券功能.用户可以直接从小程序中领取会员卡或者优惠券了,也可以从卡包中的会员卡直达小程序,非常方便 ...
微信小程序优惠券到期提醒功能设定指引
微信小程序优惠券到期提醒功能设定指引,在小程序的运营中,优惠券是非常重要的营销方式,也是小程序运营中不可缺少的一种模式,毕竟这对用户来说是直接关系到钱包的事哈,一旦商家将优惠券发放出去或让用户领取 ...
微信小程序新闻列表详情页
微信小程序新闻列表详情页不忘初心,方得始终.初心易得,始终难守首先创建 post-detail 文件夹,创建四种文件. 修改 post.wxml 文件代码,给每个新闻块添加一个点击事件.并且我们要 ...
微信小程序多级列表绑定
微信小程序多级列表绑定 1.wxml <view class="weui-form-preview margin-bottom" wx:key="" wx ...
微信小程序优惠券样式
微信小程序优惠券样式 <view class="coupon-view"><view class="coupon-left"></ ...
微信小程序C语言通讯录,微信小程序のwxml列表渲染
列表渲染存在的意义以电商为例,我们希望渲染5个商品,而又希望容易改变,我们就要在wxml中动态添加. {{index+1}}:{{item.name}} Page({ data: { message ...
微信小程序视频列表封面图禁止多个视频同时播放
微信小程序视频列表用到的组件是 video 链接 https://developers.weixin.qq.com/miniprogram/dev/component/video.html 先附上 ...
新闻列表页flex_微信小程序新闻网站列表页
javascript 技术文章开发微信小程序新闻网站列表页在app.json中可以设置所有文件的头部导航颜色 (是window属性的子属性) 在具体页面可以单独设置该页面的导航颜色 (直接写该属 ...
微信小程序 — 长列表组件 recycle-view 详细教学
微信小程序 - 长列表组件 recycle-view 踩坑问题全解写在前面引入长列表组件 recycle-view 长列表组件 recycle-view 的使用问题一.如何增加下拉刷新功能? 问 ...

微信小程序优惠券列表领取（send-coupon插件）

官方领取流程：

针对列表形式做的优化：

微信小程序优惠券列表领取（send-coupon插件）相关推荐

最新文章

热门文章