baoshi-was/resources/views/personnel/checking-in/getQRcode.blade.php

@extends('layouts.app')
@section('title')获取二维码@endsection
@section('content')
    <div id="nav2" class="dontprint">
        @component('personnel.menu')@endcomponent
        @component('personnel.checking-in.menuChecking-in')@endcomponent
    </div>
    <div class="container-fluid mt-3" id="page">
        <div class="card col-md-10 offset-md-1 p-0">
            <div class="card-body p-0 m-0">
                <div class="container pull-left m-0 p-0 dontprint" style="width: 20%;">
                    <div class="btn-group-vertical ml-0 mt-5" >
                        <button type="button" @click="getQRCode(userWorkGroup.id)" :class="userWorkGroup.id==checkedUserWorkGroup ? 'btn-primary' : 'btn-outline-primary'"
                                class="btn" v-for="userWorkGroup in userWorkGroups">@{{ userWorkGroup.name }}</button>
                    </div>
                </div>
                <div class="col m-0 pull-right mt-5" style="width: 80%">
                    <img id="img" class="col-6 pull-left m-auto" style="max-height: 300px;max-width: 300px;"  src="{{url('personnel/checking-in/userDutyCheck/getQRCode')}}" />
                    <div class="pull-right col-6" style="margin-top: 5%">
                        <h3 class="text-center text-dark">首次扫描后将与设备绑定，之后扫描需使用原设备与原软件！</h3><br>
                        <h4 class="text-center text-danger">如更换设备请联系管理人员解除设备绑定！</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <style type="text/css" media="print">
        .dontprint
        { display: none; }
    </style>
    <script>
        new Vue({
            el:"#page",
            data:{
                userWorkGroups:[
                    @foreach($userWorkGroups as $userWorkGroup)
                    {!! $userWorkGroup !!},
                    @endforeach
                ],
                checkedUserWorkGroup:'',
            },
            methods:{
                getQRCode(userWorkGroup_id){
                    let _this=this;
                    axios.get('{{url("personnel/checking-in/userDutyCheck/getQRCode?userWorkGroup_id=")}}'+userWorkGroup_id)
                        .then(function (response) {
                            $("#img").attr('src',response.data);
                            _this.checkedUserWorkGroup=userWorkGroup_id;
                        }).catch(function (err) {
                            tempTip.setDuration(3000);
                            tempTip.show('获取二维码失败！网络错误：'+err);
                        });
                }
            },
        });
    </script>
@endsection