js click the button to pop up the query...the query results will be displayed after three seconds

When the button is clicked, a pop-up window appears displaying "Querying payment status...". After three seconds, a message will appear stating "No payment bill found – please make the payment." This is the core logic; additional backend request code can be incorporated into this process, but it has been omitted here.

HTML code:

<button data-v-b863db80="" type="button" class="el-button btn-info el-button--button" style="margin-top: 2%;" onClick="">
<span>支付成功请点击.... </span>
</button>

js code:

function showPaymentStatus() {
  var modal = document.createElement('div');
  modal.style.position = 'fixed';
  modal.style.width = '300px';
  modal.style.height = '100px';
  modal.style.top = '50%';
  modal.style.left = '50%';
  modal.style.transform = 'translate(-50%, -50%)';
  modal.style.backgroundColor = 'white';
  modal.style.borderRadius = '5px';
  modal.style.display = 'flex';
  modal.style.justifyContent = 'center';
  modal.style.alignItems = 'center';
  modal.style.boxShadow = '0px 0px 10px rgba(0, 0, 0, 0.5)';

  var message = document.createElement('p');
  message.innerText = '查询支付状况中';
  message.style.color = '#333';
  
  var dotWrapper = document.createElement('div');
  dotWrapper.style.display = 'flex';
  dotWrapper.style.marginTop = '-9px';
  dotWrapper.style.marginLeft = '10px';

  for (var i = 0; i < 3; i++) {
    var dot = document.createElement('div');
    dot.style.backgroundColor = '#ccc';
    dot.style.width = '10px';
    dot.style.height = '10px';
    dot.style.borderRadius = '50%';
    dot.style.marginRight = '5px';
    dot.style.animation = 'dot-loading 0.6s ' + i * 0.2 + 's infinite';
    dot.style.animationTimingFunction = 'linear';
    dotWrapper.appendChild(dot);
  }

  modal.appendChild(message);
  modal.appendChild(dotWrapper);
  document.body.appendChild(modal);

  // 随机2到5秒后显示未查询到支付账单
  var delay = Math.floor(Math.random() * 4) + 2;
  setTimeout(function() {
    message.innerText = '未查询到支付账单，请支付';
    dotWrapper.style.display = 'none';
    setTimeout(function() {
      modal.remove();
    }, 3000);
  }, delay * 1000);
}

CSS animation loading code:

@keyframes dot-loading {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.7); /* 缩小70% */
    }
    100% {
      transform: scale(1);
    }
  }