js 原生弹框&post接口&提示

最新推荐文章于 2024-05-10 09:56:17 发布
马井堂
最新推荐文章于 2024-05-10 09:56:17 发布
阅读量274
点赞数
文章标签： javascript css css3
本文链接：https://blog.csdn.net/weixin_39501680/article/details/125187029
版权
js 原生弹框&post接口&提示
<!DOCTYPE html>
<html>

<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>

  <style type="text/css">
    * {
      margin: 0px;
      padding: 0px;
    }

    #mask {
      background-color: black;
      opacity: 0.3;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 10;
    }

    #tankuang {
      width: 400px;
      height: 300px;
      background-color: #fff;
      position: absolute;
      z-index: 888;
      left: 200px;
      top: 250px;
      border-radius: 2px;

    }

    #tips {
      width: 400px;
      height: 30px;
      background-color: #fff;
      position: absolute;
      z-index: 9999;
      left: 200px;
      top: 20px;
      border-radius: 2px;
      text-align: center;
      line-height: 30px;
    }

    #close {
      width: 15px;
      height: 15px;
      position: absolute;
      top: 12px;
      right: 5px;
      z-index: 999;
      text-align: center;
      line-height: 15px;
    }

    #close:hover {
      cursor: pointer;
    }

    .ctnBox {
      padding-top: 20px;
      padding-left: 10px;
    }

    .ctnBox p {
      font-size: 16px;
      text-indent: 30px;
      margin: 0 0 15px 0;
    }

    .ctnBox div {
      margin-bottom: 15px;
      text-indent: 30px;
    }

    .ctnBox div a {
      color: #3366ff;
      cursor: pointer;
    }

    .ctnBox button {
      background-color: #3366ff;
      color: #fff;
      border: 1px solid #3366ff;
      padding: 5px 15px;
      margin-right: 20px;
      border-radius: 2px;
      outline: none;
      cursor: pointer;
    }

    #dialogCtn {
      position: absolute;
      top: 40px;
      left: 50%;
      transform: translateX(-50%);
      display: none;
    }

    #dialogCtn span {
      background-color: rgba(0, 0, 0, .7);
      color: #fff;
      font-size: 14px;
      padding: 15px;
      border-radius: 5px;
    }

    .title {
      height: 40px;
      border-bottom: 1px solid #E8E8E8;
      line-height: 40px;
      padding-left: 10px;
      font-weight: bold;
    }

    .content .list {
      padding-left: 10px;
      padding-top: 20px;
    }


    .content .list .left {
      width: 180px;
      display: inline-block;
      text-align: right;
    }

    .content .list .right {
      width: 100px;
      display: inline-block;
    }

    .content .list .right select,
    textarea,
    input {
      display: inline-block;
      width: 100%;
    }

    .foot {
      position: absolute;
      bottom: 10px;
      left: 0;
      right: 0;
      text-align: center;
    }

    .foot span {
      display: inline-block;
      width: 50px;
      text-align: center;
      height: 32px;
      line-height: 32px;
      padding-left: 20px;
      padding-right: 20px;
      margin-right: 10px;
      background-color: #36f;
      margin-left: 30px;
      border-radius: 2px;
      color: #fff;
      font-size: 15px;
      cursor: pointer;
    }
  </style>

</head>

<body>

  <div id="tankuang" style="display: none;">
    <p class="title">结算单处理</p>
    <div class="content">
      <div class="list">
        <span class="left"><a style="color:red">*</a> 是否同意结算单结果：</span>
        <span class="right">
          <select name="res" id="select">
            <option value="" selected="selected">--请选择--</option>
            <option value="true">是</option>
            <option value="false" id="noOption">否</option>
          </select>
        </span>
      </div>
      <div class="list" id="idea">
        <span class="left">反馈意见：</span>
        <span class="right">
          <textarea name="" id="feedback" cols="3" rows="2"></textarea>
        </span>
      </div>
      <div class="list" id="sign">
        <span class="left">反馈签名：</span>
        <span class="right">
          <input type="text" id="signature">
        </span>
      </div>
    </div>
    <div class="foot">
      <span id="sure">确定</span>
      <span id="cancel">取消</span>
    </div>
  </div>

  <div id="tips" style="display: none;">

  </div>

  <div class="ctnBox">
    <h3>给品牌财务的正文内容</h3>
    <h4 style="margin-top:20px;margin-bottom:15px">Dear all：</h4>
    <div><a style="text-decoration:underline;">抖音旗舰店</a>在<a
        style="text-decoration:underline;">20220301--20220331</a>期间结算单结果如下，点击以下URL可下载附件结果进行查看。
    </div>
    <div>结算单附件url:<a id="fileDownloand"
        onclick="downloadFun()">view-source:https://oms4.baozun.com/ltc/sales-data-record？target=tail.
      </a></div>
    <div>请点击<a style="text-decoration:underline;" onclick="show()">处理!</a></div>

  </div>
  <div id="dialogCtn"><span>该结算单已被确认，无法重新操作！</span></div>

