参考:

https://pay.weixin.qq.com/wiki/doc/apiv3/apis/chapter3_1_4.shtml

https://developers.weixin.qq.com/community/pay/doc/000262a8478c682db6dac423156c00

<template>
    <view class="pay">
        <view class="box">
            <view class="grey3 f28 w100">支付金额</view>
            <view class="money dis-flex">
                <text class="moneyIcon">¥</text>
                <input :value="moneyVal"  disabled>
            </view>
        </view>
        <NumKeypad  fontSize="20px"  @NumValue="GetNumValue" @submit="payHandle"></NumKeypad>
        </view>
    </view>
</template>

<script>
    import NumKeypad from "./components/NumKeyPad.vue";
    import {getOAuth,getJsApi} from '../../api/user.js'
    export default {
        components:{
            NumKeypad
        },
        data() {
            return {
                moneyVal:'',
                code:'',
                state:'',
                winUrl:'',
                weixinList:'',
            }
        },
        onLoad(options) {
            this.getCode()
        },
        methods: {
            getCode () { // 非静默授权,第一次有弹框
                this.code = '';
                const local = encodeURIComponent('https://gzh.yyecar.com/index.html'); // 获取页面url
                const appid = '*******************';
                this.code = this.getUrlParam('code'); // 截取code
                this.state = this.getUrlParam('state'); // 截取code
                console.log('state',this.state)
                if (this.code == null || this.code === '' || this.code == undefined) { // 如果没有code,则去请求
                    window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${local}&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect`
                }else {
                    getOAuth({code:this.code}).then(res=>{
                        console.log(res)
                        uni.setStorageSync("open_id",res.openid);
                    }).catch(err=>{
                        
                    })
                }
            },

         // 解析URL 参数
            getUrlParam(name) {
                let reg = new RegExp('(^|&)'+ name + '=([^&]*)(&|$)')
                let r = window.location.search.substr(1).match(reg)
                if(r!=null){
                        return unescape(r[2])
                } 
                return null
            },
            payHandle(){
                let openid = uni.getStorageSync('open_id')
                let money = this.moneyVal
                let storeKey = this.state
                getJsApi({openid,money,storeKey}).then(res=>{
                    if(res.success==true){
                        let payment = {
                            appId: res.appId,
                            nonceStr: res.nonceStr,
                            package: res.package,
                            paySign: res.paySign,
                            timeStamp:  res.timeStamp,
                            signType: "MD5",
                        }
                        this.weixinList = payment
                        if (typeof WeixinJSBridge == "undefined") {
                            if (document.addEventListener) {
                                document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
                            } else if (document.attachEvent) {
                                document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
                                document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
                            }
                        } else {
                            this.onBridgeReady();
                        }
                    }
                }).catch(err=>{
                })
            },
            onBridgeReady() {
              WeixinJSBridge.invoke('getBrandWCPayRequest', this.weixinList,res=> {
                    console.log('进入接口:',this.weixinList)
                  console.log('res:',res)
                    let obj = JSON.stringify(res)
                  console.log('返回介绍:',obj)
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        WeixinJSBridge.call('closeWindow')
                        // WeixinJSBridge.invoke('closeWindow', {}, function (res) {})
                        // 使用以上方式判断前端返回,微信团队郑重提示:
                        //res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
                    }
             });
            },
            GetNumValue(value) {
                this.moneyVal = value
            }    
        }
    }
</script>

 

 

 

 

 

 

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