develop
/
local-face-app


			
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册页面</title>
  <style>
    body{
      margin: 0;
    }
    li {
      list-style-type: none;
    }
    @media screen and (orientation: portrait) {
    .login {
      width: 100vw;
      height: 100vh;
      background-image: url("/static/img/phoneBgc.jpg");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .register {
      background-image: url("/static/img/registerBgc.jpg") !important;
      padding-top: 15vh;
    }

    .register_loginTitle {
      width: 100vw;
      font-size: 8vw;
      text-align: center;
    }
    .register_inputBox {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 5vh;
      position: relative;
    }
    .register_phoneInput {
      width: 50vw;
      height: 5vh;
      border-radius: 2vw;
      background-color: transparent;
      font-size: 3vw;
      padding-left: 2vw;
      border: 1px solid #000;
      margin-bottom: 2vh;
    }

    .register_nameInput {
      width: 50vw;
      height: 5vh;
      border-radius: 2vw;
      background-color: transparent;
      font-size: 3vw;
      padding-left: 2vw;
      border: 1px solid #000;
      margin-bottom: 2vh;
    }
    .reg_button {
      width: 40vw;
      height: 5vh;
      background-color: rgb(101, 161, 255);
      border-radius: 10vw;
      display: flex;
      justify-content: center;
      align-items: center;
      color:#fff;
      font-size: 4vw;
      margin: 2vh 0  0 30vw;
    }
    .register_loginButton {
      width: 40vw;
      height: 5vh;
      background-color: rgb(101, 161, 255);
      border-radius: 10vw;
      display: flex;
      justify-content: center;
      align-items: center;
      color:#fff;
      font-size: 4vw;
      margin: 2vh 0  0 30vw;
    }

    #scroll-to-top-btn {
      display: none;
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 7vw;
      height: 10vh;
      color: #fff;
      border: none;
      border-radius: 5px;
      font-size: 3vw;
      cursor: pointer;
    }
      .uploadImg{
        width: 46vw !important;
        transform: translate(0%, 0%) !important;
        left: 27vw !important;
        position: relative;
      }
  }
