Vue 微信开发，微信内H5调起微信支付

注意：打包后的Vue URL 需要在微信公众平台设置好JS安全域名

<template>
    <div class="icontent">
        <h3 style="text-align: center;">订单详情</h3>
        <div class="my-item-content">
            <div style="text-align: center;"><el-button type="primary" size="small" @click="my_to_pay(good)">立即付款</el-button></div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import store from '@/store'
    import $ from 'jquery'
    import { getShipdetail, wxpay } from '@/api/login'

    export default {
        name: "my_order_detail",
        data () {
            return {
                msg: '订单详情',
                good: {order_num:12019123584682645823}
            }
        },
        methods: {
            jsApiCall(data) {
                var that = this
                WeixinJSBridge.invoke(
                    'getBrandWCPayRequest',
                    data,
                    function(res){
                        // alert(JSON.stringify(res));
                        if(res.err_msg === "get_brand_wcpay_request:ok"){
                            that.$message({
                                showClose: true,
                                message: '支付成功',
                                type: 'success'
                            })
                        } else{
                            that.$message({
                                showClose: true,
                                message: '支付失败',
                                type: 'error'
                            })
                        }
                    }
                )
            },
            begain_wxpay(data) {
                 if (typeof WeixinJSBridge == "undefined") {
                    if (document.addEventListener) {
                        document.addEventListener('WeixinJSBridgeReady', vm.jsApiCall, false)
                    } else if (document.attachEvent) {
                        document.attachEvent('WeixinJSBridgeReady', vm.jsApiCall)
                        document.attachEvent('onWeixinJSBridgeReady', vm.jsApiCall)
                    }
                } else {
                    var pay_obj = {
                        appId: data.appid,
                        timeStamp: data.timestamp,
                        nonceStr: data.nonce_str,
                        package: data.package,
                        signType: 'MD5',
                        paySign: data.sign
                    }
                    this.jsApiCall(pay_obj);
                }
            },
            // 后端写好的支付接口
            to_pay(data) {
                wxpay(data).then(response => {
                    const data = response.data
                    console.log('准备支付',data)
                    this.begain_wxpay(data)
                }).catch(error => {
                    alert(error)
                })
            },
            my_to_pay(good) {
                var body = {
                        order_num: good.order_num
                    }
                this.to_pay(body)
            }
        },
        created: function() {
        }
    }
</script>

<style scoped>
</style>