vue中微信公众号使用jssdk添加卡券等功能

源码Demo:
关注我的微信公众号【前端基础教程从0开始】，加我微信，可以免费为您解答问题。回复“1”，拉你进程序员技术讨论群。回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”，领取300G前端，Java，微信小程序，Python等资源，让我们一起学前端。

<template>
    <div>
        <div class="card-box" @click="card_add">添加卡券</div>
    </div>
</template>
<script>
export default {
    name:'Card',
    data(){
        return{

        }
    },
    methods: {
        card_add(){
            let ua = navigator.userAgent.toLowerCase();
            if (/iphone|ipad|ipod/.test(ua)) {
                this.newUrl = window.location.href.split('#')[0];
            }else if(/android/.test(ua)){
                this.newUrl = window.location.href;
            }
            this.$fetch('https://gw.jfpays.com/upcs/weChat/ticket/getSignature','post',{
                "url": this.newUrl
            })
            .then(res=>{
                console.log(res.data)
                wx.config({                                                    
                    debug: true,
                    appId: 'wxed45c756a3d640e4',  // 必填，公众号的唯一标识
                    timestamp: "" + res.data.data.time_stamp,   // 必填，生成签名的时间戳 
                    nonceStr: res.data.data.nonce_str,// 必填，生成签名的随机串
                    signature: res.data.data.weChatSignature,// 必填，签名
                    jsApiList: [// 所有要调用的 API 都要加到这个列表中                           
                        'addCard',　//批量添加卡券接口
                        'chooseCard' //拉取适用卡券列表并获取用户选择信息
                    ]
                });
            })
            .catch(error=>{
                console.log(error)
            })
            //通过ready接口处理成功验证，调用具体的sdk接口
        　　wx.ready(function () {
                //后端去写的(请求后端接口，返回timestamp、nonceStr、signature)
                    //$cardArr['cardId'] = 'pNKvmjpkxUXWAtHxdjbE8dvFzNP4';                   
                    //$cardArr['code'] = '123456';

                //拉取适用卡券列表并获取用户选择信息
                wx.chooseCard({
                    shopId: '', // 门店Id,非必填
                    cardType: '', // 卡券类型,cardType为空时，默认拉起所有卡券的列表。
                    cardId: '', //卡券ID，用于拉起指定cardId的卡券列表，当cardId为空时，默认拉起所有卡券的列表
                    timestamp: 0, // 卡券签名时间戳
                    nonceStr: '', // 卡券签名随机串
                    signType: 'SHA1', // 签名方式，默认'SHA1'
                    cardSign: '', // 卡券签名,将 api_ticket、app_id、location_id、timestamp、nonce_str、card_id、card_type的value值进行字符串的字典序排序，将所有参数字符串拼接成一个字符串进行sha1加密，得到cardSign
                    success: function (res) {
                        var cardList= res.cardList; // 用户选中的卡券列表信息
                    }
                });
                //批量添加卡券接口,请求后端返回参数                              
                wx.addCard({                                                                   
                    cardList:[                                                                 
                        {                                                                      
                            cardId: 'pNKvmjpkxUXWAtHxdjbE8dvFzNP4',                            
                            cardExt: {
                                "code":res.data.code,
                                "timestamp":res.data.timestamp,
                                "signature":res.data.signature,
                                "nonce_str":res.data.nonce_str
                            }
                            //cardExt本身是一个JSON字符串，是商户为该张卡券分配的唯一性信息,包含以下字段：code：指定的卡券code码（非必填），openid：指定领取者的openid，只有该用户能领取（非必填），timestamp时间戳，nonce_str：随机字符串，signature：签名，outer_id：领取场景值，用于领取渠道的数据统计（非必填）。将 api_ticket、timestamp、card_id、code、openid、nonce_str的value值进行字符串的字典序排序，将所有参数字符串拼接成一个字符串进行sha1加密，得到signature。
                        }                                                                     
                    ],                                                                         
                    success: function (res) {                                                  
                        alert('已添加卡券：' + JSON.stringify(res.cardList));                   
                    },                                                                         
                    cancel: function (res) {                                                   
                        alert("用户点击取消:"+JSON.stringify(res))                              
                    },                                                                         
                    fail: function(res){                                                       
                        alert("调用失败"+JSON.stringify(res))                                  
                    }                                                                          
                }); 
            })
        }
    }  
}
</script>