uniapp小程序发卡券进入微信卡包

Dai_代代

已于 2024-03-20 14:08:16 修改

阅读量417

点赞数 2

文章标签： uni-app 小程序微信

于 2024-02-02 09:27:01 首次发布

本文链接：https://blog.csdn.net/qq_43024468/article/details/135986141

版权

1.进入微信公众平台点击设置->第三方设置->添加插件->搜索微信支付券并添加
2.在mainfest.json的源码视图里面添加插件
/* 小程序特有相关 */

"mp-weixin" : {
    "plugins" : {
        "sendCoupon" : {
            "version" : "latest",
            "provider" : "wxxxxx"  //第一步添加的插件的APPID
        }
    },
    "usingComponents" : true
},

3.在你要使用的页面的page.json添加

 {
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "",
				"usingComponents": {  //添加插件
					"send-coupon": "plugin://sendCoupon/send-coupon"
				}
			}
		},

4.在index.vue直接调用

<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="u-flex u-row-center u-p-30">
			<send-coupon @sendcoupon="getcoupon" @userconfirm="redirectuser" :send_coupon_params="send_coupon_params"
				:sign="sign" :send_coupon_merchant="send_coupon_merchant">
				<image src="https://ss2.meipian.me/users/49976449/478178f0-7835-11ec-844a-9bcd45718885.png"
					mode="widthFix"></image>
			</send-coupon>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				send_coupon_merchant: '16xxxxx66', // 发券商户号
				send_coupon_params: [{
					"create_coupon_merchant": '16xxxxx66', //支付券必传  商户id
					"out_request_no": 'abc111', // 发券凭证
					"stock_id": '18xxx000' // 批次号
				}],
				sign: 'xxxx' //签名
			}
		},
		onLoad() {
			//data里的数据是通过后台接口提供的 发券商户号， 商户id，发券凭证，批次号，签名等数据
		},
		methods: {
			// 领券回调函数
			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())),
						}
						//setCouponLogAPI是走后台接口告诉后台你领取成功了
						setCouponLogAPI(data).then(res => {
							this.$u.toast('领取成功')
						})
					} else {
						uni.showModal({
							title: '领取失败',
							content: res.detail.send_coupon_result[0].message,
							showCancel: false,
							success: function(res) {

							}
						});
					}
				} else {
					this.$u.toast('领取失败')
				}
			},
			redirectuser(res) {
				this.$u.toast('领取成功，请查看微信卡包')
			}
		}
	}
</script>

<style>

</style>