macq
/
planted


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>受种者信息注册</title>
    <link rel="stylesheet" href="./css/index.css">
    <script type="text/javascript" src="js/utf.js"></script>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.qrcode.js"></script>
    <script type="text/javascript" src="js/layer/layer.js"></script>
</head>

<body>
    <div id="register">
        <h1 style="color: #5680fa;font-size: 18px;">受种者信息注册</h1><br>
        <hr>
        <ul id="inputul">
            <li>
                <img id="card" src="img/idcard.png">
                <span>身份证号<br>出生证号</span>
                <input type="text" name="idCard" id="idCard">
            </li>
            <li>
                <img src="img/name.png">
                <span>姓名</span>
                <input type="text" name="userName" id="userName">
            </li>
            <li>
                <img src="img/sex.png" alt="">
                <span>性别</span>
                <div id="radio">
                    <input name="sex" type="radio" value="1" checked id="sex1"/><i>男</i>
                    <input name="sex" type="radio" value="2" id="sex2" style="margin-left: 15px;"/><i>女</i>
                </div>
            </li>
            <li>
                <img src="img/tel.png">
                <span>手机号</span>
                <input type="text" name="telephone" id="telephone">
            </li>
            <li>
                <img src="img/email.png">
                <span>邮箱</span>
                <input type="email" name="email" id="email">
            </li>
            <li>
                <img src="img/QQ.png">
                <span>QQ</span>
                <input type="qq" name="email" id="qq">
            </li>
            <li>
                <img src="img/微信.png">
                <span>微信</span>
                <input type="weiXin" name="email" id="weiXin">
            </li>
            <li>
                <button type="button" id="submit">提交</button>
            </li>
        </ul>
        <br>
        <div id="xx"></div>
        <div id="qrcodeCanvas"></div>
        <div id="qrcodetext"></div>
    </div>
    <script>
        // document.getElementById("bg").style.display = 'none';
        $("#submit").click(function () {
            submit();
        });
        function submit() {
            let userName = $("#userName").val();
            let email = $("#email").val();
            let idCard = $("#idCard").val();
            let telephone = $("#telephone").val();
            let qq = $("#qq").val();
            let weiXin = $("#weiXin").val();
            let sex = $('input:radio:checked').val();
            let phoneReg = new RegExp("^[1][3,4,5,7,8][0-9]{9}$");
            let emailReg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
            let emailReg2 = new RegExp("^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\\\.)+[a-z]{2,}$");
            if (userName.length < 1) {
                layer.msg("请输入受种者姓名");
                return;
            } else if (idCard.length != 18) {
                layer.msg("请输入正确位数的身份证号码");
                return;
            } else if (!phoneReg.test(telephone)) {
                layer.msg("请输入正确格式的手机号");
                return;
            } else if (!emailReg.test(email) && !emailReg.test(emailReg2)) {
                layer.msg("请输入正确格式的邮箱");
                return;
            }

            $.ajax({
                url: 'http://fxc.vandh.org/prod-api/query/regiesterInoculator/',
                type: "post",
                dataType: "json",
                data: JSON.stringify({ username: userName, idcard: idCard, email, telephone, qq, weixin: weiXin, sex }),
                headers: { 'Content-Type': 'application/json;charset=utf-8' },
                success: function (rs) {
                    if (rs.code == 200) {
                        const { msg } = rs;
                        console.log(msg);
                        document.getElementById("inputul").style.display = 'none';
                        $("#xx").text("欢迎" + userName + "宝宝")
                        document.getElementById("qrcodetext").style.display = 'block';
                        $("#qrcodeCanvas").qrcode({
                            render: "canvas", //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
                            text: msg,
                            //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
                            width: "260", //二维码的宽度
                            height: "260", //二维码的高度
                            background: "#fafafa", //二维码的后景色
                            foreground: "#5680FA", //二维码的前景色
                            /*src: 'img/3.png' //二维码中间的图片  */
                        });
                        // document.getElementById("bg").style.display = 'block';
                        //获取网页中的canvas对象
                        var mycanvas1 = document.getElementsByTagName('canvas')[0];
                        mycanvas1.style.display = 'none'//隐藏生成的canvas
                        //将转换后的img标签插入到html中
                        var img = convertCanvasToImage(mycanvas1);
                        $('#qrcodeCanvas').append(img);//imagQrDiv表示你要插入的容器id
                    }else{
                        layer.msg(rs.msg);
                    }
                }
            })
            //从 canvas 提取图片 image
            function convertCanvasToImage(canvas) {
                //新Image对象，可以理解为DOM
                var image = new Image();
                // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
                // 指定格式 PNG
                image.src = canvas.toDataURL("image/png");
                return image;
            }
        }
    </script>
</body>

</html>