tp5 实现带参二维码

来源:互联网 发布:阴阳眼喵哥捏脸数据 编辑:程序博客网 时间:2024/05/17 00:58

自己composer个qrcode然后引入,这个不多说哈。

(本人小白一枚,多多指教……)

php主要代码:

public function add(){
        $data['identity_or_phone'] = $_POST['identity_or_phone'];
        $data['job_number'] = $_POST['job_number'];
        $data['channel_name'] = $_POST['channel_name'];
   
        $qrCode = new QrCode;
        $filename = '/images/user/code/'.time().'.jpg';
        $info = $data['identity_or_phone'].'_'.$data['job_number'].'_'.$data['channel_name'];
        $qrCode
        ->setText($info)
        ->setSize(150)
        ->setPadding(25)
        ->save('.'.$filename);
        $data['qrcode_img']=$filename;
        $json = [];
        $json['phone']=$data['identity_or_phone'] ? '200': false;
        $json['number']=$data['job_number'] ? '200': false;
        $json['name']=$data['channel_name'] ? '200': false;

        $json['filename']=$filename;
        if(isset($json['phone']) && isset($json['number']) && isset($json['name'])){
            // $json['codepath'] = $filename;    
            $insertData = db('code')->insert($data);
            // return json($filename);
        }
            return json($json);
    }


html页面:

<body>

    <div id="code">
        <form class="form-horizontal f_code"  method="post" autocomplete="off">
            <div class="form-group">
                <label for="identity_or_phone" class="col-md-2 control-label">永久身份/联系方式</label>
                <div class="col-md-5">
                    <input type="text" name="identity_or_phone" class="form-control" id="identity_or_phone" placeholder="永久身份或者联系方式">
                </div>
            </div>
            <div class="form-group">
                <label for="job_number" class="col-md-2 control-label">咨询工号</label>
                <div class="col-md-5">
                    <input type="text" name="job_number" class="form-control" id="job_number" placeholder="咨询工号">
                </div>
            </div>
            <div class="form-group">
                <label for="channel_name" class="col-md-2 control-label">渠道名称</label>
                <div class="col-md-5">
                    <input type="text" name="channel_name" class="form-control" id="channel_name" placeholder="渠道名称">
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <div type="submit" id="btn_qrCode" class="btn btn-default">生成二维码</div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-3 col-md-12">
                    <img src="" alt="" id="MyImg" class="img-thumbnail" /> <br/>
                    <span class="" aria-hidden="true"></span>
                </div>
            </div>
        </form>
    </div>

</body>


js验证接收:

<script>

    $('#btn_qrCode').click(function(){
        //获取所有表单信息
        data = $(".f_code").serialize();
        var phone = $('#identity_or_phone');
        var number = $('#job_number');
        var name =$('#channel_name');
        if(phone.val()==''){
            alert('身份信息不能为空!');
            phone.focus();
            return false;
        }else if (number.val()=='') {
            alert('工号不能为空!');
            number.focus();
            return false;
        }else if(name.val()==''){
            alert('渠道名不能为空!');
            name.focus();
            return false;
        }
        $.ajax({
            url:"index.php/index/add",
            type:"post",
            data:data,
            dataType: "json",
            beforeSend:function() {
                $('span').addClass('glyphicon glyphicon-refresh').css('text-indent','20px','font-size','16px').html("&nbsp;正在加载二维码……");
            },
            success:function(data){
                //非空验证
                if(data.phone==''){
                    alert('数据提交失败!');
                    return false;
                }
                else if(data.number==''){
                    alert('数据提交失败!');
                    return false;
                }
                else if(data.name==''){
                    alert('数据提交失败!');
                    return false;
                }
                else{
                    //填写正确信息 在img 生成二维码 (attr:(路径,数据)
                    $('#MyImg').attr('src',data.filename);
                    $('span').removeClass('glyphicon-refresh').addClass('glyphicon-ok').css('text-indent','20px','font-size','16px').html("&nbsp;完成二维码生成!");
                    console.log(data);
                }
            }
        })
    });

</script>


附效果图!!!

原创粉丝点击