root
/
bab-icon


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
							<!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/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="page">
        <div class="weui-form">
            <div class="weui-form__text-area">
                <h2 class="weui-form__title">门店支付</h2>
                <div class="weui-form__desc">{{$shop_info['shop_name']}}</div>
            </div>
            <div class="weui-form__control-area">
                <div class="weui-cells__group weui-cells__group_form">
                    <div class="weui-cells weui-cells_form">
                        <div class="weui-cell weui-cell_active">
                            <div class="weui-cell__hd"><label class="weui-label">支付金额</label></div>
                            <div class="weui-cell__bd">
                                <input id="js_input" class="weui-input" placeholder="请输入支付金额" type="number"
                                       v-model="pay_money" mix="0.01" autofocus="autofocus"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="weui-form__opr-area">
                <a v-show="is_pay" class="weui-btn weui-btn_primary " @click="creatWxPay" href="javascript:" id="showTooltips">确定</a>
                <a v-show="!is_pay" class="weui-btn weui-btn_primary weui-btn_disabled"  href="javascript:" id="showTooltips">确定</a>
            </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>

    </div>

</div>

<div id="app">
    <!-- 导航栏 -->
    <div class="nav-bar">
        <div>
            <img src="{{asset('wap/images/49@2x.png')}}" class="nav-img">
        </div>
        <div class="nav-title">湘西火锅-商家支付</div>
        <div>
            <img src="{{asset('wap/images/组 117@2x.png')}}" class="nav-img">
        </div>
    </div>
    <!-- 支付详情 -->
    <div class="pay-detail">
        <div class="pay-layout">
            <div class="spend-total">消费总额</div>
            <div class="input-money">
                <span>￥</span>
                <input type="text">
            </div>
            <div class="prompt">可询问工作人员应缴费用总额</div>
        </div>
    </div>
    <!-- button -->
    <div class="button-layout">
        <div class="button">
            <span>支付</span>
        </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: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: "{{$wx_js['appid']}}", // 必填，公众号的唯一标识
                    timestamp: {{$wx_js['timestamp']}}, // 必填，生成签名的时间戳
                    nonceStr: "{{$wx_js['noncestr']}}", // 必填，生成签名的随机串
                    signature: "{{$wx_js['signature']}}",// 必填，签名
                    jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
                }
            },
            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;
                    sendAjax('{{route('pay.wx_pay')}}', {'pay_money': this.pay_money,'shop_id':'{{$shop_info['id']}}'}, function (data) {
                        if (data.code * 1 == 1) {
                            console.log(data.data.appId);
                            // 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) {
                                    // 支付成功后的回调函数
                                }
                            });
                        } else {
                            vm.is_ajax = false;
                            error_alert(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>