epay-mobile/src/components/WXPay.vue

<template>
  <div :html="retMsg"></div>
</template>
<script>
import remoteApi from '@/api/remoteApi'
import wx from 'weixin-js-sdk'
import hex_sha1 from 'hex-sha1'
import getQueryString from '@/utils/querystring'

export default {
    data () {
        return {
            retMsg : "",
            code : getQueryString("code"),
            openId : '',
            recordId: getQueryString("state")
        }
    },
    methods: {
        queryPayResult(recordId) {
            remoteApi.queryRechargeRecord(recordId).then((resp)=>{
                if(resp.result && resp.data.paymentStatus=="20"){
                this.$toast.clear();

                this.$router.push({
                    path : '/Paystate',
                    query: {
                        payType : resp.data.buyType
                    }
                });
                }
                else{
                setTimeout(()=>{
                    this.queryPayResult(recordId);
                },3000);
                }
            });
        }
    },
    mounted (){
        var self = this
        
        self.$toast.loading({
            message: '初始化...',
            forbidClick: true,
            loadingType: 'spinner',
            duration: 10000
        });

        remoteApi.getWXConfigParam(self.code).then(resp=>{
            if(resp.result){
                var appId = resp.data.appId
                var timestamp = (new Date()).getTime()
                
                self.openId = resp.data.openId

                var fullStr = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
                var nonceStr = ''

                for(var i=0;i<10;i++){
                nonceStr += fullStr.charAt(Math.floor(Math.random()*fullStr.length))
                }

                var url = window.location.href.split('#')[0]

                //服务器端通过access_token获取 https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
                var ticket = resp.data.ticket

                //注意这里noncestr中的s是小写
                var plainText = `jsapi_ticket=${ticket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${url}`
                
                console.log(`plainText="${plainText}"`)
            
                var signature = hex_sha1(plainText)

                console.log(`signature=${signature}`)

                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
                    appId: appId, // 必填，公众号的唯一标识
                    timestamp: timestamp, // 必填，生成签名的时间戳
                    nonceStr: nonceStr, // 必填，生成签名的随机串
                    signature: signature,// 必填，签名
                    jsApiList: ['checkJsApi','chooseWXPay'] // 必填，需要使用的JS接口列表
                });
            }
            else{
                self.$toast.clear();
                self.$toast.fail("获取参数失败!" + resp.message)
            }
        });

        wx.ready(function(){
            self.$toast.clear();

            self.$toast.loading({
                message: '支付准备中...',
                forbidClick: true,
                loadingType: 'spinner',
                duration: 10000
            });

            remoteApi.wxPay(self.recordId,self.openId).then(resp=>{
                self.$toast.clear();

                console.log(resp);
                self.retMsg = JSON.stringify(resp)
                
                if(resp.result){
                    var data = resp.data;
                   
                    wx.chooseWXPay({
                        //注意这里的返回参数是timeStamp,不是timestamp
                        "timestamp": data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                        "nonceStr": data.nonceStr,  // 支付签名随机串，不长于 32 位
                        "package": data.package,   // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                        "signType": data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                        "paySign": data.paySign,    // 支付签名
                        success: function (res) {
                            self.$toast.loading({
                                message: '订单确认中...',
                                forbidClick: true,
                                loadingType: 'spinner',
                                duration: 3000
                            });

                            // 支付成功后的回调函数,跳转到订单列表
                            self.queryPayResult(self.recordId);
                        }
                    });
                }
                else{
                    self.$toast.fail("生成预支付订单失败!");
                }
            },"json");
        });

        wx.error((error)=>{
            console.log(error)
        });
    }
}
</script>
<style>

</style>