root
/
bab-icon


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
							<!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>员工微信账户绑定</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/common.js')}}??aaa={{time()}}"></script>
    <script src="{{asset('wap/js/jweixin-1.6.0.js')}}?a=1"></script>

</head>
<body>
<div id="app" style="min-height: 100vh;background-color: #fff">
    <div class="binding" >

        <div class="content" v-if="code*1==1">
            <div class="prompt">当前微信是否绑定此店铺员工账户</div>
            <div class="account">员工账户：@{{data.staff_phone}}</div>
            <div class="user">
                <img class="userImg" :src="data.shop_logo" alt=""/>
                <div class="userName">@{{data.shop_name}}</div>
            </div>
            <div class="allow" @click="setBinding(1)">允许</div>
            <div class="refuse" @click="setBinding(2)">拒绝</div>
        </div>
        <div class="failureContent" v-else>
            <img class="failureImg" v-if="code*1==0" src="{{asset('wap/images/lose.png')}}" alt=""/>
            <img v-else class="failureImg" src="{{asset('wap/images/win.png')}}" alt=""/>
            <div class="bindingLose" v-if="code*1==0">绑定失败</div>
            <div v-else class="bindingLose">绑定成功</div>
            <div class="loseWhy">@{{msg}}</div>
            <div class="determine" @click="closeWxWindow" >确定</div>
        </div>
    </div>
</div>
<script>
    $(function () {
        var vm = new Vue({
            el: '#app',
            data: {
                code: "{{$code==0?0:1}}",
                msg: "{{$msg}}",
                data:{!! $data !!},
                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: ['closeWindow'] // 必填，需要使用的JS接口列表
                },
            },
            methods: {
                startWx: function () {
                    wx.config(this.wx_config);
                    wx.error(function (res) {
                        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                        console.log(res);
                    });
                },
                closeWxWindow:function (){
                    wx.closeWindow();
                },
                setBinding: function (status) {
                    //员工信息绑定
                    // alert('调试开始')
{{--                    alert('{{route('member.set_bind')}}')--}}
//                     alert(JSON.stringify({
//                         'binding_code': this.data.binding_code,
//                         'status': status,
//                     }))
                    sendAjax('{{route('member.set_bind')}}', {
                        'binding_code': this.data.binding_code,
                        'status': status,
                    }, function (data) {
                        if (data.code * 1 == 1) {
                            vm.code = 2;
                            vm.msg = data.msg;
                        } else {
                            vm.code = 0;
                            vm.msg = data.msg;
                        }
                    })
                }
            },
            watch: {

            },
            created: function () {
                this.startWx();
                sendAjax('{{route('member.set_bind')}}', {
                    'binding_code': '',
                    'status': '',
                },function (data){

                })
            }

        });
    })

</script>

<style scoped>
    .binding {
        width: 100%;
        min-height: 100vh;
        background: #ffffff;
    }

    .binding .head {
        width: 100%;
        height: 44px;
        background: #f7f7f7;
        padding: 10px 0 10px 17px;
    }

    .binding .head .close {
        font-weight: 600;
        color: #333333;
        font-size: 17px;
    }

    .binding .content {
        padding: 20px 17px 0 18px;
    }

    .prompt {
        color: #333333;
        margin-bottom: 11px;
    }

    .account {
        font-size: 20px;
        color: #333333;
        font-weight: 600;
    }

    .user {
        width: 100%;
        min-height: 70px;
        padding: 12px 0;
        border-top: 0.5px solid #f2f2f2;
        border-bottom: 0.5px solid #f2f2f2;
        display: flex;
        align-items: center;
        margin: 22px 0 40px 0;
    }

    .userImg {
        width: 64px;
        height: 64px;
        margin: 0 10px 0 0;
    }

    .userName {
        font-size: 17px;
        font-weight: 500;
        color: #333333;
    }

    .allow {
        width: 170px;
        height: 44px;
        background: #07c160;
        border-radius: 6px;
        margin-bottom: 15px;
        text-align: center;
        line-height: 44px;
        color: #ffffff;
        margin: 0 auto 15px;
    }

    .refuse {
        width: 170px;
        height: 44px;
        background: #f2f2f2;
        color: #05b156;
        border-radius: 6px;
        text-align: center;
        line-height: 44px;
        margin: 0 auto;
    }

    /* 失败 */
    .failureContent {
        width: 100%;
        height: auto;
        padding: 36px 17px 0;
        text-align: center;
    }

    .failureImg {
        width: 72px;
        height: 72px;
        display: block;
        margin: 0 auto 20px;
    }

    .bindingLose {
        font-weight: 500px;
        color: #333333;
        font-size: 17px;
    }

    .loseWhy {
        font-size: 12px;
        color: #666666;
        margin: 12px 0 20px 0;
    }

    .determine {
        width: 100%;
        height: 44px;
        color: #ffffff;
        background: #07c160;
        text-align: center;
        line-height: 44px;
        border-radius: 6px;
    }
</style>
</body>
</html>