企微审批二维码生成

  • 问题提出:常规的例如公司外部人员进入公司访问需要内部人员填写审批流程,外部的人员一些活动需要企业内部审批,这部分工作由内部人员来填写就额外增加工作量。
  • 解决方案:可以将这部分工作通过二维码分享的方式递交给外部人员自行填写,再走内部审批,一举两得。
  • 具体实现:登录企业微信后台构建自建应用,通过构建授权链接向后端提交参数直接生成二维码。
  • 部分代码如下:
  • springboot的controller接口:
  • package com.xie.profirework.controller;
    
    import com.google.zxing.BarcodeFormat;
    import com.google.zxing.MultiFormatWriter;
    import com.google.zxing.WriterException;
    import com.google.zxing.common.BitMatrix;
    import com.xie.profirework.bean.Tokenx;
    import com.xie.profirework.mapper.TokenXMapper;
    import jakarta.servlet.http.HttpServletRequest;
    import okhttp3.MediaType;
    import okhttp3.OkHttpClient;
    import okhttp3.Request;
    import okhttp3.Response;
    import org.json.JSONObject;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.core.io.ClassPathResource;
    import org.springframework.core.io.InputStreamResource;
    import org.springframework.core.io.Resource;
    import org.springframework.http.HttpStatus;
    import org.springframework.http.ResponseEntity;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.*;
    import org.springframework.web.client.RestTemplate;
    import org.springframework.web.multipart.MultipartFile;
    import org.springframework.web.servlet.ModelAndView;
    
    
    import javax.imageio.ImageIO;
    import java.awt.image.BufferedImage;
    import java.io.*;
    
    import java.net.URLEncoder;
    import java.nio.file.Files;
    import java.nio.file.Path;
    import java.time.Duration;
    import java.time.LocalDateTime;
    import java.time.LocalTime;
    import java.time.format.DateTimeFormatter;
    
    import org.springframework.http.HttpEntity;
    import org.springframework.http.HttpHeaders;
    
    import org.springframework.util.LinkedMultiValueMap;
    import org.springframework.util.MultiValueMap;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    
    
    @Controller
    public class Apiopen {
        @Autowired
        private TokenXMapper tokenMapper;
    
        @RequestMapping("/getToken")
        @CrossOrigin
        @org.springframework.web.bind.annotation.ResponseBody
        public String getToken() throws IOException {
    
            LocalDateTime now = LocalDateTime.now();
            DateTimeFormatter dateTimeFormatter1 = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");
            String format = now.format(dateTimeFormatter1);
    
            System.out.println("当前时间:" + format);
    
            Tokenx token = tokenMapper.selectById(2);
            String timex = token.getTimex();
            DateTimeFormatter dateTimeFormatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");
            LocalDateTime parse = LocalDateTime.parse(timex, dateTimeFormatter);
            System.out.println("时间:" + token.getTimex() + "tok:" + token.getAccessToken());
            Duration between = Duration.between(parse, now);
            System.out.println("时间差:" + between.toMinutes());
    
            if (between.toMinutes() > 100) {
                System.out.println("即将过期,重新获取token");
                String url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=wwb6423bc55ac93957&corpsecret=_qtxk1PEhSEl5wjfSHEMJGZ9kdx4qIUE6m758LVQR_M";
    
                JSONObject jsonObject = new JSONObject();
                jsonObject.put("corpid", "企业微信ID");
                jsonObject.put("corpsecret", "_qtxk1PEhSEl5wjfSHEMJGZ9kdx4qIUE6m758LVQR_M");
                MediaType mediaType = MediaType.get("application/json");
                OkHttpClient okHttpClient = new OkHttpClient();
                okhttp3.RequestBody requestBody = okhttp3.RequestBody.create(jsonObject.toString(), mediaType);
                Request request = new Request.Builder()
                        .get()
                        .url(url).build();
                try {
                    Response response = okHttpClient.newCall(request).execute();
                    if (response.isSuccessful()) {
                        String responseBody = response.body().string();
                        JSONObject jsonObject1 = new JSONObject(responseBody);
                        String accessToken = (String) jsonObject1.get("access_token");
                        Tokenx token1 = new Tokenx();
                        token1.setId(2);
                        token1.setTimex(format);
                        token1.setAccessToken(accessToken);
                        int i = tokenMapper.updateById(token1);
                        System.out.println("token更新结果:" + i);
                        System.out.println(responseBody);
                        return accessToken;
                    } else {
                        System.out.println("返回码:" + response.code());
                    }
                } catch (Exception e) {
                    System.out.println(e);
                }
    
            } else {
                System.out.println("未过期,使用数据库数据");
                return token.getAccessToken();
            }
    
    
            return "异常-------";
        }
    
        @CrossOrigin
        @RequestMapping("/usrid")
        @ResponseBody
        public ModelAndView getUsrCode(ModelAndView mv, @RequestParam("code") String code) throws IOException {
            System.out.println("code为:" + code);
            String token = getToken();
            String userid = null;
            String url = "https://qyapi.weixin.qq.com/cgi-bin/auth/getuserinfo?access_token=" + token + "&code=" + code;
            OkHttpClient okHttpClient = new OkHttpClient();
            Request build = new Request.Builder()
                    .url(url)
                    .get()
                    .build();
            try {
                Response execute = okHttpClient.newCall(build).execute();
                if (execute.isSuccessful()) {
                    String usrcard = execute.body().string();
                    JSONObject jsonObject = new JSONObject(usrcard);
                    userid = (String) jsonObject.get("userid");
                    System.out.println("返回结果:" + usrcard);
                } else {
                    System.out.println("出错:" + execute.code());
                }
            } catch (Exception e) {
                System.out.println("异常" + e);
            }
    
            mv.setViewName("index");
            mv.addObject("userid", userid);
            return mv;
        }
    
        @CrossOrigin
        @RequestMapping("/get")
        @ResponseBody
        public String get() {
            System.out.println("code为:");
    
    
            return "mv";
        }
    
        @RequestMapping(value = "/qrcode")
        @CrossOrigin
        @ResponseBody
        public String generateQRCode(@RequestParam("usrid") String usrid) throws WriterException {
            System.out.println("值有没有传回来" + usrid);
            String fileName = "";
            long l = System.currentTimeMillis();
            String qrCodeText = "http://gczx.fh.com.cn:8104/weburl?usrid=" + usrid + "&time=" + l;
            ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
    
            int width = 350; // 二维码宽度
            int height = 350; // 二维码高度
    
            BitMatrix bitMatrix = new MultiFormatWriter().encode(qrCodeText, BarcodeFormat.QR_CODE, width, height);
    
            BufferedImage bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
            for (int x = 0; x < width; x++) {
                for (int y = 0; y < height; y++) {
                    int pixel = bitMatrix.get(x, y) ? 0xFF000000 : 0xFFFFFFFF;
                    bufferedImage.setRGB(x, y, pixel);
                }
            }
    
    
            try {
                // 创建保存图片的目录
                String directoryPath = "/usr/local/nginx/html/free/Qcode"; // 修改为你想要保存图片的目录路径
                File directory = new File(directoryPath);
                if (!directory.exists()) {
                    directory.mkdirs(); // 如果目录不存在,则创建目录
                }
    
                // 生成文件名,例如以时间戳作为文件名
                fileName = "fireCode.png";
                File imageFile = new File(directory, fileName);
                // 将图片写入文件
                ImageIO.write(bufferedImage, "png", imageFile);
    
            } catch (Exception e) {
                System.out.println("异常" + e);
            }
    
            // 构建要返回的 URL
            String yourURL = "http://gczx.fh.com.cn:8106/free/Qcode/" + fileName; // 替换为你的实际 URL
    
            // 构建一个包含 URL 的 JSON 字符串
            // String jsonResponse = "{\"url\": \"" + yourURL + "\"}";
    
            return yourURL;
        }
    
        @RequestMapping("/weburl")
        @ResponseBody
        @CrossOrigin
        public ModelAndView toWebTab(ModelAndView mv, @RequestParam("usrid") String usrid, HttpServletRequest httpServletRequest) throws IOException {
    
    
            //------******----------
            LocalTime currentTime = LocalTime.now();
            // 创建一个格式器
            DateTimeFormatter formatter = DateTimeFormatter.ofPattern("HH:mm:ss");
    
            // 格式化当前时间
            String formattedTime = currentTime.format(formatter);
    
            // 打印格式化后的时间
            System.out.println("当前格式化的时间web------>:" + formattedTime);
    
            //------******----------
    
            String queryString = httpServletRequest.getQueryString();
            String urlx = httpServletRequest.getRequestURL().toString();
            System.out.println("获取到的ip为:" + httpServletRequest.getRemoteAddr().toString());
    
            String fullUrl = urlx + "?" + queryString;
            System.out.println("完整链接是:" + fullUrl);
    
            mv.setViewName("firework");
            mv.addObject("userid", usrid);
            return mv;
    
        }
    
        String media_id;
    
        @ResponseBody
        @CrossOrigin
        @PostMapping("/sendApply")
        public String sendApply(
                @RequestParam("usrid") String creatUsr,
                @RequestParam(value = "media_id", required = false) String media_id,
                @RequestParam(value = "key1", required = false) String key1,
                @RequestParam(value = "key2", required = false) String key2
    
        ) throws IOException {
            System.out.println("用户发起了审批流日期:" + ":," + creatUsr+"media_id是:"+media_id);
            String token = getToken();
            String url = "https://qyapi.weixin.qq.com/cgi-bin/oa/applyevent?access_token=" + token;
            OkHttpClient okHttpClient = new OkHttpClient();
            MediaType mediaType = MediaType.get("application/json");
    
            String A = "{\n" +
                    "    \"creator_userid\": \"" + creatUsr + "\",\n" +
                    "    \"template_id\": \"3WLu7QMtXaHemP2Gmm44HTUvzH1EycE1GbRzHmE8\",\n" +
                    "    \"use_template_approver\": 1,\n" +
    
                    "        \"notify_type\": 2,\n" +
                    "        \"apply_data\": {\n" +
                    "            \"contents\": [\n" +
                    "                {\n" +
                    "                    \"control\": \"Selector\",\n" +
                    "                    \"id\": \"Selector-1706752285235\",\n" +
                    "                    \"title\": [\n" +
                    "                        {\n" +
                    "                            \"text\": \"是否需使用单位安全部审批\",\n" +
                    "                            \"lang\": \"zh_CN\"\n" +
                    "                        }\n" +
                    "                    ],\n" +
                    "                    \"value\": {\n" +
                    "                        \"selector\": {\n" +
                    "                            \"type\": \"single\",\n" +
                    "                               \"options\": [\n" +
                    "                        {\n" +
                    "                          \"key\": \"" + key1 + "\",\n" +
                    "                               \"value\": [\n " +
                    "                            {\n" +
                    "                                \"text\": \"不需要\", \n" +
                    "                                    \"lang\": \"zh_CN\" " +
                    "                            }\n" +
                    "                                                    ]\n" +
                    "                        }\n" +
                    "                                           ],\n" +
                    "                        }\n" +
                    "                    }\n" +
                    "                },\n" +
                    "                {\n" +
                    "                    \"control\": \"Selector\",\n" +
                    "                    \"id\": \"Selector-1706753470976\",\n" +
                    "                    \"title\": [\n" +
                    "                        {\n" +
                    "                            \"text\": \"作业等级\",\n" +
                    "                            \"lang\": \"zh_CN\"\n" +
                    "                        }\n" +
                    "                    ],\n" +
                    "                    \"value\": {\n" +
                    "                        \"selector\": {\n" +
                    "                            \"type\": \"single\",\n" +
                    "                               \"options\": [\n" +
                    "                        {\n" +
                    "                          \"key\": \"" + key2 + "\",\n" +
                    "                               \"value\": [\n " +
                    "                            {\n" +
                    "                                \"text\": \"特级\", \n" +
                    "                                    \"lang\": \"zh_CN\" " +
                    "                            }\n" +
                    "                                                    ]\n" +
                    "                        }\n" +
                    "                                           ],\n" +
                    "                        }\n" +
                    "                    }\n" +
                    "                },\n" +
                    "                {\n" +
                    "                    \"control\": \"File\",\n" +
                    "                    \"id\": \"File-1629280810951\",\n" +
                    "                    \"title\": [\n" +
                    "                        {\n" +
                    "                            \"text\": \"提交附件\",\n" +
                    "                            \"lang\": \"zh_CN\"\n" +
                    "                        }\n" +
                    "                    ],\n" +
                    "                    \"value\": {\n" +
                    "                        \"files\": [\n" +
                    "                                {\n" +
                    "                                    \"file_id\": \""+media_id+"\" \n" +
                    "                                }\n" +
                    "                                                ],\n" +
                    "                    }\n" +
                    "                },\n" +
                    "            ]\n" +
                    "    },\n" +
                    "    \"summary_list\": [\n" +
                    "        {\n" +
                    "            \"summary_info\": [\n" +
                    "                {\n" +
                    "                    \"text\": \"来自外部人员自行填写\",\n" +
                    "                    \"lang\": \"zh_CN\"\n" +
                    "                }\n" +
                    "            ]\n" +
                    "        },\n" +
    
                    "    ]\n" +
                    "}\n";
    
            okhttp3.RequestBody requestBody = okhttp3.RequestBody.create(A, mediaType);
            Request request = new Request.Builder()
                    .post(requestBody)
                    .url(url)
                    .build();
            try {
                Response execute = okHttpClient.newCall(request).execute();
                if (execute.isSuccessful()) {
                    String string = execute.body().string();
                    JSONObject jsonObject = new JSONObject(string);
                    System.out.println("发起审批的结果" + jsonObject);
    
                    if (jsonObject.get("errmsg").equals("ok")) {
                        return "提交成功,审批编号为:" + jsonObject.get("sp_no");
                    } else {
                        return "提交失败,错误信息为:" + jsonObject.get("errmsg");
                    }
    
                } else {
                    System.out.println("出错:" + execute.code());
                }
            } catch (Exception e) {
                System.out.println("异常" + e);
            }
    
    
            return "";
        }
    
        @CrossOrigin
        @RequestMapping(value = "/updateFile", method = RequestMethod.POST, consumes = "multipart/form-data")
        @ResponseBody
        public String updateFile(@RequestParam("file") MultipartFile file) throws IOException {
            String accessToken = getToken();
            try {
                //accessToken = accessToken; // 调用前面的方法获取access_token
                String url = "https://qyapi.weixin.qq.com/cgi-bin/media/upload?access_token=" + accessToken + "&type=file"; // type根据实际情况填写,如image、file等
    
                RestTemplate restTemplate = new RestTemplate();
                HttpHeaders headers = new HttpHeaders();
                headers.setContentType(org.springframework.http.MediaType.MULTIPART_FORM_DATA);
    
                MultiValueMap<String, Object> body = new LinkedMultiValueMap<>();
                body.add("media", file.getResource());
    
                HttpEntity<MultiValueMap<String, Object>> requestEntity = new HttpEntity<>(body, headers);
                String result = restTemplate.postForObject(url, requestEntity, String.class);
                return result; // 返回企业微信的响应
            } catch (Exception e) {
                e.printStackTrace();
                return "Upload failed";
    
    
            }
    
    
        }
        @GetMapping("/getDocFile")
        public ResponseEntity<byte[]> getDocFile() throws IOException {
            Resource resource = new ClassPathResource("工程管理中心-动火作业申请表(2024.2.20).doc");
            Path path = resource.getFile().toPath();
            byte[] content = Files.readAllBytes(path);
    
            HttpHeaders headers = new HttpHeaders();
            headers.setContentType(org.springframework.http.MediaType.APPLICATION_OCTET_STREAM);
            String fileName = "工程管理中心-动火作业申请表(2024.2.20).doc";
            try {
                String encodedFileName = URLEncoder.encode(fileName, "UTF-8");
                System.out.println("Encoded file name: " + encodedFileName);
    
            headers.setContentDispositionFormData("attachment", encodedFileName);
            } catch (UnsupportedEncodingException e) {
                System.err.println("Unsupported Encoding: " + e.getMessage());
            }
    
            return new ResponseEntity<>(content, headers, HttpStatus.OK);
        }
    }
    

    前端代码:index.html

  • <!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>请不要点击右边三个点分享!</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style src="/css/bootstrap.min.css"></style>
        <script src="/js/jquery-3.5.1.min.js"></script>
    
        <style>
            #qrcode {
                box-shadow: -10px 0 10px -5px rgba(7, 142, 248, 0.93), 0 10px 10px -5px rgba(7, 142, 248, 0.93);
            }
    
        </style>
    </head>
    <body>
    <div style="font-family: 楷体; text-align: center;">
        <div style="position: relative;">
            <img id="qrcode" src="">
            <h3 style="position: absolute; bottom: 0; width: 100%;">
                <b style="color: #3c763d">手机端长按分享</b> | <i style="color: #985f0d">电脑端右键复制分享</i>
            </h3>
        </div>
    
    </div>
    <div class="container">
        <div class="row" style="text-align: center">
    <!--        <h3>截止此刻共计生成<span style="color: #d58512" th:text="${totalnum}"></span>张二维码</h3>-->
    <!--        <h3><b style="color: #1e9fff">今日</b>截止此刻生成<span style="color: #d5ae12" th:text="${todaynum}"></span>张二维码</h3>-->
    <!--        <h3>访客截止此刻共计<span style="color: #d5cb12" th:text="${webnum}"></span>人次</h3>-->
    <!--        <h3><b style="color: #1e9fff">今日</b>访客截止此刻共计<span style="color: #c4fa02" th:text="${todaywebnum}"></span>人次</h3>-->
        </div>
        <!--    <div class="row" style="text-align: center">-->
        <!--        <h6><span style="color: #0a0000" th:text="${userid}">Created By Xie Daning</span></h6>-->
        <!--    </div>-->
    </div>
    
    
    
    
    <script th:inline="javascript">
        var usrid =[[${userid}]]
        console.log(usrid)
    
        $.ajax({
            url:"http://gczx.fh.com.cn:8104/qrcode",
            type:'post',
            data:{"usrid":usrid},
            success:function (res){
                console.log(res)
                $('#qrcode').attr('src',res)
            },
            error:function (e){
                console.log(e)
            }
        })
    
    </script>
    </body>
    </html>

    前端代码:firework.html

  • <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>动火作业</title>
      <script src="/js/jquery-3.5.1.min.js"></script>
      <script src="/js/layui.js"></script>
    
      <link rel="stylesheet" href="/css/layui.css">
    </head>
    <body style="background-color: bisque;">
    <style>
      .container {
        display: flex;
        width: 520px;
        height: 100%;
        max-width: 99%;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        overflow-y: auto;
        background-color: #ffffff25;
        border-radius: 15px;
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.03);
        border: 0.1px solid rgba(128, 128, 128, 0.178);
        margin-bottom: 10px;
        scroll-behavior: smooth;
      }
    
      .left {
        width: 66%;
        height: 100%;
    
      }
    
      .form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        width: 100%;
        left: 0;
        backdrop-filter: blur(20px);
        position: relative;
        margin-bottom: 10px;
      }
    
      .form::before {
        position: absolute;
        content: "";
        width: 40%;
        height: 40%;
        right: 1%;
        z-index: -1;
        background: radial-gradient(
                circle,
                rgb(194, 13, 170) 20%,
                rgb(26, 186, 235) 60%,
    
                rgb(26, 186, 235) 100%
        );
        filter: blur(70px);
        border-radius: 50%;
      }
    
      .right {
        width: 34%;
        height: 100%;
      }
    
      .img {
        width: 100%;
        height: 100%;
      }
    
      .container::after {
        position: absolute;
        content: "";
        width: 80%;
        height: 80%;
        right: -40%;
        background: rgb(157, 173, 203);
        background: radial-gradient(
                circle,
                rgba(157, 173, 203, 1) 61%,
                rgba(99, 122, 159, 1) 100%
        );
        border-radius: 50%;
        z-index: -1;
      }
    
      .input,
      button {
        background: rgba(253, 253, 253, 0);
        outline: none;
        border: 1px solid rgba(255, 0, 0, 0);
        border-radius: 0.5rem;
        padding: 10px;
        margin: 10px auto;
        width: 80%;
        display: block;
        color: #425981;
        font-weight: 500;
        font-size: 1.1em;
      }
    
      .input-block {
        position: relative;
      }
    
      label {
        position: absolute;
        left: 15%;
        top: 37%;
        pointer-events: none;
        color: #0a0000;
      }
    
      .forgot {
        display: block;
        margin: 5px 0 10px 0;
        margin-left: 35px;
        color: #5e7eb6;
        font-size: 0.9em;
      }
    
      .input:focus + label,
      .input:valid + label {
        transform: translateY(-120%) scale(0.9);
        transition: all 0.4s;
      }
    
      button {
        background-color: #5e7eb6;
        color: white;
        font-size: medium;
        box-shadow: 2px 4px 8px rgba(70, 70, 70, 0.178);
        position: fixed;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
      }
    
    
      .input {
        box-shadow: inset 4px 4px 4px rgba(165, 163, 163, 0.315),
        4px 4px 4px rgba(218, 218, 218, 0.13);
      }
      #buta {
        display: flex;
        justify-content: flex-end;
      }
    </style>
    <div class="container">
      <div class="left">
        <form class="form">
          <div class="input-block">
           <a href="http://gczx.fh.com.cn:8104/getDocFile"><input type="text" class="input"  placeholder="获取申请表"></input></a>
          </div>
          <div class="input-block">
            <select class="input" id="safe"  value="" >
              <option value="">是否需使用单位安全部审批</option>
              <option value="option-1706752285235">是</option>
              <option value="option-1706752285236">否</option>
              </select>
          </div>
          <div class="input-block">
            <select class="input" id="tape"  value="" >
              <option value="">作业等级</option>
              <option value="option-1706753470976">特级,一级动火作业</option>
              <option value="option-1706753470977">二级</option>
            </select>
    
          </div>
          <div class="input-block">
            <input class="input" type="file" id="fileInput" onchange="handleFileSelect(event)" placeholder="上传附件">
            <div id="fileInfo"></div>
          </div>
    
    
        </form>
        <div id="buta">
          <button id="yi" style="width: 20%;margin-left: 100px;" onclick="login()">提交审批</button>
        </div>
    <!--    <i style="color: purple;">如有操作疑问,请联系13139568869</i>-->
      </div>
    
      <script>
        var media_id =""
        function handleFileSelect(event) {
          const file = event.target.files[0]; // 获取第一个选择的文件
          const fileInfo = document.getElementById('fileInfo');
           //----------*------
          // 创建FormData对象,将文件包装起来
          const formData = new FormData();
          formData.append('file', file);
    
          // 发起AJAX请求
          $.ajax({
            url: 'http://gczx.fh.com.cn:8104/updateFile',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
              console.log('File uploaded successfully'+response);
             c = JSON.parse(response)
              console.log("media_id是:"+c.media_id)
               media_id = c.media_id;
            },
            error: function(error) {
              console.error('File upload failed'+error);
            }
          });
           //----------*-------
          fileInfo.innerHTML = '';
          if (file) {
            const fileName = file.name;
            const fileSize = file.size;
            const fileType = file.type;
    
            fileInfo.innerHTML = `文件名: ${fileName}<br>大小: ${fileSize} bytes<br>类型: ${fileType}`;
          } else {
            fileInfo.innerHTML = '未选择任何文件';
          }
        }
    
    
        function getParameterByName(name, url) {
          if (!url) url = window.location.href;
          name = name.replace(/[\[\]]/g, '\\$&');
          var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
                  results = regex.exec(url);
          if (!results) return null;
          if (!results[2]) return '';
          return decodeURIComponent(results[2].replace(/\+/g, ' '));
        }
        let usridcheck = getParameterByName('usrid');
        console.log("usid是多少:"+usridcheck)
        if(usridcheck==''){
          alert("此二维码无效!无法成功提交!请联系二维码提供者按系统提示正确分享!")
          window.close(); // 自动关闭当前窗口或标签页
          // window.location.href = "./forbidden.html"; // 重定向到空白页面
        }
        let flag = true
        function login(){
          var usrid = getParameterByName('usrid');
    
          console.log("usrid:", usrid);
    
          if (flag == false){
            let but =   document.getElementById('yi')
            but.disabled = true
            alert("请勿重复提交!提交按钮已被禁用!")
          }else{
    
              $.ajax({
                url:"http://gczx.fh.com.cn:8104/sendApply",
                type:'POST',
                data:{
                  key1:$('#safe').val(),
                  key2:$('#tape').val(),
                  usrid:usrid,
                  media_id:media_id,
                },
                success:function(res){
                  console.log("什么也没打印?",typeof(res))
                  alert('提交结果:'+res)
                  flag = false
                },
                error:function(err){
                  alert('提交失败'+err)
                }
              })
    
    
          }
    
    
    
        }
      </script>
      <script>
        layui.use(function(){
          var laydate = layui.laydate;
          // 渲染
          laydate.render({
            elem: '#ID-laydate-demo'
          });
    
        });
      </script>
      <div class="right">
        <div class="img"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 731.67004 550.61784" xmlns:xlink="http://www.w3.org/1999/xlink">
          <path d="M0,334.13393c0,.66003,.53003,1.19,1.19006,1.19H730.48004c.65997,0,1.19-.52997,1.19-1.19,0-.65997-.53003-1.19-1.19-1.19H1.19006c-.66003,0-1.19006,.53003-1.19006,1.19Z" fill="#3f3d56"></path>
          <polygon points="466.98463 81.60598 470.81118 130.55703 526.26809 107.39339 494.98463 57.60598 466.98463 81.60598" fill="#a0616a"></polygon>
          <circle cx="465.32321" cy="55.18079" r="41.33858" fill="#a0616a"></circle>
          <polygon points="387.98463 440.60598 394.98463 503.39339 345.98463 496.60598 361.98463 438.60598 387.98463 440.60598" fill="#a0616a"></polygon>
          <polygon points="578.98463 449.60598 585.98463 512.39339 536.98463 505.60598 552.98463 447.60598 578.98463 449.60598" fill="#a0616a"></polygon>
          <path d="M462.48463,260.10598c-.66897,0-54.14584,2.68515-89.47714,4.46286-16.72275,.84141-29.45202,15.31527-28.15459,32.00884l12.63173,162.5283,36,1,.87795-131,71.12205,4-3-73Z" fill="#2f2e41"></path>
          <path d="M619.48463,259.10598s9,69,2,76c-7,7-226.5-5.5-226.5-5.5,0,0,48.15354-69.53704,56.82677-71.51852,8.67323-1.98148,146.67323-8.98148,146.67323-8.98148l21,10Z" fill="#2f2e41"></path>
          <path id="uuid-91047c5b-47d7-4179-8a16-40bd6d529b28-203" d="M335.12666,172.23337c-8.35907-11.69074-9.10267-25.48009-1.66174-30.79863,7.44093-5.31854,20.24665-.15219,28.60713,11.54383,3.40375,4.62627,5.65012,10.00041,6.55111,15.67279l34.79215,49.9814-19.8001,13.70807-35.7745-48.83421c-5.07753-2.68845-9.43721-6.55406-12.71405-11.27326Z" fill="#a0616a"></path>
          <path d="M464.98463,112.60598l51-21,96,148s-67,15-90,18c-23,3-49-9-49-9l-8-136Z" fill="#6c63ff">
          </path>
          <path d="M526.98463,137.60598l-18.5-57.70866,24,18.20866s68,45,68,64c0,19,21,77,21,77,0,0,23.5,19.5,15.5,37.5-8,18,10.5,15.5,12.5,28.5,2,13-28.5,30.5-28.5,30.5,0,0-7.5-73.5-31.5-73.5-24,0-62.5-124.5-62.5-124.5Z" fill="#3f3d56"></path>
          <path d="M468.56831,111.13035l-25.08368,9.97563s4,70,8,76c4,6,18,38,18,38v10.42913s-28,8.57087-27,13.57087c1,5,66,19,66,19,0,0-13-40-21-53-8-13-18.91632-113.97563-18.91632-113.97563Z" fill="#3f3d56"></path>
          <path d="M452.48463,121.10598s-29-4-34,30c-5,34-1.82283,38.5-1.82283,38.5l-8.17717,19.5-27-30-26,17s47,76,66,74c19-2,47-57,47-57l-16-92Z" fill="#3f3d56"></path>
          <path d="M597.32321,270.14478l-14.83858,209.96121-38.5-1.5s-8.5-198.5-8.5-201.5c0-3,4-20,29-21,25-1,32.83858,14.03879,32.83858,14.03879Z" fill="#2f2e41"></path>
          <path d="M541.48463,484.10598s20-6,23-2c3,4,20,6,20,6l5,49s-14,10-16,12-55,4-56-8c-1-12,14-27,14-27l10-30Z" fill="#2f2e41"></path>
          <path d="M394.48463,470.10598s6-5,8,9c2,14,9,37-1,40-10,3-110,4-110-5v-9l9-7,18.00394-2.869s34.99606-32.131,38.99606-32.131c4,0,17,13,17,13l20-6Z" fill="#2f2e41"></path>
          <path d="M505.98463,77.60598s-20-24-28-22-3,5-3,5l-20-22s-16-6-31,13c0,0-9-16,0-25,9-9,12-8,14-13,2-5,16-9,16-9,0,0-.80315-7.19685,3.59843-3.59843s15.3937,3.59843,15.3937,3.59843c0,0,.06299-4,4.53543,0,4.47244,4,9.47244,2,9.47244,2,0,0,0,6.92126,3.5,6.96063,3.5,.03937,9.5-4.96063,10.5-.96063,1,4,8,6,9,18,1,12-4,47-4,47Z" fill="#2f2e41"></path>
          <g>
            <path d="M342.99463,178.84874l-114.2362,78.82694c-3.94205,2.72015-9.36214,1.72624-12.08229-2.21581l-32.16176-46.60891c-2.72015-3.94205-1.7259-9.36208,2.21615-12.08223l114.2362-78.82694c3.94205-2.72015,9.36214-1.72624,12.08229,2.21581l32.16176,46.60891c2.72015,3.94205,1.7259,9.36208-2.21615,12.08223Z" fill="#fff"></path>
            <path d="M312.83914,120.30274l32.16148,46.6085c2.64627,3.83499,1.68408,9.08121-2.15091,11.72749l-56.06388,38.68602c-14.78562-4.04015-28.2774-13.11486-37.66263-26.71596-6.14766-8.9092-9.85314-18.77211-11.26649-28.80885l63.25494-43.6481c3.83499-2.64627,9.08121-1.68408,11.72749,2.15091Z" fill="#e6e6e6"></path>
            <path d="M223.84012,260.20913c-3.0791,0-6.10938-1.46094-7.9873-4.18066l-32.16211-46.60938c-1.4668-2.12695-2.01758-4.7002-1.5498-7.24805,.4668-2.54785,1.89551-4.75879,4.02246-6.22559l114.23535-78.82715c4.39746-3.03223,10.44043-1.92285,13.47363,2.4707l32.16211,46.60938c1.4668,2.12695,2.01758,4.7002,1.5498,7.24805-.4668,2.54688-1.89551,4.75879-4.02148,6.22559l-114.23633,78.82715c-1.67578,1.15527-3.59082,1.70996-5.48633,1.70996Zm82.04785-142.80176c-1.50391,0-3.02344,.44043-4.35254,1.35742l-114.23633,78.82715c-1.6875,1.16309-2.82031,2.91797-3.19141,4.94043-.37109,2.02148,.06543,4.06445,1.22949,5.75l32.16211,46.60938c2.40625,3.48633,7.20215,4.36816,10.69043,1.96094l114.2373-78.82715c1.68652-1.16309,2.81934-2.91797,3.19043-4.94043,.37109-2.02148-.06543-4.06445-1.22949-5.75l-32.16211-46.60938c-1.48926-2.1582-3.89453-3.31836-6.33789-3.31836Z" fill="#3f3d56"></path>
            <path d="M224.6666,236.93718c-2.89521,1.9978-3.6253,5.97848-1.6275,8.87369,1.9978,2.89521,5.97848,3.6253,8.87369,1.6275l11.76134-8.11573c2.89521-1.9978,3.6253-5.97848,1.6275-8.87369-1.9978-2.89521-5.97848-3.6253-8.87369-1.6275l-11.76134,8.11573Z" fill="#6c63ff"></path>
            <path d="M232.63862,171.91114c-4.56802,3.15209-5.71978,9.43286-2.56769,14.00088,3.15209,4.56802,9.43252,5.71972,14.00054,2.56763l18.29546-12.6245c4.56802-3.15209,5.72007-9.43245,2.56797-14.00047-3.15209-4.56802-9.4328-5.72013-14.00082-2.56804l-18.29546,12.6245Z" fill="#6c63ff"></path>
          </g>
          <g>
            <path d="M340.25926,185.80874H201.4659c-4.78947,0-8.68608-3.89636-8.68608-8.68583v-56.62834c0-4.78947,3.89661-8.68583,8.68608-8.68583h138.79336c4.78947,0,8.68608,3.89636,8.68608,8.68583v56.62834c0,4.78947-3.89661,8.68583-8.68608,8.68583Z" fill="#fff"></path>
            <path d="M348.69017,120.49482v56.62784c0,4.65939-3.77152,8.43091-8.43091,8.43091h-68.11583c-9.87497-11.72273-15.82567-26.8544-15.82567-43.37931,0-10.82439,2.55172-21.04674,7.08876-30.11034h76.85275c4.65939,0,8.43091,3.77152,8.43091,8.43091Z" fill="#e6e6e6"></path>
            <path d="M340.25907,186.80874H201.4661c-5.34082,0-9.68652-4.34473-9.68652-9.68555v-56.62891c0-5.34082,4.3457-9.68555,9.68652-9.68555h138.79297c5.34082,0,9.68652,4.34473,9.68652,9.68555v56.62891c0,5.34082-4.3457,9.68555-9.68652,9.68555ZM201.4661,112.80874c-4.23828,0-7.68652,3.44727-7.68652,7.68555v56.62891c0,4.23828,3.44824,7.68555,7.68652,7.68555h138.79297c4.23828,0,7.68652-3.44727,7.68652-7.68555v-56.62891c0-4.23828-3.44824-7.68555-7.68652-7.68555H201.4661Z" fill="#3f3d56"></path>
            <path d="M209.87637,166.41564c-3.51759,0-6.37931,2.86172-6.37931,6.37931s2.86172,6.37931,6.37931,6.37931h14.28966c3.51759,0,6.37931-2.86172,6.37931-6.37931s-2.86172-6.37931-6.37931-6.37931h-14.28966Z" fill="#6c63ff"></path>
            <path d="M253.36907,117.42253c-5.55,0-10.06511,4.51536-10.06511,10.06536s4.51511,10.06486,10.06511,10.06486h22.22841c5.55,0,10.06511-4.51486,10.06511-10.06486s-4.51511-10.06536-10.06511-10.06536h-22.22841Z" fill="#6c63ff"></path>
          </g>
          <g>
            <path d="M456.25926,381.80874h-138.79336c-4.78947,0-8.68608-3.89636-8.68608-8.68583v-56.62834c0-4.78947,3.89661-8.68583,8.68608-8.68583h138.79336c4.78947,0,8.68608,3.89636,8.68608,8.68583v56.62834c0,4.78947-3.89661,8.68583-8.68608,8.68583Z" fill="#fff"></path>
            <path d="M464.69017,316.49482v56.62784c0,4.65939-3.77152,8.43091-8.43091,8.43091h-68.11583c-9.87497-11.72273-15.82567-26.8544-15.82567-43.37931,0-10.82439,2.55172-21.04674,7.08876-30.11034h76.85275c4.65939,0,8.43091,3.77152,8.43091,8.43091Z" fill="#e6e6e6"></path>
            <path d="M456.25907,382.80874h-138.79297c-5.34082,0-9.68652-4.34473-9.68652-9.68555v-56.62891c0-5.34082,4.3457-9.68555,9.68652-9.68555h138.79297c5.34082,0,9.68652,4.34473,9.68652,9.68555v56.62891c0,5.34082-4.3457,9.68555-9.68652,9.68555Zm-138.79297-74c-4.23828,0-7.68652,3.44727-7.68652,7.68555v56.62891c0,4.23828,3.44824,7.68555,7.68652,7.68555h138.79297c4.23828,0,7.68652-3.44727,7.68652-7.68555v-56.62891c0-4.23828-3.44824-7.68555-7.68652-7.68555h-138.79297Z" fill="#3f3d56"></path>
            <path d="M325.87637,362.41564c-3.51759,0-6.37931,2.86172-6.37931,6.37931s2.86172,6.37931,6.37931,6.37931h14.28966c3.51759,0,6.37931-2.86172,6.37931-6.37931s-2.86172-6.37931-6.37931-6.37931h-14.28966Z" fill="#6c63ff"></path>
            <path d="M369.36907,313.42253c-5.55,0-10.06511,4.51536-10.06511,10.06536s4.51511,10.06486,10.06511,10.06486h22.22841c5.55,0,10.06511-4.51486,10.06511-10.06486s-4.51511-10.06536-10.06511-10.06536h-22.22841Z" fill="#6c63ff"></path>
          </g>
          <path id="uuid-c026fd96-7d81-4b34-bb39-0646c0e08e96-204" d="M465.67391,331.01678c-12.74718,6.63753-26.5046,5.44058-30.72743-2.67249-4.22283-8.11308,2.6878-20.06802,15.44041-26.70621,5.05777-2.72156,10.69376-4.19231,16.43644-4.28916l54.36547-27.44139,10.79681,21.52636-53.36733,28.57487c-3.37375,4.65048-7.81238,8.42516-12.94437,11.00803Z" fill="#a0616a"></path>
          <path d="M527.48463,97.10598s56-3,68,27c12,30,22,128,22,128l-122,66.37402-21-32.37402,82-64-29-125Z" fill="#3f3d56"></path>
        </svg></div>
    
      </div>
    </div>
    </body>
    </html>

 完整的工程结构如下

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值