<!DOCTYPE html> <html class="bg-white"> <head> <meta charset="utf-8"> <!--此行代码为禁止苹果手机自动识别电话号码--> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> <title>{{$shop_info['shop_name']}}支付</title> <link rel="stylesheet" type="text/css" href="{{asset('wap/css/weui.min.css')}}"/> <link rel="stylesheet" type="text/css" href="{{asset('wap/css/common.css')}}"/> <link rel="stylesheet" type="text/css" href="{{asset('wap/css/pay-page.css')}}"/> <script src="{{asset('wap/js/jquery-2.1.4.js')}}"></script> <script src="{{asset('wap/js/vue.js')}}?a=1"></script> <script src="{{asset('wap/js/jweixin-1.6.0.js')}}?a=1"></script> <script src="{{asset('wap/js/common.js')}}?a=1"></script> </head> <body> <div id="app"> <!-- 导航栏 --> <div class="nav-bar"> <div class="nav-title">{{$shop_info['shop_name']}}</div> </div> <!-- 支付详情 --> <div class="pay-detail"> <form id="zfb_pay" method="post" action="{{route('pay.zfb_pay')}}"> <div class="pay-layout"> <div class="spend-total">消费总额</div> <div class="input-money"> <span>¥</span> <input type="number" v-model="pay_money" mix="0.01" ref="textarea" :autofocus="true" style="width: 90%"> </div> <input type="hidden" name="shop_id" value="{{$shop_info['id']}}"></input> <div class="prompt">可询问工作人员应缴费用总额</div> </div> </form> </div> <!-- button --> <div class="button-layout" @click="creatWxPay"> <div class="button"> <span>支付</span> </div> </div> <!--BEGIN toast--> <div id="toast" style="display: none;"> <div class="weui-mask_transparent"></div> <div class="weui-toast"> <i class="weui-icon-success-no-circle weui-icon_toast"></i> <p class="weui-toast__content">@{{success_msg}}</p> </div> </div> <!--BEGIN toast--> <div id="textMoreToast" v-show="error_show"> <div class="weui-mask_transparent"></div> <div class="weui-toast weui-toast_text-more"> <i class="weui-icon-warn weui-icon_toast"></i> <p class="weui-toast__content">@{{error_msg}}</p> </div> </div> </div> <script> $(function () { var vm = new Vue({ el: '#app', data: { pay_money: '', success_msg: '', error_msg: '', error_show: false, success_show: false, is_pay: false, is_ajax: false, wx_config: { debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: "{{$wx_js['appid']}}", // 必填,公众号的唯一标识 timestamp: {{$wx_js['timestamp']}}, // 必填,生成签名的时间戳 nonceStr: "{{$wx_js['noncestr']}}", // 必填,生成签名的随机串 signature: "{{$wx_js['signature']}}",// 必填,签名 jsApiList: ['chooseWXPay'] // 必填,需要使用的JS接口列表 }, defaultHeight: '0', //默认屏幕高度 nowHeight: '0', //实时屏幕高度 }, mounted() { //获取默认高度 }, methods: { 'errorMgs': function (error_msg) { this.error_msg = error_msg; this.error_show = true; setTimeout(function () { vm.error_show = false; }, 2000) }, 'successMsg': function (success_msg) { this.success_msg = success_msg; this.success_show = true; setTimeout(function () { vm.success_show = false; }, 2000) }, 'startWx': function () { wx.config(this.wx_config); wx.error(function (res) { // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。 console.log(res); }); }, 'creatWxPay': function () { if (this.is_ajax) { return false; } // this.is_ajax = true; let _that = this; sendAjax('{{route('pay.wx_pay')}}', { 'pay_money': this.pay_money, 'shop_id': '{{$shop_info['id']}}' }, function (data) { if (data.code * 1 == 1) { // return false; wx.chooseWXPay({ timestamp: data.data.timeStamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符 nonceStr: data.data.nonceStr, // 支付签名随机串,不长于 32 位 package: data.data.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*) signType: data.data.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致 paySign: data.data.paySign, // 支付签名 success: function (res) { // 支付成功后的回调函数 _that.successMsg('支付成功'); setTimeout(function () { window.location.href = '{{route('pay.pay_end')}}?pay_id=' + data.data.order_id; }, 1500); } }); } else { vm.is_ajax = false; vm.errorMgs(data.msg); } }) } }, watch: { 'pay_money': function () { if (this.pay_money * 1 == 0) { this.is_pay = false; return false; } if (this.pay_money != '') { if (isNaN(this.pay_money) || this.pay_money * 1 < 0) { this.is_pay = false; this.pay_money = ''; this.errorMgs('支付金额不合法'); return false; } if (this.pay_money * 1 < 0.01) { this.is_pay = false; this.errorMgs('最低支付金额0.01元'); return false; } } this.is_pay = true; } }, created: function () { console.log('------------------') this.startWx(); } }); }) </script> </body> </html>