root
/
bab-icon


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
							<!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/two/common.css')}}?t=43543543543"/>
    <link rel="stylesheet" type="text/css" href="{{asset('wap/two/pay-page.css')}}?t=43645645654654fdgfd"/>
    <link rel="stylesheet" type="text/css" href="{{asset('wap/two/keyboard.css')}}?t=4334543"/>
    <link rel="stylesheet" type="text/css" href="{{asset('wap/two/font/iconfont.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/common.js')}}?a=1"></script>

</head>
<body>
<div id="app">

    <div class="layout">
        <!-- 导航栏 -->
        <div class="nav-bar">
            <!-- <div>
              <img src="./images//组 49@2x.png" class="nav-img">
            </div> -->
            <div class="nav-title">{{$shop_info['shop_name']}}</div>
            <!-- <div>
              <img src="./images/组 117@2x.png" class="nav-img">
            </div> -->
        </div>
        <!-- 支付详情 -->
        <form id="zfb_pay" method="post" action="{{route('pay.zfb_pay')}}">
            <div class="pay-detail">
                <div class="pay-layout">
                    <div class="spend-total">消费总额</div>
                    <div class="input-money">
                        <span>￥</span>
                        <input type="text" readonly="readonly" v-model="pay_money" name="pay_money" mix="0.01" ref="textarea">
                        <input type="hidden" name="shop_id" value="{{$shop_info['id']}}"></input>
                    </div>
                    <div class="prompt">可询问工作人员应缴费用总额</div>
                </div>
            </div>
        </form>
        <!-- button -->
        <div class="button-layout" @click="creatZfbPay">
            <div class="button">
                <span>支付</span>
            </div>
        </div>
        <div class="block"></div>
        <div class="keyboard">
            <div class="one-row row">
                <div class="key" @click="pressKey('1')">1</div>
                <div class="key" @click="pressKey('2')">2</div>
                <div class="key" @click="pressKey('3')">3</div>
            </div>
            <div class="two-row row">
                <div class="key" @click="pressKey('4')">4</div>
                <div class="key" @click="pressKey('5')">5</div>
                <div class="key" @click="pressKey('6')">6</div>
            </div>
            <div class="three-row row">
                <div class="key" @click="pressKey('7')">7</div>
                <div class="key" @click="pressKey('8')">8</div>
                <div class="key" @click="pressKey('9')">9</div>
            </div>
            <div class="four-row row">
                <div class="key key-dot" @click="pressKey('.')"><div class="dot"></div></div>
                <div class="key" @click="pressKey('0')">0</div>
                <div class="key key-dot"  @click="pressKey('x')"  @touchstart="gtouchstart()" @touchmove="gtouchmove()" @touchend="gtouchend()"><span class="iconfont icon-24gl-delete"></span></div>
            </div>
        </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,
                payStr: '',
                longStatus: false,
                timeOutEvent: null,
                intervalEvent: null,

            },
            methods: {
                'gtouchstart': function () {
                    this.timeOutEvent = setTimeout(function () {
                        vm.longStatus = true;
                        vm.intervalEvent = setInterval(function () {
                            console.log('定时任务执行了')
                          let ret= vm.pressKey('x')
                            if(!ret){
                                clearInterval(vm.intervalEvent);
                            }
                            console.log(ret)
                        }, 100)
                    }, 500);//这里设置定时器，定义长按500毫秒触发长按事件，时间可以自己改，个人感觉500毫秒非常合适

                    return false;
                },
                //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
                'gtouchend': function () {
                    if(this.intervalEvent) clearInterval(this.intervalEvent);
                    if(this.timeOutEvent) clearTimeout(this.timeOutEvent);//清除定时器
                    return false;
                },
                //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
                'gtouchmove': function () {
                    if(this.intervalEvent) clearInterval(this.intervalEvent);
                    if(this.timeOutEvent) clearTimeout(this.timeOutEvent);//清除定时器
                    return false;

                },
                'pressKey': function (key) {
                    if (key === 'x') {
                        console.log(key)
                        if (this.payStr.length <= 0) {
                            return false;
                        }
                        this.payStr = this.payStr.substr(0, this.payStr.length - 1);
                    } else {
                        let dNum = this.payStr.indexOf(".");
                        if (dNum >= 0) {
                            if (this.payStr.length - dNum >= 3) {
                                return false;
                            }
                        }
                        if (key === '.') {
                            if (dNum >= 0) {
                                return false;
                            }
                        } else if (key === '0') {
                            if (this.payStr.length === 1 && this.payStr === '0') {
                                return false;
                            }
                        }
                        this.payStr = this.payStr + key;
                    }
                    this.pay_money = this.payStr;
                    console.log(this.payStr)
                    return true;
                },

                '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)
                },

                'creatZfbPay': function () {
                    if (isNaN(this.pay_money) || this.pay_money * 1 < 0) {
                        this.pay_money = '';
                        this.errorMgs('支付金额不合法');
                        return false;
                    }
                    if (this.pay_money * 1 < 0.01) {
                        this.errorMgs('最低支付金额0.01元');
                        return false;
                    }
                    if (this.is_ajax) {
                        return false;
                    }
                    this.is_ajax = true;
                    $('#zfb_pay').submit();

                }
            },
            watch: {
                'pay_money': function () {
                    if (this.pay_money * 1 == 0) {
                        this.is_pay = false;
                        return false;
                    }

                    this.is_pay = true;

                }
            },
            created: function () {
                console.log('------------------')
            }

        });
    })

</script>
<script>
    (function (doc, win) {
        var docEl = win.document.documentElement;
        var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

        var refreshRem = function () {
            var clientWidth = win.innerWidth ||
                doc.documentElement.clientWidth ||
                doc.body.clientWidth;

            console.log(clientWidth)
            if (!clientWidth) return;
            var fz;
            var width = clientWidth;
            fz = 16 * width / 375;
            docEl.style.fontSize = fz + 'px';
        };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, refreshRem, false);
        doc.addEventListener('DOMContentLoaded', refreshRem, false);
        refreshRem();

    })(document, window)
</script>
</body>
</html>