@media screen and (orientation: landscape) {
  input:focus {
      border: 0.1vw solid #000;
      outline: none; /* 可选，用于去除默认的外边框样式 */
  }
  .login {
      width: 100vw;
      height: 100vh;
      background-image: url("/static/img/phoneBgc_pc.jpg");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: relative;
    }
    .register {
      background-image: url("/static/img/registerBgc_pc.jpg") !important;
    }
    .register_loginTitle {
      width: 100vw;
      display: flex;
      justify-content: center;
      font-size: 4vh;
      text-align: center;
      position: absolute;
      z-index: 10;
      top: 10vh;
    }
    .uploadImg {
      width: 15vw;
    }
    .register_inputBox {
      width: 100vw;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      padding-top: 42vh;
    }
    .register_phoneInput {
      width: 37vh;
      height: 6vh;
      border-radius: 2vh;
      background-color: transparent;
      font-size: 3vh;
      border: 0.1vw solid #000;
      margin-bottom: 5vh;
      padding-left:1vw ;
    }
    .register_nameInput {
      width: 37vh;
      height: 6vh;
      border-radius: 2vh;
      background-color: transparent;
      font-size: 3vh;
      border: 0.1vw solid #000;
      padding-left: 1vw ;
      margin-bottom: 2vh;
    }
    .reg_button {
      width: 16vw;
      height: 3vw;
      background-color: rgb(101, 161, 255);
      border-radius: 10vh;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 2vw;
      /* margin: 2vh 0 0 30vh; */
      position: absolute;
      left: 55vw;
      top: 65vh;
    }
    .register_loginButton {
      width: 8vw;
      height: 2vw;
      background-color: rgb(101, 161, 255);
      border-radius: 1vw;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 3vh;
      position: absolute;
      left: 46vw;
      top: 65vh;
    }

    .hand:hover{
       cursor: pointer;
    }

    #scroll-to-top-btn {
      display: none;
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 7vh;
      height: 10vw;
      color: #fff;
      border: none;
      border-radius: 5px;
      font-size: 3vh;
      cursor: pointer;
    }

  .uploadImg{
    width: 200px !important;
    transform: translate(0%, 0%) !important;
    left: 2vw !important;
    position: relative;
  }

  }


    .upload-img-box {
      position: relative;
    }

    .upload-img-box .input-box {
      display: inline-block;
      width: 144px;
      height: 144px;
      /*border: solid black 1px;*/
    }

    .upload-img-box .befor-img {
      display: flex;
      /*width: 300px;*/
      /*height: 90px;*/
      /*border: solid black 1px;*/
      position: absolute;
      top: 0px;
      left: 0px;
      /*background: #ffffff;*/
      z-index: 30;
      align-items: center;
      justify-content: center;
    }

    .upload-img-box .befor-img.hasImg {
      display: none;
    }

    .upload-img-box .after-img {
      display: inline-block;
      width: 144px;
      height: 144px;
      border: none;
      /*position: absolute;*/
      top: 0px;
      left: 0px;
      /*background: #ffffff;*/
      z-index: 20;
    }

    .after-img img, .uploadImg {
      /*position: absolute;*/
      width: 100%;
      height: 100%;
      object-fit: cover; /*根据父容器的尺寸裁剪和缩放图片，以填充整个容器，并保持长宽比例不变。*/
      object-position: center; /*指定对象的位置，如果不设置，则默认是center*/
      background-size: cover; /*背景图片的大小，如果不设置，则默认是auto*/
      background-position: center;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 0%);/*将元素移动到中心*/
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <!-- 注册页面 -->
  <div class="register login">
    <div class="register_loginTitle ">
      <div class="upload-img-box">
        <div class="input-box">
          <input type="file" id="img-file" hidden="hidden" name="选择图片">
        </div>
        <div class="befor-img">
          <img class="uploadImg hand" src="/static/img/upload.png" alt="">
        </div>
        <div class="after-img">
          <img id="img-box" src="" width="30%" height="auto">
        </div>
      </div>

    </div>
    <div class="register_inputBox">
      <input class="register_nameInput" name="staffName" type="text" placeholder="员工姓名">
      <input class="register_phoneInput" name="staffPhone" type="text" placeholder="员工手机号">
    </div>
    <div class="register_loginButton hand">注册人脸</div>
  </div>
  <script src="/static/js/jquery.min.js"></script>
  <script src="/static/js/msg-box.js"></script>
  <script>
    $(function(){
      $.MsgBox = {
        Alert: function(title, msg) {
          GenerateHtml("alert", title, msg);
          btnOk(); //alert只是弹出消息，因此没必要用到回调函数callback
          btnNo();
        },
        Confirm: function(title, msg, callback) {
          GenerateHtml("confirm", title, msg);
          btnOk(callback);
          btnNo();
        }
      }

      $(".register_loginButton").on("click",function() {

        var staffPhone = $(".register_phoneInput").val();
        var staffName = $(".register_nameInput").val();
        const regex = /^1[3-9]\d{9}$/;
        if (staffPhone == "" || !regex.test(staffPhone)){
          $.MsgBox.Alert("提示", "手机号为空或不合法，请检查");
          return;
        }
        if (staffName == ""){
          $.MsgBox.Alert("提示", "员工姓名为空，请检查");
          return;
        }

        var img = $("#img-box").attr("src");
        console.log(img);
        $.ajax({
          url: "/register",
          type: "post",
          data: {
            staffPhone: staffPhone,
            staffName: staffName,
            avatar: img
          },
          success: function(data) {
              $.MsgBox.Alert("提示", data.Message);
          },
          error: function(error) {
            console.log(error);
            $.MsgBox.Alert("提示", error.responseJSON.Message);
          }
        })

      })

      $(document).on("click", ".upload-img-box .befor-img,.upload-img-box .after-img", function (e) {
        $(".input-box input").trigger("click");
      })
      // 使用input 的change事件，监听当文件上传的值进行改变的时候，才触发事件。
      $(document).on("change", ".upload-img-box #img-file", function () {
        var file = $("#img-file")[0].files[0];
        console.log(file);
        // file 内容包括： lastModified , lastModifiedDate , name , size , type
        var formdata = new FormData();
        formdata.append('file', file);

        if (window.FileReader) {
          var fr = new FileReader();
          fr.onloadend = function (e) {
            //                console.log(this.result);
            // document.getElementById("portrait").src = e.target.result;
            $("#img-box").attr("src",e.target.result)
            $(".upload-img-box .befor-img").addClass("hasImg")
          };
          //给FileReader对象一个读取完成的方法,
          //使用readAsDataURL会返回一个url
          //这个值就保存在事件对象的result里
          //img通过加载这个地址,完成图片的加载
          fr.readAsDataURL(file);
        }

        //判断图片大小
        if (file.size > 3 * 1024 * 1024) {
          alert("上传图片不能大于3M");
        }

        //判断图片数据类型
        if (!/.(gif|jpg|jpeg|png|GIF|JPG|bmp)$/.test(file.name)) {

          alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
        }
      })
    })


  </script>
</body>
</html>