</body>

</html>
<script type="text/javascript">

  // 下载结算单附件url
  function downloadFun() {
    document.getElementById('fileDownloand').setAttribute('href', 'http://sit-files.baozun.com/files/downloadByIdAndFileName?id=b91d862c-352e-4eba-a294-55236870392f&fileName=ONLINESTATEMENT2022032100006121b8f7b-01b7-45ae-9afe-819d50650440.zip');
  }


  function show() {
    var page_width = document.documentElement.scrollWidth;
    var page_height = document.documentElement.scrollHeight;

    var b_width = document.documentElement.clientWidth;
    var b_height = document.documentElement.clientHeight;

    var mask = document.createElement("div");
    mask.id = "mask";

    //mask的宽高
    mask.style.width = page_width + "px";
    mask.style.height = page_height + "px";

    // 加入到body
    document.body.appendChild(mask);

    // 弹框
    var kuang = document.getElementById("tankuang");

    //弹框样式
    kuang.style.left = (b_width - 400) / 2 + "px";
    kuang.style.top = (b_height - 300) / 2 + "px";
    kuang.style.display = "block";


    //选择否
    document.getElementById("select").onclick = function () {
      var myselect = document.getElementById("select");
      var index = myselect.selectedIndex;
      var agree = myselect.options[index].value;
      var idea = document.getElementById("idea");
      var sign = document.getElementById("sign");
      if (agree == "true") {
        idea.style.display = "none";
        sign.style.display = "none";
      } else {
        idea.style.display = "block";
        sign.style.display = "block";
      }
    }

    // 确定
    document.getElementById("sure").onclick = function () {
      var myselect = document.getElementById("select");
      var index = myselect.selectedIndex;
      var agree = myselect.options[index].value;
      var feedback = document.getElementById("feedback").value.trim();
      var signature = document.getElementById("signature").value.trim();
      if (agree == "") {
        alert("是否同意结算单结果不允许为空!");
        return;
      }
      if (agree == "false") {
        if (feedback === "") {
          alert("反馈意见不允许为空!");
          return;
        }
        if (signature === "") {
          alert("反馈签名不允许为空!");
          return;
        }
      }

      if (agree == "true") {
        feedback = null;
        signature = null;
      }

      let xhr = new XMLHttpRequest(); // 创建XHR对象
      let uuid = '121';
      // let uuid = getQueryVariable("uuid") 
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) { // 4表示此次请求结束
          let result = JSON.parse(xhr.responseText);// 后端返回的结果为字符串，这里将结果转换为json
          console.log(result);
          // alert(result.message);
          showtips(result.message);

          // if (result.code !== 1) { // 这里我通过code来标识结果
          //  // alert(result.message);
          // }
          // 关闭弹框
          // document.body.removeChild(mask);
          // kuang.style.display = "none";


        }
      };
      xhr.open( // 打开链接
        "post",
        "http://oms4-api-gateway-sit.baozun.com/ecs/ofa/brandFeedback", // 后端地址
        true
      );
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 设置请求头
      xhr.send(
        "brandReviewPerson=" + signature +
        "&brandReviewResults=" + agree +
        "&uuid=" + uuid +
        "&brandReviewComments=" + feedback
      );
    }

    // 用于获取url参数:
    function getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) { return pair[1]; }
      }
      return (false);
    }

    // 取消关闭
    document.getElementById("cancel").onclick = function () {
      document.body.removeChild(mask);
      kuang.style.display = "none";
    }

    // mask关闭
    document.getElementById("mask").onclick = function () {
      document.body.removeChild(mask);
      kuang.style.display = "none";
    }

    String.prototype.trim = function () {
      return this.replace(/(^\s*)|(\s*$)/g, "");
    }

  }
  function showtips(message) {
    var b_width = document.documentElement.clientWidth;
    var b_height = document.documentElement.clientHeight;
    var tips = document.getElementById("tips");
    tips.innerHTML = message;
    tips.style.left = (b_width - 400) / 2 + "px";
    tips.style.top = (b_height - 800) / 2 + "px";
    tips.style.display = "block";
    setTimeout(() => {
      tips.style.display = "none";
    }, 1000)
  }
</script>