|
|
@@ -0,0 +1,146 @@
|
|
|
+<!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>
|
DESKTOP-H1V7IUO\51019
4 年 前
